HTML5 新特性

引言

html5是html语言的第五次重大修改；
HTML5的第一份正式草案已于2008年1月22日公布，HTML5仍处于完善之中，然而，大部分现代浏览器已经具备了某些 HTML5支持；
2012年12月17日，万维网联盟（W3C）正式宣布HTML5规范正式定稿；
HTML5具有诸多亮点和新特性，本文总结了html5常用的新特性，供大家参考；

文档声明方式的转变

HTML5声明

1	<!DOCTYPE html>

HTML4声明

1	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

XHTML声明

1	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

对比可知，HTML5的声明非常简单，这是因为它不依赖于SGML。要知道详细的DOCTYPE声明方式，请看我的另一篇博客；

脚本无需加注type属性

HTML4

1 2	<link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" /> <script type="text/javascript" src="path/to/script.js"></script>

HTML5

1 2	<link rel="stylesheet" href="path/to/stylesheet.css" /> <script src="path/to/script.js"></script>

标签的变化

新增的标签

header和footer
- 在html5中可以直接使用<header>和<footer>标签

<header>
   ...
</header>
<footer>
   ...
</footer>

高亮标签：

1	<mark>this is marked words.</mark>

图片和图片描述文字的语义化链接

<figure>
    <figcaption>
        <p>this is my picture:</p>
    </figcaption>
    <img src="img/11.png" alt="this is me">
</figure>

废弃的标签

frame
frameset
noframe
applet
big
center
basefront

HTML5表单新特性

允许缩略属性，比如<input type="text" name="someInput" required>等价于<input type="text" name="someInput" required="required">，这在XHTML中是不允许的；
新增autofocus属性，可实现自动聚焦某个表单控件

1	<input type="text" autofocus="autofocus" required>

新增placeholder属性，向表单输入控件预制提示信息；

1	<input type="text" placeholder="please input your name" required>

新增pattern属性，实现自动正则匹配用户的输入，如果不满足条件则不予提交表单；

1	<input type="text" pattern="[A-Za-z]{4,10}">

新增datalist属性，实现在用户输入的同时，按照用户的输入给出相应的提示信息：

<form>
    <input list="Country">
    <datalist id="Country">
        <option value="China">
        <option value="America">
        <option value="Italy">
        <option value="India">
    </datalist>
    <input type="submit" class="btn">
</form>

新增多种表单属性：
- 自动弹出颜色选择器<input type="color" name="favcolor">；
- 自动弹出日期选择器<input type="date" name="bday"> 或 <input type="datetime-local" name="bdaytime">；
- 自动校验email格式正确<input type="email" name="email">；
- 自动校验url格式正确<input type="url" name="sitename">；
- 自动显示数字增减上下箭头<input type="number" name="quantity" min="1" max="5">；
- 自动显示范围增减条<input type="range" min="0" max="10" step="2" value="6">；
- 文本框作为搜索引擎<input type="search" name="googleengine">；
- 只能输入时间<input type="time" name="usr_time">；
- 输入电话号码<input type="tel" name="mytel">；

HTML5 多媒体支持

支持的视频格式：Ogg、MPEG4、WebM；

<video width=”450″ height=”340″ controls>
     <source src=”jamshed.mp4″ type=”video/mp4″>
     <source src=”jamshed.ogg” type=”video/ogg”>
</video>

支持的音频格式:Ogg Vorbis、MP3、Wav；

<audio controls>
    <source src=”jamshed.mp3″ type=”audio/mpeg”>
    Your browser does’nt support audio embedding feature.
</audio>

HTML5 图像支持

SVG线条图案：

<svg id="svgLineTutorial" style="border-style:solid;border-width:2px;" height="200px" width="200px"
     xmlns="http://www.w3.org/2000/svg">
    <line x1="10" y1="20" x2="100" y2="200" style="stroke:Green;stroke-width:2"/>
</svg>

SVG圆形图案：

1
2
3

<svg id="svgCircleTutorial" height="250" xmlns="http://www.w3.org/2000/svg">
    <circle id="myCircle" cx="55" cy="55" r="50" fill="#219E3E" stroke="#17301D" stroke-width="2" />
</svg>

SVG矩形图案：

1
2
3

<svg id="svgRectangleTutorial" height="200" xmlns="http://www.w3.org/2000/svg">
    <rect id="myRectangle" width="300" height="100" stroke="#17301D" stroke-width="2"  fill="#0E4E75" fill-opacity="0.5" stroke-opacity="0.5"/>
</svg>

SVG椭圆图案：

1
2
3

<svg id="svgEllipseTutorial" height="150" xmlns="http://www.w3.org/2000/svg">
    <ellipse id="myEllipse" cx="120" cy="60" rx="100" ry="50" style="fill:#3F5208;stroke:black;stroke-width:3"/>
</svg>

SVG多边形图案：

1
2
3

<svg id="svgPolygonTutorial" height="200" xmlns="http://www.w3.org/2000/svg">
    <polygon id="myPolygon" points="10,10 75,150 150,60" style="fill:#63BCF7;stroke:black;stroke-width:3"/>
</svg>

<canvas>标签有一个基于JavaScript的绘图API，详见这里；

HTML5 存储模式

session storage和local storage是HTML5新增的两种存储模式；
cookie的缺陷：
- cookie大小限制在4KB以内；
- cookie随着http事务一起发送，浪费流量和带宽；
- 使用cookie不方便；
- cookie保存在本地硬盘中，不安全；
session storage：
- 对应标签页，只要当前标签页不被关闭，则session storage不会消失；
- 一但标签页关闭，session storage的值随即清空；
- 可以用下面的方式加注session storage；

1	sessionStorage.setItem("message", str)

local storage：
- 保存在硬盘中，只要不手动清除，无论标签页和浏览器是否关闭都一直保存；
- 可以用下面的方式加注local storage;

1	localStorage.setItem("message",str);

cookie、session storage、local storage的区别和联系：
- cookie是由服务器端生成并发送给客户端的，其中的内容由服务器端决定；
- cookie只能保存少量数据（不超过4K）；
- 同源的网站cookie只存一份且共享（chrome中打开百度和firefox中打开百度用的是同一个cookie文件）；
- 不同源网站的cookie不能相互访问和读写（百度和谷歌两个网站的cookie不能相互访问）；
- session storage保存在浏览器缓存中，面向一次性的会话；
- local storage保存在本地磁盘中；
- session storage同源窗口不共享（不同的浏览器打开相同的网站不共享session storage）；
- local storage同源窗口共享（不同的浏览器打开相同的网站共享local storage）；
- session storage和local storage保存数据不超过5M；
- session storage和local storage只在本地保存，一定不会发送给服务器；

HTML5 离线存储机制

离线存储（应用程序缓存）是 HTML5 的重要特性之一；
离线存储的作用是让应用程序可以获取本地的网站内容，在离线时也能实现正常访问网页；
离线存储的实现借助于 manifest 文件；
与传统浏览器缓存相比，离线存储不强制用户访问的网站内容被缓存；
如果您想详细了解离线存储机制，请看这篇文章；

HTML5 提供的多种多样的API

Media API
Text Track API
Application Cache API
User Interaction
Data Transfer API
Command API
Constraint Validation API
History API