Web 高級文本格式

在HTML中有許多其他元素用于格式化文本，這是我們在HTML文本基礎(chǔ)文章中沒有涉及到的。在這篇文章中所描述的元素雖然不怎么常見，但了解它們還是很有用的（而這仍然不是一個完整的列表）。在這里你將了解標(biāo)記引用，描述列表，計算機代碼和其他相關(guān)文本，下標(biāo)和上標(biāo)，聯(lián)系信息等。

描述列表（Description lists）

---

在HTML文本基礎(chǔ)章節(jié)中，我們詳細(xì)介紹了如何在HTML中標(biāo)記基本列表，但我們沒有提到你偶爾會遇到的第三種類型的列表 - 描述列表。這些列表的目的是標(biāo)記一組項目及其相關(guān)描述，例如術(shù)語和定義，或問題和答案。讓我們看看下面這一組術(shù)語和定義的例子：

soliloquy
In drama, where a character speaks to themselves, representing their inner thoughts or feelings and in the process relaying them to the audience (but not to other characters.)
monologue
In drama, where a character speaks their thoughts out loud to share them with the audience and any other characters present.
aside
In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought or piece of addtional background information

描述列表使用的是與其他列表類型不同的閉合標(biāo)簽：<dl>；此外，每個描述列表的術(shù)語都封裝在一個<dt>（description term）元素中，并且每個描述列表的描述都封裝在一個<dd>（description description）元素中。讓我們完成下面的標(biāo)記例子：

<dl>
  <dt>soliloquy</dt>
  <dd>In drama, where a character speaks to themselves, representing their inner thoughts or feelings and in the process relaying them to the audience (but not to other characters.)</dd>
  <dt>monologue</dt>
  <dd>In drama, where a character speaks their thoughts out loud to share them with the audience and any other characters present.</dd>
  <dt>aside</dt>
  <dd>In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought or piece of addtional background information.</dd>
</dl>

瀏覽器的默認(rèn)樣式將顯示描述列表，其中的描述部分（description description）與術(shù)語有些縮進(jìn)。MDN也非常嚴(yán)格地遵循這一慣例，但也鼓勵關(guān)于術(shù)語的其他更多的定義。

自言自語

在戲劇中，一個角色對自己說話，表達(dá)自己內(nèi)心的想法或感受，并將其傳達(dá)給觀眾（而不是其他角色）。

獨白

在戲劇中，一個角色大聲說出他們的想法，與觀眾和其他人物分享。

旁白

在戲劇中，一個角色只與觀眾分享一個意見，以表達(dá)幽默或戲劇性的效果。這通常是一種感覺，想法或一些附加背景信息。

請注意，單個術(shù)語可以同時有多個描述，例如：

旁白

在戲劇中，一個角色只與觀眾分享一個意見，以表達(dá)幽默或戲劇性的效果。這通常是一種感覺，想法或一些附加背景信息。

在書面上，是指與當(dāng)前主題相關(guān)的一部分內(nèi)容，但不適合直接用于主線內(nèi)容，因此會被呈現(xiàn)在附近（通常在一個方框內(nèi)）。

主動學(xué)習(xí)：標(biāo)記一組定義

現(xiàn)在是時候嘗試一下描述列表了；請在Input字段的原始文本里添加相應(yīng)的元素，使得它在Output字段是以描述列表的形式出現(xiàn)。如果你喜歡，你也可以使用你自己的術(shù)語和描述。

如果發(fā)生錯誤，你可以隨時使用Reset按鈕重置。如果你卡住了，請按Show solution按鈕查看答案。

引用（Quotations）

---

HTML也有用于標(biāo)記引用的特性；至于使用哪個元素標(biāo)記，取決于你是標(biāo)記塊還是內(nèi)聯(lián)引用。

塊引用

如果一個塊級內(nèi)容（一個段落，多個段落，一個列表等）是從其他地方被引用，你應(yīng)該把它用<blockquote>元素封裝起來表示，并且在cite屬性里用URL來指向塊引用的資源。例如，下面的例子就是引用MDN的<blockquote> 元素頁面：

<p>The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or <em>HTML Block
Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>

要把這些轉(zhuǎn)換為塊引用，我們要這樣做：

<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
  <p>The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or <em>HTML Block
  Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>
</blockquote>

瀏覽器默認(rèn)會給塊引用以縮進(jìn)段落的樣式，作為引用的一個指示符；MDN是這樣做的，但也增加了額外的樣式：

HTML<blockquote> 元素（或HTML塊引用元素）表示包含的文本是擴展引用。

內(nèi)聯(lián)引用

內(nèi)聯(lián)引用的工作方式也是一樣的，只是它們是使用<q>元素。例如，下面的標(biāo)記位包含來自MDN<q> 頁面的引用：

<p>The quote element — <code>&lt;q&gt;</code> — is <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">intended
for short quotations that don't require paragraph breaks.</q></p>

瀏覽器默認(rèn)樣式將會將其作為普通文本放入引號中以表示引用，如下：

The quote element — <q> — is intended for short quotations that don't require paragraph breaks.

引文

cite屬性的內(nèi)容聽起來很有用，但不幸的是，對瀏覽器、屏幕閱讀器等來說沒有太多用處。還沒有辦法讓瀏覽器顯示 cite 的內(nèi)容，而無需使用JavaScript或CSS來編寫你自己的解決方案。如果你想要確保引用的資源在頁面上是可用的，更好的方法是把<cite>元素放到引用元素旁邊。這就意味著包含引用資源的名稱——即引用的書的名稱，或人的名字——但并不表示你不能以某種方式將<cite>中的文本鏈接到引用資源：

<p>According to the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
<cite>MDN blockquote page</cite></a>:
</p>

<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
  <p>The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or <em>HTML Block
  Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>
</blockquote>

<p>The quote element — <code>&lt;q&gt;</code> — is <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">intended
for short quotations that don't require paragraph breaks.</q> -- <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">
<cite>MDN q page</cite></a>.</p>

引文默認(rèn)的字體樣式為斜體。你可以在quotations.html中參看代碼。

主動學(xué)習(xí)：是誰說的？

到了另一個主動學(xué)習(xí)的例子！在這個例子中我們想要你做：

1. 把中間的段落變成塊引用，它要包含cite屬性。
2. 把第三個段落的一部分變成內(nèi)聯(lián)引用，它要包含cite屬性。
3. 每一個引用都要包含<cite>元素。

可以在線尋找合適的引用資源。

如果發(fā)生錯誤，你可以使用Reset按鈕重置。如果你卡住了，請按Show solution按鈕查看答案。

縮寫詞

---

另一個你在web上看到的相當(dāng)常見的元素是<abbr>——它常被用來封裝一個縮寫詞或首字母縮略詞，并且提供縮寫的完整闡述（包含在title屬性中）。讓我們看看下面兩個例子：

<p>We use <abbr title="Hypertext Markup Language">HTML</abbr> to structure our web documents.</p>

<p>I think <abbr title="Reverend">Rev.</abbr> Green did it in the kitchen with the chainsaw.</p>

這些代碼呈現(xiàn)出來的會是這樣（當(dāng)鼠標(biāo)懸停在縮寫詞上時，將在工具提示中出現(xiàn)縮寫詞的完整闡述）：

We use HTML to structure our web documents.

I think Rev. Green did it in the kitchen with the chainsaw.

注意：還有另一個元素<acronym>，它基本與<abbr> 相同，專門用于首字母縮略詞而不是縮寫詞。然而它已經(jīng)被廢棄 - 它在瀏覽器以及<abbr>中也不被支持，而且沒有必要存在兩個具有類似功能的元素。只需要使用<abbr>即可。

主動學(xué)習(xí)：標(biāo)記縮寫詞

對于這個簡單的主動學(xué)習(xí)任務(wù)，我們希望你簡單地標(biāo)記一個縮寫詞。你可以使用下面的示例，或著用你自己的替換它。

標(biāo)記聯(lián)系信息

---

HTML有個用于標(biāo)記聯(lián)系細(xì)信息的元素<address>。它只是簡單的封裝你的聯(lián)系方式，例如：

<address>
  <p>Chris Mills, Manchester, The Grim North, UK</p>
</address>

但要記住的一點是，<address> 元素為了標(biāo)記編寫HTML文檔的人的聯(lián)系信息，而不是任何其他的地址。因此，如果這是Chris寫的文檔，上面的標(biāo)記內(nèi)容是可以的。注意，下面的內(nèi)容也是可以的：

<address>
  <p>Page written by <a href="../authors/chris-mills/">Chris Mills</a>.</p>
</address>

上標(biāo)和下標(biāo)

---

當(dāng)你標(biāo)記日期、化學(xué)公式和數(shù)學(xué)方程式時會偶爾使用上標(biāo)和下標(biāo)，以使它們具有正確的含義。<sup>和<sub>元素可以解決這樣的問題。例如：

<p>My birthday is on the 25<sup>th</sup> of May 2001.</p>
<p>Caffeine's chemical formula is C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.</p>
<p>If x<sup>2</sup> is 9, x must equal 3 or -3.</p>

此代碼的輸出如下所示：

My birthday is on the 25^th of May 2001.

Caffeine's chemical formula is C₈H₁₀N₄O₂.

If x² is 9, x must equal 3 or -3.

表示計算機代碼

---

HTML有許多的元素可以用來標(biāo)記計算機代碼：

• <code>：用于標(biāo)記計算機通用代碼。
  
• <pre>：用于標(biāo)記固定寬度的文本塊，其中保留空格（通常是代碼塊）。
  
• <var>：用于標(biāo)記具體變量名。
  
• <kbd>：用于標(biāo)記輸入計算機的鍵盤（或其他類型）輸入。
  
• <samp>：用于標(biāo)記計算機程序的輸出。
  

讓我們來看幾個例子。你應(yīng)該嘗試運行一下（嘗試運行一下other-semantics.html示例文件）：

<pre><code>var para = document.querySelector('p');

para.onclick = function() {
  alert('Owww, stop poking me!');
}</code></pre>

<p>You shouldn't use presentational elements like <code>&lt;font&gt;</code> and <code>&lt;center&gt;</code>.</p>

<p>In the above JavaScript example, <var>para</var> represents a paragraph element.</p>


<p>Select all the text with <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd>.</p>

<pre>$ <kbd>ping mozilla.org</kbd>
<samp>PING mozilla.org (63.245.215.20): 56 data bytes
64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms</samp></pre>

上面的代碼看起來像這樣：

標(biāo)記時間和日期

HTML提供<time>元素，用于以機器可識別格式標(biāo)記時間和日期。例如：

<time datetime="2016-01-20">20 January 2016</time>

為什么這很有用？ 因為人類寫下日期有許多不同的方式。上述日期可寫為：

• 20 January 2016
• 20th January 2016
• Jan 20 2016
• 20/06/16
• 06/20/16
• The 20th of next month
• 20e Janvier 2016
• 2016年1月20日
• And so on

但是這些不同的形式不容易被計算機輕易識別 - 如果你想自動獲取頁面中所有事件的日期，并將它們插入到日歷中怎么辦？<time>元素允許你附上清晰的、機器可識別的時間/日期來實現(xiàn)這種需求。

上述基本的例子僅僅提供了一個簡單的可被機器識別的日期格式，但還有很多其他支持的格式，例如：

<!-- Standard simple date -->
<time datetime="2016-01-20">20 January 2016</time>
<!-- Just year and month -->
<time datetime="2016-01">January 2016</time>
<!-- Just month and day -->
<time datetime="01-20">20 January</time>
<!-- Just time, hours and minutes -->
<time datetime="19:30">19:30</time>
<!-- You can do seconds and milliseconds too! -->
<time datetime="19:30:01.856">19:30:01.856</time>
<!-- Date and time -->
<time datetime="2016-01-20T19:30">7.30pm, 20 January 2016</time>
<!-- Date and time with timezone offset-->
<time datetime="2016-01-20T19:30+01:00">7.30pm, 20 January 2016 is 8.30pm in France</time>
<!-- Calling out a specific week number-->
<time datetime="2016-W04">The fourth week of 2016</time>

總結(jié)

---

到這里你就完成了HTML文本語義的學(xué)習(xí)。但要記住，你在本課程中學(xué)到的并不是HTML文本元素的詳細(xì)列表 - 我們想要盡量覆蓋主要的、常見的、或者至少是有趣的基本元素。如果你想找到更多的HTML元素，可以看我們的 HTML元素參考（從內(nèi)嵌文本語義部分開始會是一個不錯的選擇）。在 下一篇文章我們將會學(xué)習(xí)用來構(gòu)造HTML文檔不同部分的HTML元素。