HTML
03 | HTML語義：div和span不是夠用了嗎？
語義類標籤是什麼，使用它有什麼好處？
語義類標籤也是大家工作中經常會用到的一類標籤，它們的特點是視覺表現上互相都差不多，主要的區別在於它們表示了不同的語義，比如大家會經常見到的 section、nav、p，這些都是語義類的標籤。
不過，在很多工作場景裏，語義類標籤也有它們自己無可替代的優點。正確地使用語義標籤可以帶來很多好處。
- 語義類標籤對開發者更爲友好，使用語義類標籤增強了可讀性，即便是在沒有 CSS 的時候，開發者也能夠清晰地看出網頁的結構，也更爲便於團隊的開發和維護。
- 除了對人類友好之外，語義類標籤也十分適宜機器閱讀。它的文字表現力豐富，更適合搜索引擎優化（SEO），也可以讓搜索引擎爬蟲更好地獲取到更多有效信息，有效提升網頁的搜索量，並且語義類還可以支持讀屏軟件，根據文章可以自動生成目錄等等。
“用對”比“不用”好，“不用”比“用錯”好。當然了，我覺得有理想的前端工程師還是應該去追求“用對”它們。
作爲自然語言延伸的語義類標籤
作爲自然語言和純文本的補充，用來表達一定的結構或者消除歧義。
- baby 語法：在 HTML5 中，就引入了這個表示 ruby 的標籤，它由 ruby、rt、rp 三個標籤來實現。
還有一種情況是，HTML 的有些標籤實際上就是必要的，甚至必要的程度可以達到：如果沒有這個標籤，文字會產生歧義的程度。
- em 標籤
作爲標題摘要的語義類標籤
h1-h6 是最基本的標題，它們表示了文章中不同層級的標題。有些時候，我們會有副標題，爲了避免副標題產生額外的一個層級，我們使用 hgroup 標籤。(升一級)
從 HTML 5 開始，我們有了 section 標籤，這個標籤可不僅僅是一個“有語義的 div”，它會改變 h1-h6 的語義。section 的嵌套會使得其中的 h1-h6 下降一級，因此，在 HTML5 以後，我們只需要 section 和 h1 就足以形成文檔的樹形結構：
<section>
<h1>HTML 語義 </h1>
<p>balah balah balah balah</p>
<section>
<h1> 弱語義 </h1>
<p>balah balah</p>
</section>
<section>
<h1> 結構性元素 </h1>
<p>balah balah</p>
</section>
......
</section>
作爲整體結構的語義類標籤
我們正確使用整體結構類的語義標籤，可以讓頁面對機器更友好。比如，這裏一個典型的 body 類似這樣：
<body>
<header>
<nav>
……
</nav>
</header>
<aside>
<nav>
……
</nav>
</aside>
<section>……</section>
<section>……</section>
<section>……</section>
<footer>
<address>……</address>
</footer>
</body>
除此之外，還有 article，article 是一種特別的結構，它表示具有一定獨立性質的文章。所以，article 和 body 具有相似的結構，同時，一個 HTML 頁面中，可能有多個 article 存在。
一個典型的場景是多篇新聞展示在同一個新聞專題頁面中，這種類似報紙的多文章結構適合用 article 來組織。
<body>
<header>……</header>
<article>
<header>……</header>
<section>……</section>
<section>……</section>
<section>……</section>
<footer>……</footer>
</article>
<article>
……
</article>
<article>
……
</article>
<footer>
<address></address>
</footer>
</body>
- header，如其名，通常出現在前部，表示導航或者介紹性的內容。
- footer，通常出現在尾部，包含一些作者信息、相關鏈接、版權信息等。
header 和 footer 一般都是放在 article 或者 body 的直接子元素，但是標準中並沒有明確規定，footer 也可以和 aside，nav，section 相關聯（header 不存在關聯問題）。
- aside 表示跟文章主體不那麼相關的部分，它可能包含導航、廣告等工具性質的內容。
aside 很容易被理解爲側邊欄，實際上二者是包含關係，側邊欄是 aside，aside 不一定是側邊欄。
aside 和 header 中都可能出現導航（nav 標籤），二者的區別是，header 中的導航多數是到文章自己的目錄，而 aside 中的導航多數是到關聯頁面或者是整站地圖。
最後 footer 中包含 address，這是個非常容易被誤用的標籤。address 並非像 date 一樣，表示一個給機器閱讀的地址，而是表示“文章（作者）的聯繫方式”，address 明確地只關聯到 article 和 body。
04 | HTML語義：如何運用語義類標籤來呈現Wiki網頁？
aside
首先我們來看下，左側側邊欄，根據上一篇文章中提到的語義定義，這裏屬於 aside 內容。是導航性質的工具內容。
article
我們來到文章主體部分，因爲主體部分具有明確的獨立性，所以可以用 article 來包裹。
hgroup, h1, h2
在語義的上一篇文章中，我們介紹過 hgroup 和 h1-h6 的作用，hgroup 是標題組，h1 是一級標題，h2 是二級標題。這裏，World Wide Web 是文章的大標題，適合 h1 元素。
接下來出現了一個副標題。From Wikipedia, the free encyclopedia。這個地方適合使用 h2，跟 h1 組成一個 hgroup，所以代碼可能是類似這樣的:
<hgroup>
<h1>World Wide Web </h1>
<h2>From Wikipedia, the free encyclopedia</h2>
</hgroup>
abbr
abbr 標籤表示縮寫。考慮到 WWW 是 World Wide Web 的縮寫，所以文中所有出現的 WWW，都應該使用 abbr 標籤，
hr
hr 標籤表示橫向分隔線，hr 表示故事走向的轉變或者話題的轉變
使用 CSS 的 border 來把它當作純視覺效果來實現
p
多數自然段都是普通的段落，我們用 p 標籤來實現。
strong
注意，這裏 “World Wide Web (WWW)” 和 “the Web” 使用了黑體呈現，從上下文來看，這裏表示這個詞很重要，所以我們使用 strong 標籤。
blockquote, q, cite
接下來我們看到了一個論文中很常見的用法“引述”。
在 HTML 中，有三個跟引述相關的標籤 blockquote 表示段落級引述內容，q 表示行內的引述內容，cite 表示引述的作品名。
time
這裏除了引用的文章外，還出現了日期，爲了讓機器閱讀更加方便，可以加上 time 標籤：
<cite>"What is the difference between the Web and the Internet?"</cite>. W3C Help and FAQ. W3C. 2009. Archived from the original on <time datetime="2015-07-09">9 July 2015</time>. Retrieved <time datetime="2015-07-16">16 July 2015</time>.
figure, figcaption
<figure>
<img src="https://.....440px-NeXTcube_first_webserver.JPG"/>
<figcaption>The NeXT Computer used by Tim Berners-Lee at CERN.</figcaption>
</figure>
figure 標籤用於表示與主文章相關的圖像、照片等流內容
這種插入文章中的內容，不僅限圖片，代碼、表格等，只要是具有一定自包含性（類似獨立句子）的內容，都可以用 figure。這裏面，我們用 figcaption 表示內容的標題，當然，也可以沒有標題。
dfn
需要在你要定義的詞前後放上 dfn 標籤，所以我們知道了，dfn 標籤是用來包裹被定義的名詞。
nav, ol, ul
接下來，幾個普通的段落之後，我們看到了文章的目錄。這裏的目錄鏈接到文章的各個章節，我們可以使用 nav 標籤。因爲這裏的目錄順序不可隨意變化，所以我們這裏使用多級的 ol 結構。
我們這裏必須要指出，ol 和 ul 的區分是內容是否有順序關係，每一項的前面不論是數字還是點，都不會影響語義的判斷。所以，你可以注意一下這裏，不要因爲視覺表現效果，而改變語義的使用。
pre, samp, code
這是一段 HTTP 協議的內容描述，因爲這段內容的換行是非常嚴格的，所以我們不需要瀏覽器幫我們做自動換行，因此我們使用了 pre 標籤，表示這部分內容預先排版過的，不需要瀏覽器進行排版。
又因爲這是一段計算機程序的示例輸出，所以我們可以使用 samp 標籤：
<pre><samp>
GET /home.html HTTP/1.1
Host: www.example.org
</samp></pre>
因爲同時是代碼，我們還需要加上 code 標籤。最後的代碼是 pre 標籤包裹了 code 標籤，code 標籤包裹了 HTML 代碼。
總結
15 | HTML元信息類標籤：你知道head裏一共能寫哪幾種標籤嗎？
head 標籤
head 標籤本身並不攜帶任何信息，它主要是作爲盛放其它語義類標籤的容器使用。
title 標籤
title 標籤表示文檔的標題。
語義類標籤中也有一組表示標題的標籤：h1-h6。
這主要是考慮到 title 作爲元信息，可能會被用在瀏覽器收藏夾、微信推送卡片、微博等各種場景，這時侯往往是上下文缺失的，所以 title 應該是完整地概括整個網頁內容的。
而 h1 則僅僅用於頁面展示，它可以默認具有上下文，並且有鏈接輔助，所以可以簡寫，即便無法概括全文，也不會有很大的影響。
base 標籤
base 標籤實際上是個歷史遺留標籤。它的作用是給頁面上所有的 URL 相對地址提供一個基礎。
base 標籤最多隻有一個，它改變全局的鏈接地址，它是一個非常危險的標籤，容易造成跟 JavaScript 的配合問題，所以在實際開發中，我比較建議你使用 JavaScript 來代替 base 標籤。
meta 標籤
meta 標籤是一組鍵值對，它是一種通用的元信息表示標籤。
在 head 中可以出現任意多個 meta 標籤。一般的 meta 標籤由 name 和 content 兩個屬性來定義。name 表示元信息的名，content 則用於表示元信息的值。
具有 charset 屬性的 meta
charset 型 meta 標籤非常關鍵，它描述了 HTML 文檔自身的編碼形式。因此，我建議這個標籤放在 head 的第一個。
<meta charset="UTF-8" >
具有 http-equiv 屬性的 meta
具有 http-equiv 屬性的 meta 標籤，表示執行一個命令，這樣的 meta 標籤可以不需要 name 屬性了。
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
相當於添加了 content-type 這個 http 頭，並且指定了 http 編碼方式。
- content-type，http 頭
- content-language 指定內容的語言；
- default-style 指定默認樣式表；
- refresh 刷新；
- set-cookie 模擬 http 頭 set-cookie，設置 cookie；
- x-ua-compatible 模擬 http 頭 x-ua-compatible，聲明 ua 兼容性；
- content-security-policy 模擬 http 頭 content-security-policy，聲明內容安全策略。
name 爲 viewport 的 meta
我們來介紹一個 meta 類型，它沒有在 HTML 標準中定義，卻是移動端開發的事實標準：它就是 name 爲 viewport 的 meta。
這類 meta 的 name 屬性爲 viewport，它的 content 是一個複雜結構，是用逗號分隔的鍵值對，鍵值對的格式是 key=value。
<meta name="viewport" content="width=500, initial-scale=1">
這裏只指定了兩個屬性，寬度和縮放，實際上 viewport 能控制的更多，它能表示的全部屬性如下：
- width：頁面寬度，可以取值具體的數字，也可以是 device-width，表示跟設備寬度相等。
- height：頁面高度，可以取值具體的數字，也可以是 device-height，表示跟設備高度相等。
- initial-scale：初始縮放比例。
- minimum-scale：最小縮放比例。
- maximum-scale：最大縮放比例。
- user-scalable：是否允許用戶縮放。
對於已經做好了移動端適配的網頁，應該把用戶縮放功能禁止掉，寬度設爲設備寬度，一個標準的 meta 如下：
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
其它預定義的 meta
- application-name：如果頁面是 Web application，用這個標籤表示應用名稱。
- author: 頁面作者。
- description：頁面描述，這個屬性可能被用於搜索引擎或者其它場合。
- generator: 生成頁面所使用的工具，主要用於可視化編輯器，如果是手寫 HTML 的網頁，不需要加這個 meta。
- keywords: 頁面關鍵字，對於 SEO 場景非常關鍵。
- referrer: 跳轉策略，是一種安全考量。
- theme-color: 頁面風格顏色，實際並不會影響頁面，但是瀏覽器可能據此調整頁面之外的 UI（如窗口邊框或者 tab 的顏色）。
結語
在本課，我們又學習了一批標籤，它們是文檔用於描述自身的元信息類標籤。一些元信息標籤可以產生實際的行爲，掌握它們對於我們編寫代碼是必須的。
另一些元信息僅僅是對頁面的描述，掌握它們可以使我們編寫的頁面跟各種瀏覽器、搜索引擎等結合地更好。
- head：元信息的容器。
- title：文檔標題。
- base：頁面的基準 URL。
- meta: 元信息通用標籤。
我們還展開介紹了幾種重要的 meta 標籤，charset 表示頁面編碼，http-equiv 表示命令，還介紹了一些有約定的 meta 名稱。
23 | HTML鏈接：除了a標籤，還有哪些標籤叫鏈接？
鏈接是 HTML 中的一種機制，它是 HTML 文檔和其它文檔或者資源的連接關係，在 HTML 中，鏈接有兩種類型。一種是超鏈接型標籤，一種是外部資源鏈接。
鏈接的家族中有 a 標籤、area 標籤和 link 標籤。今天，我會逐一對它們進行介紹。
link 標籤
link 標籤會生成一個鏈接，它可能生成超鏈接，也可能生成外部資源鏈接。
- 一些 link 標籤會生成超鏈接，這些超鏈接又不會像 a 標籤那樣顯示在網頁中。這就是超鏈接型的 link 標籤。這意味着多數瀏覽器中，這些 link 標籤不產生任何作用。但是，這些 link 標籤能夠被搜索引擎和一些瀏覽器插件識別，從而產生關鍵性作用。比如，到頁面 RSS 的 link 標籤，能夠被瀏覽器的 RSS 訂閱插件識別，提示用戶當前頁面是可以 RSS 訂閱的。
- 另外一些 link 標籤則會把外部的資源鏈接到文檔中，也就是說，會實際下載這些資源，並且做出一些處理，比如我們常見的用 link 標籤引入樣式表。除了元信息的用法之外，多數外部資源型的 link 標籤還能夠被放在 body 中使用，從而起到把外部資源鏈接進文檔的作用。
link 標籤的鏈接類型主要通過 rel 屬性來區分，在本篇文章中，我們提到 xx 型 link 即表示屬性 rel 爲 xx 的 link，其代碼類似下面：
<link rel="xx" ...>
超鏈接類 link 標籤
- canonical 型 link
這個標籤提示頁面它的主 URL，在網站中常常有多個 URL 指向同一頁面的情況，搜索引擎訪問這類頁面時會去掉重複的頁面，這個 link 會提示搜索引擎保留哪一個 URL。
- alternate 型 link
這個標籤提示頁面它的變形形式，這個所謂的變形可能是當前頁面內容的不同格式、不同語言或者爲不同的設備設計的版本，這種 link 通常也是提供給搜索引擎來使用的。
alternate 型的 link 的一個典型應用場景是，頁面提供 rss 訂閱時，可以用這樣的 link 來引入：
<link rel="alternate" type="application/rss+xml" title="RSS" href="...">
除了搜索引擎外，很多瀏覽器插件都能識別這樣的 link。
- prev 型 link 和 next 型 link
在互聯網應用中，很多網頁都屬於一個序列，比如分頁瀏覽的場景，或者圖片展示的場景，每個網頁是序列中的一個項。
這種時候，就適合使用 prev 和 next 型的 link 標籤，來告訴搜索引擎或者瀏覽器它的前一項和後一項，這有助於頁面的批量展示。
因爲 next 型 link 告訴瀏覽器“這是很可能訪問的下一個頁面”，HTML 標準還建議對 next 型 link 做預處理，在本課後面的內容，我們會講到預處理類的 link。
- 其它超鏈接類的 link
其它超鏈接類 link 標籤都表示一個跟當前文檔相關聯的信息，可以把這樣的 link 標籤視爲一種帶鏈接功能的 meta 標籤。
- rel=“author” 鏈接到本頁面的作者，一般是 mailto: 協議
- rel=“help” 鏈接到本頁面的幫助頁
- rel=“license” 鏈接到本頁面的版權信息頁
- rel=“search” 鏈接到本頁面的搜索頁面（一般是站內提供搜索時使用）
外部資源類 link 標籤
外部資源型 link 標籤會被主動下載，並且根據 rel 類型做不同的處理。外部資源型的標籤包括：具有 icon 型的 link、預處理類 link、modulepreload 型的 link、stylesheet、pingback。下面我們來一一介紹它們。
- icon 型 link
這類鏈接表示頁面的 icon。多數瀏覽器會讀取 icon 型 link，並且把頁面的 icon 展示出來。
icon 型 link 是唯一一個外部資源類的元信息 link，其它元信息類 link 都是超鏈接，這意味着，icon 型 link 中的圖標地址默認會被瀏覽器下載和使用。
- 預處理類 link
我們都知道，導航到一個網站需要經過 dns 查詢域名、建立連接、傳輸數據、加載進內存和渲染等一系列的步驟。
預處理類 link 標籤就是允許我們控制瀏覽器，提前針對一些資源去做這些操作，以提高性能（當然如果你亂用的話，性能反而更差）。
下面我來列一下這些 link 類型：
- dns-prefetch 型 link 提前對一個域名做 dns 查詢，這樣的 link 裏面的 href 實際上只有域名有意義。
- preconnect 型 link 提前對一個服務器建立 tcp 連接。
- prefetch 型 link 提前取 href 指定的 url 的內容。
- preload 型 link 提前加載 href 指定的 url。
- prerender 型 link 提前渲染 href 指定的 url。
- modulepreload 型的 link
modulepreload 型 link 的作用是預先加載一個 JavaScript 的模塊。這可以保證 JS 模塊不必等到執行時才加載。
<link rel="modulepreload" href="app.js">
<link rel="modulepreload" href="helpers.js">
<link rel="modulepreload" href="irc.js">
<link rel="modulepreload" href="fog-machine.js">
<script type="module" src="app.js">
儘管，單獨使用 script 標籤引用 app.js 也可以正常工作，但是我們通過加入對四個 JS 文件的 link 標籤，使得四個 JS 文件有機會被並行地下載，這樣提高了性能。
- stylesheet 型 link
<link rel="stylesheet" href="xxx.css" type="text/css">
基本用法是從一個 CSS 文件創建一個樣式表。這裏 type 屬性可以沒有，如果有，必須是"text/css"纔會生效。
rel 前可以加上 alternate，成爲 rel=“alternate stylesheet”，此時必須再指定 title 屬性。
- pingback 型 link
這樣的 link 表示本網頁被引用時，應該使用的 pingback 地址，這個機制是一份獨立的標準，遵守 pingback 協議的網站在引用本頁面時，會向這個 pingback url 發送一個消息。
a 標籤
a 標籤其實同時充當了鏈接和目標點的角色，當 a 標籤有 href 屬性時，它是鏈接，當它有 name 時，它是鏈接的目標。
具有 href 的 a 標籤跟一些 link 一樣，會產生超鏈接，也就是在用戶不操作的情況下，它們不會被主動下載的被動型鏈接。
重點的內容是，a 標籤也可以有 rel 屬性，我們來簡單瞭解一下，首先是跟 link 相同的一些 rel，包括下面的幾種。
- alternate
- author
- help
- license
- next
- prev
- search
這些跟 link 語義完全一致，不同的是，a 標籤產生的鏈接是會實際顯示在網頁中的，而 link 標籤僅僅是元信息，不會像 a 標籤那樣顯示在網頁中。
除了這些之外，a 標籤獨有的 rel 類型：
- tag 表示本網頁所屬的標籤；
- bookmark 到上級章節的鏈接。
a 標籤還有一些輔助的 rel 類型，用於提示瀏覽器或者搜索引擎做一些處理：
- nofollow 此鏈接不會被搜索引擎索引；
- noopener 此鏈接打開的網頁無法使用 opener 來獲得當前頁面的窗口；
- noreferrer 此鏈接打開的網頁無法使用 referrer 來獲得當前頁面的 url；
- opener 打開的網頁可以使用 window.opener 來訪問當前頁面的 window 對象，這是 a 標籤的默認行爲。
a 標籤基本解決了在頁面中插入文字型和整張圖片超鏈接的需要，但是如果我們想要在圖片的某個區域產生超鏈接，那麼就要用到另一種標籤了——area 標籤。
area 標籤
area 標籤與 a 標籤非常相似，不同的是，它不是文本型的鏈接，而是區域型的鏈接。
area 是整個 html 規則中唯一支持非矩形熱區的標籤，它的 shape 屬性支持三種類型。
- 圓形：circle 或者 circ，coords 支持三個值，分別表示中心點的 x,y 座標和圓形半徑 r。
- 矩形：rect 或者 rectangle，coords 支持兩個值，分別表示兩個對角頂點 x1，y1 和 x2，y2。
- 多邊形：poly 或者 polygon，coords 至少包括 6 個值，表示多邊形的各個頂點。
因爲 area 設計的時間較早，所以不支持含有各種曲線的路徑，但是它也是唯一一個支持了非矩形觸發區域的元素，所以，對於一些效果而言，area 是必不可少的。
<p>
Please select a shape:
<img src="shapes.png" usemap="#shapes"
alt="Four shapes are available: a red hollow box, a green circle, a blue triangle, and a yellow four-pointed star.">
<map name="shapes">
<area shape=rect coords="50,50,100,100"> <!-- the hole in the red box -->
<area shape=rect coords="25,25,125,125" href="red.html" alt="Red box.">
<area shape=circle coords="200,75,50" href="green.html" alt="Green circle.">
<area shape=poly coords="325,25,262,125,388,125" href="blue.html" alt="Blue triangle.">
<area shape=poly coords="450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60"
href="yellow.html" alt="Yellow star.">
</map>
</p>
這個例子展示了在一張圖片上畫熱區並且產生鏈接，分別使用了矩形、圓形和多邊形三種 area。
結語
本節課我們介紹了幾種鏈接類型。在 HTML 中，鏈接有兩種類型。一種是超鏈接型標籤，一種是外部資源鏈接。
我們逐次講到了 link 標籤、a 標籤和 area 標籤，link 標籤一般用於看不見的鏈接，它可能產生超鏈接或者外部資源鏈接，a 和 area 一般用於頁面上顯示的鏈接，它們只能產生超鏈接。
33 | HTML替換型元素：爲什麼link一個CSS要用href，而引入js要用src呢？
script 標籤
我們之所以選擇先講解 script 標籤，是因爲 script 標籤是爲數不多的既可以作爲替換型標籤，又可以不作爲替換型標籤的元素。
<script type="text/javascript">
console.log("Hello world!");
</script>
<script type="text/javascript" src="my.js"></script>
這個例子中，我們展示了兩種 script 標籤的寫法，一種是直接把腳本代碼寫在 script 標籤之間，另一種是把代碼放到獨立的 js 文件中，用 src 屬性引入。
這裏我們就可以回答標題中的問題了：凡是替換型元素，都是使用 src 屬性來引用文件的，而我們之前的課程中已經講過，鏈接型元素是使用 href 屬性的。
- script 標籤，替換型元素，都是使用 src 屬性來引用文件的
- style 標籤並非替換型元素，不能使用 src 屬性，這樣，我們用 link 標籤引入 CSS 文件，當然就是用 href 屬性啦
img 標籤
img 標籤的作用是引入一張圖片。這個標籤是沒有辦法像 script 標籤那樣作爲非替換型標籤來使用的，它必須有 src 屬性纔有意義。
如果一定不想要引入獨立文件，可以使用 data uri，我們來看個實際的例子：
<img src='data:image/svg+xml;charset=utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg"><rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/></svg>'/>
這個例子中我們使用了 data uri 作爲圖片的 src，這樣，並沒有產生獨立的文件，客觀上做到了和內聯相同的結果，這是一個常用的技巧。
img 標籤可以使用 width 和 height 指定寬度和高度。也可以只指定其中之一。我們看個例子：
<img src='data:image/svg+xml;charset=utf8,<svg width="600" height="400" version="1.1"
xmlns="http://www.w3.org/2000/svg"><ellipse cx="300" cy="150" rx="200" ry="80"
style="fill:rgb(200,100,50);
stroke:rgb(0,0,100);stroke-width:2"/></svg>' width="100"/>
這個例子中，爲了方便你理解，我們把圖片換成了橢圓，我們可以看到，當我們指定了寬度後，圖片被等比例縮放了。這個特性非常重要，適用於那種我們既要限制圖片尺寸，又要保持圖片比例的場景。
如果從性能的角度考慮，建議你同時給出圖片的寬高，因爲替換型元素加載完文件後，如果尺寸發生變換，會觸發重排版（這個概念我們在瀏覽器原理部分已經講過，可以複習一下）。
此處要重點提到一個屬性，alt 屬性，這個屬性很難被普通用戶感知，對於視障用戶非常重要，可以毫不誇張地講，給 img 加上 alt 屬性，已經做完了可訪問性的一半。
img 標籤還有一組重要的屬性，那就是 srcset 和 sizes，它們是 src 屬性的升級版（所以我們前面講 img 標籤必須有 src 屬性，這是不嚴謹的說法）。
這兩個屬性的作用是在不同的屏幕大小和特性下，使用不同的圖片源。下面一個例子也來自 MDN，它展示了 srcset 和 sizes 的用法
<img srcset="elva-fairy-320w.jpg 320w,
elva-fairy-480w.jpg 480w,
elva-fairy-800w.jpg 800w"
sizes="(max-width: 320px) 280px,
(max-width: 480px) 440px,
800px"
src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">
srcset 提供了根據屏幕條件選取圖片的能力，但是其實更好的做法，是使用 picture 元素。
picture 標籤
picture 元素可以根據屏幕的條件爲其中的 img 元素提供不同的源，它的基本用法如下：
<picture>
<source srcset="image-wide.png" media="(min-width: 600px)">
<img src="image-narrow.png">
</picture>
picture 元素的設計跟 audio 和 video 保持了一致（稍後我會爲你講解這兩個元素），它跟 img 搭配 srcset 和 sizes 不同，它使用 source 元素來指定圖片源，並且支持多個。
這裏的 media 屬性是 media query，跟 CSS 的 @media 規則一致。
video 標籤
在 HTML5 早期的設計中，video 標籤跟 img 標籤類似，也是使用 src 屬性來引入源文件的，不過，我想應該是考慮到了各家瀏覽器支持的視頻格式不同，現在的 video 標籤跟 picture 元素一樣，也是提倡使用 source 的。
現在的 video 標籤可以使用 source 標籤來指定接入多個視頻源。
<video controls="controls" >
<source src="movie.webm" type="video/webm" >
<source src="movie.ogg" type="video/ogg" >
<source src="movie.mp4" type="video/mp4">
You browser does not support video.
</video>
從這個例子中，我們可以看到，source 標籤除了支持 media 之外，還可以使用 type 來區分源文件的使用場景。
video 中還支持一種標籤：track。
track 是一種播放時序相關的標籤，它最常見的用途就是字幕。track 標籤中，必須使用 srclang 來指定語言，此外，track 具有 kind 屬性，共有五種。
- subtitles：就是字幕了，不一定是翻譯，也可能是補充性說明
- captions：報幕內容，可能包含演職員表等元信息，適合聽障人士或者沒有打開聲音的人瞭解音頻內容
- descriptions：視頻描述信息，適合視障人士或者沒有視頻播放功能的終端打開視頻時瞭解視頻
- chapters：用於瀏覽器視頻內容。
- metadata：給代碼提供的元信息，對普通用戶不可見。
audio 標籤
接下來我們來講講 audio，跟 picture 和 video 兩種標籤一樣，audio 也可以使用 source 元素來指定源文件。我們看一下例子：
<audio controls>
<source src="song.mp3" type="audio/mpeg">
<source src="song.ogg" type="audio/ogg">
<p>You browser does not support audio.</p>
</audio>
但比起 video，audio 元素的歷史問題並不嚴重，所以使用 src 也是沒有問題的。
iframe 標籤
最後我們來講一下 iframe，這個標籤能夠嵌入一個完整的網頁。
不過，在移動端，iframe 受到了相當多的限制，它無法指定大小，裏面的內容會被完全平鋪到父級頁面上。
同時很多網頁也會通過 http 協議頭禁止自己被放入 iframe 中。
iframe 標籤也是各種安全問題的重災區。opener、window.name、甚至 css 的 opacity 都是黑客可以利用的漏洞。
不推薦在實際開發中用以前的 iframe。
當然，不推薦使用是一回事，因爲沒人能保證不遇到歷史代碼，我們還是應該瞭解一下 iframe 的基本用法：
<iframe src="http://time.geekbang.org"></iframe>
在新標準中，爲 iframe 加入了 sandbox 模式和 srcdoc 屬性，這樣，給 iframe 帶來了一定的新場景。我們來看看例子：
<iframe sandbox srcdoc="<p>Yeah, you can see it <a href="/gallery?mode=cover&amp;page=1">in my gallery</a>."></iframe>
這樣，這個 iframe 就不涉及任何跨域問題了。
總結
這節課，我們又認識了一組 HTML 元素：替換型元素。它們的特點是，引入一個外部資源來進入頁面，替換掉自身的位置。
我們通過對 script、img、picture、audio、video、iframe 幾個標籤的講解，瞭解了不同的資源引入方式：
- src 屬性；
- srcset 屬性；
- source 標籤；
- srcdoc 屬性。
這中間，我們也介紹了一些小技巧，比如 src 屬性的好朋友——data uri，這在實際開發中非常有用。
34 | HTML小實驗：用代碼分析HTML標準
- 表單類標籤
- 表格類標籤
一個小實驗：利用工具分析 Web 標準文本，來獲得元素的信息。
通過這個實驗，我希望能夠傳遞一種思路，代碼能夠幫助我們從 Web 標準中挖掘出來很多想要的信息，編寫代碼的過程，也是更深入理解標準的契機。
39 | HTML語言：DTD到底是什麼？
- JavaScript 語言我們把它稱爲“編程語言”，它最大的特點是圖靈完備的，我們大致可以理解爲“包含了表達一切邏輯的能力”。
- HTML 這樣的語言，我們稱爲“標記語言（mark up language）”，它是純文本的一種升級，“標記”一詞的概念來自：編輯審稿時使用不同顏色筆所做的“標記”。
基本語法
標籤語法
標籤語法產生元素，我們從**語法的角度講，就用“標籤”這個術語，我們從運行時的角度講，就用“元素”**這個術語。
HTML 中，用於描述一個元素的標籤分爲開始標籤、結束標籤和自閉合標籤。開始標籤和自閉合標籤中，又可以有屬性。
- 開始標籤：
- 帶屬性的開始標籤：
- 結束標籤：
- 自閉合標籤：
HTML 中開始標籤的標籤名稱只能使用英文字母。
這裏需要重點講一講屬性語法，屬性可以使用單引號、雙引號或者完全不用引號，這三種情況下，需要轉義的部分都不太一樣。
屬性中可以使用文本實體（後文會介紹）來做轉義，屬性中，一定需要轉義的有：
- 無引號屬性：、、、、& 五種字符
- 單引號屬性：’、& 兩種字符
- 雙引號屬性："、& 兩種字符
文本語法
在 HTML 中，規定了兩種文本語法，一種是普通的文本節點，另一種是 CDATA 文本節點。
文本節點看似是普通的文本，但是，其中有兩種字符是必須做轉義的：< 和 &。
如果我們從某處拷貝了一段文本，裏面包含了大量的 < 和 &，那麼我們就有麻煩了，這時候，就輪到我們的 CDATA 節點出場了。
CDATA 也是一種文本，它存在的意義是語法上的意義：在 CDATA 節點內，不需要考慮多數的轉義情況。
CDATA 內，只有字符組合]]>需要處理，這裏不能使用轉義，只能拆成兩個 CDATA 節點。
DTD 規定了 HTML 包含了哪些標籤、屬性和文本實體。其中文本實體分佈在三個文件中：HTMLsymbol.ent HTMLspecial.ent 和 HTMLlat1.ent。
所謂文本實體定義就是類似以下的代碼：
<
>
&
每一個文本實體由 & 開頭，由 ; 結束，這屬於基本語法的規定，文本實體可以用 # 後跟一個十進制數字，表示字符 Unicode 值。除此之外這兩個符號之間的內容，則由 DTD 決定。
註釋語法
HTML 註釋語法以 結尾
DTD 語法（文檔類型定義）
DTD 的全稱是 Document Type Defination，也就是文檔類型定義。SGML 用 DTD 來定義每一種文檔類型，HTML 屬於 SGML，在 HTML5 出現之前，HTML 都是使用符合 SGML 規定的 DTD。
衆所周知，HTML 中允許一些標籤不閉合的用法，實際上這些都是符合 SGML 規定的，並且在 DTD 中規定好了的。但是，一些程序員喜歡嚴格遵守 XML 語法，保證標籤閉合性.
其實你看看就知道，這些複雜的 DTD 寫法並沒有什麼實際作用（瀏覽器根本不會用 SGML 引擎解析它們），因此，到了 HTML5，乾脆放棄了 SGML 子集這項堅持，規定了一個簡單的，大家都能記住的 DTD：
<!DOCTYPE html>
ProcessingInstruction 語法（處理信息）
ProcessingInstruction 多數情況下，是給機器看的。HTML 中規定了可以有 ProcessingInstruction，但是並沒有規定它的具體內容，所以可以把它視爲一種保留的擴展機制。對瀏覽器而言，ProcessingInstruction 的作用類似於註釋。
ProcessingInstruction 包含兩個部分，緊挨着第一個問號後，空格前的部分被稱爲“目標”，這個目標一般表示處理 ProcessingInstruction 的程序名。
剩餘部分是它的文本信息，沒有任何格式上的約定，完全由文檔編寫者和處理程序的編寫者約定。
總結
今天的課程中我們講了 HTML 的語法，HTML 語法源自 SGML，我們首先介紹了基本語法，包含了五種節點：標籤（元素）、文本、註釋、文檔類型定義（DTD）和處理信息（ProcessingInstruction）。
文本實體是 HTML 轉義的重要手段。
42 | HTML·ARIA：可訪問性是隻給盲人用的特性麼？
ARIA 全稱爲 Accessible Rich Internet Applications，它表現爲一組屬性，是用於可訪問性的一份標準。關於可訪問性，它被提到最多的，就是它可以爲視覺障礙用戶服務，但是，這是一個誤解。
綜述
其中，widget 表示一些可交互的組件，structure 表示文檔中的結構，window 則代表窗體。
Widget 角色
這一類角色跟我們桌面開發中的控件類似，它表示一個可交互的組件，它們有：
我們這裏按照繼承關係給出一份列表和簡要說明：
structure 角色
這部分角色的作用類似於語義化標籤，但是內容稍微有些不同，我們這裏就不詳細講解了，僅僅給出一張圖供你參考：
注：separator 在允許焦點時屬於組件，在不允許焦點時屬於文檔結構。
這裏我們需要特別提出 Landmark 角色這個概念，Landmark 角色直接翻譯是地標，它是 ARIA 標準中總結的 Web 網頁中最常見的 8 個結構，Landmark 角色實際上是 section 的子類，這些角色在生成頁面摘要時有很大可能性需要被保留，它們是：
window 角色
在我們的網頁中，有些元素表示“新窗口”，這時候，會用到 window 角色。window 系角色非常少，只有三個角色：
- window
- dialog
- alertdialog
- dialog
dialog 可能會產生“焦點陷阱”，也就是說，當這樣的角色被激活時，焦點無法離開這個區域。
總結
今天我介紹了 ARIA 相關的知識，我們分幾個部分學習瞭如何使用 ARIA 屬性來提高頁面的可訪問性。
我們以 ARIA 角色爲中心，講解了 ARIA 定義的語義體系。我們可以把 ARIA 分爲三類：
- Widget 角色：主要是各種可交互的控件
- 結構角色：文檔的結構
- 窗體角色：彈出的窗體