1.HTML5新加特性
HTML5 定义了新的语义 HTML 元素。所有都是块级元素。<article><aside><details><figcaption><figure><footer><header><main><mark><nav><section><summary><time>
<figure> 元素：将<img> 元素定义图像，<figcaption> 元素定义标题。组合在《figure》元素中。形成图片+解释的形式
必须的属性：对图像使用 alt 属性。请始终定义图像尺寸。这样做会减少闪烁。
在逗号或分号之后添加空格，是所有书写类型的通用规则。
为了提高可读性，请增加空行来分隔大型或逻辑代码块。
为了提高可读性，请增加两个空格的缩进。请勿使用 TAB。
可以自定义标签名称，并且给该标签样式。
新元素标签：
<canvas>定义使用 JavaScript 的图像绘制。
<svg>定义使用 SVG 的图像绘制。
<audio>定义声音或音乐内容。
<embed>定义外部应用程序的容器（比如插件）。
<source>定义 <video> 和 <audio> 的来源。
<track>定义 <video> 和 <audio> 的轨道。
<video>定义视频或影片内容。
2.canvas
画布是一个矩形区域，可以控制其每一像素， 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。canvas只是一块画布没有绘图能力，必须结合JS进行绘图。
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
3.SVG 可伸缩矢量图形 (Scalable Vector Graphics)
SVG 使用 XML 编写。
SVG 用于定义用于网络的基于矢量的图形，SVG 使用 XML 格式定义图形，SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失，SVG 是万维网联盟的标准。
SVG 图像可通过文本编辑器来创建和修改，SVG 图像可被搜索、索引、脚本化或压缩，SVG 是可伸缩的，SVG 图像可在任何的分辨率下被高质量地打印，SVG 可在图像质量不下降的情况下被放大。
第一行包含了 XML 声明。请注意 standalone 属性！该属性规定此 SVG 文件是否是“独立的”，或含有对外部文件的引用。standalone="no" 意味着 SVG 文档会引用一个外部文件 - 在这里，是 DTD 文件。
第二和第三行引用了这个外部的 SVG DTD。该 DTD 位于“http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”。该 DTD 位于 W3C，含有所有允许的 SVG 元素。
SVG 代码以 <svg> 元素开始，包括开启标签 <svg> 和关闭标签 </svg> 。这是根元素。width 和 height 属性可设置此 SVG 文档的宽度和高度。version 属性可定义所使用的 SVG 版本，xmlns 属性可定义 SVG 命名空间。
SVG 的 <circle> 用来创建一个圆。cx 和 cy 属性定义圆中心的 x 和 y 坐标。如果忽略这两个属性，那么圆点会被设置为 (0, 0)。r 属性定义圆的半径。stroke 和 stroke-width 属性控制如何显示形状的轮廓。我们把圆的轮廓设置为 2px 宽，黑边框。fill 属性设置形状内的颜色。我们把填充颜色设置为红色。
关闭标签的作用是关闭 SVG 元素和文档本身。
矩形 <rect>、圆形 <circle>、椭圆 <ellipse>、线 <line>、折线 <polyline>、多边形（大于等于3） <polygon>、路径 <path>
属性：fill：填充颜色 stroke：边框颜色 stroke-width：边框宽度 opacity：整体透明度（0-1） fill-opacity:填充颜色透明度 stroke--opacity：边框透明度
SVG滤镜：定义在<defs>标签中。<filter> 标签用来定义 SVG 滤镜的id，可以被多个图像使用。图形中的url 属性用来把元素链接到滤镜，当链接滤镜 id 时，必须使用 # 字符。<feGaussianBlur> 标签定义滤镜效果，fe 后缀可用于所有的滤镜，stdDeviation 属性定义模糊的程度，in="SourceGraphic" 定义整个图像创建效果
SVG 渐变：定义在<defs> 标签内。<linearGradient>定义 SVG 的线性渐变， x1、x2、y1、y2 属性可定义渐变的开始和结束位置
SVG放射性 渐变：定义在<defs> 标签内。<radialGradient> 用来定义放射性渐变。cx、cy 和 r 属性定义外圈，而 fx 和 fy 定义内圈，每种颜色通过一个 <stop> 标签来规定。offset 属性用来定义渐变的开始和结束位置。
4.canvas和SVG比较
Canvas：
依赖分辨率
不支持事件处理器
弱的文本渲染能力
能够以 .png 或 .jpg 格式保存结果图像
最适合图像密集型的游戏，其中的许多对象会被频繁重绘
SVG：
不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序（比如谷歌地图）
复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
不适合游戏应用
5.多媒体
对象<object>:支持 HTML 助手（插件）。
辅助应用程序（helper application）是可由浏览器启动的程序，也称为插件。可用于播放音频和视频（以及其他），使用 <object> 标签来加载。
使用辅助程序播放视频和音频能够允许用户来控制部分或全部播放设置。大多数辅助应用程序允许对音量设置和播放功能（比如后退、暂停、停止和播放）的手工（或程序的）控制。
插件选择：使用 QuickTime 来播放 Wave 音频，MP4 视频。使用 Windows Media Player 来播放 WMV 影片。
6.拖放
把一个元素设置为可拖放， draggable 属性设置为 true
dataTransfer.setData() 方法设置被拖动数据的数据类型和值
ondragover 事件的 event.preventDefault() 方法规定被拖动的数据能够被放置到何处
7.本地存储
HTML 本地存储提供了两个在客户端存储数据的对象：
window.localStorage - 存储没有截止日期的数据
window.sessionStorage - 针对一个 session 来存储数据（当关闭浏览器标签页时数据会丢失）
8.应用程序缓存
优势： 离线浏览 - 用户可在应用离线时使用它们
速度 - 已缓存资源加载得更快
减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源
<html> 标签中设置 manifest 属性：<html manifest="demo.appcache"> 启用应用程序缓存。
完整的 Cache Manifest 文件：
