什么是HTML5
HTML5 将成为 HTML、XHTML 的新标准。
HTML 的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。
HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。
现在用HTML5来制作移动端页面（微站）、WEBAPP、HTML5游戏、带有动画效果的PC端网页
HTML4页面独特语义标签
HTML5页面独特语义标签
HTML5主打的语义标签
十个常用的新标签列表:
<header>定义页眉
<footer>定义页脚
<nav>定义导航
<article> 定义文章
<section> 定义文档中的区段
<hgroup>定义对网页标题的组
<aside> 定义文章的侧边栏
<figure> 一组媒体对象以及文字
<figcaption> 定义 figure 的标题
<time>定义日期和时间
被弃用的标签：<acronym>、<applet>、<basefont>、<big>、<center>、<dir>、<font>、<frame>、 <s>、<isindex>、<noframes>、 <frameset> 、<strike>、<tt>、<u>和<xmp>。
1.header
<header>元素定义文档的页面结构，通常是一些引导和导航信息。<header>通常要包括的有导航列表、搜索框、相关的LOGO。
<header>
<h1>这是HTML5页面的头部内容</h1>
<p>咱们这次介绍的是HTML5页面的结构</p>
</header>
他等于<divclass=“header”>
2.footer
<footer>元素定义文档或章节的末尾部分，通常包含一些章节的基本信息，
如作者信息、相关链接及版权信息。
<footer>
<p>私隐信息 | 版权信息</p>
<p>关于我们 | 联系我们</p>
</footer>
PS一个HTML页面允许有一个或多个header和footer
在footer标签里，还可以用nav、ul、div标签，往往使用ul与nav会比较的合适。
3.nav
<nav>元素定义用来构建导航，显示导航链接。
<footer>
<nav>
<ul>
<li><a href=“#”>首页信息</a></li>
<li><a href=“#”>版权信息</a></li>
</ul>
</nav>
</footer>
Nav标签不仅仅限于在footer中使用，只要是用到导航的地方都可以使用。
4.article
<article>元素表示文档、页面，用来显示一块独立的文章内容，也可以是主要内容的栏目，板块，<article>是可以相互嵌套的。
<article>
<header>
<h1>HTML5的新元素标签article讲解</h1>
</header>
<p>article元素的内容</p>
<footer>
<ul>
<li><a href=“#”>上一篇文章标题1</a></li>
<li><a href=“#”>下一篇文章内容2</a></li>
</ul>
</footer>
</article>
5.section
在HTML5中，section可以当成文章章节、页眉、页脚、等等很多种地方；
<article>
<section>
<h1>什么是safari</h1>
<p>苹果的浏览器</p>
</section>
<section>
<h1>什么是android browser</h1>
<p>Android系统下的手机浏览器</p>
</section>
</article>
6.aside
<aside>元素定义一个页面的区域，主要用来展示非主要内容，例如广告和侧边栏。
<aside>
<div></div>
</aside>
等于
<div class=“aside”></div>
Aside往往用于侧边栏的使用，特别是2分栏、3分栏的侧边栏的使用
7.hgroup
定义网页栏目或者模块之间的导航
<header>
<hgroup>
<h1>我是HTML的常用标签</h1>
<h2>我是常用标签中的hgroup元素</h2>
</hgroup>
</header>
8.figure
标签定义独立的流内容（图像、图表、照片等等）。
<figure>
<p>黄浦江上的的卢浦大桥</p>
<imgsrc="shanghai_lupu_bridge.jpg" width="350"height="234" />
</figure>
用作文档中插图的图像，带有一个标题：
<figure>
<figcaption>黄浦江上的的卢浦大桥</figcaption>
<imgsrc="shanghai_lupu_bridge.jpg" width="350"eight="234" />
</figure>
新增的表单控件
1. 选项列表
效果：输入字符后，会有下拉提示。
<input type="text"list="mydata" placeholder="请输入姓名">选项列表<br>
<datalist id="mydata">
<option label="Mr" value="Mister">
<option label="Mrs" value="Mistress">
<option label="Ms" value="Miss">
<option label="Ms" value="Biss">
<option label="Ms" value="Brown">
</datalist>
2.必填字段、正则匹配、类型匹配
效果：如何不符合要求，提交时显示错误信息
<input type=“text” required /> 必填
<input type=“text”pattern=“[0-9]{10}”> 正则
<input type=“email” /> email格式
<input type=“url” /> url格式
3. 数字字段、滑动组件、日期字段、时间字段、拾色器
<input type="number"min="1" max="10" value="1" step="2">
<inputtype="range" min="1" max="10"value="1">
<input type="date"min="2010-12-16" />
<input type="time"step="1800" />
<input type="color"value="#ed1c24" >
4. 搜索、时间控件
<input type="search"/> 手机键盘会显示“搜索”键
<input type="date" /> 可选：date | week | month | time | datetime
5、新增表单属性
<input type="text" requiredautofocus placeholder="请输入">
HTML5新增的表单控件
1. <time>
标签定义公历的时间（24 小时制）或日期,便于搜索引擎搜索。
<p>我们在每天早上<time>9:00</time> 开始营业。</p>
<p>网页修改时间： <time > 2016-05-14</time> </p>
2. <progress>
定义进度条。
<progress value="22"max="100"></progress>
3. <details>、<summary>
在标准中提到的，但依然绝大部分浏览器都不支持的标签，目前只有chrome支持（最新版本）。
<details>
<summary>Discussion</summary>
<p> 方案 </p>
<p> 方案 </p>
</details>
<details>
<summary>Discussion</summary>
<p> 方案 </p>
<p> 方案 </p>
</details>
HTML5的视频、音频播放
HTML5新增的video、source标签
<video width="320"height="240" controls="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
您的浏览器不支持video标签
</video>
HTML5支持的视频格式
HTML5新增的audio标签
<audio src="好久不见.mp3" autoplay controls>
您的浏览器不支持 audio标签。
</audio>
HTML5支持的音频格式
.wav .mp3