[TOC] # 簡述 HTML的主要工作是編輯文本結(jié)構(gòu)和文本內(nèi)容（也稱為語義semantics），以便瀏覽器能正確的顯示。 本文介紹了 HTML的使用方法：在一段文本中添加標(biāo)題和段落，強(qiáng)調(diào)語句，創(chuàng)建列表等等。 # 基礎(chǔ): 標(biāo)題和段落 大部分的文本結(jié)構(gòu)由標(biāo)題和段落組成。 不管是小說、報(bào)刊、教科書還是雜志等。  內(nèi)容結(jié)構(gòu)化會(huì)使讀者的閱讀體驗(yàn)更輕松，更愉快。 在HTML中，每個(gè)段落是通過 <p> 元素標(biāo)簽進(jìn)行定義的, 比如下面這樣： ``` <p>我是一個(gè)段落，千真萬確。</p> ``` 每個(gè)標(biāo)題（Heading）是通過“標(biāo)題標(biāo)簽”進(jìn)行定義的： ``` <h1>我是文章的標(biāo)題</h1> ``` 這里有六個(gè)標(biāo)題元素標(biāo)簽 —— <h1>、<h2>、<h3>、<h4>、<h5>、<h6>。每個(gè)元素代表文檔中不同級(jí)別的內(nèi)容; <h1> 表示主標(biāo)題（the main heading），<h2> 表示二級(jí)子標(biāo)題（subheadings），<h3> 表示三級(jí)子標(biāo)題（sub-subheadings），等等。 ## 編輯結(jié)構(gòu)層次 這里舉一個(gè)例子。在一個(gè)故事中，<h1>表示故事的名字，<h2>表示每個(gè)章節(jié)的標(biāo)題， <h3>表示每個(gè)章節(jié)下的子標(biāo)題，以此類推。 ``` <h1>三國演義</h1> <p>羅貫中</p> <h2>第一回 宴桃園豪杰三結(jié)義 斬黃巾英雄首立功</h2> <p>話說天下大勢(shì)，分久必合，合久必分。周末七國分爭(zhēng)，并入于秦。及秦滅之后，楚、漢分爭(zhēng)，又并入于漢……</p> <h2>第二回 張翼德怒鞭督郵 何國舅謀誅宦豎</h2> <p>且說董卓字仲穎，隴西臨洮人也，官拜河?xùn)|太守，自來驕傲。當(dāng)日怠慢了玄德，張飛性發(fā)，便欲殺之……</p> <h3>卻說張飛</h3> <p>卻說張飛飲了數(shù)杯悶酒，乘馬從館驛前過，見五六十個(gè)老人，皆在門前痛哭。飛問其故，眾老人答曰：“督郵逼勒縣吏，欲害劉公；我等皆來苦告，不得放入，反遭把門人趕打！”……</p> ``` 所涉及的元素具體代表什么，完全取決于作者編輯的內(nèi)容，只要層次結(jié)構(gòu)是合理的。在創(chuàng)建此類結(jié)構(gòu)時(shí)，您只需要記住一些最佳實(shí)踐： * 您應(yīng)該最好只對(duì)每個(gè)頁面使用一次<h1> — 這是頂級(jí)標(biāo)題，所有其他標(biāo)題位于層次結(jié)構(gòu)中的下方。 * 請(qǐng)確保在層次結(jié)構(gòu)中以正確的順序使用標(biāo)題。不要使用<h3>來表示副標(biāo)題，后面跟<h2>來表示副副標(biāo)題 - 這是沒有意義的，會(huì)導(dǎo)致奇怪的結(jié)果。 * 在可用的六個(gè)標(biāo)題級(jí)別中，您應(yīng)該只在每頁使用不超過三個(gè)，除非您認(rèn)為有必要使用更多。具有許多級(jí)別的文檔（即，較深的標(biāo)題層次結(jié)構(gòu)）變得難以操作并且難以導(dǎo)航。在這種情況下，如果可能，建議將內(nèi)容分散在多個(gè)頁面上。 ## 為什么我們需要結(jié)構(gòu)化? 回答這個(gè)問題前，讓我們先來看一段文檔示例“text-start.html” — 并從運(yùn)行這段文檔示例（美味的豆沙食譜）開始。首先，您可以復(fù)制一份并保存到本地機(jī)器上，在之后的練習(xí)中您將用到它。在這個(gè)文檔的主體 （body）中包含了多個(gè)內(nèi)容 — 這些內(nèi)容沒有做任何標(biāo)記，但是編輯時(shí)使用了換行 (輸入回車/換行跳轉(zhuǎn)到下一行)處理。 然而，當(dāng)您在瀏覽器中打開文檔時(shí)，您會(huì)看到文本顯示為一整塊！  這是因?yàn)闆]有元素給內(nèi)容結(jié)構(gòu)，所以瀏覽器不知道什么是標(biāo)題，什么是段落。此外： * 用戶在閱讀網(wǎng)頁時(shí)，往往會(huì)快速瀏覽以查找相關(guān)內(nèi)容，經(jīng)常只是閱讀開頭的標(biāo)題。如果用戶不能在幾秒內(nèi)看到一些有用的內(nèi)容，他們很可能會(huì)感到沮喪并離開。 * 對(duì)您的網(wǎng)頁建立索引的搜索引擎將標(biāo)題的內(nèi)容視為影響網(wǎng)頁搜索排名的重要關(guān)鍵字。沒有標(biāo)題，您的網(wǎng)頁在[SEO](https://developer.mozilla.org/zh-CN/docs/Glossary/SEO)（搜索引擎優(yōu)化）方面效果不佳。 * 嚴(yán)重視力障礙者通常不會(huì)閱讀網(wǎng)頁；他們用聽力來代替。完成這項(xiàng)工作的軟件叫做屏幕閱讀器（[screen reader](http://en.wikipedia.org/wiki/Screen_reader)）。該軟件提供了快速訪問給定文本內(nèi)容的方法。在使用的各種技術(shù)中，它們通過朗讀標(biāo)題來提供文檔的概述，讓用戶能快速找到他們需要的信息。如果標(biāo)題不可用，用戶將被迫聽到整個(gè)文檔的大聲朗讀。 * 使用CSS樣式化內(nèi)容，或者使用JavaScript做一些有趣的事情，你需要包含相關(guān)內(nèi)容的元素，所以CSS / JavaScript可以有效地定位它。 因此，我們需要給我們的內(nèi)容結(jié)構(gòu)標(biāo)記。 ## 為什么我們需要語義？ 在我們身邊的任何地方都要依賴語義學(xué) — 我們依靠以前的經(jīng)驗(yàn)就知道日常事物都代表什么；當(dāng)我們看到什么，我們就會(huì)知道它代表什么。舉個(gè)例子, 我們知道紅色交通燈表示“停止”，綠色交通燈表示”通行“。 如果運(yùn)用了錯(cuò)誤的語義，事情會(huì)迅速地變得非常棘手 (難道有某個(gè)國家使用紅色代表通行？我不希望如此) 同樣的道理，我們需要確保使用了正確的元素來給予內(nèi)容正確的意思、作用以及外形。在這里，<h1> 元素也是一個(gè)語義元素，它給出了包裹在您的頁面上用來表示頂級(jí)標(biāo)題的角色（或意義）的文本。 ``` <h1>這是一個(gè)頂級(jí)標(biāo)題</h1> ``` 一般來說，瀏覽器會(huì)給它一個(gè)更大的字形來讓它看上去像個(gè)標(biāo)題（雖然你可以使用CSS讓它變成任何你想要的樣式。更重要的是，它的語義值將以多種方式被使用，比如通過搜索引擎和屏幕閱讀器（上文提到過的）。 在另一方面，你可以讓任一元素看起來像一個(gè)頂級(jí)標(biāo)題，如下： ``` <span style="font-size: 32px; margin: 21px 0;">這是頂級(jí)標(biāo)題嗎？</span> ``` 這是一個(gè) <span> 元素，它沒有語義。當(dāng)您想要對(duì)它用CSS（或者JS）時(shí)，您可以用它包裹內(nèi)容，且不需要附加任何額外的意義（在未來的課程中你會(huì)發(fā)現(xiàn)更多這類元素）。我們已經(jīng)對(duì)它使用了CSS來讓它看起來像一個(gè)頂級(jí)標(biāo)題。然而，由于它沒有語義值，所以它不會(huì)有任何上文提到的幫助。最好的方法是使用相關(guān)的HTML元素來標(biāo)記這個(gè)項(xiàng)目。 # 列表 Lists 現(xiàn)在，讓我們學(xué)習(xí)一下列表。列表在生活中隨處可見——從購物清單到回家的路線方案，再到本教程的說明列表。在網(wǎng)絡(luò)上，列表也隨處可見，大致包含了三種不同類型的列表。 ## 無序 Unordered 無序列表用于標(biāo)記列表項(xiàng)目順序無關(guān)緊要的列表 — 讓我們以早點(diǎn)清單為例。 ``` 豆?jié){ 油條 豆汁 焦圈 ``` 每份無序的清單從 <ul> 元素開始——需要包裹清單上所有被列出的項(xiàng)目： ``` <ul> 豆?jié){ 油條 豆汁 焦圈 </ul> ``` 然后就是用 <li> 元素把每個(gè)列出的項(xiàng)目單獨(dú)包裹起來： ``` <ul> <li>豆?jié){</li> <li>油條</li> <li>豆汁</li> <li>焦圈</li> </ul> ``` ## 有序 Ordered 有序列表需要按照項(xiàng)目的順序列出來——讓我們以一組方向?yàn)槔? ``` 沿著條路走到頭 右轉(zhuǎn) 直行穿過第一個(gè)十字路口 在第三個(gè)十字路口處左轉(zhuǎn) 繼續(xù)走 300 米，學(xué)校就在你的右手邊 ``` 這個(gè)標(biāo)記的結(jié)構(gòu)和無序列表一樣，除了需要用<ol> 元素將所有項(xiàng)目包裹, 而不是<ul>： ``` <ol> <li>沿著條路走到頭</li> <li>右轉(zhuǎn)</li> <li>直行穿過第一個(gè)十字路口</li> <li>在第三個(gè)十字路口處左轉(zhuǎn)</li> <li>繼續(xù)走 300 米，學(xué)校就在你的右手邊</li> </ol> ``` ## 嵌套列表 Nesting lists 將一個(gè)列表嵌入到另一個(gè)列表是完全可以的。 你可能想讓一些子項(xiàng)目列在首項(xiàng)目之下。讓我們從食譜示例中獲取第二個(gè)列表： ``` <ol> <li>先用蛋白一個(gè)、鹽半茶匙及淀粉兩大匙攪拌均勻，調(diào)成“腌料”，雞胸肉切成約一厘米見方的碎丁并用“腌料”攪拌均勻，腌漬半小時(shí)。</li> <li>用醬油一大匙、淀粉水一大匙、糖半茶匙、鹽四分之一茶匙、白醋一茶匙、蒜末半茶匙調(diào)拌均勻，調(diào)成“綜合調(diào)味料”。</li> <li>雞丁腌好以后，色拉油下鍋燒熱，先將雞丁倒入鍋內(nèi)，用大火快炸半分鐘，炸到變色之后，撈出來瀝干油汁備用。</li> <li>在鍋里留下約兩大匙油，燒熱后將切好的干辣椒下鍋，用小火炒香后，再放入花椒粒和蔥段一起爆香。隨后雞丁重新下鍋，用大火快炒片刻后，再倒入“綜合調(diào)味料”繼續(xù)快炒。</li> <li>如果你采用正宗川菜做法，最后只需加入花生米，炒拌幾下就可以起鍋了。</li> <li>如果你在北方，可加入黃瓜丁、胡蘿卜丁和花生米，翻炒后起鍋。</li> </ol> ``` 由于最后兩項(xiàng)與它們的前一項(xiàng)非常密切相關(guān)（它們看起來更像該項(xiàng)的子項(xiàng)或選項(xiàng)），將它們編輯成無序列表，并嵌套在該項(xiàng)的子項(xiàng)中可能更合理。就像下面這樣： ``` <ol> <li>先用蛋白一個(gè)、鹽半茶匙及淀粉兩大匙攪拌均勻，調(diào)成“腌料”，雞胸肉切成約一厘米見方的碎丁并用“腌料”攪拌均勻，腌漬半小時(shí)。</li> <li>用醬油一大匙、淀粉水一大匙、糖半茶匙、鹽四分之一茶匙、白醋一茶匙、蒜末半茶匙調(diào)拌均勻，調(diào)成“綜合調(diào)味料”。</li> <li>雞丁腌好以后，色拉油下鍋燒熱，先將雞丁倒入鍋內(nèi)，用大火快炸半分鐘，炸到變色之后，撈出來瀝干油汁備用。</li> <li>在鍋里留下約兩大匙油，燒熱后將切好的干辣椒下鍋，用小火炒香后，再放入花椒粒和蔥段一起爆香。隨后雞丁重新下鍋，用大火快炒片刻后，再倒入“綜合調(diào)味料”繼續(xù)快炒。 <ul> <li>如果你采用正宗川菜做法，最后只需加入花生米，炒拌幾下就可以起鍋了。</li> <li>如果你在北方，可加入黃瓜丁、胡蘿卜丁和花生米，翻炒后起鍋。</li> </ul> </li> </ol> ``` 嘗試回到上一個(gè)實(shí)踐操作的例子中，并更新第二個(gè)列表。 # 重點(diǎn)強(qiáng)調(diào) 在日常用語中，我們常常會(huì)加重某個(gè)字的讀音，或者用加粗等方式突出某句話的重點(diǎn)。與此類似，HTML 也提供了相應(yīng)的標(biāo)簽，用于標(biāo)記某些文本，使其具有加粗、傾斜、下劃線等效果。下面，我們將學(xué)習(xí)一些最常見的標(biāo)簽。 ## 強(qiáng)調(diào) 在口語表達(dá)中，我們有時(shí)會(huì)強(qiáng)調(diào)某些字，用來改變這句話的意思。同樣地，在書面用語中，我們可以使用斜體字來達(dá)到同樣的效果。例如，下面兩個(gè)句子便有不同的意思： I am glad you weren't late. I am glad you weren't late. (ps: 此句中"glad"和"late"為斜體字體) 第一句話聽起來真的像松了一口氣因?yàn)闆]有遲到。相反，第二句話聽起來具有諷刺性而且有隱含的攻擊性，表達(dá)對(duì)一個(gè)人遲到的惱怒。 在HTML中我們用<em>（emphasis）元素來標(biāo)記這樣的情況。這樣做既可以讓文檔讀起來更有趣，也可以被屏幕閱讀器識(shí)別出來，并以不同的語調(diào)發(fā)出。瀏覽器默認(rèn)風(fēng)格為斜體，但你不應(yīng)該純粹使用這個(gè)標(biāo)簽來獲得斜體風(fēng)格，為了獲得斜體風(fēng)格，你應(yīng)該使用<span>元素和一些CSS，或者是<i>元素（見下文）。 ``` <p>I am <em>glad</em> you weren't <em>late</em>.</p> ``` ## 非常重要 為了強(qiáng)調(diào)重要的詞，在口語方面我們往往用重音強(qiáng)調(diào)，在文字方面則是用粗體字來達(dá)到強(qiáng)調(diào)的效果。例如下面這段: This liquid is highly toxic. I am counting on you. Do not be late! 在HTML中我們用<strong> (strong importance) 元素來標(biāo)記這樣的請(qǐng)況。這樣做既可以讓文檔更加地有用，也可以被屏幕閱讀器識(shí)別出來，并以不同的語調(diào)發(fā)出。瀏覽器默認(rèn)風(fēng)格為粗體，但你不應(yīng)該純粹使用這個(gè)標(biāo)簽來獲得粗體風(fēng)格，為了獲得粗體風(fēng)格，你應(yīng)該使用<span>元素和一些CSS，或者是 <b> 元素 (見下文)。 ``` <p>This liquid is <strong>highly toxic</strong>.</p> <p>I am counting on you. <strong>Do not</strong> be late!</p> ``` 如有需要你可以將strong元素和em元素嵌套在其他的標(biāo)簽中： ``` <p>This liquid is <strong>highly toxic</strong> — if you drink it, <strong>you may <em>die</em></strong>.</p> ``` ## 斜體字、粗體字、下劃線... 迄今為止我們已經(jīng)討論的元素都是意義清楚的語義元素。<b>, <i>, 和 <u> 的情況卻有點(diǎn)復(fù)雜。它們出現(xiàn)于人們要在文本中使用粗體、斜體、下劃線但CSS仍然不被完全支持的時(shí)期。像這樣的元素，僅僅影響表象而且沒有語義，被稱為表象元素（presentational elements）并且不應(yīng)該再被使用。因?yàn)檎缥覀冊(cè)谥翱吹降?，語義對(duì)可訪問性，SEO（搜索引擎優(yōu)化）等非常重要。 HTML5用新的語義規(guī)則重新定義了<b>,<i>和<u>,使得它們的語言顯得稍微有點(diǎn)混亂。 這里是最好的經(jīng)驗(yàn)法則：如果沒有更合適的元素，那么使用 <b>、<i> 或 <u> 來表達(dá)傳統(tǒng)上的粗體、斜體或下劃線表達(dá)的意思是合適的。然而，始終擁有可訪問性的思維模式是至關(guān)重要的。斜體的概念對(duì)人們使用屏幕閱讀器是沒有幫助的，對(duì)使用其他書寫系統(tǒng)而不是拉丁文書寫系統(tǒng)的人們也是沒有幫助的。 * <i> 被用來傳達(dá)傳統(tǒng)上用斜體表達(dá)的意義：外國文字，分類名稱，技術(shù)術(shù)語，一種思想…… * <b> 被用來傳達(dá)傳統(tǒng)上用粗體表達(dá)的意義：關(guān)鍵字，產(chǎn)品名稱，引導(dǎo)句…… * <u> 被用來傳達(dá)傳統(tǒng)上用下劃線表達(dá)的意義：專有名詞，拼寫錯(cuò)誤…… **使用下劃線的忠告：** 因?yàn)槲覀兂３?huì)認(rèn)為網(wǎng)頁中的下劃線代表著一個(gè)超鏈接，所以最好只用下劃線來代表超鏈接。而在語義適合的情況下不得不使用<u>元素時(shí)，可以使用CSS來改變<u>元素對(duì)應(yīng)的下劃線的默認(rèn)樣式，從而和超鏈接的下劃線區(qū)分開來。 **下面是一個(gè)具體的例子：** ``` <!-- 學(xué)名 --> <p> 紅喉北蜂鳥（學(xué)名：<i>Archilocus colubris</i>） 是北美東部最常見的蜂鳥品種。 </p> <!-- 舶來詞 --> <p> 菜單上有好多舶來詞匯，比如 <i lang="uk-latn">vatrushka</i>（東歐乳酪面包）, <i lang="id">nasi goreng</i>（印尼炒飯）以及<i lang="fr">soupe à l'oignon</i>（法式洋蔥湯）。 </p> <!-- 已知的錯(cuò)誤書寫 --> <p> 總有一天我會(huì)改掉寫<u style="text-decoration-line: underline; text-decoration-style: wavy;">措字</u>的毛病。 </p> <!-- 在一組指令中突出顯示關(guān)鍵字 --> <ol> <li> <b>切</b>下兩片面包， </li> <li> 在兩片面包中間<b>夾入</b>一片西紅柿和一片生菜葉。 </li> </ol> ``` # 參考資料 * 《HTML 文字處理基礎(chǔ) - 學(xué)習(xí) Web 開發(fā) | MDN》