HTML5 · 前端笔记

# HTML5 **HTML5**是定义HTML 标准的最新的版本。该术语表示两个不同的概念： * 它是一个新版本的**HTML**语言，具有新的元素，属性和行为， * 它有更大的**技术**集，允许更多样化和强大的网站和应用程序。这个集合有时称为HTML5和朋友，通常缩写为_**HTML5**_。 #### 声明文件包含HTML5标记 ``` <!DOCTYPE html> ``` #### 声明字符集 ``` <meta charset="UTF-8"> ``` --- ## [语义](/yu-yi.md) > 能够让你更恰当地描述你的内容是什么。 #### HTML5 中的节段和提纲 HTML5 中新的提纲和节段元素一览: `<section>`、`<article>`、`<nav>`、`<header>`、`<footer>`、`<aside>`和`<hgroup>。` #### 使用 HTML5 的音频和视频 `<audio>`和 `<video>`元素嵌入和允许操作新的多媒体内容。 #### HTML5 的表单看一下 HTML5 中对 web 表单的改进：强制验证 API，一些新的属性，`<input>`属性type 的一些新值，新的 `<output>`元素。 #### 新的语义元素除了节段，媒体和表单元素之外，还有众多的新元素，例如`<mark>`， `<figure>`， `<figcaption>`， `<data>`， `<time>`， `<output>`， `<progress>`，或者 `<meter>`和`<main>`，这增加了有效的 HTML5 元素的数量。 #### <iframe> 的改进使用 `sandbox`， `seamless`，和 `srcdoc`属性，作者们现在可以精确控制 `<iframe>`元素的安全级别以及期望的渲染。 #### MathML 允许直接嵌入数学公式。 --- ## [通信](/tong-xin.md) > 能够让你和服务器之间通过创新的新技术方法进行通信。 #### Web Sockets 允许在页面和服务器之间建立持久连接并通过这种方法来交换非 HTML 数据。 #### Server-sent events 允许服务器向客户端推送事件，而不是仅在响应客户端请求时服务器才能发送数据的传统范式。 #### WebRTC（未完成）这项技术，其中的 RTC 代表的是即时通信，允许连接到其他人，直接在浏览器中控制视频会议，而不需要一个插件或是外部的应用程序。 --- ## [离线 & 存储](/li-xian-and-cun-chu.md) {#离线_存储} > 能够让网页在客户端本地存储数据以及更高效地离线运行。 #### 离线资源：应用程序缓存火狐全面支持 HTML5 离线资源规范。其他大多数针对离线资源仅提供了某种程度上的支持。 #### 在线和离线事件 Firefox 3 支持 WHATWG 在线和离线事件，这可以让应用程序和扩展检测是否存在可用的网络连接，以及在连接建立和断开时能感知到。 #### WHATWG 客户端会话和持久化存储 \(又名 DOM 存储\) 客户端会话和持久化存储让 web 应用程序能够在客户端存储结构化数据。 #### IndexedDB 是一个为了能够在浏览器中存储大量结构化数据，并且能够在这些数据上使用索引进行高性能检索的 Web 标准。 #### 自 web 应用程序中使用文件对新的 HTML5 文件 API 的支持已经被添加到 Gecko 中，从而使 Web 应用程序可以访问由用户选择的本地文件。这包括使用 **type**`<input>`file的**multiple**`FileReader`元素的新的属性针对多文件选择的支持。还有`FileReader`。 --- ## [多媒体](/duo-mei-ti.md) {#多媒体} > 使 video 和 audio 成为了在所有 Web 中的一等公民。 #### 使用 HTML5 音视频（未完成） `<audio>`和`<video>`元素嵌入并支持新的多媒体内容的操作。 #### 使用 Camera API 允许使用，操作计算机摄像头，并从中存储图像。 #### Track 和 WebVTT `<track>`元素支持字幕和章节。 #### WebVTT 一个文本轨道格式。 --- ## [3D, 图像 & 效果](/3d-tu-xiang-and-xiao-guo.md) {#3D_图像_效果} > 提供了一个更加分化范围的呈现选择。 #### Canvas（未完成） `<canvas>`JavaScript是一个可以使用脚本\(通常为HTML\)在其中绘制图形的元素。 #### WebGL WebGL 通过引入了一套非常地符合 OpenGL ES 2.0 并且可以用在 HTML5`<canvas>`元素中的 API 给 Web 带来了 3D 图像功能。 #### SVG 一个基于 XML 的可以直接嵌入到 HTML 中的矢量图像格式。 --- ## [性能 & 集成](/xing-neng-and-ji-cheng.md) {#性能_集成} > 提供了非常显著的性能优化和更有效的计算机硬件使用。 #### Web Workers 能够把 JavaScript 计算委托给后台线程，通过允许这些活动以防止使交互型事件变得缓慢。 #### History API 允许对浏览器历史记录进行操作。这对于那些交互地加载新信息的页面尤其有用。 #### contentEditable 属性：把你的网站改变成 wiki ! HTML5 已经把 contentEditable 属性标准化了。 #### 拖放（未完成） HTML5 的拖放 API 能够支持在网站内部和网站之间拖放项目。 #### HTML 中的焦点管理支持新的 HTML5`activeElement`和`hasFocus`属性。 #### 基于 Web 的协议处理程序使用`navigator.registerProtocolHandler()`方法把 web 应用程序注册成一个协议处理程序。 #### requestAnimationFrame 允许控制动画渲染以获得更优性能。 #### 全屏 API 为一个网页或者应用程序控制使用整个屏幕，而不显示浏览器界面。 #### 在线和离线事件为了构建一个良好的具有离线功能的 web 应用程序，你需要知道什么时候你的应用程序确实离线了。顺便提一句，在你的应用程序又再回到在线状态时你也需要知道。 --- ## 设备访问 {#设备访问} > 能够处理各种输入和输出设备。 #### 触控事件对用户按下触控屏的事件做出反应的处理程序。 #### 使用地理位置定位让浏览器使用地理位置服务定位用户的位置。 #### 检测设备方向让用户在运行浏览器的设备变更方向时能够得到信息。这可以被用作一种输入设备（例如制作能够对设备位置做出反应的游戏）或者使页面的布局跟屏幕的方向相适应（横向或纵向）。 #### 指针锁定 API 允许锁定到内容的指针，这样游戏或者类似的应用程序在指针到达窗口限制时也不会失去焦点。