HTML5 新特性

HTML5 新特性

新的 HTML5 语义

章节、轮廓等语义标签

<section><article><nav><header><footer><aside>

音频、视频

<audio><video>

input 校验

<input> 标签引入了新的属性:

  • required:表单的这个字段不为空
  • minlengthmaxlength:文本的长度要求
  • minmax:数值类型的大小值约束
  • type:是否是数值?邮件地址?或其它类型
  • pattern:输入的内容必须符合整个正则表达式

新的语义元素

<mark><figure><figcaption><data><time><output><progress><meter><main>

iframe 安全

  • sandbox 属性:附加更多限制
  • srcdoc 属性:内嵌的 HTML 内容

MathML 数学公式

使用 MathML 直接插入数学公式

数据传输

Web Sockets

浏览器和服务器建立一个长久连接,双方都可以发送信息给对方。

Server-sent events

Server 推送 event 给客户端:

const evtSource = new EventSource('ssedemo.php')

WebRTC

RTC:Real-Time Communication

存储

IndexedDB

选择多个文件

<input type = 'file'> 新增 multiple 属性,可选择多个文件。

多媒体

Camera API

<input type="file" id="take-picture" accept="image/*">

Graphics

canvas

画布

WebGL

提供 3D 能力

SVG

可以内嵌在 HTML 中的基于 XML 的向量图片

性能

  • Web Workers:繁重的 JavaScript 计算任务可以放到后台线程
  • History API:管理浏览器记录
  • Drag 和 Drop:拖拽文件
  • requestAnimationFrame:控制动画渲染
  • Fullscreen API:提供全屏 API

设备可访问性

  • Touch Events:感应用户手指触感事件
  • geolocation:提供地理位置信息

参考