HTML5新特性总结

HTML5

2014年10月29日，W3C宣布，经过接近8年的艰苦努力，HTML5标准规范终于制定完成。HTML5提供了很多有用的新特性，包括更加语义化的标签、媒体标签、本地存储、canvas绘画等等。

语义化标签

语义化标签使得我们的html更具结构化，见名知义，并且对SEO更加友好。
下面是一些常见的语义标签：

标签名	标签描述
<header></header>	页面主要内容，提升搜索引擎排名
<hn></hn>	h1~h6分级标题，用于创建页面信息的层级关系。
<header></header>	页眉通常包括网站标志、主导航、全站链接以及搜索框。
<nav></nav>	标记导航，仅对文档中重要的链接群使用。
<article></article>	表示文档、页面、应用或一个独立的容器。
<section></section>	具有相似主题的一组内容，比如网站的主页可以分成介绍、新闻条目、联系信息等条块。
<aside></aside>	指定附注栏，包括引述、侧栏、指向文章的一组链接、广告、友情链接、相关产品列表等。
<footer></footer>	页脚，只有当父级是body时，才是整个页面的页脚。
<strong></strong>	强调内容
<mark></mark>	突出内容，提醒读者
<time></time>	标识时间
<address></address>	作者、相关人士或组织的联系信息

表单的扩展

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

输入类型	类型描述
color	用于选取颜色
date	从日期选择器上选择日期
email	用于输入email地址
number	数值的输入域
range	一定范围内数值输入域
search	用于搜索域
tel	定义输入电话号码字段
url	URL地址输入域

HTML5还增加了下列表单属性：

属性名	属性描述
placehoder	简短的提示在用户输入值前会显示在输入域上
required	一个 boolean 属性，要求填写的输入域不能为空
min / max	设置元素最小值和最大值
width / height	用于 image 类型的 <input> 标签的图像高度和宽度
autofocus	一个 boolean 属性。规定在页面加载时，域自动地获得焦点
multiple	一个 boolean 属性。规定<input> 元素中可选择多个值

视频和音频

HTML5还提供了音频、视频的标准元素

音频

HTML5 提供了播放音频文件的标准，即使用 <audio> 元素

<audio controls>
  <source src="music.mp3" type="audio/mpeg">
  您的浏览器不支持 audio 元素。
</audio>

<audio>标签中的 control 属性供添加播放、暂停和音量控件。
因为还有很多低版本浏览器并不支持<audio>，所以在<audio>中，我们需要添加浏览器不支持的<audio>元素的提示文本 。
目前<audio>支持三种格式的音频文件：mp3、wav、ogg

视频

HTML5 提供了播放视频文件的标准，即使用 <video> 元素

<video width="640" height="480" controls>
  <source src="movie.mp4" type="video/mp4">
  您的浏览器不支持Video标签。
</video>

    <video>标签中的 control 属性提供了 播放、暂停和音量控件来控制视频。也可以使用dom操作来控制视频的播放暂停，如 play() 和 pause() 方法。
    同时 video 元素也提供了 width 和 height 属性控制视频的尺寸，如果设置的高度和宽度，所需的视频空间会在页面加载时保留。如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能再加载时保留特定的空间，页面就会根据原始视频的大小而改变。
    和音频标签一样，需要加上浏览器不支持时显示的文本内容。目前<video>支持三种格式的音频文件：mp4、webm、ogg

Canvas绘图

Canvas元素用于在页面中绘制图形，Canvas本身没有绘图的能力，只是提供了一个“画布”，我们需要使用JavaScript在画布上进行绘制，“画布”是一块矩形的区域，其中的每一个像素我们都可以控制。

Canvas图形

创建一个画布，指定id和宽高

<canvas id="myCanvas" width="200" height="100" style="border:1px solid red;"></canvas>

宽度和高度我们要在元素行内定义，border可以再style中定义
然后使用JavaScript来绘制图像

<script>
　　var canvas = document.getElementById("myCanvas");
　　var ctx = canvas.getContext("2d");
　　ctx.fillStyle = "#CCC";
　　ctx.fillRect(0, 0, 150, 75);
</script>

getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
设置 fillStyle 来对画布进行染色，fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。上面代码意思是：在画布左上角（0, 0）开始绘制一个150 * 75的矩形

Canvas路径

如果要在Canvas画布上面画线，我们需要使用到下面几个方法：
①moveTo(x,y) 定义线条开始的坐标
②lineTo(x,y) 定义线条结束的坐标
③stroke() 绘制线段

<script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    ctx.moveTo(0,0);
    ctx.lineTo(100,100);
    ctx.stroke();
</script>

定义开始坐标(0,0), 和结束坐标 (100,100). 然后使用 stroke() 方法来绘制线条

Canvas图像

想要把一幅图像放置到画布上, 可以使用 drawImage(image,x,y) 方法

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var img = document.getElementById("myImage");
ctx.drawImage(img, 10, 10);

这样就可以把一张图像绘制到画布上面了

地理定位

HTML5 Geolocation（地理定位）用于定位用户的位置。
我们可以使用getCurrentPosition() 方法来获得用户的位置。

var x=document.getElementById("demo");
function getLocation()
  {
  //检测是否支持地理定位
  if (navigator.geolocation){
    navigator.geolocation.getCurrentPosition(showPosition);
  }
  else {
  	x.innerHTML="Geolocation is not supported by this browser.";}
  }
  //showPosition() 函数获得并显示经度和纬度
function showPosition(position)
  {
  	x.innerHTML="Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude;
  }

若成功，则 getCurrentPosition() 方法返回对象。始终会返回 latitude、longitude 以及 accuracy 属性。如果可用，则会返回其他下面的属性。

属性	描述
coords.latitude	十进制数的纬度
coords.longitude	十进制数的经度
coords.accuracy	位置精度
coords.altitude	海拔，海平面以上以米计
coords.altitudeAccuracy	位置的海拔精度
coords.heading	方向，从正北开始以度计
coords.speed	速度，以米/每秒计
timestamp	响应的日期/时间

本地存储

HTML5提供了网页存储的API，方便Web应用的离线使用。

远古时期

在HTML5到来之前，我们本地存储一般使用cookie，或者userData（或许你并没有听过这玩意），但是这两种存储方式都能存在着不晓得弊端：

存储方式	弊端
cookies	每次http请求 都会在请求头上带着cookie 对于每个域名 cookie在客户端 只有4K大小 安全性问题,可能被劫持转发。
userData	只有IE支持 平台支持不广泛，并不属于W3C标准

localeStorage && sessionStorage

其实HTML5除了提供了这两种存储方式之外，还提供了indexedDB、appCache等，但是较为常用的就是localeStorage 和 sessionStorage
localeStorage 常用API：

API	描述
getItem	获取指定key本地存储的值
setItem	将value存储到key字段
removeItem	删除指定key本地存储的值
clear	清除localStorage保存对象的全部数据

localeStorage 注意事项：
①使用前判断浏览器是否支持localeStorage
普遍大家是使用 window.localeStorage 来判断，但是该方法并不健全，移动端部分浏览器有本地存储 但是却无法写入数据的情况
最好的办法是检测的时候先尝试setItem 然后捕获异常，如果捕获到异常的话 其实浏览器是不支持的
②写数据的时候需要异常处理 避免容量溢出 抛错
③避免存储敏感信息到本地
④Key的唯一性，同样的key 新的值会进行覆盖
localeStorage 使用限制：
①存储过期策略为永不过期，所以如果业务需要，需要自己写更新策略
②子域名之间不能够共享存储数据
③Server端获取不到数据

总结

HTML5的新特性远远不止本篇博客所总结的这些，HTML5其实提供了很多非常强大的新特性。