Like Share Discussion Bookmark Smile

J.J. Huang   2019-05-15   Web   瀏覽次數:

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

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

說明列表

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

1
2
3
4
5
6
7
8
<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>&lt;blockquote&gt;</code> Element</strong> (or <em>HTML Block
Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>

使用塊引用

1
2
3
4
<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>&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>

引文

cite屬性的內容聽起來很有用,但不幸的是,瀏覽器、屏幕閱讀器等等不會真的關心它,如果不使用JavaScript或CSS,瀏覽器不會顯示cite的內容。如果你想要確保引用的來源在頁面上是可用的,更好的方法是把<cite>元素放到引用元素旁邊。這就意味著包含引用來源的名稱——即引用的書的名字,或人的名字——但並不表示你不可以用同樣的方式把要鏈接的文本放到<cite>元素中

1
2
3
4
5
6
7
8
9
10
11
12
<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>:用於標記計算機程序的輸出。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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> 元素允許你附上清晰的、可被機器識別的時間/日期來實現這種需求。

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!-- 標準簡單日期 -->
<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>

這邊轉載了大量的文章和內容,但是每個部分我都有實際去做過,並了解過。這邊轉載主要是做筆記記錄。

註:以上參考了
MDN web docsAdvanced text formatting 文章。