HTML5新增特性

html5总的来说多了十个新特性，但其不支持ie8及ie8以下版本的浏览器。

语义化标签
增强型表单
视频和音频
Canvas 绘图
SVG 绘图
地理定位
拖放 API
WebWorker
WebStorage
WebSocket

一、语义化标签

html5 语义化标签，可以使开发者更方便清晰构建页面的布局。

















    内容标题
    这是隐藏的内容一
    这是隐藏的内容二



    我是对话框



    
    午后时光
    


《CSS那些事儿》

2019/06/01

1.png

二、增强型表单

html5修改一些新的input输入特性，改善更好的输入控制和验证。

html5新增了五个表单元素




    

下载进度：


    用户名：
    加密：
    


0
    100
    +
    =
 

60%

html5新增表单属性

属性	描述
placehoder	输入框默认提示文字
required	要求输入的内容是否可为空
pattern	描述一个正则表达式验证输入的值
min/max	设置元素最小/最大值
step	为输入域规定合法的数字间隔
height/wdith	用于image类型标签图像高度/宽度
autofocus	规定在页面加载时，域自动获得焦点
multiple	规定元素中可选择多个值

三、音频和视频

html5提供了音频和视频文件的标准，既使用元素。

音频：。

视频：

四、Canvas 绘图

https://www.runoob.com/w3cnote/html5-canvas-intro.html

五、SVG 绘图

什么是SVG?
- SVG指可伸缩矢量图形
- SVG用于定义用于网络的基于矢量的图形
- SVG使用XML格式定义图形
- SVG图像在放大或改变尺寸的情况下其图形质量不会有损失
- SVG是万维网联盟的标准
SVG的优势
- SVG图像可通过文本编译器来创建和修改
- SVG图像可被搜索、索引、脚本化或压缩
- SVG是可伸缩的
- SVG图像可在任何的分辨率下被高质量的打印
- SVG可在图像质量不下降的情况下被放大
SVG 与 Canvas 区别
- SVG适用于描述XML中的2D图形的语言。
- Canvas随时随地绘制2D图形（使用javaScript）。
- SVG是基于XML的，意味这可以操作DOM，渲染速度较慢。
- 在SVG中每个形状都被当做是一个对象，如果SVG发生改变，页面就会发生重绘。
- Canvas是一像素一像素地渲染，如果改变某一个位置，整个画布会重绘。

Canvas	SVG
依赖分辨率	不依赖分辨率
不支持事件处理器	支持事件处理器
能够以.png或.jpg格式保存结果图像	复杂度会减慢搞渲染速度
文字呈现功能比较简单	适合大型渲染区域的应用程序
最合适图像密集的游戏	不适合游戏应用

六、地理定位

使用 getCurrentPosition() 方法来获取用户的位置。以实现“LBS服务”

七、拖放 API

拖放是一种常见的特性，即捉取对象以后拖到另一个位置。

在html5中，拖放是标准的一部分，任何元素都能够拖放。

当元素拖动时，我们可以检查其拖动的数据。

拖动生命周期	属性名	描述
拖动开始	ondragstart	在拖动操作开始时执行脚本
拖动过程中	ondrag	只要脚本在被拖动就运行脚本
拖动过程中	ondragenter	当元素被拖动到一个合法的防止目标时，执行脚本
拖动过程中	ondragover	只要元素正在合法的防止目标上拖动时，就执行脚本
拖动过程中	ondragleave	当元素离开合法的防止目标时
拖动结束	ondrop	将被拖动元素放在目标元素内时运行脚本
拖动结束	ondragend	在拖动操作结束时运行脚本

八、Web Worker

http://www.ruanyifeng.com/blog/2018/07/web-worker.html

JavaScript 语言采用的是单线程模型，也就是说，所有任务只能在一个线程上完成，一次只能做一件事。前面的任务没做完，后面的任务只能等着。随着电脑计算能力的增强，尤其是多核 CPU 的出现，单线程带来很大的不便，无法充分发挥计算机的计算能力。

Web Worker 可以通过加载一个脚本文件，进而创建一个独立工作的线程，在主线程之外运行。

基本使用：
- Web Worker的基本原理就是在当前javascript的主线程中，使用Worker类加载一个javascript文件来开辟一个新的线程，
- 起到互不阻塞执行的效果，并且提供主线程和新县城之间数据交换的接口：postMessage、onmessage。

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

九、Web Storage

WebStorage 是HTML新增的本地存储解决方案之一，但并不是取代cookie 而指定的标准，cookie 作为 HTTP 协议的一部分用来处理客户端和服务器的通信是不可或缺的，session 正式依赖与实现的客户端状态保持。WebSorage 的意图在于解决本来不应该 cookie 做，却不得不用 cookie 的本地存储。

websorage拥有5M的存储容量，而cookie却只有4K，这是完全不能比的。

客户端存储数据有两个对象，其用法基本是一致。

localStorage：没有时间限制的数据存储
sessionStorage:在浏览器关闭的时候就会清除。

十、WebSocket

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

特点：

握手阶段采用HTTP协议，默认端口是80和443
建立在TCP协议基础之上，和http协议同属于应用层
可以发送文本，也可以发送二进制数据。
没有同源限制，客户端可以与任意服务器通信。
协议标识符是ws（如果加密，为wss），如ws://localhost:8023

HTML5新增特性

你可能感兴趣的:(HTML5新增特性)