HTML5标签

本章主要介绍H5新增标签。
IE8-不支持H5标签，可以用JS创建一个无用元素（如），或使用 HTML5 Shiv 来解决。

一、文档章节（块级）

页面主流布局.png

页眉、页脚与导航

• 页眉：

  可用div#header模拟，用于标题、logo等
  

• 标题分组：

  对h1~h6进行分组
  

• 页脚：

  可用div#footer模拟，常用于版权、友链等
  

• 导航：

  可用div#nav模拟
  

内容区域

• 内容主体：

  可用div#main模拟，一个页面只有一个
  

• 文章：

  定义有意义且独立于文档的内容，常用于帖子、新闻、博客、评论等
  

• 章节：

  
    定义文档的某个区域，常用于章节、片段、摘要等；
    可嵌套在article、header、footer、aside等里。
  
  

• 侧边栏：

  
    可用div#side模拟，常用于侧栏导航、目录、广告等；
    该标签不可嵌套在article里，且应与附件的内容相关。
  
  

二、文本

流（块级）

• figure元素定义独立的流内容：

  
    
  流标题
    
  
  

• figure元素的内容应该与主内容相关，同时元素的位置相对于主内容是独立的。

其他

• 标记文本：

  文本需要被highlight时使用，一般背景会显示黄色
  

• 日期与时间（公历）：

  方便用户添加日程表，利于SEO
  

三、多媒体与嵌入

嵌入资源

• embed定义一个容器，用于嵌入外部应用或插件：

• embed常被嵌套进object中，以应对不同浏览器：

视频

• 支持的格式：ogg，mpeg4，webM。
• 单个视频：

• 多个视频：

• 属性：

属性	值	描述
controls	controls	提供播放、暂停和音量控件
autoplay	autoplay	自动播放
loop	loop	循环播放
preload	auto metadata none	视频预加载，有autoplay时忽略该属性
poster	图片URL	视频下载时显示图像，直到用户点击播放按钮
src	视频URL	要播放的视频的URL
height	像素值	视频的高，不可用来压缩视频
width	像素值	视频的宽，不可用来压缩视频

音频

• 支持的格式：ogg，mp3，wav。
• 用法同，只要将video换成audio即可。
• 常用属性：controls、autoplay、loop、src等。

图形

• 画布canvas是一个图形容器，通过脚本绘制图形；一般用于性能要求高、场景复杂的图像：

  不支持canvas的浏览器显示此处的文本
  

• 可伸缩矢量图形svg使用XML描述2D图形，一般用于高仿真的静态图像：

参考：video兼容性，audio兼容性，canvas教程，SVG

四、表单

input新增type属性值

类型	type值	描述
邮箱	email	输入电子邮箱的普通文本域
电话	tel	输入电话号码的普通文本域
搜索	search	输入搜索字符串的普通文本域
URL	url	输入URL的普通文本域
数值	number	可设置最大值max、最小值min、间隔step等
数值范围	range	用于精确值不重要的输入数字的控件（如：滑动条）
拾色器	color	调出拾色器
日期	date month week time datetime datetime-local	年月日 年月 年周 时分秒 UTC年月日时分秒 年月日时分秒

选项列表

• datalist为input元素提供“自动完成”功能；
• 绑定：input.list == datalist.id。
• 用法与select类似。

输出

• 将指定元素的结果输出到output元素：

• IE不支持output元素。

进度

• progress元素定义运行中的任务进度（进程）：

  显示文本
  

• progress需要靠脚本来设置进度。
• 显示度量衡请使用meter元素：

  显示文本
  

• IE9-不支持progress元素，IE不支持meter元素。