feat: add html.md cheatsheet.

2022-10-12 14:56:55 +08:00
parent c661cfa852
commit 03a4241228
5 changed files with 914 additions and 6 deletions
--- a/docs/html.md
+++ b/docs/html.md
@@ -0,0 +1,903 @@
+HTML 备忘清单
+===
+
+此 HTML 快速参考备忘单以可读布局列出了常见的 `HTML` 和 `HTML5` 标记。
+
+入门
+------------
+
+### hello.html
+<!--rehype:wrap-class=col-span-2 row-span-2-->
+
+```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 备忘清单!</h1>
+</body>
+</html>
+```
+
+或者在 [jsfiddle](https://jsfiddle.net/Randy8080/1e4wz20b/)
+
+### 注释 Comment
+
+```html
+<!-- 这是代码注释 -->
+
+<!--
+  或者你可以注释掉一个
+  大量的行。
+-->
+```
+
+### 段落 Paragraph
+
+```html
+<p>我来自快速参考</p>
+<p>分享快速参考备忘单。</p>
+```
+请参阅：[段落元素](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/p)
+
+### HTML 链接
+
+```html 
+<a href="https://github.com/jaywcjlove/reference">
+  Github
+</a>
+<a href="mailto:jack@abc.com">邮箱</a>
+<a href="tel:+123456789">电话</a>
+<a href="sms:+123456789&body=ha%20ha">
+  短信
+</a>
+```
+
+---
+
+:-|:-
+:-|:-
+`href`   | 超链接指向的 URL |
+`rel`    | 链接 URL 的关系 |
+`target` | 链接目标位置：`_self`/`_blank`/`_top`/`_parent` |
+
+请参阅：[\<a> 属性](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a#attributes)
+
+
+
+### Image 标签
+
+```html
+<img loading="lazy"
+  src="https://xxx.png"
+  alt="在此处描述图像"
+  width="400" height="400">
+```
+<!--rehype:className=wrap-text -->
+
+---
+
+|   |           |                                          |
+|---|-----------|------------------------------------------|
+|   | `src` _(URL/路径)_ | 必填，图片位置 |
+|   | `alt`     | 描述图像 |
+|   | `width`   | 图像宽度 |
+|   | `height`  | 图像高度 |
+|   | `loading` | 浏览器应该如何加载 |
+
+请参阅：[图像嵌入元素](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/img)
+
+### 文本格式标签
+
+```html
+<b>粗体文字</b>
+<strong>这段文字很重要</strong>
+<i>斜体文本</i>
+<em>这段文字被强调</em>
+<u>下划线文本</u>
+<pre>预格式化文本</pre>
+<code>源代码</code>
+<del>删除的文字</del>
+<mark>突出显示的文本 (HTML5)</mark>
+<ins>插入的文本</ins>
+<sup>使文本上标</sup>
+<sub>使文本下标</sub>
+<small>使文本变小</small>
+<pre>预格式化文本</pre>
+<kbd>Ctrl</kbd>
+<blockquote>文本块引用</blockquote>
+```
+
+### 标题
+
+```html
+<h1> 这是标题 1 </h1>
+<h2> 这是标题 2 </h2>
+<h3> 这是标题 3 </h3>
+<h4> 这是标题 4 </h4>
+<h5> 这是标题 5 </h5>
+<h6> 这是标题 6 </h6>
+```
+
+您的页面上应该只有一个 `h1`
+
+### Section Divisions
+
+:-|:-
+:-|:-
+`<div></div>`   | 页面内容的划分或部分
+`<span></span>` | 其他内容中的文本部分
+`<p></p>`       | 文本段落
+`<br>`          | 换行
+`<hr>`          | 水平分割线
+
+这些标签用于将页面划分为多个部分
+
+### 内部框架
+<!--rehype:wrap-class=row-span-2-->
+
+```html
+<iframe
+  id="inlineFrameExample"
+  title="Inline Frame Example"
+  width="100%"
+  height="200"
+  frameborder="0"
+  src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik">
+</iframe>
+```
+<!--rehype:className=wrap-text -->
+
+#### ↓ 预览
+
+<iframe id="inlineFrameExample"
+  title="Inline Frame Example"
+  width="100%"
+  height="200"
+  frameborder="0"
+  src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik">
+</iframe>
+
+
+请参阅：[内联框架元素](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/iframe)
+
+
+### HTML 中的 JavaScript
+
+```html
+<script type="text/javascript">
+  let text = "Hello 快速参考";
+  alert(text);
+</script>
+```
+
+
+#### 外部 JavaScript
+
+```html
+<body>
+  ...
+  <script src="app.js"></script>
+</body>
+```
+
+
+### HTML 中的 CSS
+
+```html
+<style type="text/css">
+    h1 {
+        color: purple;
+    }
+</style>
+```
+
+#### 外部样式表
+
+```html
+<head>
+  ...
+  <link rel="stylesheet" href="style.css"/>
+</head>
+```
+
+
+
+HTML5 标签
+-------------
+
+### 页面
+
+```html
+<body>
+  <header>
+    <nav>...</nav>
+  </header>
+  <main>
+    <h1>快速参考</h1>
+  </main>
+  <footer>
+    <p>©2023 快速参考</p>
+  </footer>
+</body>
+```
+
+
+### 标题导航
+
+```html
+<header>
+  <nav>
+    <ul>
+      <li><a href="#">编辑页面</a></li>
+      <li><a href="#">Twitter</a></li>
+      <li><a href="#">Facebook</a></li>
+    </ul>
+  </nav>
+</header>
+```
+
+
+### HTML5 Tags
+<!--rehype:wrap-class=row-span-4-->
+
+:-|:-
+:-|:-
+[article](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/article)       | 独立的内容
+[aside](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/aside)           | 次要内容
+[audio](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/audio)           | 嵌入声音或音频流
+[bdi](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/bdi)               | 双向隔离元件
+[canvas](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/canvas)         | 通过JavaScript绘制图形
+[data](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/data)             | 机器可读内容
+[datalist](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/datalist)     | 一组预定义选项
+[details](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/details)       | 其他信息
+[dialog](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/dialog)         | 对话框或子窗口
+[embed](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/embed)           | 嵌入外部应用程序
+[figcaption](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/figcaption) | 图形的标题或图例
+[figure](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/figure)         | 插图
+[footer](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/footer)         | 页脚或最不重要的
+[header](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/header)         | 刊头或重要信息
+[main](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/main)             | 文件的主要内容
+[mark](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/mark)             | 突出显示的文本
+[meter](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/meter)           | 已知范围内的标量值
+[nav](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/nav)               | 导航链接的一部分
+[output](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/output)         | 计算的结果
+[picture](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/picture)       | 用于多个图像源的容器
+[progress](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/progress)     | 任务的完成进度
+[rp](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/rp)                 | 提供回退括号
+[rt](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/rt)                 | 定义字符的发音
+[ruby](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/ruby)             | 表示ruby注释
+[section](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/section)       | 一系列相关内容中的组
+[source](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/source)         | 媒体元素的资源
+[summary](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/summary)       | 元素的摘要
+[template](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/template)     | 定义HTML片段
+[time](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/time)             | 时间或日期
+[track](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/track)           | 媒体元素的字幕信息
+[video](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/video)           | 嵌入视频
+[wbr](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/wbr)               | 换行机会
+
+
+### HTML5 Video
+
+```html
+<video controls="" width="100%">
+    <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4">
+    很抱歉，您的浏览器不支持嵌入式视频。
+</video>
+```
+<!--rehype:className=wrap-text -->
+
+#### ↓ 预览
+
+<video controls="" width="100%">
+    <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4">
+    很抱歉，您的浏览器不支持嵌入式视频。
+</video>
+
+### HTML5 Audio
+
+```html
+<audio
+  controls
+  src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3">
+    您的浏览器不支持音频元素。
+</audio>
+```
+<!--rehype:className=wrap-text -->
+
+#### ↓ 预览
+
+<audio controls
+    src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3">
+    您的浏览器不支持音频元素。
+</audio>
+
+### HTML5 Ruby
+
+```html
+<ruby>
+  汉 <rp>(</rp><rt>hàn</rt><rp>)</rp>
+  字 <rp>(</rp><rt>zì</rt><rp>)</rp>
+  拼 <rp>(</rp><rt>pīn</rt><rp>)</rp>
+  音 <rp>(</rp><rt>yīn</rt><rp>)</rp>
+</ruby>
+```
+<!--rehype:className=wrap-text -->
+
+#### ↓ 预览
+<!--rehype:wrap-style=text-align: center;-->
+
+<ruby style="font-size: 4rem;">
+  汉 <rp>(</rp><rt>hàn</rt><rp>)</rp>
+  字 <rp>(</rp><rt>zì</rt><rp>)</rp>
+  拼 <rp>(</rp><rt>pīn</rt><rp>)</rp>
+  音 <rp>(</rp><rt>yīn</rt><rp>)</rp>
+</ruby>
+
+
+### HTML5 kdi
+
+```html
+<ul>
+ <li>User <bdi>hrefs</bdi>: 60 points</li>
+ <li>User <bdi>jdoe</bdi>: 80 points</li>
+ <li>User <bdi>إيان</bdi>: 90 points</li>
+</ul>
+```
+
+#### ↓ 预览
+
+<ul>
+ <li>User <bdi>hrefs</bdi>: 60 points</li>
+ <li>User <bdi>jdoe</bdi>: 80 points</li>
+ <li>User <bdi>إيان</bdi>: 90 points</li>
+</ul>
+
+
+### HTML5 progress
+
+```html
+<progress value="50" max="100"></progress>
+```
+
+<progress value="50" max="100" style="width: 100%"></progress>
+
+### HTML5 mark
+
+```html
+<p>我爱<mark>备忘清单</mark></p>
+```
+
+<p>我爱<mark>备忘清单</mark></p>
+
+
+HTML 表格
+--------------
+
+### Table 示例
+<!--rehype:wrap-class=row-span-2-->
+
+```html
+<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>
+```
+
+### HTML表格标签
+<!--rehype:wrap-class=row-span-2-->
+
+标签|说明
+:-|:-
+[\<table>](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/table)       | 定义表格
+[\<th>](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/th)             | 定义表格中的标题单元格
+[\<tr>](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/tr)             | 定义表中的行
+[\<td>](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/td)             | 定义表格中的单元格
+[\<caption>](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/caption)   | 定义表格标题
+[\<colgroup>](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/colgroup) | 定义一组列
+[\<col>](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/col)           | 定义表中的列
+[\<thead>](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/thead)       | 对标题内容进行分组
+[\<tbody>](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/tbody)       | 将正文内容分组
+[\<tfoot>](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/tfoot)       | 对页脚内容进行分组
+
+### \<td> 属性
+
+属性|说明
+:-|:-
+`colspan` | 单元格应跨越的列数
+`headers` | 单元格与一个或多个标题单元格相关
+`rowspan` | 单元格应跨越的行数
+
+请参阅：[td\#属性](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/td#attributes)
+
+### \<th> 属性
+
+属性|说明
+:-|:-
+`colspan`                                                                        | 单元格应跨越的列数
+`headers`                                                                        | 单元格与一个或多个标题单元格相关
+`rowspan`                                                                        | 单元格应跨越的行数
+`abbr`                                                                           | 单元格内容的描述
+[scope](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/th#attr-scope) | 表头元素(在\<th>中定义)关联的单元格
+
+请参阅：[th\#属性](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/th#attributes)
+
+HTML 列表
+----
+
+### 无序列表
+
+```html
+<ul>
+  <li>I'm an item</li>
+  <li>I'm another item</li>
+  <li>I'm another item</li>
+</ul>
+```
+
+请参阅：[无序列表元素](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/ul)
+
+### 有序列表
+
+```html
+<ol>
+  <li>I'm the first item</li>
+  <li>I'm the second item</li>
+  <li>I'm the third item</li>
+</ol>
+```
+
+请参阅：[有序列表元素](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/ol)
+
+### 定义列表
+
+```html
+<dl>
+  <dt>A Term</dt>
+  <dd>Definition of a term</dd>
+  <dt>Another Term</dt>
+  <dd>Definition of another term</dd>
+</dl>
+```
+
+请参阅：[描述列表元素](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/dl)
+
+HTML 表单
+-----------
+
+### Form 标签
+<!--rehype:wrap-class=row-span-2-->
+
+```html
+<form method="POST" action="api/login">
+  <label for="mail">邮箱: </label>
+  <input type="email" id="mail" name="mail">
+  <br/>
+  <label for="pw">密码:</label>
+  <input type="password" id="pw" name="pw">
+  <br/>
+  <input type="submit" value="登录">
+  <br/>
+  <input type="checkbox" id="ck" name="ck">
+  <label for="ck">记住我</label>
+</form>
+```
+
+#### ↓ 预览
+
+<form method="POST" action="api/login" style="padding: 20px;">
+  <label for="email">邮箱: </label> 
+  <input type="email" id="email" name="email" class="border border-slate-400 mt-2">
+  <br/>
+  <label for="pwd">密码:</label> 
+  <input type="password" id="pwd" name="pwd" class="border border-slate-400 mt-2">
+  <br/>
+  <input type="submit" value="登录" class="mt-2">
+  <br/>
+  <input type="checkbox" id="ck" name="ck" class="mt-2">
+  <label for="ck">记住我</label> 
+</form>
+
+
+HTML `<form>` 元素用于收集信息并将其发送到外部源。
+
+### Form 属性
+
+属性|说明
+:-|:-
+`name`     | 脚本形式的名称
+`action`   | 表单脚本的URL
+`method`   | HTTP方法，`POST`/`GET` _(默认)_
+`enctype`  | 介质类型，请参见[enctype](https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLFormElement/enctype)
+`onsubmit` | 提交表单时运行
+`onreset`  | 在窗体重置时运行
+
+### Label 标签
+
+```html
+<!-- 嵌套标签 -->
+<label>Click me 
+<input type="text" id="user" name="name"/>
+</label>
+```
+
+---
+
+```html
+<!-- 'for' 属性 -->
+<label for="user">Click me</label>
+<input id="user" type="text" name="name"/>
+```
+
+`for`在标签中引用输入的`id`属性
+
+### Input 标签
+
+```html
+<label for="Name">Name:</label>
+<input type="text" name="Name" id="">
+```
+
+#### ↓ 预览
+
+<form style="padding: 20px;">
+  <label for="username">Username:</label>
+  <input type="text" name="username" id="username" class="border border-slate-400">
+</form>
+
+请参阅：[HTML输入标记](/html#html-input-tags)
+
+### Textarea 标签
+
+```html
+<textarea rows="2" cols="30" name="address" id="address"></textarea>
+```
+<!--rehype:className=wrap-text -->
+
+#### ↓ 预览
+
+<form style="padding: 20px;">
+    <textarea rows="2" cols="30" name="address" id="address" class="border border-slate-400"style="width: 100%"></textarea>
+</form>
+
+Textarea 是一个多行文本输入控件
+
+### Radio Buttons
+
+```html
+<input type="radio" name="gender" id="m">
+<label for="m">Male</label>
+<input type="radio" name="gender" id="f">
+<label for="f">Female</label>
+```
+
+#### ↓ 预览
+
+<form style="padding: 20px;">
+    <input type="radio" name="gender" id="m">
+    <label for="m">Male</label>
+    <input type="radio" name="gender" id="f">
+    <label for="f">Female</label>
+</form>
+
+单选按钮用于让用户只选择一个
+
+### Checkboxes
+```html
+<input type="checkbox" name="s" id="soc">
+<label for="soc">Soccer</label>
+<input type="checkbox" name="s" id="bas">
+<label for="bas">Baseball</label>
+```
+#### ↓ 预览
+<form style="padding: 20px;">
+    <input type="checkbox" name="sports" id="soccer">
+    <label for="soccer">Soccer</label>
+    <input type="checkbox" name="sports" id="baseball">
+    <label for="baseball">Baseball</label>
+</form>
+
+复选框允许用户选择一个或多个
+
+### Select 标签
+
+```html
+<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>
+```
+
+#### ↓ 预览
+
+<form style="padding: 20px">
+  <label for="city">City:</label>
+  <select name="city" id="city" class="border border-slate-400">
+      <option value="1">Sydney</option>
+      <option value="2">Melbourne</option>
+      <option value="3">Cromwell</option>
+  </select>
+</form>
+
+选择框是选项的下拉列表
+
+### Fieldset 标签
+
+```html
+<fieldset>
+  <legend>Your favorite monster</legend>
+  <input type="radio" id="kra" name="m">
+  <label for="kraken">Kraken</label><br/>
+  <input type="radio" id="sas" name="m">
+  <label for="sas">Sasquatch</label>
+</fieldset>
+```
+
+#### ↓ 预览
+
+<form style="padding: 20px">
+<fieldset class="border border-slate-400" style="padding: 20px">
+  <legend>Your favorite monster</legend>
+  <input type="radio" id="kra" name="monster">
+  <label for="kra">Kraken</label><br/>
+  <input type="radio" id="sas" name="monster">
+  <label for="sas">Sasquatch</label>
+</fieldset>
+</form>
+
+### 数据列表标签（HTML5）
+
+```html
+<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 style="padding: 20px">
+  <label for="myBrowser">Choose a browser:</label>
+  <input list="browsers" id="myBrowser" name="myBrowser"/>
+  <datalist id="browsers">
+    <option value="Chrome">
+    <option value="Firefox">
+    <option value="Internet Explorer">
+    <option value="Opera">
+    <option value="Safari">
+    <option value="Microsoft Edge">
+  </datalist>
+</form>
+
+### 提交和重置按钮
+
+```html
+<form action="register.php" method="post">
+  <label for="foo">Name:</label>
+  <input type="text" name="name" id="foo">
+  <input type="submit" value="提交">
+  <input type="reset" value="重置">
+</form>
+```
+
+#### ↓ 预览
+
+<form action="register.php" method="post" style="padding: 20px">
+  <label for="name">Name:</label>
+  <input type="text" name="name" id="name"">
+  <input type="submit" value="提交">
+  <input type="reset" value="重置">
+</form>
+
+`将数据提交到服务器` 重置为默认值
+
+
+HTML input 标签
+-----------
+<!--rehype:body-class=cols-2-->
+
+### Input 属性
+<!--rehype:wrap-class=row-span-2-->
+
+输入标记是一个空元素，用于标识要从用户处获取的特定类型的字段信息。
+
+```html
+<input type="text" name="?" value="?" minlength="6"	 required />
+```
+
+----
+
+:-|:-
+:-|:-
+`type="…"`              | 正在输入的数据类型
+`value="…"`             | 默认值
+`name="…"`              | 用于在 HTTP 请求中描述此数据
+`id="…"`                | 其他 HTML 元素的唯一标识符
+`readonly`              | 停止用户修改
+`disabled`              | 停止任何交互
+`checked`               | 单选或复选框是否选中
+`required`              | 是强制性的，参阅[必填](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Attributes/required#example)
+`placeholder="…"`       | 添加临时，请参阅[::placeholder](https://developer.mozilla.org/zh-CN/docs/Web/CSS/::placeholder#examples)
+`autocomplete="off"`    | 禁用自动完成
+`autocapitalize="none"` | 禁用自动大写
+`inputmode="…"`         | 显示特定键盘，请参阅[inputmode](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/inputmode)
+`list="…"`              | 关联的[datalist](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/datalist)的id
+`maxlength="…"`         | 最大字符数
+`minlength="…"`         | 最小字符数
+`min="…"`               | 范围和编号上的最小数值
+`max="…"`               | 范围和编号上的最大数值
+`step="…"`              | 数字如何在范围和数字中递增
+`pattern="…"`           | 指定一个[正则表达式](./regex.md)，请参阅[pattern](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Attributes/pattern)
+`autofocus`             | 集中精力
+`spellcheck`            | 执行拼写检查
+`multiple`              | 是否允许[多个](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Attributes/multiple)值
+`accept=""`             | [file](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input/file) 中需要文件类型上载控件
+
+请参阅：[\<input>元素 的属性](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input#attributes)
+
+### Input 类型
+
+|               |                  |
+|---------------|------------------|
+`type="checkbox"` | <input type="checkbox">
+`type="radio"`    | <input type="radio">
+`type="file"`     | <input type="file">
+`type="hidden"`   | <input type="hidden">
+`type="text"`     | <input type="text">
+`type="password"` | <input type="password">
+`type="image"`    | <input type="image" src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png" width="70">
+`type="reset"`    | <input type="reset">
+`type="button"`   | <input type="button">
+`type="submit"`   | <input type="submit">
+
+#### HTML5 中的新输入类型
+
+|               |                  |
+|---------------|------------------|
+| `type="color"`          | <input type="color" value="#0FB881"> |
+| `type="date"`           | <input type="date">                  |
+| `type="time"`           | <input type="time">                  |
+| `type="month"`          | <input type="month">                 |
+| `type="datetime-local"` | <input type="datetime-local">        |
+| `type="week"`           | <input type="week">                  |
+| `type="email"`          | <input type="email">                 |
+| `type="tel"`            | <input type="tel">                   |
+| `type="url"`            | <input type="url">                   |
+| `type="number"`         | <input type="number">                |
+| `type="search"`         | <input type="search">                |
+| `type="range"`          | <input type="range">                 |
+
+
+### Input CSS 选择器
+
+|               |                  |
+|---------------|------------------|
+| `input:focus` | 当键盘聚焦时       |
+
+HTML meta 标签
+-----------
+<!--rehype:body-class=cols-2-->
+
+### Meta 标签
+<!--rehype:wrap-class=row-span-3-->
+
+meta 标记描述 HTML 文档中的元数据。它解释了关于 HTML 的其他材料。
+
+```html
+<meta charset="utf-8">
+```
+
+```html
+<!-- 标题 -->
+<title>···</title>
+<meta property="og:title"  content="···">
+<meta name="twitter:title" content="···">
+```
+---
+
+```html
+<!-- url -->
+<link rel="canonical"       href="https://···">
+<meta property="og:url"  content="https://···">
+<meta name="twitter:url" content="https://···">
+```
+---
+
+```html
+<!-- 描述 -->
+<meta name="description"         content="···">
+<meta property="og:description"  content="···">
+<meta name="twitter:description" content="···">
+```
+---
+
+```html
+<!-- image -->
+<meta property="og:image"  content="https://···">
+<meta name="twitter:image" content="https://···">
+```
+---
+
+```html
+<!-- ua -->
+<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+```
+---
+
+```html
+<!-- viewport -->
+<meta name="viewport" content="width=device-width">
+<meta name="viewport" content="width=1024">
+```
+
+### Open Graph
+
+```html
+<meta property="og:type" content="website">
+<meta property="og:locale" content="en_CA">
+<meta property="og:title" content="HTML cheatsheet">
+<meta property="og:url" content="https://quickref.me/html">
+<meta property="og:image" content="https://xxx.com/image.jpg">
+<meta property="og:site_name" content="Name of your website">
+<meta property="og:description" content="Description of this page">
+```
+
+Facebook、Instagram、Pinterest、LinkedIn 等使用。
+
+### Twitter 卡片
+
+```html
+<meta name="twitter:card" content="summary">
+<meta name="twitter:site" content="@QuickRef_ME">
+<meta name="twitter:title" content="HTML cheatsheet">
+<meta name="twitter:url" content="https://quickref.me/html">
+<meta name="twitter:description" content="Description of this page">
+<meta name="twitter:image" content="https://xxx.com/image.jpg">
+```
+
+请参阅：[Twitter 卡片文档](https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/summary)
+
+### Geotagging
+
+```html
+<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">
+```
+
+请参阅：[Geotagging](https://en.wikipedia.org/wiki/Geotagging#HTML_pages)
+
+另见
+--------
+
+- [HTML 4.01 Specification](https://www.w3.org/TR/REC-html40/cover.html#minitoc) _(w3.org)_
+- [HTML Tutorial](https://wangchujiang.com/html-tutorial/) _(jaywcjlove.github.io)_
+- [Emmet 备忘清单，提升 HTML 和 CSS 代码编写的工具包](./emmet.md) _(jaywcjlove.github.io)_