FE

HTML5 介绍

HTML5 带来了什么新东西?

Posted by nolan on January 29, 2020

一、概述

HTML5 是一种新的 HTML 标准版本,于 2014 年发布。

二、更新

2.1 更好的语义

  • 新增区块和段落元素
    • <section>,<article>,<nav>,<header>,<footer>,<aside>,<hgroup>
  • 新增音频和视频元素
    • <audio>,<video>
  • 表单
    • 新增强制校验 API required
    • input 元素新的 type 值
    • 新的 <output> 元素
  • 新的语义元素
    • <mark>,<data>,<time>,<figure>等
  • iframe 改进
    • 引入 sandbox,seamless,srcdoc 属性,更好的控制安全级别和渲染

2.2 与服务器的通信

  • web socket
    • 建立页面和服务器间的持久连接
    • 用于非 html 数据的交换;
  • Server-sent events
    • 允许服务器向客户端主动推送事件;
  • WebRTC,
    • RTC 代表即时通信,允许连接到其他人
    • 直接在浏览器控制视频会议

2.3 离线&存储能力

  • IndexDB
    • 存储结构化数据;
    • 使用索引进行高性能检索;
  • 在浏览器端读取本地文件
    • type 为 file 的<input> 元素新增 multiple 属性,允许上传多文件;
    • 新增 fileReader 接口读取本地文件;

2.4 绘图能力

  • Canvas
  • WebGL

2.5 性能 & 集成

  • Web Workers
    • 把计算密集型任务交给后台线程;
    • 允许后台线程和主线程之间通信;
  • History

    • 允许对历史记录进行操作;
    • 基于 History 可以实现前端路由;
  • contentEditable

    • 为 html 元素添加 contentEditable 属性为 true,使其可编辑
  • requestAnimationFrame
    • 无卡顿的控制动画渲染

2.6 设备访问能力

  • 获取地理位置定位
  • 使用摄像头等

参考 MDN Web Docs