HTML 文本基礎(chǔ)

一般來說，瀏覽器會(huì)給它一個(gè)更大的字形來讓它看上去像個(gè)標(biāo)題（雖然你可以使用CSS讓它變成任何你想要的樣式）。更重要的是，它的語義值將以多種方式被使用，比如通過搜索引擎和屏幕閱讀器（上文提到過的）。

在另一方面，你可以讓任一元素看起來像一個(gè)頂級標(biāo)題，如下：

<span style="font-size: 32px; margin: 21px 0;">Is this a top level heading?</span>

這是一個(gè)<span>元素，它沒有語義。當(dāng)你想要對它用CSS（或者JS）時(shí)，你可以用它包裹內(nèi)容，不需要附加任何額外的意義（在未來的課程中你會(huì)發(fā)現(xiàn)更多這類元素）。我們已經(jīng)對它使用了CSS來讓它看起來像一個(gè)頂級標(biāo)題。然而，由于它沒有語義值，所以它不會(huì)有任何上文提到的幫助。最好的方法是使用相關(guān)的HTML元素來標(biāo)記這個(gè)項(xiàng)目。

列表Lists

---

現(xiàn)在，讓我們注意一下列表。列表在生活中隨處可見——從你的購物清單到你的回家路線方案列表，再到你遵從的教程說明列表。在網(wǎng)絡(luò)上，列表也到處存在，我們需要學(xué)習(xí)三種不同類型的列表。

無序列表Unordered

無序的列表被用來標(biāo)記每個(gè)項(xiàng)目。在這里，項(xiàng)目的順序并不重要——讓我們看下面的購物單的例子。

牛奶雞蛋面包鷹嘴豆泥

每份無序的清單從<ul>元素開始——這元素包裹了單子上所有被列出的項(xiàng)目：

<ul>牛奶雞蛋面包鷹嘴豆泥</ul>

最后一步就是用<li>元素把每個(gè)列出的項(xiàng)目分別包裹起來：

<ul>  <li>牛奶</li>  <li>雞蛋</li>  <li>面包</li>  <li>鷹嘴豆泥</li></ul>

主動(dòng)學(xué)習(xí)：標(biāo)記無序的列表

嘗試編輯下面的樣本來創(chuàng)建你個(gè)人的HTML無序列表。

有序列表Ordered

有序的列表是根據(jù)項(xiàng)目的順序列出來的——讓我們以一組方向?yàn)槔?/p>

Drive to the end of the roadTurn rightGo straight across the first two roundaboutsTurn left at the third roundaboutThe school is on your right, 300 meters up the road

這個(gè)標(biāo)記的結(jié)構(gòu)和無序列表一樣，除了你需要用<ol>元素將所有項(xiàng)目包裹，而不是用<ul>:

<ol>  <li>Drive to the end of the road</li>  <li>Turn right</li>  <li>Go straight across the first two roundabouts</li>  <li>Turn left at the third roundabout</li>  <li>The school is on your right, 300 meters up the road</li></ol>

主動(dòng)學(xué)習(xí)：標(biāo)記有序列表

嘗試編輯下面的樣本來創(chuàng)建你個(gè)人的HTML有序列表：

主動(dòng)學(xué)習(xí)：標(biāo)記我們的食譜

到了這里，你擁有了所有你需要的信息來標(biāo)記我們的食譜樣例。你可以選擇從text-start.html復(fù)制一份文件并保存在本地，打開它進(jìn)行編輯，或者在下面的例子中進(jìn)行編輯。因?yàn)樵诒镜啬憧梢员４婺愕捻?xiàng)目，所以在本地做這個(gè)工作可能更好。而如果你在下面可編輯的樣本中作業(yè)，下一次你打開這個(gè)網(wǎng)站時(shí)你可能會(huì)丟失你的數(shù)據(jù)。各有利弊吧。

如果你感到棘手，你可以隨時(shí)按下Show solution按鈕，或者在我們的github repo上檢查我們的 text-complete.html 樣例。

嵌套列表Nesting lists

將一個(gè)列表嵌入到另一個(gè)列表中是完全可以的。你可能想讓一些子項(xiàng)目列在首項(xiàng)目之下。讓我們從食譜示例中獲取第二個(gè)列表：

<ol>  <li>Remove the skin from the garlic, and chop coarsely.</li>  <li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>  <li>Add all the ingredients into a food processor.</li>  <li>Process all the ingredients into a paste.</li>  <li>If you want a coarse "chunky" humous, process it for a short time.</li>  <li>If you want a smooth humous, process it for a longer time.</li></ol> 

由于最后兩項(xiàng)與它們的前一項(xiàng)非常密切相關(guān)（它們看起來更像該項(xiàng)的子項(xiàng)或選項(xiàng)），將它們編輯成無序列表，并嵌套在該項(xiàng)的子項(xiàng)中可能更合理。就像下面這樣：

<ol>  <li>Remove the skin from the garlic, and chop coarsely.</li>  <li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>  <li>Add all the ingredients into a food processor.</li>  <li>Process all the ingredients into a paste.    <ul>      <li>If you want a coarse "chunky" humous, process it for a short time.</li>      <li>If you want a smooth humous, process it for a longer time.</li>    </ul>  </li></ol>

嘗試回到上一個(gè)主動(dòng)學(xué)習(xí)的示例中，并更新第二個(gè)列表。

重點(diǎn)強(qiáng)調(diào)

---

在人類語言中，為了突出一句話的意思，我們通常強(qiáng)調(diào)某些詞，并且我們通常想要標(biāo)記某些詞作為重點(diǎn)或者在某種程度上的不同。HTML提供了許多語義元素，并且允許我們通過這些元素的意義標(biāo)記正文內(nèi)容，在這個(gè)章節(jié)中，我們將看到最常見的一小部分元素。

強(qiáng)調(diào)

當(dāng)我們想要在口語中添加強(qiáng)調(diào)，我們重讀某些詞，巧妙地改變我們所說的意思。類似的，在書面語言中，我們通過將文字寫成斜體來強(qiáng)調(diào)它。例如，以下兩個(gè)句子就有不同的含義。

I am glad you weren't late.

I am glad you weren't late.

第一句話聽起來真的像松了一口氣，那個(gè)人沒有遲到。相比之下，第二個(gè)聽起來具有諷刺性而且有隱含的攻擊性的，表達(dá)對一個(gè)人遲到的惱怒。

在HTML中，我們使用<em>（強(qiáng)調(diào)）元素來標(biāo)記此類實(shí)例。這樣做既可以讓文檔讀起來更有趣，也可以被屏幕閱讀器識別出來，并以不同的語調(diào)發(fā)出。瀏覽器默認(rèn)樣式為斜體，但你不應(yīng)該純粹使用這個(gè)標(biāo)簽來獲得斜體樣式。為此，你應(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>（非常重要）元素來標(biāo)記實(shí)例。這樣做既可以讓文檔更加地有用，也可以被屏幕閱讀器識別出來，并以不同的語調(diào)發(fā)出。默認(rèn)情況下，瀏覽器默認(rèn)樣式為粗體，但你不應(yīng)該純粹使用這個(gè)標(biāo)簽來獲得粗體樣式。為此，你需要使用<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>

主動(dòng)學(xué)習(xí)：我們是重要的！

在這個(gè)主動(dòng)學(xué)習(xí)部分，我們提供了一個(gè)可編輯的例子。在這個(gè)例子中，我們想讓你把斜體(em)和加粗(strong)放在你認(rèn)為重要的詞匯上，僅僅為了練習(xí)。

斜體字，粗體字，下劃線...

到目前為止我們討論的元素都是意義清楚的語義元素。<b>，<i>和<u>的情況卻有點(diǎn)復(fù)雜。它們出現(xiàn)于人們要在文本中使用粗體、斜體或下劃線但CSS仍然不被完全支持的時(shí)期。像這樣的元素，僅僅影響表象而且沒有語義，被稱為表象元素（presentational elements），并且不應(yīng)該再被使用。因?yàn)檎缥覀冎翱吹降?，語義對于可訪問性，SEO等非常重要。

HTML5用新的語義規(guī)則重新定義了<b>，<i>和<u>，稍微有點(diǎn)混亂。

這是最好的經(jīng)驗(yàn)法則：使用<b> ，<i> 或<u>來傳達(dá)傳統(tǒng)意義上的粗體，斜體或下劃線是合適的，沒有其他元素更合適這樣用了。然而，始終保持它們擁有可訪問性的心態(tài)是很重要的。斜體的概念對人們使用屏幕閱讀器是沒有幫助的，對使用其他書寫系統(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ò)誤……
  

<!-- scientific names --><p>  The Ruby-throated Hummingbird (<i>Archilocus colubris</i>)  is the most common hummingbird in Eastern North America.</p><!-- foreign words --><p>  The menu was a sea of exotic words like <i lang="uk-latn">vatrushka</i>,  <i lang="id">nasi goreng</i> and <i lang="fr">soupe à l'oignon</i>.</p><!-- a known misspelling --><p>  Someday I'll learn how to <u>spel</u> better.</p><!-- Highlight keywords in a set of instructions --><ol>  <li>    <b>Slice</b> two pieces of bread off the loaf.  </li>  <li>    <b>Insert</b> a tomato slice and a leaf of    lettuce between the slices of bread.  </li></ol>

總結(jié)

---

至此，本文應(yīng)該給你做了一個(gè)很好的講解，如何開始在HTML中標(biāo)記文本，并介紹了一些重要的元素。在這一領(lǐng)域還有許多語義元素，我們將在后面的“更多語義元素”文章中看到更多的語義元素。 在下一篇文章中，我們將詳細(xì)介紹如何創(chuàng)建超鏈接create hyperlinks，它可能是Web上最重要的元素。