<h3>1.增加新的语义化标签</h3>
<h3>2. input 增加新属性 </h3>
类型 | 描述 |
---|---|
datetime | 选取日期和时间(包括年,月,日,时,分,秒,分秒) |
datetime-local | 日期和时间(包括年,月,日,时,分,秒,分秒)本地时间 |
date | 选取时间(包括年,月,日) |
month | 年和月组成的日期 |
week | 年和星期数组成的日期 |
time | 时间(包括时,分,秒,和分秒) |
number | 只接受数值 |
range | 必须输入一定范围内数值 |
只接受邮箱值 | |
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 事件,允许执行真是的放置。