在HTML中，”引用”通常指的是使用<blockquote>、<q>等標(biāo)簽來(lái)引用其他來(lái)源的文本。這些標(biāo)簽不僅有助于語(yǔ)義化地標(biāo)記內(nèi)容，還能為搜索引擎和屏幕閱讀器等輔助技術(shù)提供額外的上下文。
HTML 中的 <q> 標(biāo)簽用于表示短的行內(nèi)引用。這個(gè)標(biāo)簽通常用于直接嵌入到句子或段落中，以引用其他人的話語(yǔ)或某個(gè)文獻(xiàn)中的短句。瀏覽器通常會(huì)將 <q> 標(biāo)簽中的內(nèi)容用引號(hào)包圍，不過(guò)這不是必須的，因?yàn)闃邮娇梢酝ㄟ^(guò) CSS 來(lái)控制。
下面是一個(gè) <q> 標(biāo)簽的使用示例：
<p>孔子曾經(jīng)說(shuō)過(guò)：<q>學(xué)而不思則罔，思而不學(xué)則殆。</q></p>在這個(gè)例子中，孔子的名言被 <q> 標(biāo)簽包圍，表示這是一個(gè)短的引用。瀏覽器在渲染時(shí)可能會(huì)在這段話的前后自動(dòng)添加引號(hào)，但具體表現(xiàn)取決于瀏覽器的默認(rèn)樣式或頁(yè)面所應(yīng)用的 樣式。
請(qǐng)注意，<q> 標(biāo)簽不應(yīng)包含換行符，因?yàn)樗辉O(shè)計(jì)為用于行內(nèi)引用。如果你需要引用一個(gè)包含換行或多個(gè)段落的較長(zhǎng)文本，應(yīng)該使用 <blockquote> 標(biāo)簽。
此外，雖然 <q> 標(biāo)簽在語(yǔ)義上標(biāo)明了引用，但它并不提供引用來(lái)源的信息。如果需要指明來(lái)源，可以在 <q> 標(biāo)簽之后手動(dòng)添加，或者使用 <cite> 標(biāo)簽來(lái)指明引用的作品或作者。
例如：
<p>孔子曾經(jīng)說(shuō)過(guò)：<q>學(xué)而不思則罔，思而不學(xué)則殆。</q>（出自《論語(yǔ)》）</p>或者使用 <cite> 標(biāo)簽更明確地指出引用來(lái)源：
<p>孔子曾經(jīng)說(shuō)過(guò)：<q>學(xué)而不思則罔，思而不學(xué)則殆。</q>（<cite>《論語(yǔ)》</cite>）</p>HTML 中的 <blockquote> 標(biāo)簽是用于表示長(zhǎng)引用的標(biāo)準(zhǔn)方式，通常用于引用其他來(lái)源的段落級(jí)別的文本。與 <q> 標(biāo)簽不同，<blockquote> 是為了引用更長(zhǎng)的文本內(nèi)容，如一個(gè)或多個(gè)段落。
<blockquote> 標(biāo)簽可以包含 cite 屬性，用于指定引用的來(lái)源。雖然 cite 屬性是可選的，但它為搜索引擎和讀者提供了有用的元數(shù)據(jù)，指示引用的來(lái)源。
以下是一個(gè) <blockquote> 標(biāo)簽的示例：
<blockquote cite=”http://www.example.com/some-article”>
<p>這是一個(gè)長(zhǎng)引用的第一段。</p>
<p>這是同一個(gè)引用的第二段。</p>
<footer>— <cite>引用來(lái)源的標(biāo)題</cite></footer>
</blockquote>在這個(gè)例子中，<blockquote> 標(biāo)簽包含了兩個(gè) <p> 標(biāo)簽，分別表示引用的兩個(gè)段落。<footer> 標(biāo)簽用于提供引用的附加信息，如來(lái)源或作者，而 <cite> 標(biāo)簽則用于指明引用來(lái)源的標(biāo)題。
請(qǐng)注意，<cite> 屬性中的 URL 應(yīng)該指向引用的原始來(lái)源，而 <cite> 標(biāo)簽內(nèi)的文本則是為了在人類可讀的格式中顯示引用的來(lái)源。
使用 <blockquote> 標(biāo)簽不僅有助于提升網(wǎng)頁(yè)的可訪問(wèn)性，還能使搜索引擎更好地理解頁(yè)面內(nèi)容，并且對(duì)于屏幕閱讀器等輔助技術(shù)也更加友好。同時(shí)，它也是一種良好的網(wǎng)頁(yè)內(nèi)容組織實(shí)踐，使得引用的內(nèi)容與頁(yè)面的其他部分區(qū)分開(kāi)來(lái)。
HTML 中的 <abbr> 標(biāo)簽用于表示縮寫(xiě)或首字母縮略詞。這個(gè)標(biāo)簽有助于解釋頁(yè)面上的縮寫(xiě)，從而提供更好的用戶體驗(yàn)，特別是對(duì)于那些可能不熟悉特定縮寫(xiě)的用戶。當(dāng)使用 <abbr> 標(biāo)簽時(shí)，可以通過(guò) title 屬性來(lái)提供縮寫(xiě)的完整形式或解釋。
以下是一個(gè) <abbr> 標(biāo)簽的示例：
<p>我們使用<abbr title=“HyperText Markup Language”>HTML</abbr>來(lái)創(chuàng)建網(wǎng)頁(yè)。</p>
在這個(gè)例子中，<abbr> 標(biāo)簽包圍了縮寫(xiě) “HTML”，并通過(guò) title 屬性提供了縮寫(xiě)的完整解釋：”HyperText Markup Language”。當(dāng)用戶的鼠標(biāo)懸停在縮寫(xiě)上時(shí)，大多數(shù)瀏覽器會(huì)顯示這個(gè) title 屬性的內(nèi)容作為工具提示。
使用 <abbr> 標(biāo)簽的好處是，它增強(qiáng)了網(wǎng)頁(yè)的可訪問(wèn)性。對(duì)于視覺(jué)障礙的用戶，屏幕閱讀器可以讀取 title 屬性的內(nèi)容，從而解釋縮寫(xiě)的含義。此外，搜索引擎也可以利用這些信息來(lái)更好地理解頁(yè)面內(nèi)容。
請(qǐng)注意，<abbr> 標(biāo)簽不應(yīng)被用于標(biāo)記縮寫(xiě)詞以外的任何內(nèi)容。而且，雖然 title 屬性是可選的，但強(qiáng)烈建議使用它來(lái)提供縮寫(xiě)的完整解釋，以便所有用戶都能理解頁(yè)面上的內(nèi)容。
HTML 中的 <dfn> 標(biāo)簽用于標(biāo)記定義中的術(shù)語(yǔ)或關(guān)鍵詞。這個(gè)標(biāo)簽通常與 <dl>（定義列表）、<dt>（定義術(shù)語(yǔ)）和 <dd>（定義描述）一起使用，來(lái)創(chuàng)建一個(gè)術(shù)語(yǔ)和定義的列表。然而，<dfn> 可以獨(dú)立于這些列表元素使用，以強(qiáng)調(diào)文本中的某個(gè)定義性術(shù)語(yǔ)。
當(dāng)瀏覽器或輔助技術(shù)（如屏幕閱讀器）遇到 <dfn> 標(biāo)簽時(shí)，它們可能會(huì)以特殊的方式處理或宣布該術(shù)語(yǔ)，以幫助用戶識(shí)別這是一個(gè)重要的定義。
以下是一個(gè)使用 <dfn> 標(biāo)簽的示例：
<p>在網(wǎng)頁(yè)設(shè)計(jì)中，<dfn>響應(yīng)式設(shè)計(jì)</dfn>是一種使網(wǎng)站能夠根據(jù)不同設(shè)備的屏幕尺寸、平臺(tái)和方向進(jìn)行自適應(yīng)設(shè)計(jì)的方法。</p>
在這個(gè)例子中，“響應(yīng)式設(shè)計(jì)”是被定義的術(shù)語(yǔ)，因此它被 <dfn> 標(biāo)簽包圍。這樣，瀏覽器或輔助技術(shù)就可以識(shí)別并可能以不同的方式呈現(xiàn)這個(gè)術(shù)語(yǔ)，幫助用戶注意到這是一個(gè)關(guān)鍵的定義。
雖然 <dfn> 標(biāo)簽對(duì)于提升可訪問(wèn)性和搜索引擎優(yōu)化可能有一定的幫助，但它并不是必需的。在使用時(shí)，應(yīng)確保它的使用能夠真正增強(qiáng)內(nèi)容的理解，而不是僅僅為了標(biāo)記而標(biāo)記。
請(qǐng)注意，<dfn> 標(biāo)簽的效果在很大程度上取決于瀏覽器和輔助技術(shù)的實(shí)現(xiàn)。因此，即使使用了 <dfn>，也不應(yīng)依賴它來(lái)傳達(dá)關(guān)鍵信息，而應(yīng)確保內(nèi)容在沒(méi)有特殊標(biāo)記的情況下也能被清晰理解。
HTML 中的 <address> 標(biāo)簽用于提供文檔或文章作者的聯(lián)系信息。這個(gè)標(biāo)簽通常放在頁(yè)面的底部，用以展示如電子郵件地址、物理地址、電話號(hào)碼等聯(lián)系方式。需要注意的是，<address> 標(biāo)簽不應(yīng)該用于描述任何非聯(lián)系信息的地址，例如文章的郵寄地址或故事中的地點(diǎn)等。
下面是一個(gè) <dress> 標(biāo)簽的使用示例：
<address>
Webmaster<br>
Example.com<br>
1234 Somewhere Road<br>
Some City, ST 12345<br>
Email: <a href=”mailto:webmaster@example.com”>webmaster@example.com</a>
</address>
在這個(gè)例子中，<address> 標(biāo)簽包含了網(wǎng)站管理員的姓名、公司名稱、物理地址以及電子郵件鏈接。<br> 標(biāo)簽用于在地址信息中插入換行，而 <a> 標(biāo)簽與 mailto: 協(xié)議一起用于創(chuàng)建電子郵件鏈接。
請(qǐng)注意，盡管 <address> 標(biāo)簽中的內(nèi)容通常是關(guān)于頁(yè)面或站點(diǎn)所有者的聯(lián)系信息，但它并不局限于個(gè)人聯(lián)系方式。例如，它可以用于提供公司或組織的聯(lián)系信息，或者是某個(gè)特定部門(mén)或服務(wù)的聯(lián)系方式。
此外，<address> 標(biāo)簽的樣式可以通過(guò) CSS 來(lái)控制，以適應(yīng)網(wǎng)站的視覺(jué)設(shè)計(jì)。然而，在語(yǔ)義上使用 <dress> 標(biāo)簽的主要目的是為了清晰地標(biāo)識(shí)出聯(lián)系信息，以便于搜索引擎、輔助技術(shù)（如屏幕閱讀器）和用戶能夠輕松識(shí)別和訪問(wèn)。
HTML 中的 <cite> 標(biāo)簽用于表示對(duì)創(chuàng)作性作品的引用，如書(shū)籍、電影、照片、繪畫(huà)、音樂(lè)作品等的標(biāo)題。這個(gè)標(biāo)簽不僅有助于語(yǔ)義化地標(biāo)記內(nèi)容，還能為搜索引擎提供關(guān)于引用作品的信息。
當(dāng)使用 <cite> 標(biāo)簽時(shí)，應(yīng)將其用于包圍作品的標(biāo)題。下面是一個(gè)使用 <cite> 標(biāo)簽的示例：
<p>我最喜歡的書(shū)是<cite>哈利·波特與魔法石</cite>。</p>
在這個(gè)例子中，<cite> 標(biāo)簽包圍了書(shū)籍的標(biāo)題“哈利·波特與魔法石”，以指示這是一個(gè)著作的標(biāo)題。
請(qǐng)注意，<cite> 標(biāo)簽不應(yīng)用于人名、文章標(biāo)題或網(wǎng)站名稱等非著作標(biāo)題的內(nèi)容。對(duì)于人名，可以使用普通的文本或者 <span> 標(biāo)簽進(jìn)行標(biāo)記；對(duì)于文章標(biāo)題或網(wǎng)站名稱，可以使用 <h1> 到 <h6> 等標(biāo)題標(biāo)簽或其他適當(dāng)?shù)臉?biāo)簽。
使用 <cite> 標(biāo)簽有助于提升網(wǎng)頁(yè)的可訪問(wèn)性和搜索引擎優(yōu)化。它能讓搜索引擎更好地理解頁(yè)面內(nèi)容，并為用戶提供更準(zhǔn)確的搜索結(jié)果。同時(shí)，它也是一種良好的網(wǎng)頁(yè)內(nèi)容組織實(shí)踐，使得引用的作品標(biāo)題與其他文本內(nèi)容區(qū)分開(kāi)來(lái)。
雖然 <cite> 標(biāo)簽對(duì)于語(yǔ)義化標(biāo)記很有用，但它并不會(huì)自動(dòng)為引用的作品添加任何特殊的樣式。如果需要調(diào)整樣式，可以使用 CSS 來(lái)控制 <cite> 標(biāo)簽的外觀。
HTML 中的 <bdo> 標(biāo)簽用于覆蓋默認(rèn)的文本流向。<bdo> 是 Bidirectional Override 的縮寫(xiě)，它允許開(kāi)發(fā)者顯式地設(shè)置文本的方向，這在處理包含混合語(yǔ)言文本（如同時(shí)包含從左到右和從右到左書(shū)寫(xiě)的語(yǔ)言）時(shí)特別有用。
<bdo> 標(biāo)簽接受一個(gè) dir 屬性，該屬性可以設(shè)置為 “ltr”（從左到右）或 “rtl”（從右到左），以強(qiáng)制文本按照指定的方向流動(dòng)，無(wú)論其內(nèi)容的自然語(yǔ)言方向是什么。
下面是一個(gè) <bdo> 標(biāo)簽的使用示例：
<p>這是一個(gè)普通的段落。</p>
<p>這是一個(gè)使用 <bdo dir=“rtl”>從右到左</bdo> 書(shū)寫(xiě)的文本示例。</p>
在這個(gè)例子中，第二個(gè)段落中的 <bdo dir=“rtl”> 使得“從右到左”這幾個(gè)字實(shí)際上會(huì)按照從右到左的順序顯示，即使頁(yè)面或?yàn)g覽器的默認(rèn)文本方向是從左到右。
請(qǐng)注意，<bdo> 標(biāo)簽應(yīng)謹(jǐn)慎使用，因?yàn)樗鼤?huì)覆蓋用戶的語(yǔ)言和文本方向偏好。在大多數(shù)情況下，HTML 和 會(huì)根據(jù)內(nèi)容的語(yǔ)言自動(dòng)處理文本方向。只有在自動(dòng)處理不能滿足需求時(shí)，才應(yīng)使用 <bdo> 標(biāo)簽。
此外，<bdo> 標(biāo)簽主要用于處理文本流向的特殊情況，并不常見(jiàn)于普通的網(wǎng)頁(yè)開(kāi)發(fā)中。在處理多語(yǔ)言內(nèi)容時(shí)，應(yīng)優(yōu)先考慮使用 HTML 的 lang 屬性和 CSS 的 direction 屬性來(lái)控制文本方向和語(yǔ)言設(shè)置。
| 標(biāo)簽 | 描述 |
|---|---|
<q> | 用于短的引用，瀏覽器通常會(huì)為 <q> 元素包圍引號(hào)。 |
<blockquote> | 用于長(zhǎng)引用，瀏覽器通常會(huì)對(duì) <blockquote> 元素進(jìn)行縮進(jìn)處理。 |
<abbr> | 用于定義縮寫(xiě)或首字母縮略語(yǔ)，對(duì)縮寫(xiě)進(jìn)行標(biāo)記能夠?yàn)闉g覽器、翻譯系統(tǒng)以及搜索引擎提供有用的信息。 |
<dfn> | 用于定義項(xiàng)目或縮寫(xiě)的定義，按照HTML5標(biāo)準(zhǔn)中的描述，其用法有點(diǎn)復(fù)雜。 |
<cite> | 用于表示對(duì)創(chuàng)作性作品的引用，如書(shū)籍、電影等的標(biāo)題。 |
這些標(biāo)簽有助于在HTML文檔中標(biāo)記和呈現(xiàn)引用、縮寫(xiě)和定義等內(nèi)容，提高文檔的可讀性和可訪問(wèn)性。請(qǐng)注意，隨著HTML標(biāo)準(zhǔn)的不斷發(fā)展，一些標(biāo)簽的用法和語(yǔ)義可能會(huì)發(fā)生變化，建議查閱最新的HTML規(guī)范以獲取準(zhǔn)確信息。
另外，雖然表格中沒(méi)有列出，但<bdo>標(biāo)簽也是一個(gè)與引用相關(guān)的標(biāo)簽，它用于覆蓋默認(rèn)的文本流向，可以顯式地設(shè)置文本的方向。然而，由于其使用相對(duì)較少且主要用于處理特殊情況，因此在上述表格中未包含。
希望這個(gè)表格對(duì)您有所幫助！如有其他問(wèn)題，請(qǐng)隨時(shí)提問(wèn)。
上一篇： HTML 文本格式化
下一篇： HTML 注釋