html5作为html的代替者，成为新的标准，而且时至今日，在前端开发中，已经被大家广泛应用，但是对于html5有哪些具体功能和特性，有不少人就对它认识就显得模糊了。下面是我总结的一些h5的新特性，供大家参考：
1. 语义化标签
html标签是我们开发前端界面的骨架，但是以前我们使用html标签布局使用的都是div标签，div标签的语义非常的不清晰，因此html5为了规范这一块，给出了一系列的标签：
<hrader></header>头部区域标签，块级标签<footer></footer>底部区域标签，块级标签<nav></nav>导航区域标签，块级标签<time></time>时间区域标签，内联标签<article></article>文章段落标签，块级标签<aside></aside>侧边栏区域标签，块级标签<mark></mark>标记记号标签，内联标签<summary></summary>单词翻译: 摘要，h5官方文档描述：定义 details 元素的标题，块级标签<detailes></detailes>单词翻译：细节，h5官方文档描述：定义元素的细节，块级标签<section></section>单词翻译：部分，h5官方文档描述：定义 section，块级标签
2. 新表单类型
我这里描述的表单，主要指的<input>，<input>表单标签本身已经有不少类型了，但是h5为了满足开发需求，同样还新增了不少的类型：
<input type="email" />e-mail 地址的输入域<input type="number" />数字输入域<input type="url" />URL 地址的输入域<input type="range" />range 类型显示为滑动条，默认value值是1~100的限定范围，可以通过min属性和max属性自定义范围<input type="range" name="points" min="1" max="10" /><input type="search" />用于搜索域<input type="color" />用于定义选择颜色<input type="tel" />电话号码输入域<input type="date" />date类型为时间选择器
HTML5 新增的表单属性
placehoder属性，简短的提示在用户输入值前会显示在输入域上。即我们常见的输入框默认提示，在用户输入后消失。required属性，是一个 boolean 属性。要求填写的输入域不能为空pattern属性，描述了一个正则表达式用于验证<input>元素的值。min和max属性，设置元素最小值与最大值。step属性，为输入域规定合法的数字间隔。height和width属性，用于 image 类型的<input>标签的图像高度和宽度。autofocus属性，是一个 boolean 属性。规定在页面加载时，域自动地获得焦点。multiple属性 ，是一个 boolean 属性。规定<input>元素中可选择多个值。
3. 视频和音频
视频<video>和音频<audio>，也是html提供的新的标签，它们的功能类似于<img>标签，<img>标签引用的是图片，它们引用的是视频文件和音频文件。不仅如此，html5针对视频文件和音频文件的特殊性，给 <video>和<audio>提供了非常丰富的方法,属性和事件，用于操控这俩元素。 `
<audio src="audio/putclub.com_Googlewasjusta.mp3" id="audio"></audio>
<button id="start-music">开始播放</button>
<button id="stop-music">暂停播放</button>
var startMusic = document.getElementById('start-music');
var stopMusic = document.getElementById('stop-music');
startMusic.onclick = function () { //开始播放
var audioEl = document.getElementById('audio');
audioEl.play()
}
stopMusic. onclick = function () { // 暂停播放
var audioEl = document.getElementById('audio');
audioEl.pause()
}
复制代码
`
<audio>目前支持的音频格式有: MP3, Wav, 和 Ogg。
`
<video width="600" height="400" id="video" controls="controls">
<source src="video/jieda2.mp4" type="audio/mp4"></source>
</video>
<button id="start-tv">视频开始播放</button>
<button id="stop-tv">暂停视频播放</button>
var startTv = document.getElementById('start-tv');
var stopTv = document.getElementById('stop-tv');
startTv.onclick = function () {
var video = document.getElementById('video');
video.play();
}
stopTv.onclick = function () {
var video = document.getElementById('video');
video.pause();
}
复制代码
`
注意：video播放视频时请注意转换一下视频的格式，转换为AVC(H264)，不转换的话容易出现有声音而没有视频的现象，浏览器将支持第一个识别的文件类型：( MP4, WebM, 和 Ogg)。
视频<video>和音频<audio>常用的几个方法有：
play()开始播放音频/视频pause()暂停当前播放的音频/视频load()重新加载音频/视频元素
视频<video>和音频<audio>常用的属性有：
controls属性设置或返回音频/视频是否显示控件（比如播放/暂停等）defaultPlaybackRate属性设置或返回音频/视频的默认播放速度duration属性返回当前音频/视频的长度（以秒计）ended属性返回音频/视频的播放是否已结束loop属性设置或返回音频/视频是否应在结束时重新播放muted属性设置或返回音频/视频是否静音networkState属性返回音频/视频的当前网络状态src属性设置或返回音频/视频元素的当前来源volume属性设置或返回音频/视频的音量readyState属性返回音频/视频当前的就绪状态played返回表示音频/视频已播放部分的 TimeRanges 对象
视频<video>和音频<audio>还拥有非常多自己特定的事件，不过本文将不在罗列，上面的方法和属性也并不是全部，需要详细了解的同学可以去HTML 5 视频/音频参考手册查看。
4. Canvas绘图
canvas 元素用于在网页上绘制图形,canvas标签本身只是个图型容器，需要使用javaScript脚本来绘制图形。
`
<canvas id="mycanvas" width="600" height="400"></canvas>
var myCanvas = document.getElementById('mycanvas');
var canvas2d = myCanvas.getContext('2d');
canvas2d.moveTo(100, 100); // 线条起始位置
canvas2d.lineTo(400, 100); // 线条结束位置
canvas2d.strokeStyle = '#CD5C5C' // 线条颜色
canvas2d.lineWidth = 5； // 定义线宽
canvas2d.font = '20px Arial'; // 定义字体大小和字体类型
canvas2d.fillText('Canvas绘图demo', 400, 100) // 设置绘制的文本和位置
canvas2d.stroke();
复制代码
`
moveTo(x,y) 定义线条开始坐标，lineTo(x,y) 定义线条结束坐标,lineWidth设置线宽，fillText()设置绘制的文本和位置,stroke()执行绘画。
<figure>[图片上传中...(image-4148a1-1542188384286-0)]
<figcaption></figcaption>
</figure>
上面这个是上面canvas绘制的图形。想要详细了解canvas的同学，可以去到HTML5 Canvas 参考手册。
5. SVG
SVG是指可伸缩的矢量图形，SVG 也是一种使用 XML 描述 2D 图形的语言。由于SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。我们可以为某个元素附加 JavaScript 事件处理器。在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
`
<style>
/* svg 样式：
fill：填充色
stroke：描边色
stroke-width：边框宽度*/
#mycircle{
fill: darkseagreen;
stroke: coral;
stroke-width: 2px;
}
</style>
<svg width="200px" height="200px">
<!--<circle>标签代表圆形 cx、cy、r属性分别为横坐标、纵坐标和半径，单位为像素。坐标都是相对于<svg>画布的左上角原点。-->
<circle id="mycircle" cx="50" cy="50" r="50" />
</svg>
复制代码
`
svg图形的样式和css有些不同，fill是定义图形填充色，stroke描边色，stroke-width是线宽,如果我们要对svg图形操作，那么我们该怎么做呢，其实很简单，只需要document.getElementById()获取需要操作的svg图形节点，然后针对该svg图形的属性去操作就可以了，对svg图形属性的操作可以用getAttribute()和setAttribute(),好啦，更多详细的svg知识点，可以去SVG 参考手册和阮一峰老师的svg图像学习了解。
6. 小结
本文考虑到文章篇幅的问题，所以分作上篇和下篇进行介绍h5的新特性。本上篇主要介绍了h5的五种新特性，语义化的标签，新增的表单元素类型，视频和音频，canvas绘图以及svg图形的简要介绍。
本篇的html5新特性是下篇，将把html5上篇没有介绍到的新特性分享出来，OK，下面是正文：
1. 拖放（Drag 和 drop）
拖放是html5提供一个新的特性，这个特性增加了拖拽事件的api,和定义可以拖拽的属性。举个例子，在h5之前实现拖拽功能，其实用的是一种模拟方式，鼠标onmousedown时，获取当前的一些信息，然后在onmousemove时不断更新推拽对象的left和top值，最后在onmouseup时对推拽对象彻底赋值，并进行释放后一系列的程序操作。现在h5出来后呢，不在需要模拟了，因为它已经有标准的事件api了，下面看例子： `
<style type="text/css">
.draggable{width: 120px; height: 120px;text-align: center; line-height: 120px; background-color: #8FBC8F; color: white; border: 5px solid yellowgreen; position: absolute; top: 0;left: 0;}
</style>
<div id="draggable" class="draggable" draggable="true">
draggable
</div>
var dragEl = document.getElementById('draggable');
var l = null, t = null;
dragEl.ondragstart = function (e) { // 准备推拽时
l = e.clientX - this.offsetLeft, t = e.clientY - this.offsetTop;
}
dragEl.ondrag = function (e) { // 拖拽进行时
var x = e.clientX, y = e.clientY;
this.style.left = x - l + 'px';
this.style.top = y - t + 'px';
console.log(x, y, l , t)
}
dragEl.ondragend = function (e) { // 拖拽结束时
var x = e.clientX, y = e.clientY;
this.style.left = x - l + 'px';
this.style.top = y - t + 'px';
}
复制代码`
注意：拖拽对象必须把draggable属性设置为true，其他开发思维其实和以前一样的，没有多大差别，只是多了更多的监听事件而已，想要详细了解拖拽的同学可以去拖放API查看。
2. 地理定位
地理定位这个特性，故名思意，就是获取用户位置信息的。通过getCurrentPosition()获取一系列定位信息，getCurrentPosition()有两个回调函数参数，获取地理位置成功的回调和失败的回调。
`
navigator.geolocation.getCurrentPosition(successPos)
function successPos (pos){
console.log('用户定位数据获取成功')
//console.log(arguments);
console.log('定位时间：',pos.timestamp)
console.log('经度：',pos.coords.longitude)
console.log('纬度：',pos.coords.latitude)
console.log('海拔：',pos.coords.altitude)
console.log('速度：',pos.coords.speed)
复制代码}` 想了解关于更多的地理位置特性的信息可以移步到HTML5 地理定位去查看哦。
3. 离线存储
HTML5，通过创建 cache manifest 文件，可以创建 web 应用的离线版本。如果要启用应用程序缓存，必须在文档的 <html> 标签中包含 manifest 属性：每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性，则页面不会被缓存（除非在 manifest 文件中直接指定了该页面）。 manifest 文件的建议的文件扩展名是：".appcache".请注意，manifest 文件需要配置正确的 MIME-type，即 "text/cache-manifest"。必须在 web 服务器上进行配置
manifest 文件可分为三个部分：
- CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
- NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
- FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）
下面是个完整的manifest文件： `
CACHE MANIFEST
2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.asp
FALLBACK:
/html5/ /404.html
复制代码` 离线存储这个功能，通俗的讲，其实就是把web的资源文件存储起来，个人觉得移动端的应用效果会更好一些，毕竟流量贵呀，把一些文件存储起来，这样可以大大的节省流量和服务器的压力，当然同样更多的知识点伙伴们去官网查看吧HTML 5 应用程序缓存。
4. Web 存储
如果说离线存储是对web的资源文件存储，那么web 存储就是对应用程序里的数据做存储了。web存储提供了两个存储方式:
localStorage,没有时间限制的数据存储sessionStorage,就是网页还没有关闭的情况下的存储，网页窗口关闭，则数据销毁。
在之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。
在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。
`
localStorage.setItem('key', 'val') // 存储数据
localStorage.getItem('key') // 取数据
localStorage.removeItem('key') // 删除数据
localStorage.clear() // 删除所有数据
localStorage.key(index) // 获取某个索引数据的
sessionStorage.setItem('key', 'val') // 存储数据
sessionStorage.getItem('key') // 取数据
sessionStorage.removeItem('key') // 删除数据 `
注意：localStorage和sessionStorage存储的数据都是字符串类型的数据，取出来的数据也是字符串类型，因此如果存储的对象不是字符串，则要转换成字符串数据类型
5. WebSocket
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
WebSocket 属性
Socket.readyState只读属性,表示连接状态：0 - 表示连接尚未建立，1 - 表示连接已建立，可以进行通信，2 - 表示连接正在进行关闭，3 - 表示连接已经关闭或者连接不能打开。Socket.bufferedAmount只读属性,已被 send() 放入正在队列中等待传输，但是还没有发出的 UTF-8 文本字节数。
WebSocket 事件
Socket.onopen连接建立时触发Socket.onmessage客户端接收服务端数据时触发Socket.onerror通信发生错误时触发Socket.onclose连接关闭时触发
例子：`
function WebSocketTest()
{
if ("WebSocket" in window)
{
alert("您的浏览器支持 WebSocket!");
// 打开一个 web socket
var ws = new WebSocket("ws://localhost:9998/echo");
ws.onopen = function()
{
// Web Socket 已连接上，使用 send() 方法发送数据
ws.send("发送数据");
alert("数据发送中...");
};
ws.onmessage = function (evt)
{
var received_msg = evt.data;
alert("数据已接收...");
};
ws.onclose = function()
{
// 关闭 websocket
alert("连接已关闭...");
};
}
else
{
// 浏览器不支持 WebSocket
alert("您的浏览器不支持 WebSocket!");
}
}
WebSocketTest()
复制代码` 关于更多的WebSocket大家就去HTML5 WebSocket了解吧。
6. Web Workers
web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。 关于web worker的应用大概分为三个部分：
- 一. 创建 web worker 文件，worker文件是一个单独的js文件，写好逻辑后，通过postMessage()方法吧数据发送出去
- 二. 调用页面创建worker对象，var w = new Worker("worker文件路径").然后通过实例对象调用
onmessage事件进行监听，并获取worker文件里返回的数据 - 三.终止web worker，当我们的web worker创建后会持续的监听它，需要中止的时候则使用实例上的方法
w.terminate()。
下面是个简单的 web worker文件 `
// 这是一个单独的js文件
var i=0;
function timedCount()
{
i=i+1;
postMessage(i); //把数据发送出去
setTimeout("timedCount()",500);
}
timedCount();
复制代码` 在html页面调用worker文件，并创建worker对象
`
<div>计数器: <output id="result"></output></div>
<button onclick="startWorker()">开始Worker</button>
<button onclick="stopWorker()">停止Worker</button>
var w;
function startWorker()
{
if(typeof(Worker)!=="undefined")
{
if(typeof(w)=="undefined")
{
w=new Worker("worker.js"); // 创建worker实例对象
}
w.onmessage = function (event) { // 通过onmessage事件接收数据
document.getElementById("result").innerHTML=event.data;
};
}
else
{
document.getElementById("result").innerHTML="Sorry, your browser
does not support Web Workers...";
}
}
function stopWorker()
{
w.terminate(); // 停止worker任务
}
复制代码` 注意：由于Worker属于外部文件，因此它不能获取javascript这些对象： window 对象，document 对象，parent 对象。
总结
HTML5新特性概述本次用上下俩篇进行了总结和简单的概述，目的就是给大家一个关于html5总体的认识。本次分享就到这里了，喜欢的朋友帮给个赞吧，谢谢。
作者：IT男爵
链接：https://juejin.im/post/5bea349a518825170d1a9db1
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。