HTML5简介
- HTML5是HTML最新的修订版本，2014年10月由W3C（万维网联盟）完成标准制定。
- HTML5是W3C与WHATWG（指Web Hypertext Application Technology Working Group）合作的结果。WHATWG致力于web表单和应用程序，而W3C专注于XHTML2.0。在2006年，双方决定进行合作，来创建一个新版本的HTML，也就是现在的HTML5。
- HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。
- HTML 4.01的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。
- 现在HTML5仍处于完善之中，不过，大部分现代浏览器已经具备了某些H5支持。
- HTML5真正广泛使用是从2016年开始的。
- HTML5 中的一些新特性：
- 用于绘画的 canvas 元素；
- 用于媒介回放的 video 和 audio 元素；
- 对本地离线存储的更好的支持；
- 新的特殊内容元素，比如 article、footer、header、nav、section；
- 新的表单控件，比如 calendar、date、time、email、url、search；
HTML5新增标签
article
代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。
<article>
<h1>Internet Explorer 9</h1>
<p> Windows Internet Explorer 9(缩写为 IE9 )在2011年3月14日21:00 发布。</p>
</article>
section
- 一个section元素通常由内容及其标题组成。用于对网站或应用程序中页面上的内容进行分块。
- section元素并非一个普通的容器元素；当一个内容需要被直接定义样式或通过脚本定义行为时，推荐使用div而非section元素。section元素中的内容可以单独存储到数据库中或输出到word文档中。
- section元素的作用是对页面上的内容进行分块，或者说对文章进行分段，请不要与有着自己的完整的、独立的内容的article元素混淆。
- section 使用禁忌：
- 不要将section元素用作设置样式的页面容器，那是div元素的工作。
- 如果article元素、aside元素或nav元素更符合使用条件，不要使用section元素。
- 不要为没有标题的内容区块使用section元素。
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is....</p>
</section>
aside
通常显示成侧边栏(sidebar)或一些插入补充内容。通常用来在侧边栏显示一些定义，比如目录、索引、术语表等；也可以用来显示相关的广告宣传，作者的介绍，Web应用，相关链接，当前页内容简介等。
<p>My family and I visited The Epcot center this summer.</p>
<aside>
<h4>Epcot Center</h4>
<p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>
main
标签规定文档的主要内容。元素中的内容对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容，比如侧栏、导航栏、版权信息、站点标志或搜索表单。
注意：在一个文档中，main元素是唯一的，所以不能出现一个以上的 main>元素。main元素不能是article、aside、footer、header 或 nav的后代。
<main>
<h1>Web 浏览器</h1>
<p>Google Chrome、Firefox 以及 Internet Explorer 是目前最流行的浏览器。</p>
<article>
<h1>Google Chrome 浏览器</h1>
<p>Google Chrome 浏览器是由 Google 开发的一款免费的开源 web 浏览器，于 2008 年发布。</p>
</article>
<article>
<h1>Internet Explorer 浏览器</h1>
<p>Internet Explorer 浏览器由微软开发的一款免费的 web 浏览器，发布于 1995 年。</p>
</article>
</main>
header
定义文档或者文档的一部分区域的页眉。header元素应该作为介绍内容或者导航链接栏的容器。在一个文档中，可以定义多个 header元素。
注意：header标签不能被放在 footer、address或者另一个 header元素内部。
<!--定义文章的页眉-->
<article>
<header>
<h1>Internet Explorer 9</h1>
<p><time pubdate datetime="2011-03-15"></time></p>
</header>
<p> Windows Internet Explorer 9(缩写为 IE9 )是在2011年3月14日21:00发布的</p>
</article>
footer
定义文档或者文档的一部分区域的页脚。footer元素应该包含它所包含的元素的信息。页脚通常包含文档创作者的姓名、文档的版权信息、使用条款的链接、联系信息等等。在一个文档中，您可以定义多个 footer元素。
<footer>
<p>Posted by: Hege Refsnes</p>
<p><time pubdate datetime="2012-03-01"></time></p>
</footer>
nav
定义导航链接的部分。并不是所有的 HTML 文档都要使用到nav元素。nav元素只是作为标注一个导航链接的区域。
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
command
表示用户能够调用的命令，可以定义命令按钮，比如单选按钮、复选框或按钮。
当使用 menu元素时，command 元素将作为菜单或者工具栏的一部分显示出来。但是，用 command 规定键盘快捷键时，command元素能被放置在页面的任何位置，但元素不可见。
注意：目前，主流浏览器都不支持command标签。只有 IE 9 支持command标签。
<menu>
<command type="command" label="Save" onclick="save()">Save</command>
</menu>
details & summary
details标签用于描述文档或文档某个部分的细节，与summary标签配合使用可以为 details 定义标题。标题是可见的，用户点击标题时，会显示出 details。
details标签拥有 open 属性，details元素默认是隐藏的，设置 open 属性后，可以定义details元素默认可见，与checkbox定义checked属性是一个道理。
注意：目前，只有 Chrome 和 Safari 6 支持 details 标签。
<details>
<summary>Copyright 1999-2011.</summary>
<p> - by Refsnes Data. All Rights Reserved.</p>
<p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
</details>
<style>
ul {margin: 0;padding: 0;list-style: none;
max-height: 0;transition: .3s all;overflow: hidden;}
[open] + ul {max-height: 60px;}
</style>
<div>
<details open>
<summary>商品管理</summary>
</details>
<ul><li>商品列表</li>
<li>添加商品</li></ul>
</div>
<div>
<details open>
<summary>品牌管理</summary>
</details>
<ul><li>品牌列表</li>
<li>添加品牌</li></ul>
</div>
hgroup
hgroup元素是将标题和他的子标题进行分组的元素。hgroup元素一般会把h1-h6的元素进行分组，比如在一个内容区块的标题和他的子标题算是一组。通常情况下，文章只有一个主标题时，是不需要hgroup元素的。
<hgroup>
<h1>Welcome to my WWF</h1>
<h2>For a living planet</h2>
</hgroup>
<p>The rest of the content...</p>
figure
figure标签规定独立的流内容（图像、图表、照片、代码等等）。figure元素的内容应该与主内容相关，同时元素的位置相对于主内容是独立的。如果被删除，则不应对文档流产生影响。
<figure>
<img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
</figure>
figcaption
figcaption标签为figure元素定义标题。figcaption元素应该被置于figure元素的第一个或最后一个子元素的位置。
<figure>
<img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
<figcaption>Fig1. - A view of the pulpit rock in Norway.</figcaption>
</figure>
mark
mark标签定义带有记号的文本。在需要突出显示文本时使用。
<p>Do not forget to buy <mark>milk</mark> today.</p>
time
定义公历的时间（24 小时制）或日期，时间和时区偏移是可选的。
该元素能够以机器可读的方式对日期和时间进行编码，这样，举例说，用户代理能够把生日提醒或排定的事件添加到用户日程表中，搜索引擎也能够生成更智能的搜索结果。
<p>我们在每天早上 <time>9:00</time> 开始营业。</p>
<p>我在 <time datetime="2016-02-14">情人节</time> 有个约会。</p>
progress
定义运行中的任务进度（进程）。
<progress value="22" max="100"></progress>
meter
meter标签定义度量衡。仅用于已知最大和最小值的度量。比如：磁盘使用情况，查询结果的相关性等。
<meter value="2" min="0" max="10">2 out of 10</meter><br>
<meter value="0.6">60%</meter>
embed
embed可以用来插入各种多媒体，格式可以是 Midi、Wav、AIFF、AU、MP3等等，Netscape及新版的IE都支持。url为音频或视频文件及其路径，可以是相对路径或绝对路径。
<embed src="your.wav" autostart=true>
embed的属性列表：
| 属性 | 值 | 含义 |
|---|---|---|
| autostart | true、false | 该属性规定音频或视频文件是否在下载完之后就自动播放 |
| loop | 正整数、true、false | 该属性规定音频或视频文件是否循环及循环次数 |
| hidden | ture、no | 该属性规定控制面板是否显示，默认值为no |
| starttime | mm:ss（分：秒） | 该属性规定音频或视频文件开始播放的时间。未定义则从文件开头播放 |
| volume | 0-100之间的整数 | 该属性规定音频或视频文件的音量大小。未定义则使用系统本身的设定 |
| height | 正整数或百分数，单位为像素 | 该属性规定控制面板的高度 |
| width | 正整数或百分数，单位为像素 | 该属性规定控制面板的宽度 |
| units | pixels、en | 该属性指定高和宽的单位为pixels或en |
| controls | console、smallconsole、playbutton、pausebutton、stopbutton、volumelever | 该属性规定控制面板的外观。默认值是console，smallconsole(较小的面板)、playbutton(只显示播放按钮)、pausebutton(只显示暂停按钮)、stopbutton(只显示停止按钮)、volumelever(只显示音量调节按钮) |
| name | # | 给对象取名，以便其他对象利用 |
| title | # | 规定音频或视频文件的说明文字 |
| palette | color | color |
| align | center、left、right、top、bottom、baseline、texttop、middle、absmiddle、absbottom | 该属性规定控制面板和当前行中的对象的对齐方式，center(控制面板居中)、left(控制面板居左)、right(控制面板居右)、top(控制面板的顶部与当前行中的最高对象的顶部对齐)、bottom(控制面板的底部与当前行中的对象的基线对齐)、baseline(控制面板的底部与文本的基线对齐)、texttop(控制面板的顶部与当前行中的最高的文字顶部对齐)、middle(控制面板的中间与当前行的基线对齐)、absmiddle(控制面板的中间与当前文本或对象的中间对齐)、absbottom(控制面板的底部与文字的底部对齐 |
bdi
bdi 指的是 bidi 隔离（Bi-directional Isolation）。bdi 标签允许您设置一段文本，使其脱离其父元素的文本方向设置。在发布用户评论或其他您无法完全控制的内容时，该标签很有用。
注意： 目前只有 Firefox 和 Chrome 浏览器支持 bdi 标签。
<div>Username <bdi dir="ltr">Bill</bdi>:80 points</div>
<div>Username <bdi dir="rtl">Steve</bdi>: 78 points</div>
ruby & rp & rb & rt
ruby 标签定义 ruby 注释（中文注音或字符）。在东亚使用，显示的是东亚字符的发音。
将 ruby 标签与 rt 和 rp 标签一起使用：
ruby 元素由一个或多个需要解释/发音的字符和一个提供该信息的 rt 元素组成，还包括可选的 rp 元素，定义当浏览器不支持 “ruby” 元素时显示的内容。
<ruby>
汉 <rp>(</rp><rt>Han</rt><rp>)</rp>
字 <rp>(</rp><rt>zi</rt><rp>)</rp>
</ruby>
HTML5表单
input
input的新增属性：
| 属性 | 含义 |
|---|---|
| autocomplete | 属性规定 form 或 input 域应该拥有自动完成功能 |
| autofocus | 属性规定 form 或 input 域在页面加载时，自动获得焦点 |
| required | 属性规定必须在提交之前填写输入域（不能为空） |
| placeholder | 属性提供一种提示（hint），描述输入域所期待的值 |
| pattern | 属性规定用正则表达式验证 input 域的值 |
| multiple | 属性规定输入域中可选择多个值 |
| novalidate | 属性规定在提交表单时不应该验证 form 或 input 域 |
| height、width | 属性规定用于 image 类型的 input 标签的图像高度和宽度 |
| list | 属性规定输入域的 datalist。datalist 是输入域的选项列表 |
| min、max、step | 属性用于为包含数字或日期的 input 类型规定限定（约束） |
| form | 属性规定输入域所属的一个或多个表单 |
| formaction | 重写表单的 action 属性 |
| formenctype | 重写表单的 enctype 属性 |
| formmethod | 重写表单的 method 属性 |
| formnovalidate | 重写表单的 novalidate 属性 |
| formtarget | 重写表单的 target 属性 |
<form action="demo_form.php" method="get" id="user_form">
First name:<input type="text" name="fname" />
<input type="text" name="country_code"
pattern="[A-z]{3}" title="Three letter country code" />
<input type="submit" />
</form>
Last name: <input type="text" name="lname" form="user_form" />
datalist
datalist 标签规定了input 元素可能的选项列表。被用来在为input元素提供"自动完成"的特性。用户能看到一个下拉列表，里边的选项是预先定义好的，将作为用户的输入数据。使用 input 元素的 list 属性来绑定 datalist 元素。
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
output
output 标签作为计算结果输出显示(比如执行脚本的输出)。
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>
HTML5全局属性
| 属性 | 含义 |
|---|---|
| contenteditable | 规定元素内容是否可编辑 |
| contextmenu | 规定元素的上下文菜单。上下文菜单在用户点击元素时显示 |
| data-* | 用于存储页面或应用程序的私有定制数据 |
| draggable | 规定元素是否可拖动 |
| dropzone | 规定在拖动被拖动数据时是否进行复制、移动或链接 |
| hidden | 隐藏元素 |
| spellcheck | 规定是否对元素进行拼写和语法检查 |
| translate | 规定是否应该翻译元素内容 |
HTML5事件
window事件
| 属性 | 值 | 描述 |
|---|---|---|
| onafterprint | script | 文档打印之后运行的脚本。 |
| onbeforeprint | script | 文档打印之前运行的脚本。 |
| onbeforeunload | script | 文档卸载之前运行的脚本。 |
| onerror | script | 在错误发生时运行的脚本。 |
| onhashchange | script | 当文档已改变时运行的脚本。 |
| onmessage | script | 在消息被触发时运行的脚本。 |
| onoffline | script | 当文档离线时运行的脚本。判断是否有网络 |
| ononline | script | 当文档上线时运行的脚本。 |
| onpagehide | script | 当窗口隐藏时运行的脚本。 |
| onpageshow | script | 当窗口成为可见时运行的脚本。 |
| onpopstate | script | 当窗口历史记录改变时运行的脚本。 |
| onredo | script | 当文档执行撤销（redo）时运行的脚本。 |
| onstorage | script | 在 Web Storage 区域更新后运行的脚本。 |
| onundo | script | 在文档执行 undo 时运行的脚本。 |
form事件
| 属性 | 值 | 描述 |
|---|---|---|
| oncontextmenu | script | 当上下文菜单被触发时运行的脚本。 |
| onformchange | script | 在表单改变时运行的脚本。 |
| onforminput | script | 当表单获得用户输入时运行的脚本。 |
| oninvalid | script | 当元素无效时运行的脚本。 |
mouse事件
| 属性 | 值 | 描述 |
|---|---|---|
| ondrag | script | 元素被拖动时运行的脚本。 |
| ondragend | script | 在拖动操作末端运行的脚本。 |
| ondragenter | script | 当元素元素已被拖动到有效拖放区域时运行的脚本。 |
| ondragleave | script | 当元素离开有效拖放目标时运行的脚本。 |
| ondragover | script | 当元素在有效拖放目标上正在被拖动时运行的脚本。 |
| ondragstart | script | 在拖动操作开端运行的脚本。 |
| ondrop | script | 当被拖元素正在被拖放时运行的脚本。 |
| onmousewheel | script | 当鼠标滚轮正在被滚动时运行的脚本。 |
| onscroll | script | 当元素滚动条被滚动时运行的脚本。 |
touch事件
| 属性 | 描述 |
|---|---|
| touchstart | 当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发 |
| touchmove | 当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动 |
| touchend | 当手指从屏幕上离开的时候触发 |
| touchcancel | 当系统停止跟踪触摸的时候触发。关于这个事件的确切出发时间，文档中并没有具体说明，咱们只能去猜测了。 |
打印出touch事件，可以看到有以下属性：
- touches，表示当前跟踪的触摸操作的touch对象的数组，下面的TouchList 是多点操作，里面有坐标，可以计算坐标差值。
- timeStamp，表示当前页面到触发事件的毫秒数，可以计算时间差值。
以上两个值可以用来判断用户的缩放行为。
