[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)刊、教科書還是雜志等。
![圖片描述](/upload/attach/202011/202011301550_9CCJVG6SM75YVCF.png)
內(nèi)容結(jié)構(gòu)化會使讀者的閱讀體驗(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è)元素代表文檔中不同級別的內(nèi)容; <h1> 表示主標(biāo)題(the main heading),<h2> 表示二級子標(biāo)題(subheadings),<h3> 表示三級子標(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>話說天下大勢,分久必合,合久必分。周末七國分爭,并入于秦。及秦滅之后,楚、漢分爭,又并入于漢……</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)該最好只對每個(gè)頁面使用一次<h1> — 這是頂級標(biāo)題,所有其他標(biāo)題位于層次結(jié)構(gòu)中的下方。
* 請確保在層次結(jié)構(gòu)中以正確的順序使用標(biāo)題。不要使用<h3>來表示副標(biāo)題,后面跟<h2>來表示副副標(biāo)題 - 這是沒有意義的,會導(dǎo)致奇怪的結(jié)果。
* 在可用的六個(gè)標(biāo)題級別中,您應(yīng)該只在每頁使用不超過三個(gè),除非您認(rèn)為有必要使用更多。具有許多級別的文檔(即,較深的標(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í),您會看到文本顯示為一整塊!
![圖片描述](/upload/attach/202011/202011301552_TZNEXD5KAH79ZTE.png)
這是因?yàn)闆]有元素給內(nèi)容結(jié)構(gòu),所以瀏覽器不知道什么是標(biāo)題,什么是段落。此外:
* 用戶在閱讀網(wǎng)頁時(shí),往往會快速瀏覽以查找相關(guān)內(nèi)容,經(jīng)常只是閱讀開頭的標(biāo)題。如果用戶不能在幾秒內(nèi)看到一些有用的內(nèi)容,他們很可能會感到沮喪并離開。
* 對您的網(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)重視力障礙者通常不會閱讀網(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)我們看到什么,我們就會知道它代表什么。舉個(gè)例子, 我們知道紅色交通燈表示“停止”,綠色交通燈表示”通行“。 如果運(yùn)用了錯(cuò)誤的語義,事情會迅速地變得非常棘手 (難道有某個(gè)國家使用紅色代表通行?我不希望如此)
同樣的道理,我們需要確保使用了正確的元素來給予內(nèi)容正確的意思、作用以及外形。在這里,<h1> 元素也是一個(gè)語義元素,它給出了包裹在您的頁面上用來表示頂級標(biāo)題的角色(或意義)的文本。
```
<h1>這是一個(gè)頂級標(biāo)題</h1>
```
一般來說,瀏覽器會給它一個(gè)更大的字形來讓它看上去像個(gè)標(biāo)題(雖然你可以使用CSS讓它變成任何你想要的樣式。更重要的是,它的語義值將以多種方式被使用,比如通過搜索引擎和屏幕閱讀器(上文提到過的)。
在另一方面,你可以讓任一元素看起來像一個(gè)頂級標(biāo)題,如下:
```
<span style="font-size: 32px; margin: 21px 0;">這是頂級標(biāo)題嗎?</span>
```
這是一個(gè) <span> 元素,它沒有語義。當(dāng)您想要對它用CSS(或者JS)時(shí),您可以用它包裹內(nèi)容,且不需要附加任何額外的意義(在未來的課程中你會發(fā)現(xiàn)更多這類元素)。我們已經(jīng)對它使用了CSS來讓它看起來像一個(gè)頂級標(biāo)題。然而,由于它沒有語義值,所以它不會有任何上文提到的幫助。最好的方法是使用相關(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)
在日常用語中,我們常常會加重某個(gè)字的讀音,或者用加粗等方式突出某句話的重點(diǎn)。與此類似,HTML 也提供了相應(yīng)的標(biāo)簽,用于標(biāo)記某些文本,使其具有加粗、傾斜、下劃線等效果。下面,我們將學(xué)習(xí)一些最常見的標(biāo)簽。
## 強(qiáng)調(diào)
在口語表達(dá)中,我們有時(shí)會強(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á)對一個(gè)人遲到的惱怒。
在HTML中我們用<em>(emphasis)元素來標(biāo)記這樣的情況。這樣做既可以讓文檔讀起來更有趣,也可以被屏幕閱讀器識別出來,并以不同的語調(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)記這樣的請況。這樣做既可以讓文檔更加地有用,也可以被屏幕閱讀器識別出來,并以不同的語調(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)檎缥覀冊谥翱吹降?,語義對可訪問性,SEO(搜索引擎優(yōu)化)等非常重要。
HTML5用新的語義規(guī)則重新定義了<b>,<i>和<u>,使得它們的語言顯得稍微有點(diǎn)混亂。
這里是最好的經(jīng)驗(yàn)法則:如果沒有更合適的元素,那么使用 <b>、<i> 或 <u> 來表達(dá)傳統(tǒng)上的粗體、斜體或下劃線表達(dá)的意思是合適的。然而,始終擁有可訪問性的思維模式是至關(guān)重要的。斜體的概念對人們使用屏幕閱讀器是沒有幫助的,對使用其他書寫系統(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)槲覀兂3J(rèn)為網(wǎng)頁中的下劃線代表著一個(gè)超鏈接,所以最好只用下劃線來代表超鏈接。而在語義適合的情況下不得不使用<u>元素時(shí),可以使用CSS來改變<u>元素對應(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>
總有一天我會改掉寫<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》