html5 新特性

html5 新特性

语义化标签

—之前的HTML没有体现结构语义化的标签，HTML5提供语义化标签:

• header:
  —代表“网页”或“section”的页眉
  —通常包含h1-h6 或者hgroup，作为整个页面或者某一个内容块的标题。也可以包裹一节目录，一个搜索框，一个nav，或者任何相关的logo。
  —header可以拥有多个，可以为每个内容块添加一个header
• footer：
  —代表“网页”或“section”的页眉
  —通常包含该节的一些基本信息
  —没有个数限制
• hgroup：
  —代表“网页”或“section”的标题
  —当元素有多个层级时，该元素可以将h1-h6元素包裹。
  —如果只需要一个h1-h6就不用hgroup
• nav：
  —代表页面的导航链接区域，用于定义页面的主要导航部分
• aside:被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的相关资料、标签、名词解释等（特殊的section）
  — 在article之外可做侧边栏，广告，其他日志链接或者其他分类导航
• section：
  —代表文档中的“节”或“段”,“节”指一个页面的分组，“段”指一篇蚊帐里按照主题的分段
  — session通常会带标题，虽然html5中的session会自动给标题降级，但是最好手动降级
  —可以用session划分为简历，文章条目和联系方式，不过在文章内页，最好用article
  —article、nav、aside可以理解为特殊的section，所以如果可以用article、nav、aside就不要用section，没实际意义的就用div
• article：
  —代表一个在文档，页面或者网站中自成一体的内容，其目的是为了让开发者独立开发或重用。如论坛的帖子，博客上的文章，一篇用户的评论，一个互动的widget小工具。（特殊的section）
  —除了它的内容，article会有一个标题（通常会在header里），会有一个footer页脚。
  —自身独立的情况下，用article，相关内容用session，没有语义用div

HTML5其他结构元素标签

• address：
  —代表区块容器，必须是作为联系信息出现，邮编地址、邮件地址等等,一般出现在footer
• h1-h6:因为hgroup，section和article的出现，h1-h6定义也发生了变化，允许一张页面出现多个h1。

增强型表单

新的input类型

• email
• url
• number
• range
• Date pickers (date, month, week, time, datetime, datetime-local)
• search
• color

新增表单元素

• datalist
• keygan
• output

新增表单属性

新的form属性

• autocomplete
• novalidate

新的input属性

• autocomplete
• autofocus
• form
• form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
• height
• width
• list
• min
• max
• step
• multiple
• pattern(regexp)
• placeholder
• required

新增视频标签

• video 当前支持三种音频格式：Ogg,MPEG 4,WebM

<video src="movie.ogg" controls="controls">
</video>
//<video> 与 </video> 之间插入的内容是供不支持 video 元素的浏览器显示的

video标签的属性

新增音频标签

• audio 当前支持三种音频格式：Ogg Vorbis,MP3,Wav

<audio src="song.ogg" controls="controls">
</audio>
//<audio> 与 </audio> 之间插入的内容是供不支持 audio 元素的浏览器显示的

audio标签的属性

Canvas绘图

SVG绘图

地图定位

拖放API

Web Worker

Web Storage

WebSocket