在HTML中引用：引號，引用和塊

這太常見了，無法在標記中看到用於引號的不正確的HTML。在本文中，讓我們研究所有這些，查看不同的情況和不同的HTML標籤以處理這些情況。

報價中涉及三個主要的HTML元素：

讓我們看看。

塊

BlockQuote標籤用於區分引用的文本和其餘內容。我的十年一年級的英語老師將其鑽入我的腦海中，即以這種方式將任何四行或更長的報價都與眾不同。 HTML規格沒有這樣的要求，但是只要文本是報價，您希望將其與周圍的文本和標籤區分開來，那麼blockquote就是語義選擇。

默認情況下，通過在每一側添加邊距來瀏覽器縮進器。

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

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

但這也可能是其他元素，例如標題或無序列表：

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

重要的是要注意，BlockQuotes僅用於引號，而不是設計中的裝飾元素。這也有助於可訪問性，因為屏幕讀取器用戶可以在blockquotes之間跳躍。因此，僅用於美學的塊狀元素確實會使這些用戶感到困惑。如果您需要一些更具裝飾性的東西，這些裝飾能超出擴展報價的範圍，那麼也許與一堂課的div是必經之路。

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

引用Q

Q標籤（）用於內聯行情，或者我十年一年級的老師說的是四行。許多現代瀏覽器會自動將報價標記添加到報價中，作為偽元素，但您可能需要用於較舊瀏覽器的備份解決方案。

典型的報價標記對於內聯引號與元素一樣有效。但是，使用的好處是，它包括引用屬性，引號的自動處理以及自動處理報價級別。 元素不應用於諷刺（例如，“您將使用標籤來諷刺，不是嗎？”），或表示帶有空氣報價的單詞（例如“很棒”是對作者的“準確”描述）。但是，如果您能弄清楚如何標記空氣報價，請告訴我。因為那將是“很棒的”。

引文屬性

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

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

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

這些選項都不特別。如果您需要引用一個來源，以使用戶可以看到它並轉到它，則應該在HTML中進行，並且可能使用元素進行操作，我們將接下來介紹。

引用元素

標籤應用於引用創意工作，而不是說或寫報價的人。換句話說，這不是為了引用。以下是規格的示例：

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

這是另一個例子：

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

默認情況下，瀏覽斜體標籤，並且不需要出現或

使用Cite元素。如果您想引用一本書或其他創造性作品，請在引用元素中拍打。語義神會因為不使用或元素而對您微笑。

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

或中，則將其作為報價的一部分。僅出於這個原因，規格禁止這一點。

 
<blockquote>
  關於紙杯蛋糕發行的報價
  <cite>文章</cite>
</blockquote>

將其放在外面感覺不對，還需要您擁有一個封閉元素，例如

，如果您想將它們造型。

 <div>
  <blockquote>
    關於紙杯蛋糕發行的報價
  </blockquote>
  <cite>文章</cite>
</div>

NB如果您在Google上進行了搜索，則可能會遇到2013年的HTML5 Doctor文章，與此處的許多內容相矛盾。就是說，每當它鏈接到文檔以尋求支持時，文檔都與您當前閱讀的文章一致，而不是HTML5 Doctor文章。自從該文章撰寫以來，文檔很可能發生了變化。

嘿，圖元素呢？

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

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

雖然這使所需的要素數量增加了一倍，但有幾個好處：

1. 對於所有四個元素，它在語義上都是正確的。
2. 它允許您既包含並封裝作者信息，否則就引用了作品名稱。
3. 它為您提供了一種簡單的方式來對報價進行樣式，而無需求助於divs，跨越或可憐。

這些都不是對話

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

and and 均不得用於對話和說話者之間的類似交流。如果您要標記對話，則可以使用對您最有意義的任何東西。沒有語義方法可以做到這一點。也就是說，規格建議使用

標籤和標點符號使用或標籤，以指定揚聲器和標籤以標記階段方向。

引號的可訪問性

從我所做的研究中，屏幕讀取器不應該有任何問題，即了解語義鑑定的，

或標籤。

更多的“引用”方式

您可以使用CSS偽元素將引號添加到

。 元素帶有引號鍵，因此不需要添加它們，但是將它們添加為偽元素可能是對不自動添加它們的舊瀏覽器的解決方法。由於這是現代瀏覽器添加引號的方式，因此沒有添加重複報價的危險。新的瀏覽器將覆蓋默認的偽元素，而支持偽元素的較舊瀏覽器將添加報價。

但是，您不能像我一樣，假設上述始終會給您聰明的開頭和關閉報價。即使字體支持智能報價，有時也會顯示直接引號。為了安全起見，最好使用引號CSS屬性來提高這些引號的智能。

 blockquote {
  引號： ””” ””” ”'” ”'”;
} 

多層次引用

現在讓我們看報價級別。 標籤將自動調整報價級別。

假設您正在使用英國使用單語引號的慣例。您可以使用CSS引號規則將列表中的開口和關閉單引號放在首位。這是兩種方式的示例：

嵌套沒有限制。那些嵌套的元素甚至可以在一個塊中的塊中。

如果將引號添加到一個塊引號，請知道blockQuote不會像標籤那樣更改報價級別。如果您期望在一個塊語言中有報價，則可能需要在單引號級別的塊中添加一個後代選擇器規則以啟動元素（如果您遵循英國公約，則可以雙引號）。

 blockquote q {
  引號： ”'” ”'” ””” ”””;
}

您輸入的最後一個報價級別將繼續通過隨後的報價級別。要使用雙重，單，雙，單，單…約定，請在CSS引號屬性中添加更多級別。

 Q {
  引號： ””” ””” ”'” ”'” ””” ””” ”'” ”'” ””” ”””;
}

懸掛標點符號

許多排版專家會告訴您，將引號上的引號上的標記看起來更好（而且是對的）。在這種情況下，懸掛標點符號是從文本中推出的引號，以使文本的字符垂直串聯。

CSS中的一種可能性是對文本內部屬性使用略有負值。確切的負凹痕將因字體而異，因此請務必用最終使用的字體仔細檢查間距。

 blockquote {
  文本式：-0.45em;
}

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

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

/ *如果有支持，請刪除縮進並使用該屬性 */
@supports（懸掛 - 函數：第一個）{
  blockquote {
    文字 -  0：0;
    懸掛 - 首先；
  }
}

使用懸掛 - 函數更好，因為它的煩惱較小。它可以在可能的情況下工作。

我們可以動畫引號嗎？

當然我們可以。

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

等等，也許我們只是解決了空氣報價的問題。

以上是在HTML中引用：引號，引用和塊的詳細內容。更多資訊請關注PHP中文網其他相關文章！