HTML5 作为如今前端必备“新”技术，理应成为前端基础的必备技能之一

背景

HTML5 是 HTML 的最新标准定义。这个术语展示了两个概念。它是 HTML 语言的最新版本，拥有着新的元素、参数和行为，还有一个大的集合，使得可以构建更加多样化和强大的 Web 网站和应用。这个集合有时候称作 HTML5&friends，常简写为 HTML5。

  1. 语义上：允许描述你的内容更加精确

  2. 连通性上：允许你和服务端的交流以革新的方式

  3. 离线和存储：允许网页在本地客户端存储数据并更加高效地离线操作

  4. 多媒体：使视频和音频在 Web 世界成为第一公民

  5. 2D/3D 图形和效果：允许更加多样化范围的呈现选项

  6. 性能和集成：提供更快的优化和更好的计算机硬件用法

  7. 设备访问：允许多种输入输出设备的用法

  8. 样式：让用户写更加复杂的主题

提纲

  • 语义
  • 连通性
  • 离线和存储
  • 多媒体
  • 3D 图形和效果
  • 性能和集成
  • 设备访问
  • 样式

语义

  • 使用 HTML5 音频和视频
  • 表格提升
  • 新的语义元素
  • iframe 提高
  • MathML

连通性

  • Web Sockets
  • 服务端发送事件
  • WebRTC

离线和存储

  • 离线资源：应用缓存
  • 在线和离线事件
  • WHATWG 客户端会话和持久化存储（aka DOM 存储）
  • IndexedDB
  • 从 web 应用使用文件

多媒体

  • 使用 HTML5 音频和视频
  • WebRTC
  • 使用相机 API
  • Track 和 WebVTT

3D 图形和效果

  • Canvas
  • 用于 canvas 元素的 HTML5 文本 API
  • WebGL
  • SVG

性能和集成

  • Web Workers
  • XMLHttpRequest 等级 2
  • 即时编译 javascript 引擎
  • 历史 API
  • 可编辑内容的参数：将你的网站转变成 wiki
  • 拖放
  • HTML 中的聚焦管理
  • 基于 Web 协议的处理器
  • requestAnimationFrame
  • 全屏 API
  • 指针锁 API
  • 线上和离线事件

事件访问

  • 使用相机 API
  • 触摸事件
  • 使用地图定位
  • 检测设备方向
  • 指针锁 API

样式

CSS 企图渲染元素以一种更加复杂的方式。这通常指的是 CSS3，尽管 CSS 不再是一个单一的规范并且不同的模块不是都在 CSS3：有一些在 CSS1 和 CSS4，伴随着所有的中间水平。

  • 新的背景样式特征
  • 更多奇特的边框
  • 动画样式
  • 排版提高
  • 新的呈现布局

参考链接：