1.认识HTML5

1. HTML5是下一代的HTML。
2. HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。
3. HTML5 中的一些有趣的新特性：
   • 用于绘画的 canvas 元素
   • 用于媒介回放的 video 和 audio 元素
   • 对本地离线存储的更好的支持
   • 新的特殊内容元素，比如 article、footer、header、nav、section
   • 新的表单控件，比如 calendar、date、time、email、url、search

2.新增的常用语义化元素

在HTML 5出来之前，我们用div来表示页面章节，但是这些div都没有实际意义。（即使我们用css样式的id和class形容这块内容的意义）。这些标签只是我们提供给浏览器的指令，只是定义一个网页的某些部分。但现在，那些之前没“意义”的标签因为因为html5的出现消失了，这就是我们平时说的“语义”。

1. header
   header 元素代表“网页”或“section”的页眉。
2. footer
   footer元素代表“网页”或“section”的页脚，通常含有该节的一些基本信息，譬如：作者，相关文档链接，版权资料。如果footer元素包含了整个节，那么它们就代表附录，索引，提拔，许可协议，标签，类别等一些其他类似信息。
3. nav
   nav元素代表页面的导航链接区域。用于定义页面的主要导航部分。
4. aside
   aside元素被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的相关资料、标签、名次解释等。（特殊的section）
5. section
   section元素代表文档中的“节”或“段”，“段”可以是指一篇文章里按照主题的分段；“节”可以是指一个页面里的分组。
6. article
   article元素最容易跟section和div容易混淆，其实article代表一个在文档，页面或者网站中自成一体的内容，其目的是为了让开发者独立开发或重用。譬如论坛的帖子，博客上的文章，一篇用户的评论，一个互动的widget小工具。（特殊的section）
7. 其他结构元素标签
   HTML5节元素标签包括body article nav aside section header footer，还有h1-h6 address。

• hgroup元素代表“网页”或“section”的标题，当元素有多个层级时，该元素可以将h1到h6元素放在其内，譬如文章的主标题和副标题的组合
• address代表区块容器，必须是作为联系信息出现，邮编地址、邮件地址等等,一般出现在footer。
• h1-h6因为section和article的出现，h1-h6定义也发生了变化，允许一张页面出现多个h1

3.音频与视频元素及其属性

音频：audio 视频：video

1. 方法
   • addTextTrack()
     向视频/音频添加文本轨道
   • canPlayType()
     检测浏览器是否能播放指定的音频/视频类型
   • load()
     重新加载音频/视频元素
   • play()
     开始播放音频/视频
   • pause()
     暂停当前播放的音频/视频
2. 属性
   • | audioTracks | 返回表示可用音轨的 AudioTrackList 对象 |
   • | autoplay | 设置或返回是否在加载完成后随即播放音频/视频 |
   • | buffered | 返回表示音频/视频已缓冲部分的 TimeRanges 对象 |
   • | controller | 返回表示音频/视频当前媒体控制器的 MediaController 对象 |
   • | controls | 设置或返回音频/视频是否显示控件（比如播放/暂停等） |
   • | crossOrigin | 设置或返回音频/视频的 CORS 设置 |
   • | currentSrc | 返回当前音频/视频的 URL |
   • | currentTime | 设置或返回音频/视频中的当前播放位置（以秒计） |
   • | defaultMuted | 设置或返回音频/视频默认是否静音 |
   • | defaultPlaybackRate | 设置或返回音频/视频的默认播放速度 |
   • | duration | 返回当前音频/视频的长度（以秒计） |
   • | ended | 返回音频/视频的播放是否已结束 |
   • | error | 返回表示音频/视频错误状态的 MediaError 对象 |
   • | loop | 设置或返回音频/视频是否应在结束时重新播放 |
   • | mediaGroup | 设置或返回音频/视频所属的组合（用于连接多个音频/视频元素） |
   • | muted | 设置或返回音频/视频是否静音 |
   • | networkState | 返回音频/视频的当前网络状态 |
   • | paused | 设置或返回音频/视频是否暂停 |
   • | playbackRate | 设置或返回音频/视频播放的速度 |
   • | played | 返回表示音频/视频已播放部分的 TimeRanges 对象 |
   • | preload | 设置或返回音频/视频是否应该在页面加载后进行加载 |
   • | readyState | 返回音频/视频当前的就绪状态 |
   • | seekable | 返回表示音频/视频可寻址部分的 TimeRanges 对象 |
   • | seeking | 返回用户是否正在音频/视频中进行查找 |
   • | src | 设置或返回音频/视频元素的当前来源 |
   • | startDate | 返回表示当前时间偏移的 Date 对象 |
   • | textTracks | 返回表示可用文本轨道的 TextTrackList 对象 |
   • | videoTracks | 返回表示可用视频轨道的 VideoTrackList 对象 |
   • | volume | 设置或返回音频/视频的音量 |
3. 事件

4.新增表单类型

1. email
   email 类型用于应该包含 e-mail 地址的输入域。
   在提交表单时，会自动验证 email 域的值。
2. url
   url 类型用于应该包含 URL 地址的输入域。
   在提交表单时，会自动验证 url 域的值。
3. number
   number 类型用于应该包含数值的输入域。
   您还能够设定对所接受的数字的限定：

4. range
   range 类型用于应该包含一定范围内数字值的输入域。
   range 类型显示为滑动条。
   您还能够设定对所接受的数字的限定：

5. Date pickers (date, month, week, time, datetime, datetime-local)
   HTML5 拥有多个可供选取日期和时间的新输入类型：

date - 选取日、月、年
month - 选取月、年
week - 选取周和年
time - 选取时间（小时和分钟）
datetime - 选取时间、日、月、年（UTC 时间）
datetime-local - 选取时间、日、月、年（本地时间）

6. search
   search 类型用于搜索域，比如站点搜索或 Google 搜索。
   search 域显示为常规的文本域。
7. color
   颜色选择

5.Web 存储

在客户端存储数据
HTML5 提供了两种在客户端存储数据的新方法：
* localStorage - 没有时间限制的数据存储,第二天、第二周或下一年之后，数据依然可用。
* sessionStorage - 针对一个 session 的数据存储当用户关闭浏览器窗口后，数据会被删除。

之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高

在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。

对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。

HTML5 使用 JavaScript 来存储和访问数据。

6.Canvas 画布 和 SVG

1. Canvas 画布

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。

画布是一个矩形区域，您可以控制其每一像素。

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

• 创建 Canvas 元素

向 HTML5 页面添加 canvas 元素。
规定元素的 id、宽度和高度：

<canvas id="myCanvas" width="200" height="100"></canvas>

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成

2. SVG

• 什么是SVG？

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用于定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
SVG 是万维网联盟的标准
SVG 的优势
与其他图像格式相比（比如 JPEG 和 GIF），使用

• SVG 的优势在于：

SVG 图像可通过文本编辑器来创建和修改
SVG 图像可被搜索、索引、脚本化或压缩
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大

• 将 SVG 元素直接嵌入 HTML 页面中：

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

</body>
</html>

3. Canvas 画布 和 SVG的比较

• Canvas

依赖分辨率
不支持事件处理器
弱的文本渲染能力
能够以 .png 或 .jpg 格式保存结果图像
最适合图像密集型的游戏，其中的许多对象会被频繁重绘

• SVG

不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序（比如谷歌地图）
复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
不适合游戏应用