HTML5-基础
一、基本格式
<!DOCTYPE html> //文档类型声明 <html lang="zh-cn"> //表示 HTML 文档开始 <head> //包含文档元数据开始 <meta charset="utf-8"> //声明字符编码 <title>基本结构</title> //设置文档标题 </head> //包含文档元数据结束 <body> //表示 HTML 文档内容 <a href="http://www.baidu.com">百度</a> //一个超链接元素（标签） </body> //表示 HTML </html> //表示 HTML 文档结束
1.Doctype
文档类型声明（Document Type Declaration，也称 Doctype）。它主要告诉浏览器
所查看的文件类型。在以往的 HTML4.01 和 XHTML1.0 中，它表示具体的 HTML 版本和风格。
而如今 HTML5 不需要表示版本和风格了。
<!DOCTYPE html> //不分区大小写
2.html 元素
首先，元素就是标签的意思，html 元素即 html 标签。html 元素是文档开始和结尾的
元素。它是一个双标签，头尾呼应，包含内容。这个元素有一个属性和值：lang="zh-cn"，
表示文档采用语言为：简体中文。
<html lang="zh-cn"> //如果是英文则为 en
3.head 元素
用来包含元数据内容，元数据包括：<link>、<meta>、<noscript>、<script>、
<style>、<title>。这些内容用来浏览器提供信息，比如 link 提供 CSS 信息，script
提供 JavaScript 信息，title 提供页面标题等。
<head>...</head> //这些信息在页面不可见
4.meta 元素
这个元素用来提供关于文档的信息，起始结构有一个属性为：charset="utf8"。表示
告诉浏览器页面采用的什么编码，一般来说我们就用 utf8。当然，文件保存的时候也是
utf8，而浏览器也设置 utf8 即可正确显示中文。
<meta charset="utf-8"> //除了设置编码，还有别的
5.title 元素
这个元素很简单，顾名思义：设置浏览器左上角的标题。
<title>基本结构</title>
6.body 元素
用来包含文档内容的元素，也就是浏览器可见区域部分。所有的可见内容，都应该在这
个元素内部进行添加。
<body>...</body>
7.a 元素
一个超链接，后面会详细探讨。
<a href="http://www.baidu.com">百度</a>
二、文本元素
常用文本元素解析
1.<b> 表示关键字和产品名称
<b>HTML5</b>
解释：<b>元素实际作用就是加粗。从语义上来看，就是标记一段文字，但并不是特别强调或重要性。比如：一段文本中的某些关键字或者产品的名称。
2.<strong> 表示重要的文字
<strong>HTML5</strong>
解释：<strong>元素实际作用和<b>一样，就是加粗。从语义上来看，就是强调一段重要的文本。
3.<br> 强制换行、<wbr> 安全换行
<br>
Thisabc<wbr>dkedkslakdj<wbr>fkdlsakd is apple.
解释：在任意文本位置键入<br>都会被换行，而在英文单词过长时使用<wbr>会根据浏览器的宽度适当的裁切换行。
4.<i> 表示外文词汇或科技术语
<i>HTML5</i>
解释：<i>元素实际作用就是倾斜。从语义上来看，表示区分周围内容，并不是特别强调或重要性。
5.<em> 加以强调
<em>HTML5</em>
解释：<em>元素实际作用和<i>一样，就是倾斜；从语义上来看，表示对一段文本的强调。
6.<s> 表示不准确或校正
<s>HTML5</s>
解释：<s>元素实际作用就是删除线；从语义上来看，表示不准确的删除。
7.<del> 表示删除文字
<del>HTML5</del>
解释：<del>元素实际作用和<s>一样，就是删除线；从语义上来看，表示删除相关文字。
8.<u> 表示给文字加上下划线
<u>HTML5</u>
解释：<u>元素实际作用就是加一条下划线；从语义上来看，并不强调此段文本。
9.<ins> 添加一段文本
<ins>HTML5</ins>
解释：<ins>元素实际作用和<u>一样，加一条下划线；从语义上来看，是添加一段文本，起到强调的作用。
10.<small> 添加小号字体
<small>HTML5</small>
解释：<small>元素实际作用就是将文本放小一号。从语义上来看，用于免责声明和澄清声明。
11.<sub><sup> 添加上标和下标
<sub>5</sub>
<sup>5</sup>
解释：<sub>和<sup>元素实际作用就是数学的上标和下标。语义也是如此。
12.<code> 等表示输入和输出
<code>HTML5</code>
<var>HTML5</var>
<samp>HTML5</samp>
<kdb>HTML5</kdb>
解释：<code>表示计算机代码片段；<var>表示编程语言中的变量；<samp>表示程序或计算机的输出；<kdb>表示用户的输入。由于这属于英文范畴的，必须将 lang="en"英语才能体现效果。
13.<abbr> 表示缩写
<abbr>HTML5</abbr>
解释：<abbr>元素没有实际作用；从语义上看，是一段文本的缩写。
14.<dfn> 表示定义术语
<dfn>HTML5</dfn>
解释：<dfn>元素就是一般性的倾斜；从语义上看，表示解释一个词或短语的一段文本。
15.<q> 引用来自他处的内容
<q>HTML5</q>
解释：<q>元素实际作用就是加了一对双引号。从语义上来看，表示引用来自其他地方的内容。
16.<cite> 引用其他作品的标题
<cite>HTML5</cite>
解释：<cite>元素实际作用就是加粗。从语义上来看，表示引用其他作品的标题。
17.<ruby> 语言元素
<ruby>
饕<rp>(</rp><rt>tāo</rt><rp>)</rp>
餮<rp>(</rp><rt>tiè</rt><rp>)</rp>
</ruby>
解释：<ruby>用来为非西方语言提供支持。<rp><rt>用来帮助读者掌握表意语言文字正确发音。比如：汉语拼音在文字的上方。但目前 Firefox 还不支持此特性。
18.<bdo>设置文字方向
<bdo dir="rtl">HTML5</bdo>
解释：<bdo>必须使用属性 dir 才可以设置，一共两个值：rtl（从右到左）和 ltr（从左到右）。一般默认是 ltr。还有一个<bdi>元素也是处理方向的，由于是特殊语言的特殊效果，且主流浏览器大半不支持，忽略。
19.<mark>突出显示文本
<mark>HTML5</mark>
解释：<mark>实际作用就是加上一个黄色的背景，黑色的字；从语义上来看，与上下文相关而突出的文本，用于记号。
20.<time>表示日期和时间
<time>2015-10-10</time>
解释：<time>元素没有实际作用；从语义上来看，表示日期和时间。
21.<span>表示一般性文本
<span>HTML5</span>
解释：<span>元素没有实际作用；语义上就是表示一段文本，我们经常用它来设置 CSS等操作。
三、分组元素
为了页面的排版需要，HTML5 提供了几种语义的分组元素。
1.<p> 建立段落
<p>这是一个段落</p>
<p>这也是一个段落</p>
解释：<p>元素实际作用就是将内部包含的文本形成一个段落；而段落和段落之间保持一定量的空隙。
2.<div> 通用分组
<div>这是一个通用分组</div>
<div>这是又一个通用分组</div>
解释：<div>元素在早期的版本中非常常用，通过<div>这种一般性分组元素进行布局。而在 HTML5 中，由于语义的缘故，被其他各种文档元素所代替。和<p>段落的区别就是，两段文本的上下空隙是没有的，空隙间隔和<br>换行一样。
3.<blockquote> 引用大段他出内容
<blockquote>这是一个大段引自他出内容</blockquote>
<blockquote>这是另一个大段引自他出内容</blockquote>
解释：<blockquote>元素实际作用除了和<p>元素一样，有段落空隙的功能，还包含了首尾缩进的功能。语义上表示，大段的引用他出的内容。
4.<pre> 展现格式化内容
<pre>
#####
#####
#####
#####
#####
</pre>
解释：<pre>元素实际作用就是编辑器怎么排版的，原封不动的展现出来。当然，这种只适合简单的排版，复杂的排版就无法满足要求了。
5.<hr> 添加分隔
<hr>
解释：<hr>元素实际作用就是添加一条分割线，意图呈现上下文主题的分割。
6.<ul><li> 添加无序列表
<ul>
<li>张三</li>
<li>李四</li>
<li>王五</li>
<li>马六</li>
</ul>
解释：<ul>元素表示无序列表，而<li>元素则是内部的列表项。
7.<ol><li> 添加有序列表
<ol>
<li>张三</li>
<li>李四</li>
<li>王五</li>
<li>马六</li>
</ol>
解释：<ol>元素表示有序列表，而<li>元素则是内部的列表项。<ol>元素目前支持三属性。
ol 元素属性
start: 从第几个序列开始统计：<ol start="2">
reversed: 是否倒序排列：<ol reversed>，一半主流浏览器不支持
type: 表示列表的编号类型，值分别为：1、a、A、i、I
li 元素属性
value :强行设置某个项目的编号。<li value="7">王五</li>
8.<dl><dt><dd> 生成说明列表
<dl>
<dt>这是一份文件</dt>
<dd>这里是这份文件的详细内容 1</dd>
<dd>这里是这份文件的详细内容 2</dd>
</dl>
解释：这三个元素是一个整体，但<dt>或<dd>并非都必须出现。
9.<figure><figcaption>使用插图
<figure>
<figcaption>这是一张图</figcaption>
<img src="img.png">
</figure>
解释：这两个元素一般用于图片的布局。
四、表格元素
1.<table><tr><td> 构建基础表格
<table border="1">
<tr>
<td>张三</td>
<td>男</td>
<td>未婚</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>已婚</td>
</tr>
</table>
解释：<table>元素表示一个表格的声明，<tr>元素表示表格的一行，<td>元素表示一个单元格。默认情况下表格是没有边框的，所以，在<table>元素增加一个 border 属性，设置为 1 即可显示边框。
2.<th> 为表格添加标题单元格
<table border="1" style="width:300px;">
<tr>
<th>姓名</th>
<th>性别</th>
<th>婚姻</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>未婚</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>已婚</td>
</tr>
</table>
解释：<th>元素主要是添加标题行的单元格，实际作用就是将内部文字居中且加粗。这里使用了一个通用属性 style，主要用于 CSS 样式设置，以后会涉及到。<th><td>均属于单元格，包含两个合并属性：colspan、rowspan 等。
3.<thead> 添加表头
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>婚姻</th>
</tr>
</thead>
解释：<thead>元素就是限制和规范了表格的表头部分。尤其是以后动态生成表头，它的位置是不固定的，使用此元素可以限定在开头位置。
4.<tfoot> 添加表脚
<tfoot>
<tr>
<td colspan="3">统计：共两名</td>
</tr>
</tfoot>
解释：<tfoot>元素为表格生成表脚，限制在表格的底部。
5.<tbody> 添加表主体
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>未婚</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>已婚</td>
</tr>
</tbody>
解释：<tbody>元素主要是包含住非表头表脚的主体部分，有助于表格格式的清晰，更加有助于后续 CSS 和 JavaScript 的控制。
6.<caption> 添加表格标题
<caption>这是一个人物表</caption>
解释：<caption>元素给表格添加一个标题。
7.<colgroup> 设置列
<colgroup span="2" style="background:red;">
解释：<colgroup>元素是为了处理某个列，span 属性定义处理哪些列。1 表示第一列，2 表示前两列。如果要单独设置第二列，那么需要声明两个，先处理第一个，将列点移入第二位，再处理第二个即可。
8.<col> 更灵活的设置列
<colgroup>
<col>
<col style="background:red;" span="1">
</colgroup>
解释：<col>元素表示单独一列，一个表示一列，控制更加灵活。如果设置了 span 则，控制多列。
五、文档元素
文档元素的主要作用是划分各个不同的内容，让整个布局清晰明快。让整个布局元素具有语义，进一步替代 div
文档元素的大部分标签，是没有任何效果的，完全是为了配合语义使用，以强调它的结构性。只有在后面的章节学习 CSS，配合使用才能起到布局和样式的效果。
1.<header> 表示首部
<header>
这里部分一般是页面头部，包括：LOGO、标题、导航等内容
</header>
解释：<header>元素主要设置页面的标头部分。
2.<footer> 表示尾部
<footer>
这里是页面的尾部，一般包括：版权声明、友情链接等内容
</footer>
解释：<footer>元素主要设置页面的尾部。
3.<h1>~<h6> 添加标题
<h1>标题部分</h1>
<h4>小标题部分</h4>
解释：<h1>~<h6>实际作用就是加粗并改变字体大小。用于各种标题文档。
4.<hgroup> 组合标题
<hgroup>
<h1>标题部分</h1>
<h4>小标题部分</h4>
</hgroup>
解释：<hgroup>元素的作用就是当多个标题出现，干扰到一对或多个本身需要整合的标题，这是使用此元素包含群组。
5.<section> 文档主题
<section>
这里一般是存放文档主题内容。
</section>
解释：<section>元素的作用是定义一个文档的主题内容。
6.<nav> 添加导航
<nav>这里存放文档的导航</nav>
解释：<nav>元素给文档页面添加一个导航。
7.<article> 添加一个独立成篇的文档
<article>
<header>
<nav></nav>
</header>
<section></section>
<footer></footer>
</article>
解释：<article>元素表示独立成篇的文档，里面可以包含头、尾、主题等一系列内容。在比较大的页面中会使用到，比如一片博文的列表，每篇博文，都有自己的头、尾、主题等内容。和此相似的还有论坛的帖子、用户的评论、新闻等。
8.<aside> 生成注释栏
<aside>这是是一个注释</aside>
解释：<aside>元素专门为某一段内容进行注释使用。
9.<address> 表示文档或 article 元素的联系信息。
<address>联系信息</address>
解释：如果是在<body>元素下时，表示整个文档的联系信息。如果是在<article>元素下时，表示其下的联系信息。
10.<details> 元素生成详情区域、<summary> 元素在其内部生成说明标签
解释：由于大多数主流浏览器尚未支持，暂略。
六、表单元素
1.<form> 定义表单
<form method="post" action="http://www.haosou.com/">
<button>提交</button>
</form>
解释：<form>元素主要是定义本身是一组表单。
action： 表示表单提交的页面
method： 表示表单的请求方式：有 POST 和 GET 两种，默认 GET
enctype：表示浏览器对发送给服务器的数据所采用的编码格式。有三种：application/x-www-form-urlencoded（默认编码，不能将文件上传到服务器）、multipart/form-data（用于上传文件到服务器）、text/plain（未规范的编码，不建议使用，不同浏览器理解不同）
name： 设置表单名称，以便程序调用
target： 设置提交时的目标位置：_blank、_parent、_self、_top
autocomplete：设置浏览器记住用户输入的数据，实现自动完成表单。默认为 on 自动完成，如果不想自动完成则设置 off。
novalidate： 设置是否执行客户端数据有效性检查，后面课程讲解。
2.<input> 表示用户输入数据
<input name="user">
解释：<input>元素默认情况会出现一个单行文本框，有五个属性。
autofocus： 让光标聚焦在某个 input 元素上，让用户直接输入
disabled： 禁用 input 元素
autocomplete： 单独设置 input 元素的自动完成功能
form： 让表单外的元素和指定的表单挂钩提交
type： input 元素的类型，内容较多。
name： 定义 input 元素的名称，以便接收到相应的值
3.<label> 添加说明标签
<p><label for="user">用户名：<input id="user" name="user"></label></p>
解释：<label>元素可以关联 input，让用户体验更好。且更加容易设置 CSS 样式。
4.<fieldset> 对表单进行编组
<fieldset>...</fieldset>
解释：<fieldset>元素可以将一些表单元素组织在一起，形成一个整体。
name： 给分组定义一个名称
form： 让表单外的分组与表单挂钩
disabled： 禁用分组内的表单
5.<legend> 添加分组说明标签
<fieldset>
<legend>注册表单</legend>
</fieldset>
解释：<legend>元素给分组加上一个标题。
6.<button> 添加按钮
<button type="submit"></button>
解释：<button>元素添加一个按钮，type 属性有如下几个值：
submit： 表示按钮的作用是提交表单，默认
reset： 表示按钮的作用是重置表单
button： 表示按钮为一般性按钮，没有任何作用
对于 type 属性为 submit 时，按钮还会提供额外的属性。
form ：指定按钮关联的表单
formaction ：覆盖 form 元素的 action 属性
formenctype： 覆盖 form 元素的 enctype 属性
formmethod ：覆盖 form 元素的 method 属性
formtarget ：覆盖 form 元素的 target 属性
formnovalidate 覆盖 form 元素的 novalidate 属性
HTML5 中表单中 input 元素的 type 属性，根据不同的值来显示不同的输入框。
(1)．type 属性总汇
input 元素可以用来生成一个供用户输入数据的简单文本框。在默认的情况下，什么样的数据均可以输入。而通过不同的属性值，可以限制输入的内容：
text: 一个单行文本框，默认行为
password: 隐藏字符的密码框
search: 搜索框，在某些浏览器键入内容会出现叉标记取消
submit、reset、button: 生成一个提交按钮、重置按钮、普通按钮
number、range: 只能输入数值的框；只能输入在一个数值范围的框
checkbox、radio: 复选框，用户勾选框；单选框，只能在几个中选一个
image、color: 生成一个图片按钮，颜色代码按钮
email、tel、url: 生成一个检测电子邮件、号码、网址的文本框
date、month、time、week、datetime、datetime-local: 获取日期和时间
hidden: 生成一个隐藏控件
file: 生成一个上传控件
(2)．input 元素解析
1.type 为 为 text 值时
<input type="text">
解释：当 type 值为 text 时，呈现的就是一个可以输入任意字符的文本框，这也是默认行为。并且，还提供了一些额外的属性。
list:指定为文本框提供建议值的 datalist 元素，其值为
datalist: 元素的 id 值
maxlength: 设置文本框最大字符长度
pattern: 用于输入验证的正则表达式
placeholder: 输入字符的提示
readonly :文本框处于只读状态
disabled :文本框处于禁用状态
size: 设置文本框宽度
value: 设置文本框初始值
required: 表明用户必须输入一个值，否则无法通过输入验证
2.type 为 为 password 值时
<input type="password">
解释：当 type 值为 password 时，一般用于密码框的输入，所有的字符都会显示星号。密码框也有一些额外属性。
maxlength: 设置密码框最大字符长度
pattern: 用于输入验证的正则表达式
placeholder: 输入密码的提示
readonly: 密码框处于只读状态
disabled: 文本框处于禁用状态
size: 设置密码框宽度
value: 设置密码框初始值
required: 表明用户必须输入同一个值
3.type 为 为 search 时
<input type="search">
解释：和文本框一致，在除 Firefox 浏览器的其他现代浏览器，会显示一个叉来取消搜索内容。额外属性也和 text 一致。
4.type 为 为 number 、range 时
<input type="number">
<input type="range">
解释：只限输入数字的文本框，不同浏览器可能显示方式不同。生成一个数值范围文本框，只是样式是拖动式。额外属性如下：
list:指定为文本框提供建议值的 datalist 元素，其值为datalist 元素的 id 值
min: 设置可接受的最小值
max: 设定可接受的最大值
readonly: 设置文本框内容只读
required: 表明用户必须输入一个值，否则无法通过输入验证
step: 指定上下调节值的步长
value: 指定初始值
5.type 为 为 date 系列时
<input type="date">
<input type="month">
<input type="time">
<input type="week">
<input type="datetime">
<input type="datetime-local">
解释：实现文本框可以获取日期和时间的值，但支持的浏览器不完整。我们测试 Chrome和 Opera 支持，其他浏览器尚未支持。额外属性和 number 一致。
6.type 为 为 color 时
<input type="color">
解释：实现文本框获取颜色的功能，最新的现代浏览器测试后 IE 不支持，其余的都能显示一个颜色对话框提供选择。
7.type 为 为 checkbox 、radio 时
音乐 <input type="checkbox">
体育 <input type="checkbox">
<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女
解释：生成一个获取布尔值的复选框或固定选项的单选框。额外属性如下：属性名称 说明
checked: 设置复选框、单选框是否为勾选状态
required: 表示用户必须勾选，否则无法通过验证
value: 设置复选框、单选框勾选状态时提交的数据。默认为 on
8.type 为 为 submit 、reset 和 和 button 时
<input type="submit">
解释：生成一个按钮，三种模式：提交、重置和一般按钮，和<button>元素相同。值名称 说明
submit: 生成一个提交按钮
reset: 生成一个重置按钮
button: 生成一个普通按钮
如果是 submit 时，还提供了和<button>元素一样的额外属性：formaction、formenctype、formmethod、formtarget 和 formnovalidate。
9.type 为 为 image 时
<input type="image" src="img.png">
解释：生成一个图片按钮，点击图片就实现提交功能，并且传送了分区响应数据。图片按钮也提供了一些额外属性。
src: 指定要显示图像的 URL
alt: 提供图片的文字说明
width: 图像的长度
height: 图像的高度
提交额外属性
formaction、formenctype、formmethod、formtarget和 formnovalidate。
10.type 为 为 email 、tel 、url 时
<input type="email">
<input type="tel">
<input type="url">
解释：email 为电子邮件格式、tel 为电话格式、url 为网址格式。额外属性和 text一致。但对于这几种类型，浏览器支持是不同的。email 支持比较好，现在浏览器都支持格式验证；tel 基本不支持；url 支持一般，部分浏览器只要检测到 http://就能通过。
11.type 为 为 hidden 时
<input type="hidden">
解释：生成一个隐藏控件，一般用于表单提交时关联主键 ID 提交，而这个数据作为隐藏存在。
12.type 为 为 file 时
<input type="file">
解释：生成一个文件上传控件，用于文件的上传。额外提供了一些属性：
accept: 指定接受的 MIME 类型
required: 表明用户必须提供一个值，否则无法通过验证
表单元素还剩下几个元素没有讲解，包括下拉框列表 select、多行文本框 textarea、和 output 计算结果元素。
select 生成一个下拉列表进行选择
optgroup 对 select 元素进行编组
option select 元素中的项目
textarea 生成一个多行文本框
output 表示计算结果
1. 生成下拉列表
<select name="fruit">
<option value="1">苹果</option>
<option value="2">橘子</option>
<option value="3">香蕉</option>
</select>
解释：<select>下拉列表元素至少包含一个<option>子元素，才能形成有效的选项列
表。<select>元素包含两个子元素<option>项目元素和<optgroup>分组元素，还包含了
一些额外属性。
name 设定提交时的名称
disabled 将下拉列表禁用
form 将表单外的下拉列表与某个表单挂钩
size 设置下拉列表的高度
multiple 设置是否可以多选
autofocus 获取焦点
required 选择验证，设置后必须选择才能通过
2. 多行文本框
<textarea name="content">请留下您的建议！ </textarea>
解释：生成一个可变更大小的多行文本框。属性如下：属性名称 说明
name 设定提交时的名称
form 将表单外的多行文本框与某个表单挂钩
readonly 设置多行文本框只读
disabled 将多行文本框禁用
maxlength 设置最大可输入的字符长度
autofocus 获取焦点
placeholder 设置输入时的提示信息
rows 设置行数
cols 设置列数
wrap 设置是否插入换行符，有 soft 和 hard 两种
required 设置必须输入值，否则无法通过验证
3.计算结果
<form oninput="res.value = num1.valueAsNumber * num2.valueAsNumber">
<input type="number" id="num1"> x <input type="number" id="num2">
<output for="num1 num2" name="res">
</form>
解释：output 就是计算两个文本框之间的值，其实就是内嵌了 JavaScript 功能。
4、输入验证
HTML5 对表单提供了输入验证检查方式，但这种验证还是比较简陋的，并且不同的浏览器支持的成熟度还不同。在大部分情况下，可能还是要借助 前端库来实现丰富的
验证功能和显示效果。
//必须填写一个值
<input type="text" required>
//限定在某一个范围内
<input type="number" min="10" max="100">
//使用正则表达式
<input type="text" placeholder="请输入区号+座机" required
pattern="^[\d]{2,4}\-[\d]{6,8}$">
//禁止表单验证
<form action="http://li.cc" novalidate>
七、全局属性
实体：HTML 实体就是将有特殊意义的字符通过实体代码显示出来。
| 显示结果 | 描述 | 实体名称 | 实体编号 |
|---|---|---|---|
| 空格 | |   | |
| < | 小于号 | < | < |
| > | 大于号 | > | > |
| & | 和号 | & | & |
| " | 引号 | " | " |
| ' | 撇号 | ' (IE不支持) | ' |
| ￠ | 分（cent） | ¢ | ¢ |
| £ | 镑（pound） | £ | £ |
| ¥ | 元（yen） | ¥ | ¥ |
| € | 欧元（euro） | € | € |
| § | 小节 | § | § |
| © | 版权（copyright） | © | © |
| ® | 注册商标 | ® | ® |
| ™ | 商标 | ™ | ™ |
| × | 乘号 | × | × |
| ÷ | 除号 | ÷ | ÷ |
元数据：<meta>元素可以定义文档中的各种元数据，而且一个 HTML 页面可以包含多个<meta>元素。
1、指定名/值元数据对
<meta name="author" content="bnbbs"> <meta name="description" content="这是一个 HTML5 页面"> <meta name="keywords" content="html5,css3,响应式"> <meta name="generator" content="sublime text 3">
author： 当前页面的作者
description： 当前页面的描述
keywords ：当前页面的关键字
generator： 当前页面的编码工具
2、声明字符编码
<meta charset="utf-8">
3、模拟 HTTP 标头字段
//5 秒跳转到指定 URL <meta http-equiv="refresh" content="5;http://li.cc"> //另一种声明字符编码 <meta http-equiv="content-type" content="text/html charset=utf-8">
全局属性：全局属性是所有元素共有的行为，HTML5 还提供了一些其他的全局属性。
1.id 属性
<p id="abc">段落</p>
解释：id 属性给元素分配一个唯一标识符。这种标识符通常用来给 CSS 和 JavaScript调用选择元素。一个页面只能出现一次同一个 id 名称。
2.class 属性
<p class="abc">段落</p>
<p class="abc">段落</p>
<p class="abc">段落</p>
解释：class 属性用来给元素归类。通过是文档中某一个或多个元素同时设置 CSS 样式。
3.accesskey 属性
<input type="text" name="user" accesskey="n">
解释：快捷键操作，windows 下 alt+指定键，前提是浏览器 alt 并不冲突。
4.contenteditable 属性
<p contenteditable="true">我可以修改吗</p>
解释：让文本处于可编辑状态，设置 true 则可以编辑，false 则不可编辑。或者直接设置属性。
5.dir 属性
<p dir="rtl">文字到右边了</p>
解释：让文本从左到右（ltr），还是从右到左（rtl）。
6.hidden 属性
<p hidden>文字到右边了</p>
解释：隐藏元素。
7.lang 属性
<p lang="en">HTML5</p>
解释：可以局部设置语言。
8.title 属性
<p title="HTML5 教程">HTML5</p>
解释：对元素的内容进行额外的提示。
9.tabindex 属性
<input type="text" name="user" tabindex="2">
<input type="text" name="user" tabindex="1">
解释：表单中按下 tab 键，实现获取焦点的顺序。如果是-1，则不会被选中。
10.style 属性
<p style="color:red;">CSS 样式</p>
解释：设置元素行内 CSS 样式。
