HTML DOM Blockquote 對(duì)象

Blockquote 對(duì)象

Blockquote 對(duì)象代表著一個(gè) HTML 引用(blockquote)塊元素。

<blockquote> 標(biāo)簽定義摘自另一個(gè)源的塊引用。

一個(gè) <blockquote> 元素的內(nèi)容通常展現(xiàn)為一個(gè)左、右兩邊進(jìn)行縮進(jìn)的段落。

在 HTML 文檔中的每一個(gè) <blockquote> 標(biāo)簽創(chuàng)建時(shí)，都會(huì)創(chuàng)建一個(gè) Blockquote 對(duì)象。

Blockquote 對(duì)象屬性

屬性	描述
cite	設(shè)置或返回一個(gè)引用的cite屬性值

標(biāo)準(zhǔn)屬性和事件

Blockquote 對(duì)象支持標(biāo)準(zhǔn) 屬性和事件。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

速總結(jié) ? 在這篇文章中，Louis Lazaris 描述并演示了一些有趣的 HTML 屬性，您可能沒(méi)有聽(tīng)說(shuō)過(guò)也可能沒(méi)有聽(tīng)說(shuō)過(guò)，并且可能會(huì)發(fā)現(xiàn)它們非常有用，可以在您的項(xiàng)目中親自使用。

一月份，麥迪遜卡納[問(wèn)她的推特粉絲

今年你想要學(xué)習(xí)或更深入地學(xué)習(xí)哪些語(yǔ)言/技術(shù)？
typescript、next.js、react、graphql、solidity、node，這幾個(gè)是哪個(gè)呢
- 麥迪遜卡納 (@Madisonkanna)
2022 年 1 月 3 日

但是我的答案很簡(jiǎn)單：HTML。而且我一點(diǎn)也沒(méi)有諷刺或嘲弄。當(dāng)然，我非常清楚在哪些情況下使用哪些標(biāo)簽，以及如何使用我的 HTML 大部分具有語(yǔ)義性和可訪問(wèn)性。

但是我確信我已經(jīng)忘記了一大堆較少使用的屬性，并且可能有一大堆我甚至不知道存在的屬性。這篇文章是我研究的結(jié)果，我希望你會(huì)發(fā)現(xiàn)其中的一些對(duì)你有用，因?yàn)槟阍诮酉聛?lái)的幾個(gè)月里構(gòu)建 HTML 頁(yè)面。

enterkeyhint`虛擬鍵盤的屬性

該enterkeyhint屬性是一個(gè)全局屬性，可應(yīng)用于已contenteditable設(shè)置為的表單控件或元素true。此屬性可幫助使用虛擬屏幕鍵盤的移動(dòng)設(shè)備上的用戶。

<input type="text" enterkeyhint="done">

復(fù)制

enterkeyhint接受七個(gè)可能值之一，這些值將確定用戶在他的“輸入”鍵上看到的內(nèi)容：

enter,
done,
go,
next,
previous,
search,
send.

您可以看到這些“提示”如何對(duì)用戶有用。用戶是否正在執(zhí)行一系列操作？他們?cè)谔峤恍畔幔克麄冊(cè)诒４嬖O(shè)置嗎？根據(jù)他們正在做什么，您可以自定義提示以匹配您的應(yīng)用程序的需求。

您可以通過(guò)在移動(dòng)設(shè)備上訪問(wèn)下面的信息 CodePen 演示來(lái)嘗試這個(gè)。

<main>
  <h2>Using the <code>enterkeyhint</code> Attribute</h2>
  <p>View this demo on a mobile device. Note the text in the "enter" key on your mobile device's virtual keyboard.</p>
  <input type="text" enterkeyhint="Next">

</main>

body {
  font-family: Arial, sans-serif;
  font-size: 20px;
  padding: 0 20px;
}

main {
  text-align: center;
  margin: 0 auto;
  max-width: 800px;
}

p {
  text-align: left;
  padding: 0 20px;
}

code {
  color: firebrick;
}

在我的 iOS 設(shè)備上，回車鍵的文本會(huì)隨著鍵的顏色而變化，具體取決于值，如下面的屏幕截圖所示。這可能會(huì)有所不同，具體取決于用戶的設(shè)備。

只是強(qiáng)調(diào)一下，這個(gè)屬性不接受自定義值；該值需要是上面顯示的七個(gè)之一。無(wú)法識(shí)別的值將默認(rèn)為輸入鍵的設(shè)備默認(rèn)為文本。

樣式表上的title屬性

在為本文進(jìn)行研究時(shí)，這對(duì)我來(lái)說(shuō)是全新的，可能是此列表中最有趣的一個(gè)。作為一些背景知識(shí)，如果您不知道，F(xiàn)irefox 有一個(gè)選項(xiàng)可讓您選擇查看頁(yè)面時(shí)要使用的樣式表。通常，此功能顯示兩個(gè)選項(xiàng)：“基本頁(yè)面樣式”和“無(wú)樣式”，如下圖所示在我的 Windows 機(jī)器上。

這使您可以快速測(cè)試禁用樣式時(shí)頁(yè)面的外觀，還允許您使用任何備用樣式表查看頁(yè)面。

備用樣式表功能通過(guò)兩個(gè)屬性啟用：title屬性和rel=alternate應(yīng)用于<link>元素，如下面的代碼所示：

<link href="main.css" rel="stylesheet" title="Default">
<link href="contrast.css" rel="alternate stylesheet" title="High Contrast">
<link href="readable.css" rel="alternate stylesheet" title="Readable">

在這種情況下，我的“默認(rèn)”樣式將自動(dòng)應(yīng)用，但僅限于我使用 Firefox 的“頁(yè)面樣式”選項(xiàng)選擇它們時(shí)，備用樣式表才會(huì)應(yīng)用。您可以通過(guò)使用 Firefox 或其他兼容瀏覽器訪問(wèn)以下 CodePen 來(lái)嘗試上述示例：

下面的屏幕截圖顯示了 Firefox 中的樣式表選項(xiàng)：

如前所述，此功能在 Firefox 中有效，但我無(wú)法讓它在任何時(shí)候基于 Chromium 瀏覽器中工作。MDN關(guān)于備用樣式表的文章說(shuō)它可以在其他瀏覽器中使用擴(kuò)展啟用，但我找不到可以執(zhí)行此操作的活動(dòng)擴(kuò)展。

和元素的cite屬性

我敢肯定你<blockquote>經(jīng)常使用這個(gè)元素。您可以在沒(méi)有屬性的情況下直接使用它，但您也可以選擇使用該cite屬性。這是一個(gè)引用描述使用citeon的 MDN 文章的示例<blockquote>：

<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote#attr-cite">
      A URL that designates a source document or message for the information quoted. This attribute is intended to point to information explaining the context or the reference for the quote.
</blockquote>

由于我上面的地塊引用來(lái)解釋了什么是 MDN 文章cite，因此我將指向頁(yè)面的 URL 設(shè)置為cite值。

您可以看到這是多么有用，因?yàn)樗鼘⒁煤鸵玫膩?lái)源包裝在一個(gè)元素中。但請(qǐng)注意HTML 規(guī)范中的進(jìn)一步解釋：

用戶代理可能允許用戶關(guān)注此類引用鏈接，但它們主要用于私人用途（例如，通過(guò)服務(wù)器端腳本收集有關(guān)站點(diǎn)使用引用的統(tǒng)計(jì)信息），而不是供讀者使用。

當(dāng)然，相同的概念也適用于用于內(nèi)聯(lián)引用cite的元素上。<q>

自定義序列列表的屬性

<ol>經(jīng)常使用使用該元素的有序列表。一些鮮為人知的功能允許您自定義出現(xiàn)在此類列表中的編號(hào)行為：

屬性，以相反的順序?qū)?/span>reversed項(xiàng)目進(jìn)行編號(hào)（從高到低，而不是默認(rèn)的從低到高）；
屬性，定義從start哪個(gè)數(shù)字開(kāi)始；
屬性，定義是type使用數(shù)字、字母還是數(shù)字；
屬性，用于在value特定列表項(xiàng)上指定自定義編號(hào)。

如您所見(jiàn)，使用純 HTML 的有序列表比您通常習(xí)慣的要靈活得多。

該reversed屬性是一個(gè)有趣的屬性，因?yàn)樗鼘?shí)際上并沒(méi)有反轉(zhuǎn)列表本身的內(nèi)容；它只會(huì)反轉(zhuǎn)每個(gè)列表項(xiàng)旁邊的數(shù)字。

<ol reversed>
    <li>List item...</li>
    <li>List item...</li>
    <li>List item...</li>
</ol>

下面的 CodePen 演示添加了一些 JavaScript，因此您可以交互地切換reversed屬性。

請(qǐng)注意，列表本身保持不變，但數(shù)字會(huì)發(fā)生變化。如果您正在尋找一種反轉(zhuǎn)內(nèi)容的方法，請(qǐng)記住這一點(diǎn)。這是您可以使用 JavaScript、CSS 或直接在 HTML 源代碼中執(zhí)行的操作。

上面，我還提到了其他三個(gè)屬性。讓我們將它們合并到列表中，看看如何使用它們：

<ol reversed start="20" type="1">
    <li>Typee: A Peep at Polynesian Life (1846)</li>
    <li>Omoo: A Narrative of Adventures in the South Seas (1847)</li>
    <li>Mardi: and a Voyage Thither (1849)</li>
    <li>Redburn: His First Voyage (1849)</li>
    <li value="100">White-Jacket; or, The World in a Man-of-War (1850)</li>
    <li>Moby-Dick; or, The Whale (1851)</li>
    <li>Pierre; or, The Ambiguities (1852)</li>
    <li>Isle of the Cross (1853 unpublished, and now lost)</li>
</ol>

請(qǐng)注意，已添加的type和屬性以及單個(gè)列表項(xiàng)上的屬性。該屬性接受表示編號(hào)類型的五個(gè)單字符值（、、、、）之一。start``value``type``a``A``i``I``1

使用以下交互式演示進(jìn)行嘗試：

使用單選按鈕選擇該type屬性的五個(gè)值之一。然后嘗試使用Toggle Reversed按鈕反轉(zhuǎn)列表。如您所見(jiàn)，除了有序列表的默認(rèn)行為之外，還有很多可能性！

元素的download屬性

就像網(wǎng)絡(luò)上無(wú)處不在的鏈接一樣，擁有一個(gè)使鏈接更加強(qiáng)大的屬性總是很好的。該download屬性是幾年前添加到規(guī)范中的，它允許您指定單擊鏈接時(shí)應(yīng)該下載而不是訪問(wèn)該鏈接。

<a href="/example.pdf" download>Download File</a>

如果沒(méi)有值，該download屬性會(huì)強(qiáng)制下載鏈接頁(yè)面。或者，您可以提供一個(gè)值，瀏覽器將其用作下載資源的建議文件名。

<a href="/example.pdf" download="my-download.pdf">Download File</a>

作為涉及此屬性的額外技巧，您可以將此功能與一些 JavaScript 結(jié)合起來(lái)，為用戶創(chuàng)建一種下載他們自己創(chuàng)建的內(nèi)容的方式。

元素的decoding屬性

在研究這篇文章時(shí)，這對(duì)我來(lái)說(shuō)是另一篇全新的文章——而且在規(guī)范中似乎相當(dāng)新。將decoding屬性添加到圖像元素可為瀏覽器提供圖像解碼提示。

<img src="/images/example.png" alt="Example" decoding="async">

此屬性類似于async在腳本上使用該屬性。加載圖像所需的時(shí)間不會(huì)改變，但其“解碼”的方式（因此其內(nèi)容在視口中變得可見(jiàn)）由decoding屬性決定。

值為：

sync 同步解碼圖像，一般瀏覽器都是這樣做的。
async 異步解碼圖像以避免延遲其他內(nèi)容的呈現(xiàn)。
auto 默認(rèn)允許瀏覽器使用自己的內(nèi)置解碼方法。

如果您對(duì)解碼圖像的概念感到好奇，該規(guī)范有[一個(gè)很好的解釋]，并不難理解。

元素的loading屬性

您可能已經(jīng)知道，圖像元素現(xiàn)在可以包含一個(gè)loading屬性，將延遲加載作為一項(xiàng)功能放入瀏覽器中，這是我們多年來(lái)使用 JavaScript 解決方案所做的事情。但不要忘記該loading屬性也可以用于<iframe>元素：

<iframe src="/page.html" width="300" height="250" loading="lazy">

復(fù)制

與圖像一樣，該loading屬性接受eager（默認(rèn)瀏覽器行為）或的值lazy，這會(huì)延遲 iframe 內(nèi)容的加載，直到 iframe 即將進(jìn)入視口。此屬性的唯一缺點(diǎn)是 Firefox 不支持在 iframe 上使用它（盡管 Firefox 確實(shí)支持loading圖像）。

表單字段的form屬性

在大多數(shù)情況下，您會(huì)將表單輸入和控件嵌套在<form>元素中。但是，如果您的應(yīng)用程序或布局需要一些不同的東西，您可以選擇將表單輸入放在您想要的任何位置，并將其與任何<form>元素相關(guān)聯(lián)——即使不是元素的父元素。

<form id="myForm" action="/form.php">
  <input id="name">
  <button type="submit">
</form>

<input type="email" form="myForm">

正如您在上面看到<input>的，表單外部的電子郵件的form屬性設(shè)置為myForm，該屬性設(shè)置為與表單的相同的值id。submit您可以使用此屬性和表單的 id將表單控件（包括按鈕）與文檔中的任何表單相關(guān)聯(lián)。

您可以使用此演示頁(yè)面進(jìn)行嘗試。表單使用 GET 請(qǐng)求提交，因此您可以在 URL 的查詢字符串中看到提交的值。在該頁(yè)面上，“評(píng)論”框位于<form>元素之外。

我對(duì)這個(gè)屬性的唯一抱怨是它可能應(yīng)該被賦予一個(gè)更獨(dú)特的名稱，也許像“formowner”之類的東西。盡管如此，如果您的設(shè)計(jì)或布局需要無(wú)父表單字段，請(qǐng)記住它是有用的。

刪除/插入的citeAnddatetime屬性

我在處理塊引用時(shí)已經(jīng)提到cite過(guò)，但是這個(gè)屬性也可以用于用<del>and<ins>元素標(biāo)記的刪除和插入。此外，兩個(gè)元素都可以包含一個(gè)datetime屬性。

<del
  cite="https://bugzilla.mozilla.org/show_bug.cgi?id=1620467"
  datetime="2020-07-23"
>Firefox doesn't support CSS's standard <code>appearance</code> property, so you can only use it prefixed.</del>

<ins          
  cite="https://bugzilla.mozilla.org/show_bug.cgi?id=1620467"
  datetime="2020-07-23"
>The <code>appearance</code> property, previously only available prefixed in Firefox, can now be used in all modern browers unprefixed.</ins>

對(duì)于每個(gè)元素，這兩個(gè)屬性代表的內(nèi)容如下：

cite 指向資源的 URL，該資源解釋了刪除或插入內(nèi)容的原因。
datetime 刪除或插入的日期。

在我的例子中，我使用了一些文本的例子，描述了一個(gè)在 Firefox 中需要供應(yīng)商前綴的 CSS 屬性。這可能是一篇舊博客文章。刪除前綴后，我可以使用and元素來(lái)delete獲取舊文本和insert新文本。然后我可以使用該屬性來(lái)引用解決問(wèn)題的錯(cuò)誤報(bào)告。<del>``<ins>``cite

元素的label屬性

最后，這最后一個(gè)有點(diǎn)像老歌，但因?yàn)樗唤?jīng)常被使用，也許你甚至不知道它的存在。這是一個(gè)元素和一個(gè)屬性的組合。

<select>如果下拉選項(xiàng)中包含一長(zhǎng)串項(xiàng)目，則可以使用<optgroup>元素及其關(guān)聯(lián)label屬性將選項(xiàng)分組為可見(jiàn)類別：

<select>
  <option>--Your Favourite Animal--</option>
  <optgroup label="Birds">
    <option>Blue Jay</option>
    <option>Cardinal</option>
    <option>Hummingbird</option>
  </optgroup>
  <optgroup label="Sea Creatures">
    <option>Shark</option>
    <option>Clownfish</option>
    <option>Whale</option>
  </optgroup>
  <optgroup label="Mammals">
    <option>Lion</option>
    <option>Squirrel</option>
    <option>Quokka</option>
  </optgroup>
</select>

您可以使用以下 CodePen 來(lái)試用一個(gè)示例：

請(qǐng)注意，每個(gè)<optgroup>都有一個(gè)label為每個(gè)組定義標(biāo)題的屬性——但不能選擇標(biāo)題。作為額外提示，您還可以使用disabledan 上的屬性來(lái)禁用下拉菜單<optgroup>該部分中的所有選項(xiàng)。<select>

用于預(yù)加載響應(yīng)式圖像的imagesizes和imagesrcset屬性

這是我在研究本文時(shí)的另一對(duì)新屬性，它們?cè)谝?guī)范中也是相對(duì)較新的。

這兩個(gè)屬性都可以與元素一起定義rel=preload，as如下<link>所示：

<link rel="preload"
      as="image"
      imagesrcset="images/example-480.png 480w,
             images/example-800.png 800w,
             images/example.png 2000w"
     imagesizes="(max-width: 600px) 480px,
            (max-width: 1000px) 800px,
            1000px"
     src="images/example.png"
     alt="Example Image">

這里的使用rel=preload通知瀏覽器我們希望指定的資源優(yōu)先加載，因此它們不會(huì)被腳本和樣式表之類的東西阻塞。該as屬性指定所請(qǐng)求內(nèi)容的類型。

您可以使用href屬性以及preload和預(yù)加載常規(guī)圖像as。但最重要的是，您可以使用imagesrcsetandimagesizes屬性，就像我在上面的代碼中所做的那樣。

這允許您預(yù)加載正確的圖像，具體取決于視口的大小或您在imagesizes屬性中指定的其他媒體功能。

榮譽(yù)提名

除了我已經(jīng)詳細(xì)描述和演示的屬性之外，您可能還想了解其他一些屬性，我將在這里簡(jiǎn)要提及：

crossorigin可以應(yīng)用于多個(gè)元素的屬性，包括<audio>、<img>、<link>、<script>和<video>，為跨域資源共享（CORS）提供支持；
和的title屬性；<dfn>``<abbr>
元素的新disablepictureinpicture屬性；<video>
腳本的integrity屬性，幫助瀏覽器驗(yàn)證資源沒(méi)有被不當(dāng)操作；
元素的disabled屬性<fieldset>，輕松同時(shí)禁用多個(gè)表單元素；
電子郵件和文件輸入的multiple屬性。

如果您使用過(guò)本文中提到的任何屬性，或者如果您知道在您的項(xiàng)目中使用過(guò)的另一個(gè) HTML 功能，請(qǐng)隨時(shí)在評(píng)論中告訴我。

TML 文本格式化

加粗文本

斜體文本

電腦自動(dòng)輸出

這是下標(biāo) 和上標(biāo)

HTML 格式化標(biāo)簽

HTML 使用標(biāo)簽<b> 與<i> 對(duì)輸出的文本進(jìn)行格式, 如：粗體 or 斜體

這些HTML標(biāo)簽被稱為格式化標(biāo)簽（請(qǐng)查看底部完整標(biāo)簽參考手冊(cè)）。

	通常標(biāo)簽 <strong> 替換加粗標(biāo)簽 <b> 來(lái)使用, <em> 替換 <i>標(biāo)簽使用。然而，這些標(biāo)簽的含義是不同的：<b> 與<i> 定義粗體或斜體文本。<strong> 或者 <em>意味著你要呈現(xiàn)的文本是重要的，所以要突出顯示。現(xiàn)今所有主要瀏覽器都能渲染各種效果的字體。不過(guò)，未來(lái)瀏覽器可能會(huì)支持更好的渲染效果。

通常標(biāo)簽 <strong> 替換加粗標(biāo)簽 <b> 來(lái)使用, <em> 替換 <i>標(biāo)簽使用。然而，這些標(biāo)簽的含義是不同的：<b> 與<i> 定義粗體或斜體文本。<strong> 或者 <em>意味著你要呈現(xiàn)的文本是重要的，所以要突出顯示。現(xiàn)今所有主要瀏覽器都能渲染各種效果的字體。不過(guò)，未來(lái)瀏覽器可能會(huì)支持更好的渲染效果。

在線實(shí)例

文本格式化

此例演示如何在一個(gè) HTML 文件中對(duì)文本進(jìn)行格式化

預(yù)格式文本

此例演示如何使用 pre 標(biāo)簽對(duì)空行和空格進(jìn)行控制。

"計(jì)算機(jī)輸出"標(biāo)簽

此例演示不同的"計(jì)算機(jī)輸出"標(biāo)簽的顯示效果。

地址

此例演示如何在 HTML 文件中寫地址。

縮寫和首字母縮寫

此例演示如何實(shí)現(xiàn)縮寫或首字母縮寫。

文字方向

此例演示如何改變文字的方向。

塊引用

此例演示如何實(shí)現(xiàn)長(zhǎng)短不一的引用語(yǔ)。

刪除字效果和插入字效果

此例演示如何標(biāo)記刪除文本和插入文本。

HTML 文本格式化標(biāo)簽

標(biāo)簽	描述
<b>	定義粗體文本
<em>	定義著重文字
<i>	定義斜體字
<small>	定義小號(hào)字
<strong>	定義加重語(yǔ)氣
<sub>	定義下標(biāo)字
<sup>	定義上標(biāo)字
<ins>	定義插入字
<del>	定義刪除字

HTML "計(jì)算機(jī)輸出" 標(biāo)簽

標(biāo)簽	描述
<code>	定義計(jì)算機(jī)代碼
<kbd>	定義鍵盤碼
<samp>	定義計(jì)算機(jī)代碼樣本
<var>	定義變量
<pre>	定義預(yù)格式文本

HTML 引文, 引用, 及標(biāo)簽定義

標(biāo)簽	描述
<abbr>	定義縮寫
<address>	定義地址
<bdo>	定義文字方向
<blockquote>	定義長(zhǎng)的引用
<q>	定義短的引用語(yǔ)
<cite>	定義引用、引證
<dfn>	定義一個(gè)定義項(xiàng)目。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

在線咨詢

上一篇：關(guān)于Css的所有講解內(nèi)容
下一篇：html單選按鈕默認(rèn)選中怎么做？input標(biāo)簽的單選按鈕實(shí)例

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商