[筆記]《HTML5秘籍》- HTML5簡介
一、HTML5的故事
HTML的 基本思想——使用元素為內容添加結構——從Web誕生以來就沒有變過。
1 XHML 1.0:更嚴格的標準
HTML5包含多個標準,這些標準之間彼此關聯。
- HTML5核心。這一部分組要由W3C官方的規範組成,涉及新的語義元素、新的增強的Web表單微件、音頻和視頻支持以及通過JavaScript繪圖的Canvas。
- 曾經屬於HTML5的功能。這一部分源自WHATWG最初制定的HTML5規範,其中大多數功能需要JavaScript且支持富Web應用開發。最重要的包括本地數據存儲、離線應用和消息傳遞。
- 有時候會被稱為HTML5的功能。這些通常是指下一代功能。雖然它們從未進入過HTML5標準,但人們還是經常會把它們與HTML5相提並論。這部分包括CSS3和地理定位。
二、HTML5的三個主要原理
1 不破壞Web
“不破壞Web”的意思是標準不應該引入導致已有的網頁無法工作的改變。
“不破壞Web”還意味著標準不應該出人意料地更改規則,不能認定今天還完美無缺的網頁到了明天就要作廢。
2 修補牛蹄子路
HTML5標準化了這些非官方的技術。
3 實用至上
改變應該以使用為目的。
三、HTML5標記初體驗
1 HTML5文檔類型
每個HTML5文檔的第一行都必須是一個特定的文檔類型聲明。這個文檔類型聲明用於宣告後面的文檔標記遵循哪個標準。以下文檔聲明標記遵循HTML5標準:
<!DOCTYPE html>
保留文檔類型聲明,主要是由於歷史原因。如果沒有文檔類型聲明,那大多數瀏覽器將轉換到一種混雜模式(quirk mode)。在這種模式下,瀏覽器會嘗試根據有點不那麽正常的規則呈現網頁(那些規則是在瀏覽器的老版本中使用的)。而問題是,不同瀏覽器的混雜模式也不一樣,因為為一種瀏覽器設計的頁面到了另一個瀏覽器中,不是字體大小不一樣,就是布局上的瑕疵,或者出現其他不一致的問題。
而添加了文檔類型聲明後,瀏覽器就知道了你想要使用更嚴格的標準模式(standard mode),在這種模式下,所有現代瀏覽器都會以一致的格式和布局來顯示網頁。
2 字符編碼
字符編碼是一種標準,計算機根據它把文本轉換成保存在文檔中的字節序列。
在HTML5文檔中添加字符編碼信息也很簡單。只要在<head>區塊的最開始處添加相應的<meta>元素即可:
<head> <meta charset="utf-8"> <title>A Tiny HTML Document</title> </head>
3 頁面語言
指明網頁中使用的自然語言是一個好習慣。這個信息有時候對其他人有用,比如搜索引擎可以通過它來篩選搜索結果,確保只向搜索著返回頁面語言與他使用的語言相同的頁面。
為給內容指定語言,可以在任何元素上使用lang屬性,並為該屬性指定相應的語言代碼(比如,en表示英文)。
四、今天開始用HTML5
1 對付舊版本的瀏覽器
1)平穩退化。有時候,如果某個功能不被瀏覽器支持,也不是什麽大問題。例如,<video>元素提供了一種後備機制,可以為老的瀏覽器提供替代內容。還有一些表單功能(例如占位符文本),以及像圓角和投影之類的CSS3屬性,較老的瀏覽器完全可以忽略他們。當然,可以寫一些JavaScript代碼來檢測瀏覽器是否支持你想使用的功能。如果不支持,則顯示較少內容或使用不那麽花哨的方式。
2)借助JavaScript。HTML5中的某些功能完全可以使用優秀的JavaScript庫來實現。其中有一些比較成熟的則成為“膩子腳本”。
2 了解瀏覽器支持情況
Can I use網站可以詳細列出每一款主流瀏覽器對HTML5的支持情況。
3 瀏覽器裝機情況統計
瀏覽器采用情況統計可以告訴你,有多少用戶的瀏覽器支持你想要的功能。為此,可以查看流行的流量跟蹤站點GlobalStats。網址http://gs.statcounter.com。
4 通過Modernizr檢測功能
檢測功能是應對瀏覽器支持差異的一個重要策略。典型的模式是,加載頁面,通過JavaScript腳本檢測某個具體的功能是否可用。
Modernizr(www.modernizr.com),它是一個小巧的、持續更新的工具,專門用於測試瀏覽器對很多HTML5及相關功能的支持情況。
5 使用“膩子腳本”填補功能缺陷
膩子腳本就是一大堆五花八門的技術,目的就是填平舊瀏覽器對HTML5支持上的缺陷。
[筆記]《HTML5秘籍》- HTML5簡介