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