基础概念
元素
- 开始标签（Opening tag）：包含元素的名称（本例为 p），被左、右角括号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。
- 结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。
- 内容（Content）：元素的内容，本例中就是所输入的文本本身。
元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。
属性
一个空格，在属性和元素名称之间。(如果已经有一个或多个属性，就与前一个属性之间有一个空格。)
- 属性名称，后面跟着一个等于号。
- 一个属性值，由一对引号“ ”引起来。
有时你会看到没有值的属性，它是合法的。这些属性被称为布尔属性，他们只能有跟它的属性名一样的属性值。例如disabled 属性。
格式原则
- 使用小写
- 正确关闭所有标签
- 一定要开英文输入法，冒号和分号各种符号都得是英文输入法，连字符也不能忘记。
- 外面用单引号，里面就用双引号。外面用双引号，里面就用单引号。
HTML基础结构
一个html文档必须要有的基础结构
<!DOCTYPE html>//声明必须是 HTML 文档的第一行，位于 <html> 标签之前。<html lang="zh-CN"> //这个元素包裹了整个完整的页面，是一个根元素。设定语言可以让你的网站更好被查找。 <head> //它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。 <meta charset="utf-8"> //这个元素设置文档使用utf-8字符集编码，utf-8字符集包含了人类大部分的文字。 <title>我的测试站点</title> //设置页面标题 </head> <body> //包含了你访问页面时所有显示在页面上的内容，文本，图片，音频，游戏等等。 <p>这是我的页面</p> </body></html>
头部
内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。
以下标签都可以添加到 head 部分：、<base>、<link>、<meta>、<script> 以及 <style>
```html
<base> 标签为页面上的所有链接规定默认地址或默认目标（target）
<link> 标签定义文档与外部资源之间的关系，常用于连接样式表。
<style> 标签用于为 HTML 文档定义样式信息。
<script> 标签用于定义客户端脚本，比如 Java
<meta>元数据（metadata）是关于数据的信息。
-元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。
• 表示创作者和编辑软件
<meta name="author"
content="w3school.com.cn">
<meta name="revised"
content="David Yang,8/1/07">
• 描述文档及关键词
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="description"
content="HTML examples">
<meta name="keywords"
content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript">
• 重定向
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" />
</head>
<p><base target="_blank" ></base> 使用 base 标签使所有标签在新窗口中打开</p>
<p><title> 元素在所有 HTML/XHTML 文档中都是必需的。
• 定义浏览器工具栏中的标题
• 提供页面被添加到收藏夹时显示的标题
• 显示在搜索引擎结果中的页面标题</p>
<pre><code>
<a name="valcp"></a>
### 脚本<script>
> script 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。
> 没有必要一定放到头部<head>里面，一般放到</body>结束标签之前更好。
```html
<script type="text/javascript">
document.write("Hello World!")
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
不支持 Javascript 的浏览器将显示 noscript 元素中的文本。
</code></pre><p>应对老式浏览器：将脚本隐藏在注释中<br />老浏览器无法识别脚本，将会忽略注释，而新浏览器能识别，就会读取并显示。</p>
<pre><code class="lang-html"><script type="text/javascript">
<!--
document.write("Hello World!")
//-->
</script>
<script type="text/vbscript">
<!--
document.write("Hello World!")
'-->
</script>
</code></pre>
<p>两个脚本的区别在于注释的文本不同
<a name="vHOBb"></a></p>
<h3 id="1ylukc"><a name="1ylukc" class="reference-link"></a><span class="header-link octicon octicon-link"></span><br /></h3><p><a name="phZwh"></a></p>
<h3 id="6la36g"><a name="6la36g" class="reference-link"></a><span class="header-link octicon octicon-link"></span>样式<style></h3><pre><code class="lang-html"><head>
<style>
.cities {
background-color:black;
color:white;
margin:20px;
padding:20px;
}
</style>
</head>
</code></pre>
<p><a name="fB7Ir"></a></p>
<h2 id="fbr7vf"><a name="fbr7vf" class="reference-link"></a><span class="header-link octicon octicon-link"></span>body中可以放置的标签</h2><p><a name="DEKuS"></a></p>
<h3 id="6c16ky"><a name="6c16ky" class="reference-link"></a><span class="header-link octicon octicon-link"></span>块<div>/<span></h3><p>你可以理解为一个空盒子，<div>和<span>都是一个空盒子，可以在里面放置任何其他的标签。</p>
<blockquote>
<p>大多数 HTML 元素被定义为块级元素或内联元素。块元素会另起一行，而内联元素不会。</p>
</blockquote>
<p><div>块元素</p>
<pre><code class="lang-html"><div>
<p>可以放置其他的标签</p>
</div>
</code></pre>
<p><span>内联元素</p>
<pre><code class="lang-html"><style>
span.red {color:red;}
</style>
<body>
<h1>My <span class="red">Important</span> Heading</h1>
</body>
</code></pre>
<p><a name="BLEHR"></a></p>
<h3 id="bvy5f8"><a name="bvy5f8" class="reference-link"></a><span class="header-link octicon octicon-link"></span>类<class></h3><blockquote>
<p>对 HTML 进行分类（设置类），使我们能够为元素的类定义 CSS 样式。
为相同的类设置相同的样式，或者为不同的类设置不同的样式。</p>
</blockquote>
<pre><code class="lang-html"><style>
.cities {
background-color:black;
color:white;
margin:20px;
padding:20px;
}
</style>
<div class="cities">
<h2>London</h2>
<p>
London is the capital city of England.
It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
</div>
</code></pre>
<p><a name="T9RGz"></a></p>
<h3 id="4if9of"><a name="4if9of" class="reference-link"></a><span class="header-link octicon octicon-link"></span><br /></h3><p><a name="6PY9q"></a></p>
<h3 id="155pqg"><a name="155pqg" class="reference-link"></a><span class="header-link octicon octicon-link"></span>文本<h1><p></h3><pre><code class="lang-html"><body>主体</body>
<h>headline</h>
<p>paragraph</p>
name="value" tag
<hr />水平线
<br>空元素 用于换行
<!--this is a comment--> 注释
<q>引用</q>
<blockquote> 缩进</blockquote>
<abbr>缩写<abbr> 例如 WHO
<dfn>定义专有名词</dfn> 便于搜索
<cite>用于著作标题</cite>
<bdo>文本方向</bdo>
<em>斜体</em>
html5
<i>斜体</i>
<b>粗体</b>
<u>下划线</u>
</code></pre>
<p><a name="11Fn6"></a></p>
<h3 id="qpif4"><a name="qpif4" class="reference-link"></a><span class="header-link octicon octicon-link"></span>链接<a></h3><pre><code class="lang-html"><a href="http：//www.baidu.com">指向外部网址</a> //href 属性规定链接的目标
<a href="/index.html">指向站内页面</a>
有两种使用 <a> 标签的方式：
通过使用 href 属性 - 创建指向另一个文档的链接，例如 href="#c4"
通过使用 name 属性 - 创建文档内的书签 例如 name="c4"
<a target="_blank">指向站内页面</a> //使用 Target 属性，你可以定义被链接的文档在何处显示。target="_blank"意为在新标签页中打开
<a title="nihao">指向站内页面</a>//鼠标悬停在链接中的时候，显示什么信息
</code></pre>
<p><a name="T5vSS"></a></p>
<h4 id="71j6xb"><a name="71j6xb" class="reference-link"></a><span class="header-link octicon octicon-link"></span>统一资源定位符（URL）</h4><p>scheme://host.domain:port/path/filename<br />解释：<br />scheme - 定义因特网服务的类型。最常见的类型是 http<br />host - 定义域主机（http 的默认主机是 www）<br />domain - 定义因特网域名，比如 w3school.com.cn<br />:port - 定义主机上的端口号（http 的默认端口号是 80）<br />path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。<br />filename - 定义文档/资源的名称<br />URL 会转换成可通过因特网
<a name="4Wx3S"></a></p>
<h3 id="8v519q"><a name="8v519q" class="reference-link"></a><span class="header-link octicon octicon-link"></span><br /></h3><p><a name="Zhyye"></a></p>
<h3 id="3vpapd"><a name="3vpapd" class="reference-link"></a><span class="header-link octicon octicon-link"></span>图片<img></h3><pre><code class="lang-html"><img src="url" alt="文字" />url 指图片的 url 地址，alt替换文本属性，图片无法显示时显示替换文本
<img src ="/i/eg_cute.gif" align ="left"> ailgn 定义图片位置
<img src="/i/eg_mouse.jpg" width="50" height="50">调整图片尺寸
<img>定义图像
<map>定义图像地图
<area>定义图像地图中的可点击区域
</code></pre>
<p><a name="dffeI"></a></p>
<h2 id="6yw3xd"><a name="6yw3xd" class="reference-link"></a><span class="header-link octicon octicon-link"></span><br /></h2><p><a name="zKJeK"></a></p>
<h3 id="awag0z"><a name="awag0z" class="reference-link"></a><span class="header-link octicon octicon-link"></span>表格<table></h3><pre><code class="lang-html"><table>标签定义
表格行<tr>定义每一行</tr>
单元格数据<td>定义单元格数据</td>
表格边框<table border="1">table 定义边框</table>
表头<th>定义表头</th>浏览器自动显示为加粗居中的黑体
合并单元格<th colspan="2">电话</th>横跨两列的表头
空单元格<td> </td>没有信息的单元格可以加一个空格占位符，就能将边框显示出来
标题<caption>我的标题</caption>
边距<table border="1" cellpadding="10"></table>
格与格间距<table border="1" cellspacing="10"> </table>
背景颜色<table border="1" bgcolor="red"></table>
背景图像<table border="1" background="/i/eg_bg_07.gif"></table>
单元格对齐<th align="right">一月</th>
框架 (控制围绕表格的边框)<table frame="box"></table> <table frame="above"></table> <table frame="below"></table> <table frame="hsides"></table> <table frame="vsides"></table>
</code></pre>
<p><a name="DVH9M"></a></p>
<h2 id="3jq9wy"><a name="3jq9wy" class="reference-link"></a><span class="header-link octicon octicon-link"></span><br /></h2><p><a name="kXHL6"></a></p>
<h3 id="8kihb"><a name="8kihb" class="reference-link"></a><span class="header-link octicon octicon-link"></span>列表<ul></h3><pre><code class="lang-html">无序列表
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>菠萝</li>
</ul>
不同类型
实心圆点<ul type="disc"></ul>
空心圆点<ul type="circle"></ul>
方点<ul type="square"></ul>
有序列表
<ol start="50">
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
不同类型
<ol type="A">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ol>
其余的把 type 改成 a/I/i 即可
嵌套列表
<ul>
<li>咖啡</li>
<li>茶
<ul>
<li>红茶</li>
<li>绿茶</li>
</ul>
</li>
<li>牛奶</li>
</ul>
自定义列表<dl></dl>自定义列表项<dt>自定义列表项的定义<dd>
</code></pre>
<p><a name="2BwzJ"></a></p>
<h3 id="6tt64a"><a name="6tt64a" class="reference-link"></a><span class="header-link octicon octicon-link"></span>表单<form></h3><p>以下为一个表单的基础示例</p>
<pre><code class="lang-html"><form action="action_page.php" autocomplete="on">//html5 autocomplete属性，是否自动完成
First name:<input type="text" name="fname">
First name:<input type="text" name="fname" autofocus><br>
//html5 autofocus属性，进入页面自动获取焦点
Last name: <input type="text" name="lname"><br>
E-mail: <input type="email" name="email" autocomplete="off"><br>
<input type="submit">
</form>
<form action="action_page.php" novalidate>//html5 novalidate属性，表示表单在提交时不需要校验
E-mail: <input type="email" name="user_email">
<input type="submit">
</form>
</code></pre>
<pre><code class="lang-html"><form> 元素定义 HTML 表单
<input> 元素是最重要的表单元素。
如果要正确地被提交，每个输入字段必须设置一个 name 属性。
type
text 文本输入
radio 单选 checked 属性为默认选中
submit 提交
checkbox 复选框
</code></pre>
<p><a name="x6qWt"></a></p>
<h4 id="f1x29m"><a name="f1x29m" class="reference-link"></a><span class="header-link octicon octicon-link"></span>表单的标签种类</h4><p>下拉选择</p>
<pre><code class="lang-html"><select> 元素
<select name="cars">
<option value="volvo">Volvo</option>//选项
<option value="fiat" selected>Fiat</option> //添加了selected属性，代表默认选项
</select>
</code></pre>
<p>文本域</p>
<pre><code class="lang-html"><textarea> 元素定义多行输入字段（文本域）
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
</code></pre>
<p>按钮</p>
<pre><code class="lang-html"><button> 元素定义可点击的按钮
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
</code></pre>
<p>HTML5 新增表单元素<br /><datalist><br /><keygen><br /><output></p>
<p><a name="2ICdg"></a></p>
<h4 id="28zugk"><a name="28zugk" class="reference-link"></a><span class="header-link octicon octicon-link"></span>表单的属性</h4><pre><code class="lang-html">disabled 规定输入字段应该被禁用。
max 规定输入字段的最大值。
maxlength 规定输入字段的最大字符数。
min 规定输入字段的最小值。
pattern 规定通过其检查输入值的正则表达式。
readonly 规定输入字段为只读（无法修改）。
required 规定输入字段是必需的（必需填写）。
size 规定输入字段的宽度（以字符计）。
step 规定输入字段的合法数字间隔。
value 规定输入字段的默认值。
placeholder 规定提示文字
required 如果设置，则规定在提交表单之前必须填写
</code></pre>
<p><a name="8xomA"></a></p>
<h4 id="ckl686"><a name="ckl686" class="reference-link"></a><span class="header-link octicon octicon-link"></span>属性可以有的值</h4><p>下面的为html5新加的值</p>
<pre><code class="lang-html"><input type="date"> 日期输入框
<input type="color"> 颜色选择框
range
<input type="range" name="points" min="0" max="10">
number
<input type="number" name="points" min="0" max="100" step="10" value="30"> 数字输入框
<input type="month"> 月份输入框
<input type="week"> 周输入框
<input type="time"> 时间输入框
datetime
datetime-local
<input type="email"> 邮件输入框
<input type="search"> 搜索框
<input type="tel"> 电话输入框
<input type="url"> 链接输入框
</code></pre>
<p><a name="e3pA8"></a></p>
<h3 id="1rzolf"><a name="1rzolf" class="reference-link"></a><span class="header-link octicon octicon-link"></span>文件路径</h3><p><a name="u4Ecv"></a></p>
<h4 id="9uxn3j"><a name="9uxn3j" class="reference-link"></a><span class="header-link octicon octicon-link"></span>相对文件路径</h4><p>相对路径：指向了相对于当前页面的文件<br />尽量使用相对路径</p>
<pre><code class="lang-html"><img src="picture.jpg">picture.jpg 位于与当前网页相同的文件夹
<img src="images/picture.jpg">picture.jpg 位于当前文件夹的 images 文件夹中
<img src="/images/picture.jpg">picture.jpg 当前站点根目录的 images 文件夹中
<img src="../picture.jpg">picture.jpg 位于当前文件夹的上一级文件夹中
</code></pre>
<p><a name="huYUW"></a></p>
<h4 id="aba4az"><a name="aba4az" class="reference-link"></a><span class="header-link octicon octicon-link"></span>绝对文件路径</h4><p>指向一个因特网文件的完整 URL</p>
<pre><code class="lang-html"><img src="https://www.w3school.com.cn/images/picture.jpg" alt="flower">
</code></pre>
<p><a name="VqKgh"></a></p>
<h3 id="argrx"><a name="argrx" class="reference-link"></a><span class="header-link octicon octicon-link"></span>其他</h3><p><a name="H6sDd"></a></p>
<h4 id="dz5p1t"><a name="dz5p1t" class="reference-link"></a><span class="header-link octicon octicon-link"></span>框架</h4><blockquote>
<p>框架结构标签（<frameset>）定义如何将窗口分割为框架
每个 frameset 定义了一系列行<strong>或</strong>列
rows/columns 的值规定了每行或每列占据屏幕的面积</p>
</blockquote>
<pre><code class="lang-html"><frameset>
<frame>定义放在每个框架中的 HTML 文档
</code></pre>
<p><a name="O0E2N"></a></p>
<h4 id="dlu80"><a name="dlu80" class="reference-link"></a><span class="header-link octicon octicon-link"></span>内联框架</h4><pre><code class="lang-html"><iframe src="URL"></iframe>
设置高度和宽度<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
删除边框<iframe src="demo_iframe.htm" frameborder="0"></iframe>
</code></pre>
<p><a name="kvw7B"></a></p>
<h4 id="ai1p12"><a name="ai1p12" class="reference-link"></a><span class="header-link octicon octicon-link"></span>转义符号</h4><blockquote>
<p><a rel="nofollow" href="https://www.w3school.com.cn/tags/html_ref_entities.html">转义符号参考手册</a></p>
</blockquote>
<p>字符实体：字符可能会被认为是代码，所以需要输入字符时使用相关代号替代。<br />常用：空格： </p>
<p><a name="TXwyx"></a></p>
<h4 id="4u2gzu"><a name="4u2gzu" class="reference-link"></a><span class="header-link octicon octicon-link"></span>计算机代码</h4><pre><code class="lang-html"><kbd>定义键盘输入</kbd>
<samp>定义计算机输出示例</samp>
<code>代码格式</code>不保留多余的空格和拆行，如果需要则在 code 中使用<pre>
<pre>保留空格和拆行</pre>
<var></var>定义数学变量
</code></pre>
<p><a name="ZPLmA"></a></p>
<h2 id="5io7mg"><a name="5io7mg" class="reference-link"></a><span class="header-link octicon octicon-link"></span>XHTML</h2><p>XHTML 是更严谨纯净的 HTML。<br />XHTML 元素都必须被正确地嵌套，XHTML 必须拥有良好的结构，所有的标签必须小写，并且所有的 XHTML 元素必须被关闭。<br />所有的 XHTML 文档必须拥有 DOCTYPE 声明，并且 html、head、title 和 body 元素必须存在。并且必须使用 <html> 中的 xmlns 属性为文档规定 xml 命名空间。<br />
<a name="aqYj9"></a></p>
<h3 id="cq9042"><a name="cq9042" class="reference-link"></a><span class="header-link octicon octicon-link"></span>如何从 HTML 转换到 XHTML</h3><ol>
<li>向每张页面的第一行添加 XHTML <!DOCTYPE></li><li>向每张页面的 html 元素添加 xmlns 属性</li><li>把所有元素名改为小写</li><li>关闭所有空元素</li><li>把所有属性名改为小写</li><li>为所有属性值加引号
<a name="y4gFt"></a><h3 id="5adtti"><a name="5adtti" class="reference-link"></a><span class="header-link octicon octicon-link"></span><br /></h3><a name="60qnW"></a><h3 id="23sg3r"><a name="23sg3r" class="reference-link"></a><span class="header-link octicon octicon-link"></span>XHTML 语法规则</h3></li></ol>
<ul>
<li>属性名称必须小写</li><li>属性值必须加引号</li><li>属性不能简写</li><li>用 Id 属性代替 name 属性</li><li>XHTML DTD</li></ul>
<p>！你应该在 “/“ 符号前添加一个额外的空格，以使你的 XHTML 与当今的浏览器相兼容<br />如果在某元素中使用 lang 属性，就必须添加额外的 xml:lang<br /><div lang="no" xml:lang="no">Heia Norge!</div>
<a name="UR9Tg"></a></p>
<h3 id="ayerwb"><a name="ayerwb" class="reference-link"></a><span class="header-link octicon octicon-link"></span><br /></h3><p><a name="MDLNx"></a></p>
<h3 id="2mgxc0"><a name="2mgxc0" class="reference-link"></a><span class="header-link octicon octicon-link"></span>XHTML 最小模版</h3><pre><code class="lang-html"><!DOCTYPE Doctype goes here>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title goes here</title>
</head>
<body>
</body>
</html>
</code></pre>
<p><a name="YXNnG"></a></p>
<h3 id="1kjjgi"><a name="1kjjgi" class="reference-link"></a><span class="header-link octicon octicon-link"></span>XHTML 文档类型（DTD）</h3><ul>
<li>STRICT（严格类型）<ul>
<li>在此情况下使用：需要干净的标记，避免表现上的混乱。请与层叠样式表配合使用。</li><li>严格 DTD 包含没有被反对使用的或不出现在框架结构中的元素和属性。</li></ul>
</li><li>TRANSITIONAL（过渡类型）<ul>
<li>在此情况下使用：当需要利用 HTML 在表现上的特性时，并且当需要为那些不支持层叠样式表的浏览器编写 XHTML 时。</li><li>过渡 DTD 包含严格 DTD 中的一切，外加那些不赞成使用的元素和属性。</li></ul>
</li><li>FRAMESET（框架类型）<ul>
<li>在此的情况下使用：需要使用 HTML 框架将浏览器窗口分割为两部分或更多框架时。</li><li>框架 DTD 包含过渡 DTD 中的一切，外加框架。</li></ul>
</li></ul>
<p><a name="rV2fE"></a></p>
<h2 id="9m5t35"><a name="9m5t35" class="reference-link"></a><span class="header-link octicon octicon-link"></span>XML</h2><p><a name="GVW6v"></a></p>
<h3 id="fcrax8"><a name="fcrax8" class="reference-link"></a><span class="header-link octicon octicon-link"></span>XHTML 模块化</h3><p>XML 被设计用来传输和存储数据。<br />HTML 被设计用来显示数据。<br />
<a name="nLdkk"></a></p>
<h3 id="66l3ym"><a name="66l3ym" class="reference-link"></a><span class="header-link octicon octicon-link"></span>XHTML 结构化</h3><p>我们只是希望展示文档结构和可视表达是两个完全不同的事物，并且结构化元素应被用来转换文本，而不是强加显示效果。
<a name="RhdKM"></a></p>
<h3 id="7olxhp"><a name="7olxhp" class="reference-link"></a><span class="header-link octicon octicon-link"></span><br /></h3><p><a name="pLtag"></a></p>
<h2 id="dqhljs"><a name="dqhljs" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML5</h2><blockquote>
<p>HTML5 是最新的 HTML 标准。
HTML5 是专门为承载丰富的 web 内容而设计的，并且无需额外插件。
HTML5 拥有新的语义、图形以及多媒体元素。
HTML5 提供的新元素和新的 API 简化了 web 应用程序的搭建。
HTML5 是跨平台的，被设计为在不同类型的硬件（PC、平板、手机、电视机等等）之上运行。</p>
</blockquote>
<p>HTML5 的新特性</p>
<ul>
<li>新的语义元素，比如 <header>, <footer>, <article>, and <section>。</li><li>新的表单控件，比如数字、日期、时间、日历和滑块。</li><li>强大的图像支持（借由 <canvas> 和 <svg>）</li><li>强大的多媒体支持（借由 <video> 和 <audio>）</li><li>强大的新 API，比如用本地存储取代 cookie。<pre><code class="lang-html"><article> 定义文档内的文章。
<aside> 定义页面内容之外的内容。
<bdi> 定义与其他文本不同的文本方向。
<details> 定义用户可查看或隐藏的额外细节。
<dialog> 定义对话框或窗口。
<figcaption> 定义 <figure> 元素的标题。
<figure> 定义自包含内容，比如图示、图表、照片、代码清单等等。
<footer> 定义文档或节的页脚。
<header> 定义文档或节的页眉。
<main> 定义文档的主内容。
<mark> 定义重要或强调的内容。
<menuitem> 定义用户能够从弹出菜单调用的命令/菜单项目。
<meter> 定义已知范围（尺度）内的标量测量。
<nav> 定义文档内的导航链接。
<progress> 定义任务进度。
<rp> 定义在不支持 ruby 注释的浏览器中显示什么。
<rt> 定义关于字符的解释/发音（用于东亚字体）。
<ruby> 定义 ruby 注释（用于东亚字体）。
<section> 定义文档中的节。
<summary> 定义 <details> 元素的可见标题。
<time> 定义日期/时间。
<wbr> 定义可能的折行（line-break）。
</code></pre>
</li></ul>
<p>语义元素</p>
<pre><code class="lang-html"><section> 元素定义文档中的节</section>
<article> 元素规定独立的自包含内容。
<header> 元素为文档或节规定页眉。
<footer> 元素为文档或节规定页脚。
<nav> 元素定义导航链接集合。
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
<aside> 元素页面主内容之外的某些内容（比如侧栏）。
<figure> 和 <figcaption> 元素
<figure>
<img src="pic_mountain.jpg" alt="The Pulpit Rock" width="304" height="228">
<figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption>
</figure>
<img> 元素定义图像，<figcaption> 元素定义标题。
</code></pre>
<p><a name="HE7cu"></a></p>
<h3 id="8zcvwg"><a name="8zcvwg" class="reference-link"></a><span class="header-link octicon octicon-link"></span> </h3><p><a name="W5UIQ"></a></p>
<h3 id="1ekj3r"><a name="1ekj3r" class="reference-link"></a><span class="header-link octicon octicon-link"></span><br /></h3><p> <br />
<a name="ohmxT"></a></p>
<h1 id="lahsa"><a name="lahsa" class="reference-link"></a><span class="header-link octicon octicon-link"></span><br /></h1>
