html

此 HTML 快速参考备忘单以可读布局列出了常见的 HTML 和 HTML5 标记。

入门

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>

注释 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`

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>

↓ 预览

<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	次要内容
^[1]audio^[2]	嵌入声音或音频流
^[3]bdi^[4]	双向隔离元件
^[5]canvas^[6]	通过JavaScript绘制图形
^[7]data^[8]	机器可读内容
^[9]datalist^[10]	一组预定义选项
^[11]details^[12]	其他信息
^[13]dialog^[14]	对话框或子窗口
embed	嵌入外部应用程序
^[17]figcaption^[18]	图形的标题或图例
^[19]figure^[20]	插图
^[21]footer^[22]	页脚或最不重要的
^[23]header^[24]	刊头或重要信息
^[25]main^[26]	文件的主要内容
^[27]mark^[28]	突出显示的文本
^[29]meter^[30]	已知范围内的标量值
^[31]nav^[32]	导航链接的一部分
^[33]output^[34]	计算的结果
^[35]picture^[36]	用于多个图像源的容器
^[37]progress^[38]	任务的完成进度
^[39]rp^[40]	提供回退括号
^[41]rt^[42]	定义字符的发音
^[43]ruby^[44]	表示ruby注释
^[45]section^[46]	一系列相关内容中的组
^[47]source^[48]	媒体元素的资源
^[49]summary^[50]	元素的摘要
^[51]template^[52]	定义HTML片段
^[53]time^[54]	时间或日期
^[55]track^[56]	媒体元素的字幕信息
^[57]video^[58]	嵌入视频
^[59]wbr^[60]	换行机会

HTML5 Video

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

↓ 预览

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

↓ 预览

<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

<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

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

<progress value="50" max="100" style="width: 100%"> </progress>

HTML5 mark

<p>我爱<mark>速查表</mark></p>

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

标签	说明
^[61]<table>^[62]	定义表格
^[63]<th>^[64]	定义表格中的标题单元格
^[65]<tr>^[66]	定义表中的行
^[67]<td>^[68]	定义表格中的单元格
^[69]<caption>^[70]	定义表格标题
^[71]<colgroup>^[72]	定义一组列
^[73]<col>^[74]	定义表中的列
^[75]<thead>^[76]	对标题内容进行分组
^[77]<tbody>^[78]	将正文内容分组
^[79]<tfoot>^[80]	对页脚内容进行分组

<td> 属性

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

<th> 属性

属性	说明
`colspan`	单元格应跨越的列数
`headers`	单元格与一个或多个标题单元格相关
`rowspan`	单元格应跨越的行数
`abbr`	单元格内容的描述
^[81]scope^[82]	表头元素(在<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>

↓ 预览

<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`	介质类型，请参见^[83]enctype^[84]
`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="">

↓ 预览

<form style="padding: 20px;">
  <label for="username">Username:</label>
  <input type="text" name="username" id="username" class="border border-slate-400">
</form>

Textarea 标签

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

↓ 预览

<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

<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

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

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

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

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

提交和重置按钮

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

Input 属性

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

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

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

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

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

<!-- 重定向 -->
<meta http-equiv="refresh" content="5;url=http://example.com/">
<meta name="robots" content="index,follow">
<meta name="generator" content="网站生成工具">
<meta name="csrf-token" content="token值">

常用 Meta

<meta name="description" content="网页描述···">
<meta name="keywords" content="关键词1,关键词2,关键词3">
<meta name="author" content="作者名">

常用 Meta

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.png" type="image/png">
<link rel="icon" href="favicon.jpg" type="image/jpeg">

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://jaywcjlove.github.io/">
<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://jaywcjlove.github.io/">
<meta name="twitter:description" content="Description of this page">
<meta name="twitter:image" content="https://xxx.com/image.jpg">

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

标签语义化

复杂布局

╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
┆ <header>                                ┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
┆ <nav>                                   ┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
┆ <section>                               ┆
┆╭┈┈┈┈┈┈┈┈╮╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮┆
┆┆<aside> ┆┆ <main>                      ┆┆
┆┆        ┆┆╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈╮┆┆
┆┆        ┆┆┆  <article>    ┆ ┆ <aside> ┆┆┆
┆┆        ┆┆┆ ╭┈┈┈┈┈┈┈┈┈┈┈╮ ┆ ┆         ┆┆┆
┆┆        ┆┆┆ ┆ <header>  ┆ ┆ ┆         ┆┆┆
┆┆        ┆┆┆ ╰┈┈┈┈┈┈┈┈┈┈┈╯ ┆ ┆         ┆┆┆
┆┆        ┆┆┆ ╭┈┈┈┈┈┈┈┈┈┈┈╮ ┆ ┆         ┆┆┆
┆┆        ┆┆┆ ┆ <article> ┆ ┆ ┆         ┆┆┆
┆┆        ┆┆┆ ╰┈┈┈┈┈┈┈┈┈┈┈╯ ┆ ┆         ┆┆┆
┆┆        ┆┆┆ ╭┈┈┈┈┈┈┈┈┈┈┈╮ ┆ ┆         ┆┆┆
┆┆        ┆┆┆ ┆ <footer>  ┆ ┆ ┆         ┆┆┆
┆┆        ┆┆┆ ╰┈┈┈┈┈┈┈┈┈┈┈╯ ┆ ┆         ┆┆┆
┆┆        ┆┆╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈╯┆┆
┆╰┈┈┈┈┈┈┈┈╯╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
┆ <footer>                                ┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯

复杂布局

╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
┆  <header>                           ┆
┆  ╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮  ┆
┆  ┆  <nav>                        ┆  ┆
┆  ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯  ┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ 
┆  <main>                             ┆ 
┆ ╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈┈┈╮  ┆ 
┆ ┆  <article>       ┆ ┆  <aside>  ┆  ┆ 
┆ ┆ ╭┈┈┈┈┈┈┈┈┈┈┈╮    ┆ ┆           ┆  ┆ 
┆ ┆ ┆ <header>  ┆    ┆ ┆           ┆  ┆ 
┆ ┆ ╰┈┈┈┈┈┈┈┈┈┈┈╯    ┆ ┆           ┆  ┆ 
┆ ┆ ╭┈┈┈┈┈┈┈┈┈┈┈╮    ┆ ┆           ┆  ┆ 
┆ ┆ ┆ <section> ┆    ┆ ┆           ┆  ┆ 
┆ ┆ ╰┈┈┈┈┈┈┈┈┈┈┈╯    ┆ ┆           ┆  ┆ 
┆ ┆ ╭┈┈┈┈┈┈┈┈┈┈┈╮    ┆ ┆           ┆  ┆ 
┆ ┆ ┆ <footer>  ┆    ┆ ┆           ┆  ┆ 
┆ ┆ ╰┈┈┈┈┈┈┈┈┈┈┈╯    ┆ ┆           ┆  ┆ 
┆ ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈┈┈╯  ┆ 
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯ 
╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
┆  <footer>                           ┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯

区域语义化

╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈┈┈╮
┆  <main>          ┆ ┆  <aside>  ┆
┆ ╭┈┈┈┈┈┈┈┈┈┈┈╮    ┆ ┆           ┆
┆ ┆ <header>  ┆    ┆ ┆           ┆
┆ ╰┈┈┈┈┈┈┈┈┈┈┈╯    ┆ ┆           ┆
┆ ╭┈┈┈┈┈┈┈┈┈┈┈╮    ┆ ┆           ┆
┆ ┆ <section> ┆    ┆ ┆           ┆
┆ ╰┈┈┈┈┈┈┈┈┈┈┈╯    ┆ ┆           ┆
┆ ╭┈┈┈┈┈┈┈┈┈┈┈╮    ┆ ┆           ┆
┆ ┆ <footer>  ┆    ┆ ┆           ┆
┆ ╰┈┈┈┈┈┈┈┈┈┈┈╯    ┆ ┆           ┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈┈┈╯

页面头语义化

╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
┆  <header>                           ┆
┆  ╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮  ┆
┆  ┆  <section>                    ┆  ┆
┆  ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯  ┆
┆  ╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈╮  ┆
┆  ┆  <nav>            ┆ ┆ <aside> ┆  ┆
┆  ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈╯  ┆
┆  ╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮  ┆
┆  ┆  <footer>                     ┆  ┆
┆  ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯  ┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯

原文始发于微信公众号（索隆程序员）：HTML速查表

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/206705.html

HTML速查表

html

入门

hello.html

注释 Comment

段落 Paragraph

HTML 链接

Image 标签

文本格式标签

标题

Section Divisions

内部框架

↓ 预览

HTML 中的 JavaScript

外部 JavaScript

HTML 中的 CSS

外部样式表

HTML5 标签

页面

标题导航

HTML5 Tags

HTML5 Video

↓ 预览

HTML5 Audio

↓ 预览

HTML5 Ruby

↓ 预览

HTML5 kdi

↓ 预览

HTML5 progress

HTML5 mark

HTML 表格

Table 示例

HTML表格标签

<td> 属性

<th> 属性

HTML 列表

无序列表

有序列表

定义列表

HTML 表单

Form 标签

↓ 预览

Form 属性

Label 标签

Input 标签

↓ 预览

Textarea 标签

↓ 预览

Radio Buttons

↓ 预览

Checkboxes

↓ 预览

Select 标签

↓ 预览

Fieldset 标签

↓ 预览

数据列表标签（HTML5）

↓ 预览

提交和重置按钮

↓ 预览

HTML input 标签

Input 属性

Input 类型

HTML5 中的新输入类型

Input CSS 选择器

HTML meta 标签

Meta 标签

常用 Meta

常用 Meta

Open Graph

Twitter 卡片

Geotagging

标签语义化

复杂布局

复杂布局

区域语义化

页面头语义化

相关推荐

发表回复