HTML5 新特性

HTML5是HTML最新的修订版本。

HTML5 新特性

语义特性

HTML5赋予网页更好的意义和结构。新增了一些语义化的标签，比如<header>、<footer>、<nav> 、<aside>等。

本地存储特性

HTML5 新增了一些存储功能，localstorage等。

设备兼容特性

HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连。

连接特性

更有效的连接工作效率，使得基于页面的实时聊天，更快速的网页游戏体验，更优化的在线交流得到了实现。HTML5拥有更有效的服务器推送技术，Server-Sent Event和WebSockets就是其中的两个特性，这两个特性能够帮助我们实现服务器将数据“推送”到客户端的功能。

网页多媒体特性

支持网页端的Audio、Video等多媒体功能， 与网站自带的APPS，摄像头，影音功能相得益彰。

基于SVG、Canvas、WebGL及CSS3的3D功能，用户会惊叹于在浏览器中，所呈现的惊人视觉效果。

性能与集成特性

HTML5通过XMLHttpRequest2等技术，解决以前的跨域等问题，使Web应用和网站在多样化的环境中更快速的工作。

常见的HTML5 新增标签

• 结构类

标签	描述
<header>	定义了文档的头部区域
<nav>	导航
<footer>	定义 section 或 document 的页脚
<aside>	定义页面内容之外的内容
<article>	定义页面正文内容
<section>	定义文档中的节（section、区段）
<main>	规定文档的主要内容 ，这部分内容在文档中应当是独一无二的，不包含任何在一系列文档中重复的内容

eg.

 <header>
    <nav></nav>
  </header>
  <section>
    <aside></aside>
    <aiticle></aiticle>
  </section>
  <footer></footer>

• 新表单元素

标签	描述
<datalist>	定义选项列表。与 input 元素配合使用该元素（使用 input 元素的 list 属性来绑定 datalist），来定义 input 可能的值
<keygen>	规定用于表单的密钥对生成器字段
<output>	定义不同类型的输出，比如脚本的输出

• 多媒体

标签	描述
<video>	定义视频（video 或者 movie）
<audio>	定义音频内容
<canvas>	标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API
<source>	定义多媒体资源 <video> 和<audio>
<embed>	定义嵌入的内容，比如插件
<track>	为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道

input 新增类型

email

email.png

url

同上，格式不对时，会提示，相当于做了一次正则验证。

number

只允许输入数字，可以设定对所接受的数字的范围，并且右侧有加减按钮。如果是在手机端打开的话，弹出的是手机数字键盘。

number.png

range

range.png

Date Picker

一般很少直接用，因为样式可能不符合我们的要求......

• Date

<input type="Date">

Date.png

• month

<input type="month">

month.png

• week

<input type="week">

week.png

• time

    <input type="time">

image.png

• datetime-local