HTML5新特性研究

（如需测试请确保浏览器支持HTML5，Opera 11.60：Opera_1160_int_Setup.exe）

1.canvas元素

1.1简介

HTML5绘制图形的精髓在于canvas元素，canvas元素是为了客户端矢量图形而设计的。它自己没有行为，只是把一个绘图 API 展现给客户端 ，使用JavaScript把想绘制的图形绘制到一块画布上。

canvas元素有两个属性“width”以及“height”，分别设置画布的宽度和高度，示例如下：

Show text if canvas tag is not supported

以上代码创建了一个id为myCanvas，宽度为600像素，高度为500像素的画布，开标签和闭标签之间的文本供不支持canvas标签的浏览器显示，以实现兼容。

图形绘制通过JavaScript控制，通过canvas元素对象的getContext()方法获取渲染上下文（rendering context）。

var canvas = document.getElementById("tutorial");

var context = canvas.getContext("2d");

1.2示例及代码

图画板：DrawLineTest.htm

    基本图形绘制：DrawDemo.htm

    可以在演示文档中查看源代码

2.HTML 5 视频音频播放

2.1简介

相比于传统浏览器通过插件（如Flash）来显示视频的方式，HTML5规定了一种通过 video 元素来包含视频的标准方法。

    您的浏览器不支持 video 标签。

可以用多个source标签来包含多个视频文件，浏览器根据type属性定义的流格式判断是否支持，决定是否下载。

音频播放和视频播放类似，使用audio标签。

3.HTML5本地存储

3.1简介

相对于HTML5之前只能使用cookie做简单存储，HTML5提供了两种客户端存储方式：

∙localStorage – 在本地数据库中存储，没有时间 

∙sessionStorage - 针对一个 session 的数据存储 

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

localStorage可以实现大容量数据的存储，并且没有时间，sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

在JavaScript中使用localStorage.value浏览器会自动判断value变量是否已创建，若没有，会自动创建属于该网站的value储存变量。

3.2示例及代码

本地存储示例及代码：VisiteStat.htm

4.HTML5表单新元素

4.1简介

相对于HTML5之前单调的表单元素，HTML5新增了一些元素，实现更个性化的表单输入和更规范的控制。新增的表单元素有：

∙email——包含e-mail地址的输入域，提交时会自动验证email域的值。

∙url——包含URL地址的输入域，提交时会自动验证url格式是否合法。

∙number——包含数值的输入域，能对接受的数字进行。

∙range——显示为滑动条，包含范围数字的可选值，可对接受数值做。

∙时间类型——包含

odate（选取年、月、日）

omonth（选取年、月）

oweek（选取年和周）

otime（选取小时和分钟）

odatetime（选取UTC时间）

odatetime-local（选取本地时间）

∙search——包含搜索输入域，如站点搜索。

∙color——包含颜色选择的输入域。

∙keygen——keygen元素生成密钥对，确保表单传输的可靠性。

∙datalist——规定输入域选项的列表，datalist列表利用option元素创建，也是HTML5对option元素的扩展，绑定datalist需要引用datalist的id。

∙output——用于不同类型的输出，通过JavaScript控制。

4.2示例及代码

 表单新元素示例及代码：FormDemo.htm

5.HTML5表单新属性

5.1 form新属性

∙autocomplete——规定form或input域应该拥有自动完成功能。

∙novaliddate——规定在提交表单时不应该验证 form 或 input 域。

5.2 input新属性

∙autocomplete——规定输入域应该拥有自动完成功能。

∙autofocus——规定在页面加载时，域自动地获得焦点。

∙form——规定输入域所属的一单个或多个表，实现多个form引用一个input元素。

∙form overrides

oformaction - 重写表单的 action 属性 

oformenctype - 重写表单的 enctype 属性 

oformmethod - 重写表单的 method 属性 

oformnovalidate - 重写表单的 novalidate 属性 

oformtarget - 重写表单的 target 属性 

∙height 和width——规定用于 image 类型的 input 标签的图像高度和宽度。

∙list——规定输入域的 datalist选项列表。

∙min, max 和 step——用于为包含数字或日期的input 类型做限定。

∙multiple——规定输入域中可选择多个值。

∙pattern——属性规定用于验证 input 域的模式，可使用正则表达式。

∙placeholder——提供一种提示（hint），告诉用户输入域所期待的值。

∙required——规定提交时该输入域不能为空。

5.3示例及代码

表单新属性示例及代码：FormAttributes.htm

6.HTML 5

6.1简介

6.2示例及代码

可点击图像地图：MapDemo.htm

7.HTML5中的缩写与引用

7.1简介

∙article——定义外部内容，如一片外部的新闻报告

∙address——定义文档作者或拥有着的联系信息，一般位于aricle元素内部

∙aside——定义article以外的内容，与article内容相关，如对新闻的评论

∙blockquote——定义摘自另一源的块引用，显示会自动分段，如不需要分段请使用短引用标签

∙abbr——表示一个缩写形式，HTML4.0中已经引入，通过对缩写词语进行标记，能够为浏览器、拼写检查程序、翻译系统以及搜索引擎分度器提供有用信息。

∙bdo——覆盖默认的文本方向，使用dir属性指定文本显示方向

oltr——left to right 文本从左往右显示

ortl——right to left 文本从右往左显示

7.2示例及代码

参考示例及代码：QuoteDemo.htm

8.HTML5中的组合

8.1简介

∙optgroup——当使用选项列表时，对相关的选项进行组合

∙fieldset——将表单内的相关元素分组。拥有disabled和form属性，设置fieldset是否可见和属于多个form

∙figure——用于元素的组合，使用