Skip to content

HTML5新特性

1480字约5分钟

html

2018-02-17

语义标签

<header> <footer> <nav> <section> <article> <aside> <details> <summary>
<dialog> <figure> <main> <mark> <time> <hgroup>

增强型表单

新增表单元素

<detailist> :数据列表,为input提供输入建议列表

<progress>:进度条,展示连接/下载进度

<meter>:刻度尺/度量衡,描述数据所处的阶段,红色(危险)=>黄色(警告)=>绿色(优秀)

<output>:输出内容,语义上表示此处的数据是经过计算而输出得到的

其他

新增表单属性

placehoder: 输入框默认提示文字

required: 要求输入的内容是否可为空

pattern: 描述一个正则表达式验证输入的值

min/max: 设置元素最小/最大值

step: 为输入域规定合法的数字间隔

height/wdith: 用于image类型<input>标签图像高度/宽度

autofocus: 规定在页面加载时,域自动获得焦点

multiple: 规定<input>元素中可选择多个值

新增 input type 类型

color: 颜色选取

date: 日期选择

datetime: 日期选择(UTC时间)

datetime-local: 日期选择(无时区)

month: 月份选择

week: 周和年 选择

time: 选择时间

email: 包含 email的地址输入域

number: 数值选择

url: url输入域

tel: 电话号码和字段

search: 搜索域

range: 数字范围输入域

视频和音频

<audio> 音频元素

<audio controls>
  <source src="horse.ogg" type="audio/ogg" />
  <source src="horse.mp3" type="audio/mpeg" />
  您的浏览器不支持 audio 元素
</audio>

<video> 视频元素

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  您的浏览器不支持Video标签。
</video>

Canvas绘图

<canvas> 是 HTML5 新增的,一个可以使用脚本(通常为 JavaScript) 在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画,甚至可以进行实时视频处理和渲染。

地理位置

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

window.navigator.geolocation : {
  watchPosition(){},
  clearWatch(){},
  getCurrentPosition(function(pos){
    // '定位成功'
    // 定位时间:pos.timestamp
    // 维度:pos.coords.latitude
    // 经度:pos.coords.longitude
    // 海拔:pos.coords.altitude
    // 速度:pos.coods.speed
  }, function(err){
    // '定位失败'
  }){},
}

拖放API

拖动的源对象(source)可能触发的事件

dragstart:拖动开始

drag:拖动中

dragend:拖动结束

拖动的目标对象(target)可能触发的事件

dragenter:拖动进入

dragover:拖动悬停

drop:松手释放

dragleave:拖动离开

拖放API事件句柄中所有的事件对象都有一个dataTransfer属性(数据运输对象),用于在源对象和目标对象间传递数据。

源对象:event.dataTransfer.setData(key, value)

目标对象:var value = event.dataTransfer.getData(key)

WebWorker

使用 Web Workers - Web API 接口参考 | MDN

背景

Chrome浏览器中发起资源请求的有6个线程;但是只有1个线程负责渲染页面——称为UI主线程——浏览器中所有的代码只能由一个线程来执行。

问题

若浏览器加载了一个很耗时的JS文件(可能影响DOM树结构),浏览器必须等待该文件执行完成才会继续执行后续的代码(HTML/CSS/JS等)——如果一个JS文件要执行10s(可能有很深的循环/递归等科学计算/解密),会发生什么?——执行耗时JS任务过程中,会暂停页面中一切内容的渲染以及事件的处理。

作用

一个执行指定任务的独立线程;且该线程可以与UI主线程进行消息数据传递。

使用方式:

// 主线程
var worker = new Worker('xx.js')
worker.postMessage('message') // 发送消息到worker线程
worker.onmessage = function (e) {
  console.log(e.data) // 来自worker线程的信息
}

// worker线程
onmessage = function (e) {
  console.log(e.data) // 接收主线程的消息

  postMessage('message') // 发送消息到主线程
}

共享 worker

一个共享worker可以被多个脚本使用——即使这些脚本正在被不同的window、iframe或者worker访问。

如果共享worker可以被多个浏览上下文调用,所有这些浏览上下文必须属于同源(相同的协议,主机和端口号)。

var myWorker = new SharedWorker('worker.js')

// 主线程中调用
myWorker.port.start()

myWorker.port.postMessage('message')

myWorker.port.onmessage = function (e) {
  console.log('Message received from worker')
}

// worker 线程调用
port.start()
// worker 需要在 onconnect事件处理函数来执行代码
onconnect = function (e) {
  var port = e.ports[0]

  port.onmessage = function (e) {
    var workerResult = 'Result: ' + e.data
    port.postMessage(workerResult)
  }
}

WebStorage

localStorage

本地跨会话级,持久化存储

sessionStorage

会话级存储

WebSocket

在用户的浏览器和服务器之间打开交互式通信会话。

const ws = new WebSocket('wx://xx')
ws.onopen = function () {}
ws.onmessage = function (e) {
  console.log(e.data)
}

History API

对history栈中内容进行操作。

pushState(stateObj, title, url)

history.pushState({}, 'foo', 'foo.html')

添加历史记录条目

replaceState(stateObj, title, url)

history.replaceState({}, 'bar', 'bar.html')

修改历史记录条目,浏览器不会检查替换的路径是否存在。

popState 事件

每当活动的历史记录项发生变化时, popstate 事件都会被传递给window对象。如果当前活动的历史记录项是被 pushState 创建的,或者是由 replaceState 改变的,那么 popstate 事件的状态属性 state 会包含一个当前历史记录状态对象的拷贝。

获取当前状态

页面加载时,或许会有个非null的状态对象。 这是有可能发生的,举个例子,假如页面(通过pushState() 或 replaceState() 方法)设置了状态对象而后用户重启了浏览器。 那么当页面重新加载时,页面会接收一个onload事件,但没有 popstate 事件。 然而,假如你读取了history.state属性,你将会得到如同popstate 被触发时能得到的状态对象。

// 尝试通过 pushState 创建历史条目,然后再刷新页面查看state状态对象变化;
window.addEventListener('load', () => {
  let currentState = history.state
  console.log('currentState', currentState)
})

History API - Web API 接口参考 | MDN