根據 Mozilla 的定義,原文如下:HTML5 is the latest evolution of the standard that defines HTML.
准確的來說:HTML5 是 HTML 標准的最新演進版本,即是對 HTML 標准的第五次修訂,目前仍未完工。其主要的目標是將互聯網語義化,以便更好地被人類和機器閱讀,並同時提供更好地支持各種媒體的嵌入。
通俗的理解:就是在html4標准之上添加了一些新的標簽(具有屬性和行為)。
那HTML5 到底添加了哪些標簽呢?舉例來說有video標簽, audio標簽,和canvas標簽,同時也集成了SVG內容。這些元素是為了更容易的在網頁中添加和處理多媒體和圖片內容而添加的。
其它新的元素包括section標簽, article標簽, header標簽, 和nav標簽,是為了豐富文檔的數據內容。新的屬性的添加也是為了同樣的目的。
同時也有一些屬性和元素被卸載掉了。一些元素,像a標簽, 和menu標簽被修改,重新定義或標准化了。同時APIs和DOM已經成為HTML5中的基礎部分了。
下面的一段代碼展示了一體個基本的Html5頁面的結構
<!DOCTYPE HTML>
<html>
<body>
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>
Html5新特性
HTML5 中的一些有趣的新特性:
- 增加了用於繪畫的 canvas 元素
- 增加了用於媒介回放的 video 和 audio 元素
- 增加了對本地離線存儲的更好的支持
- 增加了新的特殊內容元素,比如 article、footer、header、nav、section
- 增加了新的表單控件,比如 calendar、date、time、email、url、search
語義類
HTML5 中的節段和外觀概要
HTML5 中新的外觀概要和節段元素一覽: <header>, <footer>, <nav>, <section>, <article>, <aside> 和 <hgroup>等。
使用 HTML5 的音頻和視頻
audio 和 video 元素嵌入並能夠操作新的多媒體內容。
HTML5 的表單
看一下 HTML5 中對 web 表單的改進:約束確認 API,一些新的屬性,input 屬性的一些新值 type 和新的 output 元素。
新的語義元素
除了區段,媒體和表單元素之外,眾多的新元素,像 mark, figure, figcaption, data, time, output, progress, 或者 meter,也增加了有效的 HTML5 元素的數量。
iframe 的改進
使用 sandbox, seamless, 和 srcdoc 屬性,作者們現在可以精確控制 iframe 元素的安全級別以及期望的渲染。
MathML
允許直接嵌入數學公式。
HTML5 兼容的解析器
用於把 HTML5 文檔的字節轉換成 DOM 的解釋器,已經被擴展了,並且現在精確地定義了在所有情況下使用的行為,甚至當碰到無效的 HTML 這種情況。這就導致了 HTML5 兼容的瀏覽器之間極大的可預測性和互操作性。
連通性
Web Sockets
允許在頁面和服務器之間建立持久連接並通過這種方法來交換非 HTML 數據。
Server-sent events
允許服務器向客戶端推送事件,而不是僅在響應客戶端請求時服務器才能發送數據的傳統范式。
WebRTC
這項技術,其中的 RTC 代表的是即時通信,允許連接到其他人,直接在瀏覽器中控制視頻會議,而不需要一個插件或是外部的應用程序。
離線存儲
離線資源:應用程序緩存
火狐全面支持 HTML5 離線資源規范。其他大多數針對離線資源僅提供了某種程度上的支持。
在線和離線事件
火狐 3 支持 WHATWG 在線和離線事件,這可以讓應用程序和擴展檢測是否存在可用的網絡連接,以及在連接建立和斷開時能感知到。
WHATWG 客戶端會話和持久化存儲 (又名 DOM 存儲)
客戶端會話和持久化存儲讓 web 應用程序能夠在客戶端存儲結構化數據。
IndexedDB
是一個為了能夠在瀏覽器中存儲大量結構化數據,並且能夠在這些數據上使用索引進行高性能檢索的 web 標准。
自 web 應用程序中使用文件
對新的 HTML5 文件 API 的支持已經被添加到 Gecko 中,從而使 web 應用程序可以訪問由用戶選擇的本地文件。這包括使用 type file 的 input 元素的新的 multiple 屬性針對多文件選擇的支持。 還有 FileReader。
多媒體
使用 HTML5 音視頻
audio 和 video 元素嵌入並支持新的多媒體內容的操作。
WebRTC
這項技術,其中的 RTC 代表的是即時通信,允許連接到其他人,直接在瀏覽器中控制視頻會議,而不需要一個插件或是外部的應用程序
使用 Camera API
允許使用,操作計算機攝像頭,並從中存儲圖像。Allows to use, manipulate and store an image from the computer's camera.
Track 和 WebVTT
track 元素支持字幕和章節。WebVTT 一個文本軌道格式。
3D, 圖像 效果
Canvas 教程
了解有關新的 canvas 元素以及如何在火狐中繪制圖像和其他對象。
HTML5 針對 canvas 元素的文本 API
HTML5 文本 API 現在由 canvas 元素支持。
WebGL
WebGL 通過引入了一套非常地符合 OpenGL ES 2.0 並且可以用在 HTML5 canvas 元素中的 API 給 web 帶來了 3D 圖像功能。
SVG
一個基於 XML 的可以直接嵌入到 HTML 中的矢量圖像格式。
設備訪問
使用 Camera API
允許使用和操作計算機的攝像頭,並從中存取照片。
觸控事件
對用戶按下觸控屏的事件做出反應的處理程序。
使用地理位置服務
讓瀏覽器使用地理位置服務定位用戶的位置
檢測設備方向
讓用戶在運行瀏覽器的設備變更方向時能夠得到信息。這可以被用作一種輸入設備(例如制作能夠對設備位置做出反應的游戲)或者使頁面的布局跟屏幕的方向相適應(橫向或縱向)。
指針鎖定 API
允許鎖定到內容的指針,這樣游戲或者類似的應用程序在指針到達窗口限制時也不會失去焦點。
樣式
CSS 已經擴展到能夠以一個更加復雜的方法給元素設置樣式。這通常被稱為 CSS3, 盡管 CSS 已經不再是很難觸動的規范,並且不同的模塊並不全部位於 level 3:其中一些位於 level 1 而另一些位於 level 4,覆蓋了所有中間的層次。
新的背景樣式特性
現在可以使用 box-shadow 給邏輯框設置一個陰影,而且還可以設置 多背景。
更精美的邊框
現在不僅可以使用圖像來格式化邊框,使用 border-image 和它關聯的普通屬性,而且可以通過 border-radius 屬性來支持圓角邊框。
為你的樣式設置動畫
使用 CSS Transitions 以在不同的狀態間設置動畫,或者使用 CSS Animations 在頁面的某些部分設置動畫而不需要一個觸發事件,你現在可以在頁面中控制移動元素了。
排版方面的改進
作者擁有更高的控制已達到更佳的排版。他們不但可以控制 text-overflow 和 hyphenation, 而且也可以給它設置一個 陰影 或者更精細地控制它的 decorations。感謝新的 @font-face 規則,現在我們可以下載並應用自定義的字體了。
新的展示性布局
為了提高設計的靈活性,已經有兩種新的布局被添加了進來:CSS 多欄布局, 以及 CSS 靈活方框布局。
性能 & 集成
Web Workers
能夠把 JavaScript 計算委托給后台線程,通過允許這些活動以防止使交互型事件變得緩慢。
XMLHttpRequest Level 2
允許異步讀取頁面的某些部分,允許其顯示動態內容,根據時間和用戶行為而有所不同。這是在 Ajax背后的技術。
即時編譯的 JavaScript 引擎
新一代的 JavaScript 引擎功能更強大,性能更傑出。
History API
允許對瀏覽器歷史記錄進行操作。這對於那些交互地加載新信息的頁面尤其有用。
conentEditable 屬性:把你的網站改變成 wiki!
HTML5 已經把 contentEditable 屬性標准化了。了解更多關於這個特性的內容。
拖放
HTML5 的拖放 API 能夠支持在網站內部和網站之間拖放項目。同時也提供了一個更簡單的供擴展和基於 Mozilla 的應用程序使用的 API。
HTML 中的焦點管理
支持新的 HTML5 activeElement 和 hasFocus 屬性。
基於 Web 的協議處理程序
你現在可以使用 navigator.registerProtocolHandler() 方法把 web 應用程序注冊成一個協議處理程序。
requestAnimationFrame
允許控制動畫渲染以獲得更優性能。
全屏 API
為一個網頁或者應用程序控制使用整個屏幕,而不顯示瀏覽器界面。
指針鎖定 API
允許鎖定到內容的指針,這樣游戲或者類似的應用程序在指針到達窗口限制時也不會失去焦點。
在線和離線事件
為了構建一個良好的具有離線功能的 web 應用程序,你需要知道什么時候你的應用程序確實離線了。順便提一句,在你的應用程序又再回到在線狀態時你也需要知道。
JSON(JavaScript Object Notation)是Javascript專家大牛Douglas Crockford(克勞福德)發明的一種輕量的數據格式。雖然他的語法部分參考了javascript的一些特性,可以稱作Javascript的一個子集,但是他是可以獨立於任何語言之外的一種通用的數據格式(文本格式),相比XML來說具有更輕量的特點。
簡單來說,他是:
- JavaScript 對象表示法(JavaScript Object Notation)。
- 它是一種存儲和交換文本信息的語法。類似 XML。
- 它獨立於語言層面(javascript)之外,可以被很多語言調用。類似XML。
- 它比 XML 更小、更快,更易解析。
JSON可以表示三種類型的值:
第一種:簡單值,包括字符串、數值、布爾值和null。但是不支持undefined。
"hello, world!"
23
true
null
第二種:數組值
["name",23]
第三種:對象值
{
"name" : "hello",
"age" : 23
}
JSON中數組和對象頁可以相互嵌套,比如:
[
{
"name" : "hello",
"age" : 23,
"year" : [2001, 2002, 2003, 2004]
},
{
"name" : "hello",
"age" : 23,
"year" : [
{
"name" : "hello",
"age" : 23
}, 2002, 2003, 2004]
},
{
"name" : "hello",
"age" : 23
},
{
"name" : "hello",
"age" : 23,
"year" : [[1,2,3], 2002, 2003, [10,11,12]]
}
]
但是對比javascript語法,我們能夠看出他的語法特點:
- 只能使用雙引號(單引號是不被允許的,會報語法錯誤);
- 對象的屬性必須加上雙引號;
- 沒有變量,沒有操作符,沒有賦值語句,也沒有分號;
JSON的解析和序列化
JSON在WEB開發中非常流行,以至於成為了事實標准,甩開XML十條街不止的原因,除了跟Javascript有相似的語法之外,還有一個很重要的原因就是能夠非常方便的通過很簡單地兩個函數在javascript對象和json數據之間互相置換:
- stringify()—— 該方法將javascript對象序列化成JSON字符串;
- parse()—— 該方法將JSON字符串解析成javascript對象;
ECMAScript5標准定義了一個專門處理json的解析和序列化的對象—— JSON對象
JSON的序列化
var text = {
name : "hello,world",
age : 25,
year : 2014
};
var json_text = JSON.stringify(text);
console.log(json_text); // {"name":"hello,world","age":25,"year":2014}
stringify()方法可以接受兩個參數,兩個參數都是可選的。第一個參數是過濾器,過濾后可以只包含數組或者函數中需要的值;
var text = {
name : "hello,world",
age : 25,
year : 2014
};
var json_text = JSON.stringify(text ,["age","year"]);
console.log(json_text); // {"age":25,"year":2014}
第二個參數是定義是否縮進,如果是數字,代表縮進的空格數(最大是10),並且包含換行;如果是字符串,會被當做縮進符;
var text = {
name : "hello,world",
age : 25,
year : 2014
};
var json_text = JSON.stringify(text ,["age","year"],4);
console.log(json_text);
/* { "age": 25, "year": 2014 } */
如果定義第二個參數時,需要缺省第一個參數,可以用null代替;
var text = {
name : "hello,world",
age : 25,
year : 2014
};
var json_text = JSON.stringify(text ,null,4);
console.log(json_text);
/* { "name": "hello,world", "age": 25, "year": 2014 } */
JSON的解析
var text = {
name : "hello,world",
age : 25,
year : 2014
};
var json_text = JSON.stringify(text);
var json_text_data = JSON.parse(json_text);
console.log(typeof text); // object
console.log(typeof json_text_data); // object
console.log(text===json_text_data); // false
雖然text和json_text_data都是對象,並且具有相同的屬性,但是他們是兩個獨立的、沒有任何關系的對象。