HTML5的十大新特性

为了更好地处理今天的互联网应用，HTML5添加了很多新元素及功能，比如: 图形的绘制，多媒体内容，更好的页面结构，更好的形式 处理，和几个api拖放元素，定位，包括网页 应用程序缓存，存储，网络工作者，等

(1)语义标签

　　语义化标签使得页面的内容结构化，见名知义

标签	描述
	定义了文档的头部区域
	定义了文档的尾部区域
	定义文档的导航
	定义文档中的节（section、区段）
	定义页面独立的内容区域
	定义页面的侧边栏内容
	用于描述文档或文档某个部分的细节
	标签包含 details 元素的标题
	定义对话框，比如提示框

(2)增强型表单

　　HTML5 拥有多个新的表单 Input 输入类型。这些新特性提供了更好的输入控制和验证。

输入类型	描述
color	主要用于选取颜色
date	从一个日期选择器选择一个日期
datetime	选择一个日期（UTC 时间）
datetime-local	选择一个日期和时间 (无时区)
email	包含 e-mail 地址的输入域
month	选择一个月份
number	数值的输入域
range	一定范围内数字值的输入域
search	用于搜索域
tel	定义输入电话号码字段
time	选择一个时间
url	URL 地址的输入域
week	选择周和年

 　　HTML5 也新增以下表单元素

表单元素	描述
	元素规定输入域的选项列表 使用 元素的 list 属性与
	提供一种验证用户的可靠方法 标签规定用于表单的密钥对生成器字段。
	用于不同类型的输出 比如计算或脚本输出

　　HTML5 新增的表单属性

• • placehoder 属性，简短的提示在用户输入值前会显示在输入域上。即我们常见的输入框默认提示，在用户输入后消失。
  • required  属性，是一个 boolean 属性。要求填写的输入域不能为空
  • pattern 属性，描述了一个正则表达式用于验证 元素的值。
  • min 和 max 属性，设置元素最小值与最大值。
  • step 属性，为输入域规定合法的数字间隔。
  • height 和 width 属性，用于 image 类型的 标签的图像高度和宽度。
  • autofocus 属性，是一个 boolean 属性。规定在页面加载时，域自动地获得焦点。
  • multiple 属性 ，是一个 boolean 属性。规定 元素中可选择多个值。　　　

(3)视频和音频

• HTML5 提供了播放音频文件的标准，即使用

　control 属性供添加播放、暂停和音量控件。

　在 之间你需要插入浏览器不支持的

　

 

　目前,

 

• HTML5 规定了一种通过 video 元素来包含视频的标准方法。

  1 2 3 4 5

  '320' height='240' controls>   'movie.mp4' type='video/mp4'>   'movie.ogg' type='video/ogg'> 您的浏览器不支持Video标签。

  control 提供了 播放、暂停和音量控件来控制视频。也可以使用dom操作来控制视频的播放暂停，如 play() 和 pause() 方法。

  同时 video 元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度，所需的视频空间会在页面加载时保留。如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能再加载时保留特定的空间，页面就会根据原始视频的大小而改变。

  与 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。

  video 元素支持多个source 元素. 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式（ MP4, WebM, 和 Ogg）

(4)Canvas绘图

　　标签只是图形容器，必须使用脚本来绘制图形。

• Canvas - 图形

1. 创建一个画布，一个画布在网页中是一个矩形框，通过 元素来绘制。默认情况下 元素没有边框和内容。

   1	'myCanvas' width='200' height='100' style='border:1px solid #000000;'>

   　　标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小，使用 style 属性来添加边框。你可以在HTML页面中使用多个 元素

2. 使用Javascript来绘制图像，canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成

   1 2 3 4 5 6

   运行 WebSocket