HTML5 有哪些新特性

<h3>1.增加新的语义化标签</h3>

<h3>2. input 增加新属性 </h3>

类型描述
datetime选取日期和时间(包括年,月,日,时,分,秒,分秒)
datetime-local日期和时间(包括年,月,日,时,分,秒,分秒)本地时间
date选取时间(包括年,月,日)
month年和月组成的日期
week年和星期数组成的日期
time时间(包括时,分,秒,和分秒)
number只接受数值
range必须输入一定范围内数值
email只接受邮箱值
url只接受 URL 值

<h3>3.HTML5 提供了两种在客户端存储数据的新方法</h3>

3.1 localStorage – 没有时间限制的数据存储
3.2 sessionStorage – 针对一个 session 的数据存储

<h3>4.Web Worker</h3>

4.1 什么是 Web Worker?

当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成。
web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 在后台运行。

4.2 Web Workers 和 DOM

由于 web worker 位于外部文件中,它们无法访问下例 JavaScript 对象:
window 对象
document 对象
parent 对象

<h3>5.服务器推送事件</h3>

传统的更新是网页询问是否有可更新的内容,而 H5 的 Server-Sent 事件是网页自动获取来自服务器的更新。

<h3>6.Canvas</h3>

H5 提供了 Canvas 画布的功能,可以完成图像的绘画。

<h3>7.音频和视频</h3>

HTML5 DOM 为 <audio> 和 <video> 元素提供了方法、属性和事件。
这些方法、属性和事件允许使用 JavaScript 来操作 <audio> 和 <video> 元素。

<h3>8.地理定位</h3>

HTML5 Geolocation API 允许我们对喜欢的网站共享我们的位置。JavaScript 可以捕获到纬度和经度,还可以发送给后端服务器,然后做一些位置感知的事情,比如查找本地企业或者在地图上显示我们的位置。

<h3>9.拖放</h3>

H5 让拖放变的更加便捷:

9.1 创建一个可拖拽对象

a. 如果想要拖动某个元素,需要设置元素的 draggable 属性为 true。
b. 给 dragstart 设置一个事件监听器存储拖拽数据。
c. 事件监听器 dragstart 会设置允许的效果(copy,move,link或者是组合形式的)。

9.2:放置对象

a .dragenter 事件,用来确定放置目标是否接受放置。如果放置被接受,那么这个事件必须取消。
b. dragover 事件,用来确定给用户显示怎样的反馈信息。如果这个事件被取消,反馈信息(通常就是光标)就会基于 dropEffect 属性的值更新。
c. 最后是 drop 事件,允许执行真是的放置。

    原文作者:H_婷
    原文地址: https://www.jianshu.com/p/ec49057617d5
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞