此 HTML 快速参考备忘单以易于阅读的格式列出了常见的 HTML 标记及其属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 Boilerplate</title>
</head>
<body>
<h1>Hello world, hello QuickRef.ME!</h1>
</body>
</html>
<!-- this is a comment -->
这段代码将会被注释掉。
<p>I'm from QuickRef.ME</p>
<p>Share quick reference cheat sheet.</p>
请参阅:<p>标签
<a href="https://quickref.me" rel="external nofollow" target="_blank" >QuickRef</a>
<a href="mailto:jack@abc.com">Email</a>
<a href="tel:+12345678">Call</a>
<a href="sms:+12345678&body=ha%20ha">Msg</a>
| 超链接指向的 URL |
| 链接网址的关系 |
| 链接目标位置: |
请参阅:<a> 标签
<img loading="lazy" src="https://xxx.png" rel="external nofollow" alt="Describe image here" width="400" height="400">
| 必需,图像位置(URL | 路径) |
| 图像描述 |
| 图像的宽度 |
| 图像的高度 |
| 浏览器应该如何加载 |
请参阅:<img>标签
<b>Bold Text</b>
<strong>This text is important</strong>
<i>Italic Text</i>
<em>Emphasis - This text is emphasized</em>
<u>Underline Text</u>
<pre>Preformatted text</pre>
<code>Source code</code>
<del>Deleted text</del>
<mark>Marked/highlighted text</mark>
<ins>Inserted text</ins>
<sup>Makes text superscripted</sup>
<sub> Makes text subscripted</sub>
<small>Makes text smaller</small>
<pre>Pre-formatted Text</pre>
<kbd>Ctrl</kbd>
<blockquote>Text Block Quote</blockquote>
<h1> This is Heading 1 </h1>
<h2> This is Heading 2 </h2>
<h3> This is Heading 3 </h3>
<h4> This is Heading 4 </h4>
<h5> This is Heading 5 </h5>
<h6> This is Heading 6 </h6>
您的页面上应该只有一个 h1
| 页面内容的部分或部分 |
| 其他内容中的文本部分 |
| 文字段落 |
| 换行 |
| 基本水平线 |
这些是用于将您的页面划分为多个部分的标签
<script type="text/javascript">
alert("Hello QuickRef.ME");
</script>
<head>
...
<script src="app.js"></script>
</head>
<style type="text/css">
h1 {
color: purple;
}
</style>
<body>
...
<link rel="stylesheet" href="style.css"/>
</body>
<iframe id="inlineFrameExample"
title="YouTube video player"
width="560"
height="215"
src="https://www.youtube.com/embed/HmZKgaHa3Fg" rel="external nofollow"
allow="fullscreen; accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture;">
</iframe>
<table>
<thead>
<tr>
<td>name</td>
<td>age</td>
</tr>
</thead>
<tbody>
<tr>
<td>Roberta</td>
<td>39</td>
</tr>
<tr>
<td>Oliver</td>
<td>25</td>
</tr>
</tbody>
</table>
定义一个表 | |
定义表格中的标题单元格 | |
定义表格中的一行 | |
定义表格中的单元格 | |
定义表格标题 | |
定义一组列 | |
定义表中的列 | |
分组标题内容 | |
将正文内容分组 | |
将页脚内容分组 |
| 单元格应跨越的列数 |
| 一个或多个与单元格相关的标题单元格 |
| 单元格应跨越的行数 |
请参阅:<td>属性
| 单元格应跨越的列数 |
| 一个或多个与单元格相关的标题单元格 |
| 单元格应跨越的行数 |
| 单元格内容的描述 |
标题元素涉及 |
请参阅:tth>属性
<ul>
<li>I'm an item</li>
<li>I'm another item</li>
<li>I'm another item</li>
</ul>
请参阅:无序列表元素
<ol>
<li>I'm the first item</li>
<li>I'm the second item</li>
<li>I'm the third item</li>
</ol>
请参阅:有序列表元素
<dl>
<dt>A Term</dt>
<dd>Definition of a term</dd>
<dt>Another Term</dt>
<dd>Definition of another term</dd>
</dl>
请参阅:描述列表元素
<form method="POST" action="api/login">
<label for="mail">Email: </label>
<input type="email" id="mail" name="mail">
<br/>
<label for="pw">Password: </label>
<input type="password" id="pw" name="pw">
<br/>
<input type="submit" value="Login">
<br/>
<input type="checkbox" id="ck" name="ck">
<label for="ck">Remember me</label>
</form>
HTML<form>
元素用于收集信息并将其发送到外部源。
| 脚本形式的名称 |
| 表单脚本的 URL |
| HTTP 方法, |
| 媒体类型,请参见enctype |
| 在提交表单时运行 |
| 当表单被重置时运行 |
<!-- Nested label -->
<label>Click me
<input type="text" id="user" name="name"/>
</label>
<!-- 'for' attribute -->
<label for="user">Click me</label>
<input id="user" type="text" name="name"/>
for在标签中引用输入的id属性
<label for="Name">Name:</label>
<input type="text" name="Name" id="">
请参阅:HTML 输入标签
<textarea rows="2" cols="30" name="address" id="address"></textarea>
textarea 是一个多行文本输入控件
<input type="radio" name="gender" id="m">
<label for="m">Male</label>
<input type="radio" name="gender" id="f">
<label for="f">Female</label>
单选按钮用于让用户选择一个
<input type="checkbox" name="sports" id="soccer">
<label for="soccer">Soccer</label>
<input type="checkbox" name="sports" id="baseball">
<label for="baseball">Baseball</label>
复选框允许用户选择一个或多个
<label for="city">City:</label>
<select name="city" id="city">
<option value="1">Sydney</option>
<option value="2">Melbourne</option>
<option value="3">Cromwell</option>
</select>
选择框是选项的下拉列表
<fieldset>
<legend>Choose your favorite monster</legend>
<input type="radio" id="kraken" name="monster">
<label for="kraken">Kraken</label><br/>
<input type="radio" id="sasquatch" name="monster">
<label for="sasquatch">Sasquatch</label><br/>
</fieldset>
<label for="b">Choose a browser: </label>
<input list="list" id="b" name="browser"/>
<datalist id="list">
<option value="Chrome">
<option value="Firefox">
<option value="Internet Explorer">
<option value="Opera">
<option value="Safari">
<option value="Microsoft Edge">
</datalist>
<form action="register.php" method="post">
<label for="foo">Name:</label>
<input type="text" name="name" id="foo">
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
Submit
到服务器的数据;Reset
默认值
输入标签是一个空元素,标识要从用户那里获取的特定类型的字段信息。
<input type="text" name="?" value="?" minlength="6" required />
| 输入的数据类型 |
| 默认值 |
| 用于在 HTTP 请求中描述此数据 |
| 其他 HTML 元素的唯一标识符 |
| 阻止用户修改 |
| 停止任何交互 |
| 单选或复选框选择与否 |
| 强制性 |
| 添加临时 |
| 禁用自动完成 |
| 禁用自动大写 |
| 显示特定的键盘。见输入模式 |
| 关联数据列表的 id |
| 最大字符数 |
| 最少字符数 |
| 范围和数字上的最小数值 |
| 范围和数字上的最大数值 |
| 数字如何在范围和数字中递增 |
| |
| 多个条目 |
| 专注 |
| 执行拼写检查 |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| Button |
|
| 当它的键盘聚焦时 |
另请参阅:CSS 备忘单的选择器
元标记描述 HTML 文档中的元数据。它解释了有关 HTML 的附加材料。
<meta charset='utf-8'>
<!-- title -->
<title>···</title>
<meta property='og:title' content='···'>
<meta name='twitter:title' content='···'>
<!-- url -->
<link rel='canonical' href='https://···'>
<meta property='og:url' content='https://···'>
<meta name='twitter:url' content='https://···'>
<!-- description -->
<meta name='description' content='···'>
<meta property='og:description' content='···'>
<meta name='twitter:description' content='···'>
<!-- image -->
<meta property="og:image" content="https://···">
<meta name="twitter:image" content="https://···">
<!-- ua -->
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
<!-- viewport -->
<meta name='viewport' content='width=device-width'>
<meta name='viewport' content='width=1024'>
<meta property="og:type" content="website">
<meta property="og:locale" content="en_CA">
<meta property="og:title" content="Title of this page, same as title tag">
<meta property="og:url" content="http://fullurl.com/to-this/page/">
<meta property="og:image" content="http://fullurl.com/to-this/image.jpg">
<meta property="og:site_name" content="Name of your website">
<meta property="og:description" content="Description of this page, same as meta description">
被 Facebook、Instagram、Pinterest、LinkedIn 等使用。
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@yourtwitterhandle">
<meta name="twitter:title" content="Title of this page, same as title tag">
<meta name="twitter:url" content="http://fullurl.com/to-this/page/">
<meta name="twitter:description" content="Description of this page, same as meta description">
<meta name="twitter:image" content="http://fullurl.com/to-this/image.jpg">
请参阅:推特卡片文档
<meta name="ICBM" content="45.416667,-75.7">
<meta name="geo.position" content="45.416667;-75.7">
<meta name="geo.region" content="ca-on">
<meta name="geo.placename" content="Ottawa">
请参阅:地理标记