HTML 文本基礎
HTML的主要作用之一是給出文本結構和意義（也稱為語義），以便瀏覽器可以正確顯示它。本文介紹了HTML通過添加標題和段落，強調單詞，創(chuàng)建列表等來構建文本頁面的方式。
| 前提: | 了解基本的HTML知識，如 HTML入門所述。 |
|---|---|
| 目的: | 學習如何用標記（段落、標題、列表、強調、引用）來建立基礎文本頁面的文本結構和文本內容。 |
基礎: 標題和段落
大部分的文本結構由標題和段落組成。不管是小說、報刊、教科書還是雜志等。
內容結構化會使讀者的閱讀體驗更輕松，更愉快。
在HTML中，每個段落是通過<p>元素標簽進行定義的，比如下面這樣：
<p>I am a paragraph, oh yes I am.</p>
每個標題（Heading）是通過 "標題標簽" 進行定義的：
<h1>I am the title of the story.</h1>
這里有六個標題元素標簽—<h1>, <h2>, <h3> , <h4>, <h5>, and<h6>。每個元素代表文檔中不同級別的內容；<h1>表示主標題，<h2>表示二級子標題，<h3>表示三級子標題，等等。
編輯結構層次
這里舉一個例子，在一個故事中，<h1> 將表示故事的名字，<h2> 表示每個章節(jié)的標題， <h3>表示每個章節(jié)下的子標題，等等。
<h1>The Crushing Bore</h1><p>By Chris Mills</p><h2>Chapter 1: The Dark Night</h2><p>It was a dark night. Somewhere, an owl hooted. The rain lashed down on the ...</p><h2>Chapter 2: The eternal silence</h2><p>Our protagonist could not so much as a whisper out of the shadowy figure ...</p><h3>The specter speaks</h3><p>Several more hours had passed, when all of a sudden the specter sat bolt upright and exclaimed, "Please have mercy on my soul!"</p>
- 優(yōu)選地，你應該只對每個頁面使用一次<h1> - 這是頂級標題，所有其他標題位于層次結構中的下方。
- 請確保在層次結構中以正確的順序使用標題。不要使用<h3>來表示副標題，后面跟<h2>來表示副副標題 - 這是沒有意義的，會導致奇怪的結果。
- 在可用的六個標題級別中，你應該旨在每頁使用不超過三個，除非您認為有必要。. 具有許多級別的文檔(即，較深的標題層次結構)變得難以操作并且難以導航。在這種情況下，如果可能，建議將內容分散在多個頁面上。
為什么我們需要結構化?
要回答這個問題，讓我們來看看text-start.html - 并從運行這段文檔示例（美味的豆沙食譜）開始。首先，你可以復制一份并保存到本地機器上，在之后的練習中你將用到它。在這個文檔的主體（body）中包含了多個內容 - 這些內容沒有做任何標記，但是編輯時使用了換行（輸入Enter鍵/換行跳轉到下一行）處理。
但是，當你在瀏覽器中打開文檔時，你會看到文本顯示為一整塊！
這是因為沒有元素給內容結構，所以瀏覽器不知道什么是標題，什么是段落。此外:
- 用戶在閱讀網頁時，往往會快速瀏覽以查找相關內容，經常只是閱讀開頭的標題（我們通常在一個網頁上會花費很少的時間spend a very short time on a web page）。如果用戶不能在幾秒內看到一些有用的內容，他們很可能會感到沮喪并離開。
- 對你的網頁建立索引的搜索引擎將標題的內容視為影響網頁搜索排名的重要關鍵字。沒有標題，你的網頁在SEO（搜索引擎優(yōu)化）方面效果不佳。
- S嚴重視力障礙者通常不會閱讀網頁；他們用聽力來代替。完成這項工作的軟件叫做屏幕閱讀器（screen reader）。該軟件提供了快速訪問給定文本內容的方法。在使用的各種技術中，它們通過朗讀標題來提供文檔的概述，讓用戶能快速找到他們需要的信息。如果標題不可用，用戶將被迫聽到整個文檔的大聲朗讀。
- 使用CSS樣式化內容，或者使用JavaScript做一些有趣的事情，你需要包含相關內容的元素，所以CSS/JavaScript可以有效地定位它。
因此，我們需要給我們的內容結構標記。
主動學習：編輯我們的內容結構
讓我們直接跳進一個實例。在下面的示例中，向“輸入”字段中的原始文本添加元素，使其在“輸出”字段中顯示為標題和兩個段落。
如果你犯了錯誤，你可以使用Reset按鈕進行重置。如果卡住，請按Show solution按鈕以查看答案。
為什么我們需要語義？
在我們身邊的任何地方都要依賴語義學 - 我們依靠以前的經驗就知道日常事務都代表什么；當我們看到什么，我們知道它代表什么。舉個例子，我們知道紅色交通燈表示“停止”，綠色交通燈來表示“通行”。如果運用了錯誤的語義，事情會迅速地變得非常棘手（難道有某個國家使用紅色代表通行？我們不希望如此）
同樣的道理，我們需要確保使用了正確的元素來給予內容正確的意思、作用以及外形。在這里， <h1>元素也是一個語義元素，它給出了它包裹在你的頁面上用來表示頂級標題的角色（或意義）的文本。
一般來說，瀏覽器會給它一個更大的字形來讓它看上去像個標題（雖然你可以使用CSS讓它變成任何你想要的樣式）。更重要的是，它的語義值將以多種方式被使用，比如通過搜索引擎和屏幕閱讀器（上文提到過的）。
在另一方面，你可以讓任一元素看起來像一個頂級標題，如下：
<span style="font-size: 32px; margin: 21px 0;">Is this a top level heading?</span>
這是一個<span>元素，它沒有語義。當你想要對它用CSS（或者JS）時，你可以用它包裹內容，不需要附加任何額外的意義（在未來的課程中你會發(fā)現(xiàn)更多這類元素）。我們已經對它使用了CSS來讓它看起來像一個頂級標題。然而，由于它沒有語義值，所以它不會有任何上文提到的幫助。最好的方法是使用相關的HTML元素來標記這個項目。
列表Lists
現(xiàn)在，讓我們注意一下列表。列表在生活中隨處可見——從你的購物清單到你的回家路線方案列表，再到你遵從的教程說明列表。在網絡上，列表也到處存在，我們需要學習三種不同類型的列表。
無序列表Unordered
無序的列表被用來標記每個項目。在這里，項目的順序并不重要——讓我們看下面的購物單的例子。
牛奶雞蛋面包鷹嘴豆泥
每份無序的清單從<ul>元素開始——這元素包裹了單子上所有被列出的項目：
<ul>牛奶雞蛋面包鷹嘴豆泥</ul>
最后一步就是用<li>元素把每個列出的項目分別包裹起來：
<ul> <li>牛奶</li> <li>雞蛋</li> <li>面包</li> <li>鷹嘴豆泥</li></ul>
主動學習：標記無序的列表
嘗試編輯下面的樣本來創(chuàng)建你個人的HTML無序列表。
有序列表Ordered
有序的列表是根據(jù)項目的順序列出來的——讓我們以一組方向為例：
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
這個標記的結構和無序列表一樣，除了你需要用<ol>元素將所有項目包裹，而不是用<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>
主動學習：標記有序列表
嘗試編輯下面的樣本來創(chuàng)建你個人的HTML有序列表：
主動學習：標記我們的食譜
到了這里，你擁有了所有你需要的信息來標記我們的食譜樣例。你可以選擇從text-start.html復制一份文件并保存在本地，打開它進行編輯，或者在下面的例子中進行編輯。因為在本地你可以保存你的項目，所以在本地做這個工作可能更好。而如果你在下面可編輯的樣本中作業(yè)，下一次你打開這個網站時你可能會丟失你的數(shù)據(jù)。各有利弊吧。
如果你感到棘手，你可以隨時按下Show solution按鈕，或者在我們的github repo上檢查我們的 text-complete.html 樣例。
嵌套列表Nesting lists
將一個列表嵌入到另一個列表中是完全可以的。你可能想讓一些子項目列在首項目之下。讓我們從食譜示例中獲取第二個列表：
<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>
由于最后兩項與它們的前一項非常密切相關（它們看起來更像該項的子項或選項），將它們編輯成無序列表，并嵌套在該項的子項中可能更合理。就像下面這樣：
<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>
嘗試回到上一個主動學習的示例中，并更新第二個列表。
重點強調
在人類語言中，為了突出一句話的意思，我們通常強調某些詞，并且我們通常想要標記某些詞作為重點或者在某種程度上的不同。HTML提供了許多語義元素，并且允許我們通過這些元素的意義標記正文內容，在這個章節(jié)中，我們將看到最常見的一小部分元素。
強調
當我們想要在口語中添加強調，我們重讀某些詞，巧妙地改變我們所說的意思。類似的，在書面語言中，我們通過將文字寫成斜體來強調它。例如，以下兩個句子就有不同的含義。
I am glad you weren't late.
I am glad you weren't late.
第一句話聽起來真的像松了一口氣，那個人沒有遲到。相比之下，第二個聽起來具有諷刺性而且有隱含的攻擊性的，表達對一個人遲到的惱怒。
在HTML中，我們使用<em>（強調）元素來標記此類實例。這樣做既可以讓文檔讀起來更有趣，也可以被屏幕閱讀器識別出來，并以不同的語調發(fā)出。瀏覽器默認樣式為斜體，但你不應該純粹使用這個標簽來獲得斜體樣式。為此，你應該使用<span>元素和一些CSS，或者可能是<i>元素（見下文）。
<p>I am <em>glad</em> you weren't <em>late</em>.</p>
非常重要
為了強調重要的詞語，在口語方面我們往往用重音強調，在文字方面則是用粗體字來達到強調的效果。例如下面這段：
This liquid is highly toxic.
I am counting on you. Do not be late!
在HTML中，我們使用<strong>（非常重要）元素來標記實例。這樣做既可以讓文檔更加地有用，也可以被屏幕閱讀器識別出來，并以不同的語調發(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>
主動學習：我們是重要的！
在這個主動學習部分，我們提供了一個可編輯的例子。在這個例子中，我們想讓你把斜體(em)和加粗(strong)放在你認為重要的詞匯上，僅僅為了練習。
斜體字，粗體字，下劃線...
到目前為止我們討論的元素都是意義清楚的語義元素。<b>，<i>和<u>的情況卻有點復雜。它們出現(xiàn)于人們要在文本中使用粗體、斜體或下劃線但CSS仍然不被完全支持的時期。像這樣的元素，僅僅影響表象而且沒有語義，被稱為表象元素（presentational elements），并且不應該再被使用。因為正如我們之前看到的，語義對于可訪問性，SEO等非常重要。
HTML5用新的語義規(guī)則重新定義了<b>，<i>和<u>，稍微有點混亂。
這是最好的經驗法則：使用<b> ，<i> 或<u>來傳達傳統(tǒng)意義上的粗體，斜體或下劃線是合適的，沒有其他元素更合適這樣用了。然而，始終保持它們擁有可訪問性的心態(tài)是很重要的。斜體的概念對人們使用屏幕閱讀器是沒有幫助的，對使用其他書寫系統(tǒng)而不是拉丁文書寫系統(tǒng)的人們也是沒有幫助的。
<i>被用來傳達傳統(tǒng)上用斜體表達的意義：外國文字，分類名稱，技術術語，一種思想……
<b>被用來傳達傳統(tǒng)上用粗體表達的意義：關鍵字，產品名稱，引導句……
<u>被用來傳達傳統(tǒng)上用下劃線表達的意義：專有名詞，拼寫錯誤……
一種關于下劃線的警告：人們很容易把下劃線和超鏈接聯(lián)系起來。因此，在Web上，最好只在鏈接上使用下劃線。當語義上適合時使用<u> 元素，但是有時候在Web上用CSS改變下劃線默認的樣式更加合適。下面的例子說明了如何做。 <!-- 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>
總結
至此，本文應該給你做了一個很好的講解，如何開始在HTML中標記文本，并介紹了一些重要的元素。在這一領域還有許多語義元素，我們將在后面的“更多語義元素”文章中看到更多的語義元素。 在下一篇文章中，我們將詳細介紹如何創(chuàng)建超鏈接create hyperlinks，它可能是Web上最重要的元素。
更多建議：