Web - 第六章 | HTML 高級文本格式

HTML中有許多其他元素可以用於格式化文本，我們沒有在HTML 文字處理基礎中提到它們。以下將會說明標記引文、說明列表、計算機代碼和其他相關文本、下標和上標、聯繫訊息等。

說明列表

說明列表使用與其他列表類型不同的閉合標籤— <dl>; 此外，每一項都用 <dt> (description term) 元素閉合。每個說明都用 <dd> (description description) 元素閉合。

<dl>
  <dt>內心獨白</dt>
    <dd>戲劇中，某個角色對自己的內心活動或感受進行念白表演，這些台詞只面向觀眾，而其他角色不會聽到。 </dd>
  <dt>語言獨白</dt>
    <dd>戲劇中，某個角色把自己的想法直接進行念白表演，觀眾和其他角色都可以聽到。 </dd>
  <dt>旁白</dt>
    <dd>戲劇中，為渲染幽默或戲劇性效果而進行的場景之外的補充註釋念白，只面向觀眾，內容一般都是角色的感受、想法、以及一些背景訊息等。 </dd>
</dl>

瀏覽器的默認樣式會在說明列表的說明部分（description description）和說明術語（description terms）之間產生縮進。

引用

HTML也有用於標記引用的特性，至於使用哪個元素標記，取決於你引用的是一塊還是一行。
引用的內容聽起來很有用，但不幸的是，瀏覽器、屏幕閱讀器等等不會真的關心它，如果不使用JavaScript或CSS，瀏覽器不會顯示引用的內容。

塊引用

如果一個塊級內容（一個段落、多個段落、一個列表等）從其他地方被引用，你應該把它用

元素包裹起來表示，並且在cite屬性裡用URL來指向引用的資源。

1 2	<p>The <strong>HTML <code><blockquote></code> Element</strong> (or <em>HTML Block Quotation Element</em>) indicates that the enclosed text is an extended quotation.</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>

行内引用

行內元素用同樣的方式工作，除了使用<q>元素。

1 2	<p>The quote element — <code><q></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>

引文

cite屬性的內容聽起來很有用，但不幸的是，瀏覽器、屏幕閱讀器等等不會真的關心它，如果不使用JavaScript或CSS，瀏覽器不會顯示cite的內容。如果你想要確保引用的來源在頁面上是可用的，更好的方法是把<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>

縮略語

另一個你在web上看到的相當常見的元素是<abbr>——它常被用來包裹一個縮略語或縮寫，並且提供縮寫的解釋（包含在title屬性中）。

1
2
3

<p>我們使用 <abbr title="超文本標記語言（Hypertext Markup Language）">HTML</abbr> 來組織網頁文件。 </p>

<p>第 33 屆 <abbr title="夏季奧林匹克運動會">奧運會</abbr> 將於 2024 年 8 月在法國巴黎舉行。 </p>

還有另一個元素<acronym>，它基本上與<abbr>相同，專門用於首字母縮略詞而不是縮略語。然而，這已經被廢棄了 - 它在瀏覽器的支持中不如<abbr>，並且具有類似的功能，所以沒有意義。只需使用<abbr>。

標記聯繫人詳細訊息

HTML有個用於標記聯繫方式的元素——<address>。

1
2
3

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

但要記住的一點是，<address>元素是為了標記編寫HTML文件的人的聯繫方式，而不是任何其他的內容。因此，如果這是Chris寫的文件，上面的內容將會很好。注意，下面的內容也是可以的

1
2
3

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

上標和下標

當你使用日期、化學方程式、和數學方程式時會偶爾使用上標和下標。 ^{和_{元素可以解決這樣的問題。}}

1 2	<p>咖啡因的化學方程式是 C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>。 </p> <p>如果 x<sup>2</sup> 的值為 9，那麼 x 的值必為 3 或 -3。 </p>

展現程式代碼

有大量的HTML元素可以來標記計算機代碼。

<code>：用於標記計算機代碼的通用部分。
<pre>：用於保留空格（通常是代碼塊） - 如果在文本中使用縮進或多餘的空格，瀏覽器將忽略它，並且你不會在渲染頁面上看到它。但是，如果將文本包裝在<pre> </ pre>標記中，則你的空白將與你在文本編輯器中看到的相同。
<var>：用於專門標記變量名稱。
<kbd>：用於標記輸入計算機的鍵盤（和其他類型）輸入。
<samp>：用於標記計算機程序的輸出。

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

para.onclick = function() {
  alert('噢，噢，噢，別點我了。');
}</code></pre>

<p>請不要使用 <code>&lt;font&gt;</code> 、 <code>&lt;center&gt;</code> 等表像元素。 </p>

<p>在上述的 JavaScript 示例中，<var>para</var> 表示一個段落元素。 </p>


<p>按 <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>

標記時間和日期

HTML 還支持將時間和日期標記為可供機器識別的格式的 <time> 元素。

1	<time datetime="2019-05-15">2019年01月15日</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> 元素允許你附上清晰的、可被機器識別的時間/日期來實現這種需求。

上述基本的例子僅僅提供了一種簡單的可被機器識別的日期格式，這裡還有許多其他支持的格式。

<!-- 標準簡單日期 -->
<time datetime="2016-01-20">20 January 2016</time>
<!-- 只包含年份和月份-->
<time datetime="2016-01">January 2016</time>
<!-- 只包含月份和日期 -->
<time datetime="01-20">20 January</time>
<!-- 只包含時間，小時和分鐘數 -->
<time datetime="19:30">19:30</time>
<!-- 還可包含秒和毫秒 -->
<time datetime="19:30:01.856">19:30:01.856</time>
<!-- 日期和時間 -->
<time datetime="2016-01-20T19:30">7.30pm, 20 January 2016</time>
<!-- 含有市區偏移值的日期時間 -->
<time datetime="2016-01-20T19:30+01:00">7.30pm, 20 January 2016 is 8.30pm in France</time>
<!-- 調用特定的周 -->
<time datetime="2016-W04">The fourth week of 2016</time>