H5新特性新增元素语义化更好的标签元素结构元素： article aside：文章侧边栏 header hgroup

新增元素

语义化更好的标签元素

结构元素：

article
aside：文章侧边栏
header
hgroup：被用来对一系列<h1> - <h6> 元素进行分组
footer
figure:标签规定独立的流内容（图像、图表、照片、代码等等,详细解释
section
nav

其他元素

video
audio
canvas
embed:标签定义嵌入的内容，比如插件。详细解释
mark：标签定义带有记号的文本，例如高亮
progress：标签定义运行中的进度（进程）
meter：标签定义度量衡。仅用于已知最大和最小值的度量。详细解释
time:日期时间标签详细解释
command：标签可以定义命令按钮，比如单选按钮、复选框或按钮。
details:规定了用户可见的或者隐藏的需求的补充细节。

<detail>
  <summary>Details</summary>
  edsfdsfsdfdfsdf
</detail>

keygen：用于表单的密钥对生成器字段
output

<form oninput="">
  <input type="range" name="b" value="50"/>+
  <input type="number" name="a" value="10"/>=
  <output name="result" for="a b"/>
</form>

转存失败，建议直接上传图片文件

source：媒体元素
menu:定义了一个命令列表或菜单。

<menu type="toolbar">
<li>
    <menu label="File">
    <button type="button" onclick="file_new()">New...</button>
    <button type="button" onclick="file_open()">Open...</button>
    <button type="button" onclick="file_save()">Save</button>
    </menu>
</li>
</menu>

ruby

<ruby>
    汉 <rp>(</rp><rt>Han</rt><rp>)</rp>
    字 <rp>(</rp><rt>zi</rt><rp>)</rp>

</ruby>

汉 (Han) 字 (zi)

wbr：软换行详解
bdi：允许您设置一段文本，使其脱离其父元素的文本方向设置

<p><bdo dir="rtl">这是一个从右向左的文本！<bdi>(括号内文本为从左向右)</bdi></bdo></p>

这是一个从右向左的文本！(括号内文本为从左向右)

dialog

<dialog open>
  <p>sfdfds</p>
</dialog>

废除的元素

纯表现元素、部分浏览器支持的元素和对可用性产生负面影响的元素

纯表现元素：basefont、big、center、font、s、strike、tt、u 用css代替部分浏览器支持的元素：applet、bgsound、blink、marquee 对可用性产生负面影响的元素：frameset、frame、noframes,在html5中不支持frame框架，只支持iframe框架

新增的API

Canvas

首先获取canvas元素的上下文对象，然后使用该上下文对象中的绘图功能进行绘制。

<canvas id="canvas"></canvas>
<script>
	var canvas = document.getElementById("canvas");
  	var context = canvas.getContext("2d");
	//设置颜色，默认为black
  	context.fillStyle = "red";
  	context.fillRect(0,0,100,100);
  	//默认为black
    context.strokeStyle = "blue";
  	context.strokeRect(120,0,100,100);
</script>

SVG

SVG是html5的另一项图形功能，是一种标准的矢量图形，是一种文件格式，有自己的API。

<svg height=100 width=100>
	<circle cx=50 cy=50 r=50/>
</svg>

音频和视频

2大好处,一是作为浏览器原生支持的功能，新的audio和video元素无需安装；二是媒体元素向web页面提供了通用、集成和可脚本化控制的API。

<video src="video.webm" controls>
	<object data="videoplayer.swf" type="application/x-shockwave-flash">
      <param name="movie" value="video.swf" />
      Your browser does not support HTML5 video.
  </object>
</video>

浏览器支持性检测：用js动态创建，检测特定函数是否存在。

var hasVideo = !!(document.createElement('video').canPlayType);

Geolocation

可以请求用户共享他们的位置。位置信息来源IP地址、三维坐标、GPS、从RFID、Wifi和蓝牙到Wifi的MAC地址、GSM或CDMA手机的ID、用户自定义数据

navigator.geolocation.getCurrentPosition(updateLocation,handleLocationError);
//更新位置信息
function updateLocation(position){
  //纬度
  var latitude = position.coords.latitude.
  //经度
  var longitude = position.coords.longitude.
  //准确度
  var accuracy = position.coords.accuracy.
  //时间戳
  var timestamp = position.coords.timestamp.
  }
//处理错误信息
function handleLocationError(error){
  console.log(error);
}
//监听位置更新
var watchId=navigator.geolocation.watchPostion(updateLocation,handleLocationError);
//不再接收位置更新
navigator.geolocation.clearWatch(watchId);

Communication

跨文档消息通信，可以确保iframe、标签页、窗口间安全地进行跨源通信。

//发送消息
window.postMessage('hello,world','http://www.example.com');
//接收消息
window.addEventListener('message',messageHandler,true);
function messageHandler(e){
  switch(e.origin){
    case 'http://www.example.com':
      //处理消息
      processMessage(e.data);
    break;
    default:
    break;
  }
}

XMLHttpRequest Level2

XMLHttpRequestLevel2是XMLHttpRequest的改进版本，主要涉及：跨源XMLHttpRequess和进度事件（Progress events）。

改进了跨源XMLHttpRequest和进度事件，XMLHttpRequest Level2通过XMLHttpRequest仅限于同源通信，XMLHttpRequestLevel2通过跨资源共享实现（Cross Origin Resource Sharing）跨源XMLHttpRequests。

　　其进度事件的名称主要有loadstart、progress、abort、error、load、loadend。通过对程序属性设置回调函数，可以实现对这些事件的监听。

WebSockets

要连接远程主机，只需新建一个WebSocket实例，提供希望连接的对端URL。

Forms

新表单元素tel、email、url、search、range、number 未来的表单元素color、datetime、datetime-local、time、date、week、month

新表单特性和函数

placeholder、autocomplete、autofocus、spellcheck、list特性、datalist元素、min和max、step、required

拖放API

draggable属性、拖放事件(dragstart、drag、dragenter、dragleave、dragover、drap、dragend)、dataTransfer对象

<div id="draggable" draggable="true">Draggable Div</div>
<script>
  var draggableElement = document.getElementById("draggable");
  draggableElement.addEventListener('dragstart',function(event){
    console.log("拖动开始！");
    event.dataTransfer.setData('text','hello world!');
  })
</script>

Web Workers API：Web Workers可以让Web应用程序具备后台处理能力，对多线程的支持性非常好。但是在Web Workers中执行的脚本不能访问该页面的window对象，也就是Web Workers不能直接访问Web页面和DOM API。虽然Web Workers不会导致浏览器UI停止响应，但是仍然会消耗CPU周期，导致系统反应速度变慢。

Web Storage API：sessionStorage(保存在session中，浏览器关闭，数据消失)、localStorage(保存在客户端本地，除非手动删除，否则一直保存)

//sessionStorage和localStorage方法一致
//保存数据
localStorage.setItem(key,value);
//读取数据
localStorage.getItem(key);
//删除单个数据
localStorage.removeItem(key);
//删除所有数据
localStorage.clear();
//得到某个索引的key
localStorage.key(index);

H5新特性