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 允許鎖定到內容的指針，這樣游戲或者類似的應用程序在指針到達窗口限制時也不會失去焦點。