HTML 备忘清单 === 此 HTML 快速参考备忘单以可读布局列出了常见的 `HTML` 和 `HTML5` 标记。 入门 ------------ ### hello.html ```html HTML5 Boilerplate

Hello world, hello 备忘清单!

``` 或者在 [jsfiddle](https://jsfiddle.net/Randy8080/1e4wz20b/) ### 注释 Comment ```html ``` ### 段落 Paragraph ```html

我来自快速参考

分享快速参考备忘单。

``` 请参阅：[段落元素](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/p) ### HTML 链接 ```html Github 邮箱 电话 短信 ``` --- :-|:- :-|:- `href` | 超链接指向的 URL | `rel` | 链接 URL 的关系 | `target` | 链接目标位置：`_self`/`_blank`/`_top`/`_parent` | 请参阅：[\ 属性](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a#attributes) ### Image 标签 ```html 在此处描述图像 ``` --- | | | | |---|-----------|------------------------------------------| | | `src` _(URL/路径)_ | 必填，图片位置 | | | `alt` | 描述图像 | | | `width` | 图像宽度 | | | `height` | 图像高度 | | | `loading` | 浏览器应该如何加载 | 请参阅：[图像嵌入元素](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/img) ### 文本格式标签 ```html 粗体文字 这段文字很重要 斜体文本 这段文字被强调 下划线文本 
预格式化文本
源代码 删除的文字 突出显示的文本 (HTML5) 插入的文本 使文本上标 使文本下标 使文本变小 
预格式化文本
Ctrl
文本块引用
``` ### 标题 ```html

这是标题 1

这是标题 2

这是标题 3

这是标题 4

这是标题 5
这是标题 6
``` 您的页面上应该只有一个 `h1` ### Section Divisions :-|:- :-|:- `
` | 页面内容的划分或部分 `` | 其他内容中的文本部分 `

` | 文本段落 `
` | 换行 `
` | 水平分割线 这些标签用于将页面划分为多个部分 ### 内部框架 ```html ``` #### ↓ 预览 请参阅：[内联框架元素](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/iframe) ### HTML 中的 JavaScript ```html ``` #### 外部 JavaScript ```html ... ``` ### HTML 中的 CSS ```html ``` #### 外部样式表 ```html ... ``` HTML5 标签 ------------- ### 页面 ```html

快速参考

``` ### 标题导航 ```html
``` ### HTML5 Tags :-|:- :-|:- [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 ``` #### ↓ 预览 ### HTML5 Audio ```html ``` #### ↓ 预览 ### HTML5 Ruby ```html 汉 (hàn) 字 (zì) 拼 (pīn) 音 (yīn) ``` #### ↓ 预览 汉 (hàn) 字 (zì) 拼 (pīn) 音 (yīn) ### HTML5 kdi ```html ``` #### ↓ 预览 ### HTML5 progress ```html ``` ### HTML5 mark ```html

我爱备忘清单

```

我爱备忘清单

HTML 表格 -------------- ### Table 示例 ```html
name age
Roberta 39
Oliver 25
``` ### HTML表格标签 标签|说明 :-|:- [\](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/table) | 定义表格 [\](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/tr) | 定义表中的行 [\](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/colgroup) | 定义一组列 [\](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/col) | 定义表中的列 [\](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/thead) | 对标题内容进行分组 [\](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/tbody) | 将正文内容分组 [\](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/tfoot) | 对页脚内容进行分组 ### \
](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/th) | 定义表格中的标题单元格 [\
](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/td) | 定义表格中的单元格 [\
](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/caption) | 定义表格标题 [\
属性 属性|说明 :-|:- `colspan` | 单元格应跨越的列数 `headers` | 单元格与一个或多个标题单元格相关 `rowspan` | 单元格应跨越的行数 请参阅：[td\#属性](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/td#attributes) ### \ 属性 属性|说明 :-|:- `colspan` | 单元格应跨越的列数 `headers` | 单元格与一个或多个标题单元格相关 `rowspan` | 单元格应跨越的行数 `abbr` | 单元格内容的描述 [scope](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/th#attr-scope) | 表头元素(在\中定义)关联的单元格 请参阅：[th\#属性](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/th#attributes) HTML 列表 ---- ### 无序列表 ```html
  • I'm an item
  • I'm another item
  • I'm another item
``` 请参阅：[无序列表元素](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/ul) ### 有序列表 ```html
  1. I'm the first item
  2. I'm the second item
  3. I'm the third item
``` 请参阅：[有序列表元素](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/ol) ### 定义列表 ```html
A Term
Definition of a term
Another Term
Definition of another term
``` 请参阅：[描述列表元素](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/dl) HTML 表单 ----------- ### Form 标签 ```html



``` #### ↓ 预览



HTML `
` 元素用于收集信息并将其发送到外部源。 ### 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 ``` --- ```html ``` `for`在标签中引用输入的`id`属性 ### Input 标签 ```html ``` #### ↓ 预览
请参阅：[HTML输入标记](/html#html-input-tags) ### Textarea 标签 ```html ``` #### ↓ 预览
Textarea 是一个多行文本输入控件 ### Radio Buttons ```html ``` #### ↓ 预览
单选按钮用于让用户只选择一个 ### Checkboxes ```html ``` #### ↓ 预览
复选框允许用户选择一个或多个 ### Select 标签 ```html ``` #### ↓ 预览
选择框是选项的下拉列表 ### Fieldset 标签 ```html
Your favorite monster
``` #### ↓ 预览
Your favorite monster
### 数据列表标签（HTML5） ```html ``` #### ↓ 预览
### 提交和重置按钮 ```html
``` #### ↓ 预览
`将数据提交到服务器` 重置为默认值 HTML input 标签 ----------- ### Input 属性 输入标记是一个空元素，用于标识要从用户处获取的特定类型的字段信息。 ```html ``` --- :-|:- :-|:- `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) 中需要文件类型上载控件 请参阅：[\元素 的属性](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input#attributes) ### Input 类型 | | | |---------------|------------------| `type="checkbox"` | `type="radio"` | `type="file"` | `type="hidden"` | `type="text"` | `type="password"` | `type="image"` | `type="reset"` | `type="button"` | `type="submit"` | #### HTML5 中的新输入类型 | | | |---------------|------------------| | `type="color"` | | | `type="date"` | | | `type="time"` | | | `type="month"` | | | `type="datetime-local"` | | | `type="week"` | | | `type="email"` | | | `type="tel"` | | | `type="url"` | | | `type="number"` | | | `type="search"` | | | `type="range"` | | ### Input CSS 选择器 | | | |---------------|------------------| | `input:focus` | 当键盘聚焦时 | HTML meta 标签 ----------- ### Meta 标签 meta 标记描述 HTML 文档中的元数据。它解释了关于 HTML 的其他材料。 ```html ``` ```html ··· ``` --- ```html ``` --- ```html ``` --- ```html ``` --- ```html ``` --- ```html ``` --- ```html ``` ### 常用 Meta ```html ``` ### 常用 Meta ```html ``` ### Open Graph ```html ``` Facebook、Instagram、Pinterest、LinkedIn 等使用。 ### Twitter 卡片 ```html ``` 请参阅：[Twitter 卡片文档](https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/summary) ### Geotagging ```html ``` 请参阅：[Geotagging](https://en.wikipedia.org/wiki/Geotagging#HTML_pages) 标签语义化 ------ ### 复杂布局 ``` ╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ ┆
┆ ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯ ╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ ┆