## 入门

### hello.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

### 注释 Comment

    <!-- 这是代码注释 -->

    <!--
      或者你可以注释掉一个
      大量的行。
    -->

### 段落 Paragraph

    <p>我来自快速参考</p>
    <p>分享快速参考备忘单。</p>

请参阅：段落元素

### 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> 属性

### Image 标签

    <img loading="lazy"
      src="https://xxx.png"
      alt="在此处描述图像"
      width="400" height="400">

| `src` (URL/路径) | 必填，图片位置
| `alt` | 描述图像
| `width` | 图像宽度
| `height` | 图像高度
| `loading` | 浏览器应该如何加载

请参阅：图像嵌入元素

### 文本格式标签

    <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>

### 标题

    <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>` | 水平分割线

这些标签用于将页面划分为多个部分

### 内部框架

    <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>

#### ↓ 预览

请参阅：内联框架元素

### HTML 中的 JavaScript

    <script type="text/javascript">
      let text = "Hello 快速参考";
      alert(text);
    </script>

#### 外部 JavaScript

    <body>
      ...
      <script src="app.js"></script>
    </body>

### HTML 中的 CSS

    <style type="text/css">
        h1 {
            color: purple;
        }
    </style>

#### 外部样式表

    <head>
      ...
      <link rel="stylesheet" href="style.css"/>
    </head>

## HTML5 标签

### 页面

    <body>
      <header>
        <nav>...</nav>
      </header>
      <main>
        <h1>快速参考</h1>
      </main>
      <footer>
        <p>©2023 快速参考</p>
      </footer>
    </body>

### 标题导航

    <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

:- | :-
--- | ---
article | 独立的内容
aside | 次要内容
audio | 嵌入声音或音频流
bdi | 双向隔离元件
canvas | 通过JavaScript绘制图形
data | 机器可读内容
datalist | 一组预定义选项
details | 其他信息
dialog | 对话框或子窗口
embed | 嵌入外部应用程序
figcaption | 图形的标题或图例
figure | 插图
footer | 页脚或最不重要的
header | 刊头或重要信息
main | 文件的主要内容
mark | 突出显示的文本
meter | 已知范围内的标量值
nav | 导航链接的一部分
output | 计算的结果
picture | 用于多个图像源的容器
progress | 任务的完成进度
rp | 提供回退括号
rt | 定义字符的发音
ruby | 表示ruby注释
section | 一系列相关内容中的组
source | 媒体元素的资源
summary | 元素的摘要
template | 定义HTML片段
time | 时间或日期
track | 媒体元素的字幕信息
video | 嵌入视频
wbr | 换行机会

### HTML5 Video

    <video controls="" width="100%">
        <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4">
        很抱歉，您的浏览器不支持嵌入式视频。
    </video>

#### ↓ 预览

很抱歉，您的浏览器不支持嵌入式视频。

### HTML5 Audio

    <audio
      controls
      src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3">
        您的浏览器不支持音频元素。
    </audio>

#### ↓ 预览

您的浏览器不支持音频元素。

### HTML5 Ruby

    <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>

#### ↓ 预览

汉 (hàn) 字 (zì) 拼 (pīn) 音 (yīn)

### HTML5 kdi

    <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>

#### ↓ 预览

- User hrefs: 60 points
- User jdoe: 80 points
- User إيان: 90 points

### HTML5 progress

    <progress value="50" max="100"></progress>

### HTML5 mark

    <p>我爱<mark>备忘清单</mark></p>

我爱备忘清单

## HTML 表格

### Table 示例

    <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表格标签

标签 | 说明
--- | ---
<table> | 定义表格
<th> | 定义表格中的标题单元格
<tr> | 定义表中的行
<td> | 定义表格中的单元格
<caption> | 定义表格标题
<colgroup> | 定义一组列
<col> | 定义表中的列
<thead> | 对标题内容进行分组
<tbody> | 将正文内容分组
<tfoot> | 对页脚内容进行分组

### <td> 属性

属性 | 说明
--- | ---
`colspan` | 单元格应跨越的列数
`headers` | 单元格与一个或多个标题单元格相关
`rowspan` | 单元格应跨越的行数

请参阅：td#属性

### <th> 属性

属性 | 说明
--- | ---
`colspan` | 单元格应跨越的列数
`headers` | 单元格与一个或多个标题单元格相关
`rowspan` | 单元格应跨越的行数
`abbr` | 单元格内容的描述
scope | 表头元素(在<th>中定义)关联的单元格

请参阅：th#属性

## HTML 列表

### 无序列表

    <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>

请参阅：描述列表元素

## HTML 表单

### Form 标签

    <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>

#### ↓ 预览

邮箱:
密码:
记住我

HTML `<form>` 元素用于收集信息并将其发送到外部源。

### Form 属性

属性 | 说明
--- | ---
`name` | 脚本形式的名称
`action` | 表单脚本的URL
`method` | HTTP方法，`POST`/`GET` (默认)
`enctype` | 介质类型，请参见enctype
`onsubmit` | 提交表单时运行
`onreset` | 在窗体重置时运行

### Label 标签

    <!-- 嵌套标签 -->
    <label>Click me
    <input type="text" id="user" name="name"/>
    </label>

    <!-- 'for' 属性 -->
    <label for="user">Click me</label>
    <input id="user" type="text" name="name"/>

`for`在标签中引用输入的`id`属性

### Input 标签

    <label for="Name">Name:</label>
    <input type="text" name="Name" id="">

#### ↓ 预览

Username:

请参阅：HTML输入标记

### Textarea 标签

    <textarea rows="2" cols="30" name="address" id="address"></textarea>

#### ↓ 预览

Textarea 是一个多行文本输入控件

### Radio Buttons

    <input type="radio" name="gender" id="m">
    <label for="m">Male</label>
    <input type="radio" name="gender" id="f">
    <label for="f">Female</label>

#### ↓ 预览

Male Female

单选按钮用于让用户只选择一个

### Checkboxes

    <input type="checkbox" name="s" id="soc">
    <label for="soc">Soccer</label>
    <input type="checkbox" name="s" id="bas">
    <label for="bas">Baseball</label>

#### ↓ 预览

Soccer Baseball

复选框允许用户选择一个或多个

### Select 标签

    <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>

#### ↓ 预览

City:

选择框是选项的下拉列表

### Fieldset 标签

    <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>

#### ↓ 预览

Your favorite monster Kraken
Sasquatch

### 数据列表标签（HTML5）

    <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>

#### ↓ 预览

Choose a browser:

### 提交和重置按钮

    <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>

#### ↓ 预览

Name:

`将数据提交到服务器` 重置为默认值

## HTML input 标签

### Input 属性

输入标记是一个空元素，用于标识要从用户处获取的特定类型的字段信息。

    <input type="text" name="?" value="?" minlength="6"	 required />

:- | :-
--- | ---
`type="…"` | 正在输入的数据类型
`value="…"` | 默认值
`name="…"` | 用于在 HTTP 请求中描述此数据
`id="…"` | 其他 HTML 元素的唯一标识符
`readonly` | 停止用户修改
`disabled` | 停止任何交互
`checked` | 单选或复选框是否选中
`required` | 是强制性的，参阅必填
`placeholder="…"` | 添加临时，请参阅::placeholder
`autocomplete="off"` | 禁用自动完成
`autocapitalize="none"` | 禁用自动大写
`inputmode="…"` | 显示特定键盘，请参阅inputmode
`list="…"` | 关联的datalist的id
`maxlength="…"` | 最大字符数
`minlength="…"` | 最小字符数
`min="…"` | 范围和编号上的最小数值
`max="…"` | 范围和编号上的最大数值
`step="…"` | 数字如何在范围和数字中递增
`pattern="…"` | 指定一个正则表达式，请参阅pattern
`autofocus` | 集中精力
`spellcheck` | 执行拼写检查
`multiple` | 是否允许多个值
`accept=""` | file 中需要文件类型上载控件

请参阅：<input>元素 的属性

### 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 的其他材料。

    <meta charset="utf-8">

    <!-- 标题 -->
    <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://···">

    <!-- 描述 -->
    <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">

### Open Graph

    <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 卡片

    <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 卡片文档

### Geotagging

    <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

## 另见

- HTML 4.01 Specification (w3.org)
- HTML Tutorial (jaywcjlove.github.io)
- Emmet 备忘清单，提升 HTML 和 CSS 代码编写的工具包 (jaywcjlove.github.io)