說明
解讀不是翻譯,因此不會逐句涵蓋 w3c 的官方文檔,我本意將站在一個初學者的角度,將需要注意的地方記錄下來,同時站在一個實用主義者角度,將工作中不常用,但與標準差異較大的理解記錄下來,主要意圖是記錄自己的理解,和幫助日后索引與查詢,如果讀者希望地毯式理解 w3c 標準,建議逐字閱讀 w3c 官方英文文檔。
HTML
the Hypertext Markup Language 超文本標記語言
HTML 乍一看可能給人感覺到一些荒謬,因為其規范是在幾十年間,許多不同背景的開發者共同貢獻的,很多地方可能無法很全局的把握。
為了簡化難度,沒有暴露多線程的特征給開發者,HTML 和 DOM API 也被設計為無法檢測是否有其它腳本正在同時運行。就算是 webWorker,其實現原理可以認為是在同一個瀏覽器上下文序列化執行所有腳本。
Tag
由 <
>
/
構成,某些標簽可以不閉合,比如 <br>
標簽可以嵌套,比如:
<p>This <em>is <strong>correct</strong>.</em></p>
但不能交叉嵌套:
<p>This is <em>very <strong>wrong</em>!</strong></p>
Attribute
如果屬性值不包含空格、"
'
` =
<
>
,就可以不用雙引號,以下寫法都是正確的:
<!-- empty attributes -->
<input disabled>
<input disabled="">
<input disabled=""/>
<!-- attributes with a value -->
<input name=address>
<input name='address'>
<input name="address">
拓展機制
HTML 提供了很多方法拓展語義,確保使用安全的方法拓展語義,保證不會產生副作用,例如:
- class 可以被瀏覽器廣泛支持
- data - * 屬性可以確保不被瀏覽器使用,安全的傳遞數據
- 使用 <meta name="" content=""> 描述頁面數據
- 通過 rel="" 定義鏈接類型
- <script type =""> 可以定義自定義數據類型,通過本地或者服務器在頁面嵌入原生數據
- 使用 embed 嵌入插件,比如 flash
- 使用 js 拓展功能
解析
HTML 標記在瀏覽器被解析成 DOM 樹,存儲在內存中。包括的節點類型:DocumentType,Element,Text,Comment,以及不常見的 ProcessingInstruction。
例如:
<!DOCTYPE html>
<html>
<head>
<title>Sample page</title>
</head>
<body>
<h1>Sample page</h1>
<p>This is a <a href="demo.html">simple</a> sample.</p>
<!-- this is a comment -->
</body>
</html>
會被解析為:

可以看到文字雖然沒有被標簽包裹,但在 DOM 樹中與標簽一樣會生成 #text
節點。不過 #text
節點比預期的要多,因為代碼中包含很多空格與換行,不過,所有 <head>
之前的空白會被忽略,所有 </body>
之后的空白都會被提前到 </body>
的結尾處。
任何 DOM 節點都可以被嵌入的 script
腳本操控。
事件觸發
dom的回調,比如 img
標簽的 onLoad
,雖然是異步事件,但可能在 dom 渲染過程中觸發,因此如下的 js 監聽可能不會生效:
[站外圖片上傳中……(2)]
<!-- the 'load' event might fire here while the parser is taking a
break, in which case you will not see it! -->
<script>
var img = document.getElementById('games');
img.onload = gamesLogoHasLoaded; // might never fire!
</script>
XHTML
是 HTML 的變體,因為使用了 XML 語法。XHTML 是 XML 的應用程序。
如果文檔以 text / html MIME 類型傳輸,瀏覽器會作為 HTML 類型處理,目前使用 html 5.0 版本的規范,也就是 "HTML 5"。
如果使用 XML MIME 類型,例如 application / xhtml + xml 時,會被瀏覽器視為 XML 文檔,使用 XHTML 5.0 版本的規范,稱為 "XHTML 5"。與 HTML 5 的區別是,XHTML 5 對 HTML 標簽語法檢查的更嚴格,細小的語法錯誤都會阻止文檔渲染,比如 XHTML 中的 DOM 語法不允許 noscript
標簽,也不允許 -->
的注釋。
CSS
Cascading Style Sheets 層疊樣式表
讓呈現樣式與結構分離。
HTML 內聯的樣式屬性因為不利于維護,增大文件體積,已經逐漸廢棄,例如 <font color="">
,僅保留了 style
屬性。
WebFonts
在網頁使用字體,無需在系統安裝,正在打造的網頁字體通用標準是: WOFF