HTML 5 的十大新特性

HTML5 十大新特性总结

一、语义标签

二、增强型表单

三、视频和音频

四、Canvas绘图

五、SVG绘图

六、拖拉API

七、WebWorker

八、WebStorage

九、WebSocket

十、地理定位

一、语义化标签

1.1 什么是语义化标签?

• 语义化标签既是使标签有自己的含义

1.2 语义化标签的优势

• 使界面的代码结构清晰，方便代码的阅读和团队的合作开发

• 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以语义的方式来渲染网页。

• 有利于搜索引擎优化（SEO）。

<header>	定义了文档的头部区域
	定义了文档的尾部区域
	定义文档的导航
	定义文章
	定义页面以外的内容

二、增强型表单

1、新增5个表单元素

	用户会在他们输入数据时看到域定义选项的下拉列表
	进度条，展示连接/下载进度
	刻度值，用于某些计量，例如温度、重量等
	提供一种验证用户的可靠方法生成一个公钥和私钥
	用于不同类型的输出比如尖酸或脚本输出

1.1 detalist的用法

改代码输出结果：

1.2 progress的用法

• progress 表示定义一个进度条，用途很广泛，可以用在文件上传的进度显示，文件下载的进度显示，也可以作为一种loading的加载状态条使用。

• value 从0-max max没设置时默认为1

// 正常情况下value 为0 时的progress

 

// 当设置了value 值后progress的样式

// progress的动画模拟效果

五、SVG绘图

5.1 了解什么是SVG

• SVG 是一种使用 XML 描述 2D 图形的语言。

• SVG图像在放大或改变尺寸的情况下其图形质量不会有损失

• 当svg对象的属性发生变换时，浏览器会重新渲染该图形

5.2 svg跟canvas的区别

1、canvas可以随时绘制2D图形（用JavaScript）

2、svg是基于XML的，意味着可以操作DOM，渲染速度较慢

3、在SVG中每个形状都被当做是一个对象，如果SVG发生改变，页面就会发生重绘

4、Canvas是一像素一像素地渲染，如果改变某一个位置，整个画布会重绘。

5.3 SVG元素的用法

5.3.1 text

创建一个text元素

//text元素添加文本，x和y定义文本的起始终点

5.3.2 circle

// cx 和 cy  分别代表中新坐标 r 是半径 fill 代表图形的颜色

 

##### 5.3.3 **rect**

//  x, y 是起始坐标，width 和 height 是图形的宽高

5.5.4 path

d 包含方向命令。这些命令以命令名和一组坐标开始：

M 表示移动，它接受一组 x，y 坐标 L 表示直线将绘制到它接受一组 x，y H 是一条水平线，它只接受 x 坐标 V 是一条垂直线，它只接受 y 坐标 Z 表示关闭路径，并将其放回起始位置

六、地理定位

• 使用getCurrentPosition()方法来获取用户的位置

• 可以基于此实现计算位置距离

七、拖放API

• draggable 属性为 true 时元素开启拖放

7.1 拖放事件

源对象：

• dragstart：源对象开始拖放。

• drag：源对象拖放过程中。

• dragend：源对象拖放结束。

过程对象：

• dragenter：源对象开始进入过程对象范围内。

• dragover：源对象在过程对象范围内移动。

• dragleave：源对象离开过程对象的范围。

八、Web Worker

• Web Worker 是在主线程之外运行的

• 用于解决JS单线程中，持续较长的计算，而影响用户的交互

8.1 主要用法

• 提供主线程和新线程之间数据交换的接口：postMessage、onmessage。

work。js中

// 第二步
//worker.js
onmessage =function (evt){
  var data = evt.data;//通过evt.data获得发送来的数据
  postMessage( data );//将获取到的数据发送会主线程
}

html 主线程

//WEB页主线程
// 第一步
var workder = new Worker("./worker.js")  // 创建指向工具js的实例对象
workder.postMessage("我是主线程发送的信息")// 通过postMessage发送主线程的信息
// 第三步
worker.onmessage =function(evt){     //接收worker传过来的数据函数
   console.log(evt.data);              //输出worker发送来的数据
}

输出结果：

九、Web Storage

• Web Storage 是H5 引入的一个帮助解决cookie存储本地缓存的重要功能

• webstorage 中有5M容量，cookie只有4k

  9.1 sessionStorage

  session正式依赖与实现的客户端状态保持。

  sessionStorage将数据保存在session中，浏览器关闭数据就消失。

  9.2 localStorage

  localStorage则一直将数据保存在客户端本地，除非手动删除，否则一直保存。

  不管是sessionStorage，还是localStorage，可使用的API相同，常用的有如下几个（以localStorage为例）：

  1. 保存数据：localStorage.setItem(key,value);

  2. 读取数据：localStorage.getItem(key);

  3. 删除单个数据：localStorage.removeItem(key);

  4. 删除所有数据：localStorage.clear();

  5. 得到某个索引的key：localStorage.key(index);

---

十、WebSocket

• WebSocket协议为web应用程序客户端和服务端之间提供了一种全双工通信机制。

• 握手阶段采用HTTP协议，在服务端与客户端初次握手时，将HTTP协议升级成WebSocket协议当链接成功时就可以在双工模式下来回传递信息

• 没有同源限制，客户端可以与任意服务器通信

• 协议标识符为wx（如果加密为wxs）

• 除了协议定义外还有JS定义，只需要链接远程主机，并建立一个WebSocket实例链接到对端的URL即可