1. 程式人生 > >[筆記]《HTML5秘籍》- HTML5簡介

[筆記]《HTML5秘籍》- HTML5簡介

必須 head 改變 思想 意思 mod 核心 模式 blog

一、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簡介