HTML5 中的一些有趣的新特性：
用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search
1. 结构标记
①header元素：
作用：header元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题，但也可以包含其内容，如搜索表单或相关的Logo图片。
一个网页内并未限制header元素的个数，可为每个内容区块增加一个header元素。
语法：<header></header>
<header>
<h1>页面标题</h1>
</header>
<article>
<header>
<h1>文章标题</h1>
</header>
文章内容
</article>
②footer元素：
作用：footer元素可以作为其父级元素区块或是一个根区块的脚注，通常包含其相关区块的脚注信息，如作者、相关阅读链接及版权信息等。
一个网页内并未限制footer元素的个数，可为每个内容区块增加一个footer元素。
语法：<footer></footer>
<article>
文章内容
<footer>
文章脚注
</footer>
</article>
<footer>
网页脚注
</footer>
③article元素：
作用：article元素用来表示文档、页面中独立的、完整的、可以独自被外部引用的内容，可以是一片博客或报刊中的文章、一篇论坛帖子、一段用户评论或独立的插件等。
一个article元素，除了内容部分外，通常有一个放在header元素中的标题，有时也有脚注。
语法：<article></article>
例：创建图片所示HTML文档
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<article>
<header>
<h1>Web简介</h1>
<p>发表日期:2017-11-3</p>
</header>
<p><b>web</b>是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。</p>
<footer>
<p>著作版权©百度百科所有</p>
</footer>
</article>
<article>
<header>
<h1>HTML5简介</h1>
<p>发表日期:2017-11-5</p>
</header>
<p><b>HTML5</b>是一个新的网络标准，目标在于取代现有的 HTML 4.01, XHTML 1.0 以及 DOM Level 2 HTML 标准。</p>
<footer>
<p>著作版权©百度百科所有</p>
</footer>
</article>
</body>
</html>
④section元素：
作用：section元素用来对页面上的内容进行分块。
一个section元素通常由内容和标题组成。
语法：<section></section>
例如：创建图片所示HTML文档
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<article>
<h1>葡萄</h1>
<p><b>葡萄</b>，植物类水果</p>
<section>
<h2>巨峰</h2>
<p>欧美杂交，为四倍体葡萄品种...</p>
</section>
<section>
<h2>赤霞珠</h2>
<p>本身带有黑加仑、黑莓子等香味...</p>
</section>
</article>
</body>
</html>
⑤nav元素：
作用：nav元素用来构建导航，导航元素连接到其他页面或当前页面的其他部分，不是所有的链接组都要被放进nav元素，只需要将主要的、基本的链接组放进nav元素即可
一个section元素通常由内容和标题组成。
语法：<nav></nav>
⑥aside元素：
作用：aside元素用来表示当前页面或文章的附属信息部分，可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条以及其他类似的有别于主要内容的部分。
语法：<aside></aside>
2. 新增的表单元素及属性
（1）新增的常用属性
- placeholder属性：输入型控件可通过该属性向用户显示描述性说明或者提示信息。
- autofocus属性：设置属性的表单控件，当页面打开时，该控件自动获得光标焦点，一个页面上只能有一个控件具有该属性。
注意：只有当一个页面是以使用某个控件为主要目的时，才对该控件使用autofocus属性，如搜索页面中的搜索文本框。 - list属性：为单行文本框增加的一个属性，该属性的值为datalist元素的id。
- required属性：设置该属性的输入型控件对应项必填，否则无法提交表单。
（2）input新类型：type属性
email：
url：
number：
range：
Date Pickers：
search：
color：
作用：颜色拾取控件
语法：<input type=“color” />
例：创建如图HTML文档
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form action="" style="">
<h3>form新增的Input类型演示</h3>
<p>请输入email：<input type="email" name="email"></p>
<p>请输入电话：<input type="tel" name="telephone"></p>
<p>请输入search ：<input type="search" name="search"></p>
<p>请输入网址：<input type="url" name="homepage"></p>
<p>请输入range：
<input type="range" name="age" min="10" max="50" value=13 onchange="ageDisplay.value=value">
<output id="ageDisplay">13</output>
</p>
<p>请输入number：<input type="number" name="quantity" min="1" max="50" value="20"></p>
<p>请输入日期: <input type="date" name="user_date" /></p>
<p>请输入颜色：<input type="color" name="my_color"></p>
<input type="submit">
</form>
</body>
</html>
（3）HTML5新的表单元素
datalist：
提示：option元素永远都要设置value属性。
datalist与select比较：
select下拉菜单中的选项，用户只能选择但不能自己添加。
datalist不仅可以供用户选择，用户还可以自己输入，而且datalist还可以达到模糊匹配的效果，使用很方便。
datalist与select比较效果图：
datalist与select比较代码：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>select与datalist的比较</title>
</head>
<body>
<span>datalist：</span>
<input type="text" list="addr" />
<datalist id="addr">
<option value="上海">上海</option>
<option value="北京">北京</option>
<option value="杭州">杭州</option>
</datalist>
<br />
<span>select：</span>
<select>
<option value="上海">上海</option>
<option value="北京">北京</option>
<option value="杭州">杭州</option>
</select>
</body>
</html>
keygen：
output：
3. HTML5多媒体元素
- audio元素专门用来播放网络上的音频数据。
- viedo元素专门用来播放网络上的视频或电影。
使用这两个元素，不需要使用其他任何插件。
video和audio元素具有的属性
| 属性 | 属性描述 |
|---|---|
| src | 音频或视频文件的路径 |
| width | Video独有，定义video元素的宽度 |
| height | Video独有，定义video元素的高度 |
| autoplay | 文件是否自动播放，取值为autoplay或false |
| controls | 文件是否显示控制面板，如要显示，取值为controls |
| loop | 控制文件循环播放的次数，取值true、false、具体整数 |
| poster | Video独有，当视频不可用时，可以使用该元素向用户展示一副替代的图片 |
| preload | preload属性，该属性用于指定视频或音频数据是否加载，如果使用预加载，则浏览器会预先将视频或音频数据进行缓冲，加快播放速度，有3个属性值：none、 metadata、 auto; |
目前浏览器对video元素与audio元素的支持情况
| 浏览器 | 支持情况 |
|---|---|
| Chrome | 3.0及以上版本支持 |
| Fixfox | 3.5及以上版本支持 |
| IE | 9.0及以上版本支持 |
| Opera | 10.5及以上版本支持 |
| Safari | 3.2及以上版本支持 |
例：audio元素实例演示。
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div style="background: cadetblue">
<h2>请欣赏一首励志歌曲</h2>
<audio src=" audio/黄家驹 - 海阔天空.mp3" controls="controlss" autoplay="autoplay" loop="true">
<!--多源音频文件引入格式 -->
<source src=“video/我相信.ogg ">
<source src=“video/我相信.wav">
</audio>
</div>
</body>
</html>
例：video元素用法举例，源程序代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<video width="400px" height="300px" controls=”controls” src="video/我相信.mp4">
<!--多源视频文件引入格式 -->
<source src="video/我相信.mp4" type="video/mp4"></source>
<source src="video/我相信.mp4.ogv" type="video/ogg"></source>
<source src="video/我相信.mp4.webm" type="video/webm"></source>
<!--回退策略-->
<object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">
<param name="movie" value="myvideo.swf" />
<param name="flashvars" value="autostart=true&file=myvideo.swf" />
</object>
当前浏览器不支持 video直接播放，点击这里下载视频：<a href="myvideo.webm">下载视频</a>
</video>
</body>
</html>
