HTML - 短語標籤

上一頁
下一頁

HTML 短語標籤的設計是為了特定目的，儘管它們的顯示方式與其他基本標籤（如<b>、<i>、<pre>和<tt>）類似。在這裡，我們將帶您瞭解所有重要的短語標籤；所以讓我們開始逐一檢視它們。以下是短語標籤的列表，其中一些在 HTML 格式化和引用中進行了討論。

HTML 短語標籤列表

  • 強調文字 - HTML em 標籤
  • 標記文字 - HTML mark 標籤
  • 強文字 - HTML strong 標籤
  • 縮寫文字 - HTML abbr 標籤
  • 首字母縮寫文字 - HTML acronym 標籤
  • 定向文字 - HTML bdo 標籤
  • 特殊術語 - HTML dfn 標籤
  • 短引用文字 - HTML q 標籤
  • 長引用文字 - HTML blockquote 標籤
  • 引用文字 - HTML cite 文字
  • 計算機程式碼文字 - HTML code 標籤
  • 鍵盤文字 - HTML kbd 文字
  • 程式設計變數 - HTML pre 標籤
  • 程式輸出 - HTML samp 標籤
  • 地址文字 - HTML address 標籤

下面我們使用了每個短語標籤，每個標籤都有其預設樣式，其中一些也接受某些屬性。

強調文字

包含在<em>...</em>元素中的內容顯示為強調文字。<em>元素通常以斜體顯示文字，表示強調。

示例

<!DOCTYPE html>
<body>
   <p>The following word uses a <em>emphasized</em> typeface.</p>
</body>
</html>

輸出

The following word uses a emphasized typeface.

標記文字

包含在<mark>...</mark>元素中的任何內容都將以黃色墨水標記顯示。

示例

<!DOCTYPE html>
<html>
<body>
   <p>The following word has been <mark>marked</mark> with yellow.</p>
</body>
</html>

輸出

The following word has been marked with yellow.

強文字

包含在<strong>...</strong>元素中的內容將顯示為重要文字。<strong>元素以粗體顯示文字，表示很重要的意思。

示例

<!DOCTYPE html>
<html>
<body>
   <p>The following word uses a <strong>strong</strong> typeface. </p>
</body>
</html>

輸出

The following word uses a strong typeface.

縮寫文字

您可以透過將文字放在起始<abbr>和結束</abbr>標籤內來縮寫文字。如果存在，title 屬性必須包含此完整描述，且僅此而已。

示例

<!DOCTYPE html>
<html>
<body>
   <p>My best friend's name is <abbr title="Abhishek">Abhy</abbr>. </p>
</body>
</html>

輸出

My best friend's name is Abhy.

首字母縮寫文字

<acronym>元素允許您指示<acronym>和</acronym>標籤之間的文字是首字母縮寫。

目前，主要的瀏覽器不會更改<acronym>元素內容的外觀。

<acronym>元素在 HTML5 中已棄用。您應該改用<abbr>元素來定義縮寫，並且可以使用“title”屬性指定完整描述。

示例

<!DOCTYPE html>
<html>
<body>
   <p>This chapter covers marking up text in <acronym>XHTML</acronym>. </p>
</body>
</html>

輸出

This chapter covers marking up text in XHTML.

定向文字

<bdo>...</bdo>元素代表雙向覆蓋，用於覆蓋當前文字方向。

示例

<!DOCTYPE html>
<html>
<body>
   <p>This text will go left to right.</p>
   <p>
      <bdo dir="rtl">This text will go right to left.</bdo>
   </p>
</body>
</html>

輸出

This text will go right to left.

特殊術語

<dfn>...</dfn>元素（或 HTML 定義元素）允許您指定您正在介紹一個特殊術語。其用法類似於段落中間的斜體詞。

通常，您會在第一次介紹關鍵詞時使用<dfn>元素。大多數最新的瀏覽器會將<dfn>元素的內容以斜體顯示。

示例

<!DOCTYPE html>
<html>
<body>
   <p>The following word is a <dfn>special</dfn> term. </p>
</body>
</html>

輸出

The following word is a special term.

引用文字

當您想引用其他來源的段落時，應將其放在<blockquote>...</blockquote>標籤之間。

<blockquote>元素內的文字通常會從周圍文字的左右邊緣縮排，有時會使用斜體字型。

示例

<!DOCTYPE html>
<html>
<body>
   <p>The following description of XHTML is taken from the W3C Web site:</p>
   <blockquote>XHTML 1.0 is the W3C's first Recommendation for XHTML, following on from earlier work on HTML 4.01, HTML 4.0, HTML 3.2 and HTML 2.0.</blockquote>
</body>
</html>

輸出

The following description of XHTML is taken from the W3C Web site:

XHTML 1.0 is the W3C's first Recommendation for XHTML, following on 
from earlier work on HTML 4.01, HTML 4.0, HTML 3.2 and HTML 2.0.

短引用

當您想在一個句子中新增雙引號時，可以使用<q>...</q>元素。透過使用<q>...</q>，您可以確保包含的文字作為直接引用顯示，從而增強可讀性並保持 HTML 文件中正確的標點符號。

示例

<!DOCTYPE html>
<html>
<body>
   <p>Amit is in Spain, <q>I think I am wrong</q>. </p>
</body>
</html>

輸出

Amit is in Spain, I think I am wrong.

文字引用

如果您正在引用文字，您可以透過將其放在起始<cite>標籤和結束</cite>標籤之間來指示來源。

正如您在印刷出版物中所期望的那樣，<cite>元素的內容預設情況下以斜體顯示。

示例

<!DOCTYPE html>
<html>
<body>
   <p>This HTML tutorial is derived from <cite>W3 Standard for HTML</cite>. </p>
</body>
</html>

輸出

This HTML tutorial is derived from W3 Standard for HTML.

計算機程式碼

要在網頁上顯示任何程式設計程式碼，應將其放在<code>...</code>標籤內。通常，<code>元素的內容以等寬字型顯示，就像大多數程式設計書籍中的程式碼一樣。

示例

<!DOCTYPE html>
<html>
<body>
   <p>Regular text. <code>This is code.</code> Regular text. </p>
</body>
</html>

輸出

Regular text. This is code. Regular text.

鍵盤文字

當您談論計算機時，如果您想告訴讀者輸入一些文字，您可以使用<kbd>...</kbd>元素指示應輸入的內容，例如本示例。

示例

<!DOCTYPE html>
<html>
<body>
   <p>Regular text. <kbd>This is inside kbd element</kbd> Regular text. </p>
</body>
</html>

輸出

Regular text. This is inside kbd element Regular text.

程式設計變數

<var>元素通常與<pre>和<code>元素一起使用，以指示該元素的內容是變數。

示例

<!DOCTYPE html>
<html>
<body>
   <p>
      <code>document.write(" <var>user-name</var>") </code>
   </p>
</body>
</html>

輸出

document.write(" user-name")

程式輸出

<samp>...</samp>元素指示程式、指令碼等的示例輸出。同樣，它主要用於記錄程式設計或編碼概念。

示例

<!DOCTYPE html>
<html>
<body>
   <p>Result produced by the program is <samp>Hello World!</samp>
   </p>
</body>
</html>

輸出

Result produced by the program is Hello World!

地址文字

<address>...</address>元素用於包含任何地址。

示例

<!DOCTYPE html>
<html>
<body>
   <address>388A, Road No 22, Jubilee Hills - Hyderabad</address>
</body>
</html>

輸出

388A, Road No 22, Jubilee Hills - Hyderabad
列印頁面
上一頁
下一頁
廣告