這太常見(jiàn)了，無(wú)法在標(biāo)記中看到用於引號(hào)的不正確的HTML。在本文中，讓我們研究所有這些，查看不同的情況和不同的HTML標(biāo)籤以處理這些情況。

報(bào)價(jià)中涉及三個(gè)主要的HTML元素：

讓我們看看。

塊

BlockQuote標(biāo)籤用於區(qū)分引用的文本和其餘內(nèi)容。我的十年一年級(jí)的英語(yǔ)老師將其鑽入我的腦海中，即以這種方式將任何四行或更長(zhǎng)的報(bào)價(jià)都與眾不同。 HTML規(guī)格沒(méi)有這樣的要求，但是只要文本是報(bào)價(jià)，您希望將其與周圍的文本和標(biāo)籤區(qū)分開(kāi)來(lái)，那麼blockquote就是語(yǔ)義選擇。

默認(rèn)情況下，通過(guò)在每一側(cè)添加邊距來(lái)瀏覽器縮進(jìn)器。

作為流量元素（即“塊級(jí)”元素），塊引力可以包含其中的其他元素。例如，我們可以毫無(wú)問(wèn)題地將段落放在那裡：

 <blockquote>
  <p> </p>
  <p> </p>
</blockquote>

但這也可能是其他元素，例如標(biāo)題或無(wú)序列表：

 <blockquote>
    <h2> </h2>
    <ul>
      <li> </li>
      <li> </li>
    </ul>
</blockquote>

重要的是要注意，BlockQuotes僅用於引號(hào)，而不是設(shè)計(jì)中的裝飾元素。這也有助於可訪問(wèn)性，因?yàn)槠聊蛔x取器用戶可以在blockquotes之間跳躍。因此，僅用於美學(xué)的塊狀元素確實(shí)會(huì)使這些用戶感到困惑。如果您需要一些更具裝飾性的東西，這些裝飾能超出擴(kuò)展報(bào)價(jià)的範(fàn)圍，那麼也許與一堂課的div是必經(jīng)之路。

 blockquote，
.callout-block {
  / *這些可以共享樣式 */
}

引用Q

Q標(biāo)籤（）用於內(nèi)聯(lián)行情，或者我十年一年級(jí)的老師說(shuō)的是四行。許多現(xiàn)代瀏覽器會(huì)自動(dòng)將報(bào)價(jià)標(biāo)記添加到報(bào)價(jià)中，作為偽元素，但您可能需要用於較舊瀏覽器的備份解決方案。

典型的報(bào)價(jià)標(biāo)記對(duì)於內(nèi)聯(lián)引號(hào)與元素一樣有效。但是，使用的好處是，它包括引用屬性，引號(hào)的自動(dòng)處理以及自動(dòng)處理報(bào)價(jià)級(jí)別。 元素不應(yīng)用於諷刺（例如，“您將使用標(biāo)籤來(lái)諷刺，不是嗎？”），或表示帶有空氣報(bào)價(jià)的單詞（例如“很棒”是對(duì)作者的“準(zhǔn)確”描述）。但是，如果您能弄清楚如何標(biāo)記空氣報(bào)價(jià)，請(qǐng)告訴我。因?yàn)槟菍⑹恰昂馨舻摹薄?/q>

引文屬性

和blockquotes均可使用引文（cite）屬性。該屬性具有一個(gè)URL，可為引用材料提供上下文和/或參考。規(guī)格指的是說(shuō)URL可以被空間包圍。 （我不確定為什麼要指出，但是如果您想激怒語(yǔ)義代碼神靈，您必須做的不僅僅是拋棄空間。）

 <p>官員留下一張紙條，說(shuō)<q cite="“" https:>您已被召集在一月的第四天出庭，涉嫌未遂讀者賄賂。 </q> </p>

默認(rèn)情況下，用戶看不到該引用屬性。您可以在以下演示中添加大量CSS魔術(shù)。您甚至可以進(jìn)一步擺弄它，以使引文出現(xiàn)在懸停。

這些選項(xiàng)都不特別。如果您需要引用一個(gè)來(lái)源，以使用戶可以看到它並轉(zhuǎn)到它，則應(yīng)該在HTML中進(jìn)行，並且可能使用元素進(jìn)行操作，我們將接下來(lái)介紹。

引用元素

標(biāo)籤應(yīng)用於引用創(chuàng)意工作，而不是說(shuō)或?qū)憟?bào)價(jià)的人。換句話說(shuō)，這不是為了引用。以下是規(guī)格的示例：

 <p>我最喜歡的書是<cite>現(xiàn)實(shí)功能障礙</cite>
彼得·漢密爾頓。我最喜歡的漫畫是<cite>珍珠之前
豬</cite>由斯蒂芬·帕斯蒂斯（Stephan Pastis）製作。我最喜歡的曲目是<cite> jive
桑巴</cite></p>

這是另一個(gè)例子：

如果本文的作者告訴您，他會(huì)給您一個(gè)紙杯蛋糕，而您的名字>他，那在語(yǔ)義上是不正確的。因此，沒(méi)有紙杯蛋糕會(huì)易手。如果您引用了他為您提供紙杯蛋糕的文章，那在語(yǔ)義上是正確的，但是由於作者不這樣做，您仍然不會(huì)得到紙杯蛋糕。對(duì)不起。

默認(rèn)情況下，瀏覽斜體標(biāo)籤，並且不需要出現(xiàn)或

使用Cite元素。如果您想引用一本書或其他創(chuàng)造性作品，請(qǐng)?jiān)谝迷刂信拇?。語(yǔ)義神會(huì)因?yàn)椴皇褂?i>或元素而對(duì)您微笑。

但是在哪裡放置引用元素？裡面？外部？顛倒了？如果我們將其放入

或中，則將其作為報(bào)價(jià)的一部分。僅出於這個(gè)原因，規(guī)格禁止這一點(diǎn)。

 
<blockquote>
  關(guān)於紙杯蛋糕發(fā)行的報(bào)價(jià)
  <cite>文章</cite>
</blockquote>

將其放在外面感覺(jué)不對(duì)，還需要您擁有一個(gè)封閉元素，例如

，如果您想將它們?cè)煨汀?pre rel="HTML"> <div> <blockquote> 關(guān)於紙杯蛋糕發(fā)行的報(bào)價(jià) </blockquote> <cite>文章</cite> </div>

NB如果您在Google上進(jìn)行了搜索，則可能會(huì)遇到2013年的HTML5 Doctor文章，與此處的許多內(nèi)容相矛盾。就是說(shuō)，每當(dāng)它鏈接到文檔以尋求支持時(shí)，文檔都與您當(dāng)前閱讀的文章一致，而不是HTML5 Doctor文章。自從該文章撰寫以來(lái)，文檔很可能發(fā)生了變化。

嘿，圖元素呢？

標(biāo)記引號(hào)的一種方法 - 並以一種使語(yǔ)義代碼神靈愉悅的方式放置在圖形元素中。然後，將引用元素和任何其他作者或引文信息放在小提琴中。

 <figud>
  <blockquote>
    但是Web瀏覽器不像Web服務(wù)器。如果您的後端代碼變得如此之大，以至於它開(kāi)始慢慢運(yùn)行，則可以通過(guò)擴(kuò)展服務(wù)器來(lái)向其投擲更多的計(jì)算能力。這不是您真正沒(méi)有<em>一個(gè)</em>運(yùn)行時(shí)環(huán)境的前端的選擇 - 您的最終用戶有自己的運(yùn)行時(shí)環(huán)境，其圍繞計(jì)算功率<strong>和</strong>網(wǎng)絡(luò)連接的限制。
  </blockquote>
  <figcaption>
    ＆mdash;傑里米·基思（Jeremy Keith），<cite>心理模型</cite>
  </figcaption>
</figud>

雖然這使所需的要素?cái)?shù)量增加了一倍，但有幾個(gè)好處：

1. 對(duì)於所有四個(gè)元素，它在語(yǔ)義上都是正確的。
2. 它允許您既包含並封裝作者信息，否則就引用了作品名稱。
3. 它為您提供了一種簡(jiǎn)單的方式來(lái)對(duì)報(bào)價(jià)進(jìn)行樣式，而無(wú)需求助於divs，跨越或可憐。

這些都不是對(duì)話

不是！這些是用於引人注目的模式。對(duì)話，就像在說(shuō)話或互相打字之間進(jìn)行的對(duì)話交流。

and and 均不得用於對(duì)話和說(shuō)話者之間的類似交流。如果您要標(biāo)記對(duì)話，則可以使用對(duì)您最有意義的任何東西。沒(méi)有語(yǔ)義方法可以做到這一點(diǎn)。也就是說(shuō)，規(guī)格建議使用

標(biāo)籤和標(biāo)點(diǎn)符號(hào)使用或標(biāo)籤，以指定揚(yáng)聲器和標(biāo)籤以標(biāo)記階段方向。

引號(hào)的可訪問(wèn)性

從我所做的研究中，屏幕讀取器不應(yīng)該有任何問(wèn)題，即了解語(yǔ)義鑑定的，

或標(biāo)籤。

更多的“引用”方式

您可以使用CSS偽元素將引號(hào)添加到

。 元素帶有引號(hào)鍵，因此不需要添加它們，但是將它們添加為偽元素可能是對(duì)不自動(dòng)添加它們的舊瀏覽器的解決方法。由於這是現(xiàn)代瀏覽器添加引號(hào)的方式，因此沒(méi)有添加重複報(bào)價(jià)的危險(xiǎn)。新的瀏覽器將覆蓋默認(rèn)的偽元素，而支持偽元素的較舊瀏覽器將添加報(bào)價(jià)。

但是，您不能像我一樣，假設(shè)上述始終會(huì)給您聰明的開(kāi)頭和關(guān)閉報(bào)價(jià)。即使字體支持智能報(bào)價(jià)，有時(shí)也會(huì)顯示直接引號(hào)。為了安全起見(jiàn)，最好使用引號(hào)CSS屬性來(lái)提高這些引號(hào)的智能。

 blockquote {
  引號(hào)： ””” ””” ”'” ”'”;
} 

多層次引用

現(xiàn)在讓我們看報(bào)價(jià)級(jí)別。 標(biāo)籤將自動(dòng)調(diào)整報(bào)價(jià)級(jí)別。

假設(shè)您正在使用英國(guó)使用單語(yǔ)引號(hào)的慣例。您可以使用CSS引號(hào)規(guī)則將列表中的開(kāi)口和關(guān)閉單引號(hào)放在首位。這是兩種方式的示例：

嵌套沒(méi)有限制。那些嵌套的元素甚至可以在一個(gè)塊中的塊中。

如果將引號(hào)添加到一個(gè)塊引號(hào)，請(qǐng)知道blockQuote不會(huì)像標(biāo)籤那樣更改報(bào)價(jià)級(jí)別。如果您期望在一個(gè)塊語(yǔ)言中有報(bào)價(jià)，則可能需要在單引號(hào)級(jí)別的塊中添加一個(gè)後代選擇器規(guī)則以啟動(dòng)元素（如果您遵循英國(guó)公約，則可以雙引號(hào)）。

 blockquote q {
  引號(hào)： ”'” ”'” ””” ”””;
}

您輸入的最後一個(gè)報(bào)價(jià)級(jí)別將繼續(xù)通過(guò)隨後的報(bào)價(jià)級(jí)別。要使用雙重，單，雙，單，單…約定，請(qǐng)?jiān)贑SS引號(hào)屬性中添加更多級(jí)別。

 Q {
  引號(hào)： ””” ””” ”'” ”'” ””” ””” ”'” ”'” ””” ”””;
}

懸掛標(biāo)點(diǎn)符號(hào)

許多排版專家會(huì)告訴您，將引號(hào)上的引號(hào)上的標(biāo)記看起來(lái)更好（而且是對(duì)的）。在這種情況下，懸掛標(biāo)點(diǎn)符號(hào)是從文本中推出的引號(hào)，以使文本的字符垂直串聯(lián)。

CSS中的一種可能性是對(duì)文本內(nèi)部屬性使用略有負(fù)值。確切的負(fù)凹痕將因字體而異，因此請(qǐng)務(wù)必用最終使用的字體仔細(xì)檢查間距。

 blockquote {
  文本式：-0.45em;
}

使用懸掛式CSS屬性，有一種更好的方法來(lái)處理此問(wèn)題。它僅在撰寫本文時(shí)才在Safari中得到支持，因此我們必須逐步增強(qiáng)：

 /* 倒退 */
blockquote {
  文本式：-0.45em;
}

/ *如果有支持，請(qǐng)刪除縮進(jìn)並使用該屬性 */
@supports（懸掛 - 函數(shù)：第一個(gè)）{
  blockquote {
    文字 -  0：0;
    懸掛 - 首先；
  }
}

使用懸掛 - 函數(shù)更好，因?yàn)樗臒垒^小。它可以在可能的情況下工作。

我們可以動(dòng)畫引號(hào)嗎？

當(dāng)然我們可以。

為什麼您需要這樣做，我不確定，但是添加了標(biāo)籤中的引號(hào)標(biāo)記是UA樣式表中的偽元素，因此，如果需要，我們可以選擇和樣式（包括動(dòng)畫）。

等等，也許我們只是解決了空氣報(bào)價(jià)的問(wèn)題。

以上是在HTML中引用：引號(hào)，引用和塊的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！