html5新特性总结

时间 2019-11-17

标签 html5 html 特性总结栏目 HTML5 繁體版

原文原文链接

新增元素

语义化更好的标签元素javascript

结构元素：article、aside、header、hgroup、footer、figure、section、nav
其余元素：video、audio、canvas、embed、mark、progress、meter、time、command、details、datagrid、keygen、output、source、menu、ruby、wbr、bdi、dialog、

废除的元素

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

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

新增的API

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

<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。html5
```
<svg height=100 width=100>
	<circle cx=50 cy=50 r=50/>
</svg>
复制代码
```

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

<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动态建立，检测特定函数是否存在。git

var hasVideo = !!(document.createElement('video').canPlayType);
复制代码

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

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、标签页、窗口间安全地进行跨源通讯。canvas

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

XMLHttpRequest Level2：改进了跨源XMLHttpRequest和进度事件，XMLHttpRequest Level2经过CORS实现了跨源XMLHttpRequest。跨源HTTP请求包含一个Origin头部，它为服务器提供HTTP请求的源信息。浏览器
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);
复制代码