HTML5 中的一些有趣的新特性：
- 用于绘画的 canvas 元素
- 用于媒介回放的 video 和 audio 元素
- 对本地离线存储的更好的支持
- 新的特殊内容元素，比如 article、footer、header、nav、section
- 新的表单控件，比如 calendar、date、time、email、url、search
<!DOCTYPE html>
中文网页需要使用 <meta charset="utf-8">
补充DOCTYPE文档解析类型：标准模式是根据W3C标准进行文档解析，怪异模式是根据浏览器自己的标准进行文档解析。
新的语义和结构元素
<article> 定义页面独立的内容区域。
<aside> 定义页面的侧边栏内容。
<header> 定义了文档的头部区域
<footer> 定义 section 或 document 的页脚。
<nav> 定义导航链接的部分。
<section> 定义文档中的节（section、区段）。
<time> 定义日期或时间。
<canvas> 标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API
新多媒体元素
[<audio>] | 定义音频内容 |
[<video>] | 定义视频（video 或者 movie）
[<source>]定义多媒体资源 <video> 和 <audio>
新表单元素
<datalist> 定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值
详细说明：
canva
一个画布在网页中是一个矩形框，通过 <canvas> 元素来绘制.
注意: 默认情况下 <canvas> 元素没有边框和内容。
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
注意: 标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小.提示:你可以在HTML页面中使用多个 <canvas> 元素.使用 style 属性来添加边框
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成适合图像密集型的游戏。
内联svg
SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用于定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
SVG 是一种使用 XML 描述 2D 图形的语言。
而Canvas 通过 JavaScript 来绘制 2D 图形。
适合带有大型渲染区域的应用程序（比如谷歌地图）
拖放（Drag 和 Drop）
具体代码查看 http://www.runoob.com/html/html5-draganddrop.html
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 定义一个框
<img id="drag1" src="/images/logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69"> 定义一张图片
1.设置元素为可拖放 首先，为了使元素可拖动，把 draggable 属性设置为 true ：
<img draggable="true">
2.拖动什么 - ondragstart 和 setData()
ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。
dataTransfer.setData() 方法设置被拖数据的数据类型和值
3.放到何处 - ondragover
ondragover 事件规定在何处放置被拖动的数据。
默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
这要通过调用 ondragover 事件的 event.preventDefault() 方法：
event.preventDefault()
4.进行放置 - ondrop
ondrop 属性调用了一个函数，drop(event)
调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
被拖数据是被拖元素的 id ("drag1")
把被拖元素追加到放置元素（目标元素）中
Video(视频)
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>
您的浏览器不支持Video标签。
<video> 元素支持三种视频格式： MP4, WebM, 和 Ogg:
MP4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
[<video>] 定义一个视频
[<source>] 定义多种媒体资源,比如 <video> 和<audio>
[<track>] 定义在媒体播放器文本轨迹
Audio(音频)
<audio controls> control 属性供添加播放、暂停和音量控件。
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
input类型
color 类型用在input字段主要用于选取颜色
从拾色器中选择一个颜色: <input type="color" name="favcolor">
date 类型允许你从一个日期选择器选择一个日期
生日: <input type="date" name="bday">
number 类型用于应该包含数值的输入域
数量 ( 1 到 5 之间 ): <input type="number" name="quantity" min="1" max="5">
maxlength 规定输入字段的最大字符长度 value 规定输入字段的默认值
url 类型用于应该包含 URL 地址的输入域。在提交表单时，会自动验证 url 域的值。
添加您的主页: <input type="url" name="homepage">
input 表单属性
<input> pattern 属性 描述了一个正则表达式用于验证 <input> 元素的值。
适用于以下类型的 <input> 标签: text, search, url, tel, email, 和 password.
只能包含三个字母的文本域：
<input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
<input> placeholder 属性
placeholder 属性提供一种提示（hint），描述输入域所期待的值。
适用于以下类型的 <input> 标签：text, search, url, telephone, email 以及 password
<input> required 属性 required 属性规定必须在提交之前填写输入域（不能为空）。
适用于以下类型的 <input> 标签：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file
什么是语义元素?
一个语义元素能够清楚的描述其意义给浏览器和开发者。
无语义 元素实例: <div> 和 <span> - 无需考虑内容.
语义元素实例: <form>, <table>, and <img> - 清楚的定义了它的内容.
<section> 元素 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is....</p>
</section>
<article> 元素 标签定义独立的内容。
<article>
<h1>Internet Explorer 9</h1>
<p>Windows Internet Explorer 9(缩写为 IE9 )在2011年3月14日21:00 发布。</p>
</article>
<nav> 标签定义导航链接的部分。
<nav> 元素用于定义页面的导航链接部分区域，但不是所有的链接都需要包含在 <nav> 元素中。
<nav>
<a href="/html/">HTML</a>
<a href="/css/">CSS</a>
</nav>
<aside> 标签定义页面主区域内容之外的内容（比如侧边栏）
aside 标签的内容应与主区域的内容相关.
<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>
<header>元素描述了文档的头部区域，在页面中你可以使用多个<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>
<p>Posted by: Hege Refsnes</p>
<p><time pubdate datetime="2012-03-01"></time></p>
</footer>
让这些块及元素在所有版本的浏览器中生效，你需要在样式表文件中设置一下属性
header, section, footer, aside, nav, article, figure
{
display: block;
}
代码规范
文档类型声明位于HTML文档的第一行：
<!DOCTYPE html>
推荐使用小写字母属性名:
同时使用大小写是非常不好的习惯。
你不一定要关闭所有元素 (例如 <p> 元素)，但我们建议每个元素都要添加关闭标签。
属性值我们推荐使用引号:
如果属性值含有空格需要使用引号。
图片：
通常使用 alt 属性。 在图片不能显示时，它能替代图片显示。
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
等号和空格：
推荐少用空格:<link rel="stylesheet" href="styles.css">
空行和缩进：
为每个逻辑功能块添加空行，这样更易于阅读。
缩进使用两个空格，不建议使用 TAB。
表格实例：
<table>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
<tr>
<td>A</td>
<td>Description of A</td>
</tr>
<tr>
<td>B</td>
<td>Description of B</td>
</tr>
</table>
列表：
<ol>
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ol>
注释可以写在 <!-- 和 --> 中:
样式表使用简洁的语法格式 ( type 属性不是必须的):
<link rel="stylesheet" href="styles.css">
使用简洁的语法来载入外部的脚本文件 ( type 属性不是必须的 ):
<script src="myscript.js">
