本文為HTML標準解讀系列文章，其他文章詳見這里箱叁。
很多年前有人在reddit上問馬斯克墅垮，你為啥能學這么多東西？
馬斯克回答說：
it is important to view knowledge as sort of a semantic tree -- make sure you understand the
fundamental principles, ie the trunk and big branches, before you get into the leaves/details or there is nothing for them to hang on to.你需要把知識看作是一顆有語義的樹 --- 確保在你鉆研葉子/細節(jié)之前耕漱，理解基礎(chǔ)的原理算色，即樹干和大的枝干，否則你的知識沒有“依靠“螟够。
而HTML標準第二章就是整個標準的樹干灾梦，也因此這個章節(jié)的名稱為「Common infrastructure常見的基礎(chǔ)設(shè)施」。比如：
2.3小節(jié)講了HTML微語句的解析算法妓笙，這些微語句是HTML語句的基本組成部分之一若河。為了讀懂這些規(guī)則，你需要了解標準書寫算法使用的規(guī)范寞宫，為此我寫了一篇文章：以整數(shù)解析為例萧福，如何讀懂標準里的算法？辈赋；
2.5小節(jié)講了與資源獲取相關(guān)的各種HTML屬性鲫忍，我選擇了具有代表性的跨域?qū)傩裕钊雽懥艘黄恼拢?a target="_blank">crossorigin屬性：為什么它是避免tainted canvases的關(guān)鍵钥屈？悟民；
2.6小節(jié)講了幾個常見的DOM接口，接口是什么其實不重要焕蹄，重要的是如何讀懂貫穿整個標準逾雄、用來描述接口的IDL片段，為此我寫了一篇文章：一文讀懂web標準的基石：web IDL；
2.7小節(jié)講了「結(jié)構(gòu)化克隆」鸦泳，他是多個web api底層的運作機制银锻。為此，我又寫了一篇文章：結(jié)構(gòu)化克伦鲇ァ：瀏覽器的序列化機制击纬。
每節(jié)總結(jié)
2.1 Terminology 術(shù)語表
這一小節(jié)主要是關(guān)于標準中用到的技術(shù)術(shù)語的定義。
一般來說钾麸，閱讀術(shù)語表是一件很枯燥的事情更振。但是HTML標準里有一個交叉索引的功能，就是當你點擊這個黑色加粗的術(shù)語的時候饭尝，他會顯示標準中哪一些地方使用了這個術(shù)語（這也是為什么相比于紙質(zhì)書肯腕，我更喜歡電子書的原因之一）：
比如在2.1.1 Parallelism，標準定義了一個in parallel的詞組钥平，To run steps in parallel表示這些步驟會與標準定義的其他邏輯（如event loop）并行執(zhí)行 实撒。與其相對應(yīng)的是run immediately ，表示該操作會中斷當前執(zhí)行的任務(wù)涉瘾，等該操作完成后知态，才會恢復前面執(zhí)行的任務(wù)。
如果你感到這么說有點抽象立叛，這個時候陨倡，你就可以使用交叉索引來尋找標準中實際應(yīng)用這個詞組的地方矾睦。比如，用到in parallel的地方有：
有一定開發(fā)經(jīng)驗的你，至少會遇到過以上的一種或幾種情況咱揍。比如栖雾，使用input[type=file]元素上傳文件：
<label for="avatar">Choose a profile picture:</label>
<input type="file"
id="avatar" name="avatar"
accept="image/png, image/jpeg">
從用戶點擊上傳按鈕格了、選擇文件棉胀，到瀏覽器完成文件上傳、派發(fā)input和change事件秽浇，這整個過程都不會打斷主線程的運行浮庐。這么一想，你對in parallel就會有更加具體的感知柬焕。再配合其他的幾個API一起理解审残，你就會知道這其實就是我們所熟知的異步執(zhí)行的概念。
比如斑举，對于這些異步執(zhí)行的任務(wù)搅轿，一般有三種方式來獲取執(zhí)行的結(jié)果：
- callback：比如
canvas.toBold()方法； - 事件監(jiān)聽（嚴格說這也是callback）：比如
input[type=file]富玷； - promise：比如
image.decode()方法璧坟。
于是既穆，就是這樣，我們不斷的從「枝干」去看「葉子」雀鹃，又從「葉子」總結(jié)出「枝干」幻工，反復遞歸，反復迭代黎茎，慢慢的囊颅，我們就能看到馬斯克所說的「知識語義之樹」的全貌。
本小節(jié)除了列出了一些HTML標準定義的術(shù)語傅瞻，還有依賴其他標準的術(shù)語踢代，這個列表非常非常的長，不大可能也沒有必要一條一條地讀完嗅骄，在遇到的時候跟著鏈接去看定義就可以了胳挎。
2.2 Policy-controlled features
這一小節(jié)非常簡短，整節(jié)只有4行：
This document defines the following policy-controlled features:
- "
autoplay", which has a default allowlist of'self'.- "
cross-origin-isolated", which has a default allowlist of'self'.- "
document-domain", which has a default allowlist of*.
如果你不知道有個東西叫權(quán)限策略Permissions policy（曾用名為「特征策略feature policy」）溺森，那你肯定不知道這里在說什么串远。這里的 autoplay可不是HTML多媒體元素的那個autoplay屬性，而是一種控制頁面內(nèi)所有多媒體元素是否允許自動播放的全局策略儿惫。
這一部分我不打算在這里展開，我會在講到iframe元素的時候再講伸但。權(quán)限策略與iframe的allow屬性息息相關(guān)肾请，有興趣的可以先自行了解。
2.3 Common microsyntaxes 常見微語句
這一小節(jié)主要講了微語句的解析規(guī)則更胖。關(guān)于如何理解這些解析規(guī)則铛铁，我在《以整數(shù)解析為例，如何讀懂標準里的算法却妨？》里面做了詳盡的闡述饵逐。
在這里，我為你總結(jié)了本節(jié)列出的所有的微語句以及他們的使用場景彪标。
| 微語句類型 | 描述 | 應(yīng)用場景例子 |
|---|---|---|
| 布爾屬性 | 出現(xiàn)表示true倍权，不出現(xiàn)表示false | script元素的async、defer屬性 |
| 可枚舉屬性（enumerated attributes） | 屬性有有限的狀態(tài)：使用一組關(guān)鍵詞/狀態(tài)的映射集合捞烟，以及兩個特殊狀態(tài)invalid value default(非法值對應(yīng)的狀態(tài))和一個missing value default(屬性不出現(xiàn)時對應(yīng)的狀態(tài))薄声。 |
1. button元素的type屬性的值有三種狀態(tài)：Submit Button、Reset Button以及Button题画。 分別對應(yīng)的關(guān)鍵詞/屬性值是：submit 默辨、reset以及button。除此以外其他的值（即invalid value default）和以及該屬性沒出現(xiàn)的時候（即missing value default）對應(yīng)的都是狀態(tài)Submit Button苍息。<br />2. 另一個例子是我在另一篇文章提到的crossorigin屬性缩幸。 |
| 數(shù)字 | 有整數(shù)壹置、非負整數(shù)、浮點數(shù)表谊、百分數(shù)钞护、數(shù)字列表 | progress元素的value和max的值都是浮點數(shù)。 |
| 日期與時間 | 各種日期時間等格式 | 主要用在time元素上： 如<time>2011-11-18T14:54Z</time>
|
| 顏色 | 格式例子：#000000 |
input[type=color]的value屬性上 |
| 用空格隔開的tokens | 所有元素都有的class屬性 | |
| 用逗號隔開的tokens |
a ,b,,d d表示4個tokens铃肯，分別是"a"患亿、"b"、空字符串和d |
meta[name=keywords]元素上的content屬性：如<meta name="keywords" content="british,type face,font,fonts,highway,highways">
|
| 索引 | 哈希索引 | img元素的usemap屬性：如<img src="shapes.png" usemap="#shapes">
|
| 媒體查詢 | style元素的media屬性 |
2.4 URLs
這一小節(jié)篇幅不長押逼，主要講了URL的術(shù)語定義步藕、解析規(guī)則、以及base URL對其他元素的影響挑格。
2.5 Fetching resources 獲取資源
這一章講了HTML資源獲取方面的內(nèi)容咙冗，內(nèi)容比較繁雜，每一小節(jié)的內(nèi)容可以總結(jié)如下：
- 2.5.1 定義了response的類型以及創(chuàng)建一個潛在的CORS請求的算法漂彤。
- 2.5.2 使用MIME type來決定資源的類型雾消。
- 2.5.3 提取meta元素上聲明的字符編碼規(guī)則的算法。
- 2.5.4 CORS setting屬性的講解（對應(yīng)元素的
crossorigin屬性）挫望，詳見：crossorigin屬性：為什么它是避免tainted canvases的關(guān)鍵立润？ - 2.5.5 Referrer policy屬性的講解（對應(yīng)元素的
referrerpolicy屬性）。 - 2.5.6 CSP對應(yīng)的Nonce屬性的講解（對應(yīng)元素的
nonce屬性 ）媳板。 - 2.5.7 懶加載屬性的講解（對應(yīng)元素的
loading屬性）桑腮。 - 2.5.8 Blocking 屬性的講解（對應(yīng)元素的
blocking屬性）。
本節(jié)后面講的屬性中蛉幸，CORS setting屬性破讨、Referrer policy屬性、懶加載屬性都屬于[2.3小節(jié)](#2.3 Common microsyntaxes 常見微語句)中的所說的可枚舉屬性奕纫，Blocking屬性的值則是用「用空格隔開的tokens」來表示提陶。
2.6 Common DOM interfaces 常見的DOM接口
本小節(jié)可以分成兩個部分：
-
第一部分講的是IDL屬性(IDL attribute) 對內(nèi)容屬性(content attributes) 的反映(reflecting)。
內(nèi)容屬性一般指的是標簽中出現(xiàn)的屬性匹层，比如下面的title屬性就是內(nèi)容屬性：
<abbr id="myAbbr" title="Hypertext Transport Protocol">HTTP</abbr>IDL屬性一般指在DOM對象中出現(xiàn)的屬性隙笆，比如：
document.getElementById('myAbbr').title你會經(jīng)常在標準里面看到類似這樣的話：
The
titleIDL attribute must reflect thetitlecontent attribute.意思是DOM中的title屬性必須反映標簽中的title屬性，可以表示為：
document.getElementById('myAbbr').title === 'Hypertext Transport Protocol' // true當然又固，「反映」并不意味著所有情況下兩個值都是完全相等仲器，有很多的edge cases，這一節(jié)里就進行了詳細的闡述仰冠。
-
第二部分講的是幾個DOM接口：
HTMLAllCollection HTMLFormControlCollection HTMLOptionsCollection DOMStringList對于這一部分乏冀，我沒有詳細講解每一個接口是干什么的，我講的是如何讀懂這些接口洋只。DOM標準辆沦、HTML標準昼捍、ECMAScript標準都是使用web IDL來描述接口的，顯然肢扯，「讓讀者自己讀懂web IDL」是一件比「為讀者列舉每個接口是干什么的」更加具有實際意義的事情妒茬。于是，我寫了《一文讀懂web標準的基石：web IDL》 蔚晨，給大家提供理解web IDL的基本框架乍钻。
2.7 Safe passing of structured data 安全傳輸結(jié)構(gòu)化數(shù)據(jù)
為了讓js對象能夠在不同的js realm中安全的傳輸，標準定義了一套對象的序列化和反序列化铭腕、以及在特定情況下轉(zhuǎn)移對象的機制银择，稱為結(jié)構(gòu)化克隆。很多的web api都使用這樣的一套機制累舷，我在結(jié)構(gòu)化克潞瓶肌：瀏覽器的序列化機制進行了深入的講解。
