那些你從不使用的 HTML 屬性

快速總結 ↬ 在這篇文章中，Louis Lazaris 描述並演示了一些有趣的 HTML 屬性，您可能聽說過也可能沒有聽說過，並且可能會發現它們非常有用，可以在您的專案中親自使用。

一月份，麥迪遜卡納[問她的推特粉絲

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

但是我的答案很簡單：HTML。而且我一點也沒有諷刺或嘲弄。當然，我非常清楚在哪些情況下使用哪些標籤，以及如何使我的 HTML 大部分具有語義性和可訪問性。

但是我確信我已經忘記了一大堆較少使用的屬性，並且可能有一大堆我什至不知道存在的屬性。這篇文章是我研究的結果，我希望你會發現其中的一些對你有用，因為你在接下來的幾個月裡構建 HTML 頁面。

enterkeyhint`虛擬鍵盤 的屬性

該enterkeyhint屬性是一個全域性屬性，可應用於已contenteditable設定為的表單控制元件或元素true。此屬性可幫助使用虛擬螢幕鍵盤的移動裝置上的使用者。

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

enterkeyhint接受七個可能值之一，這些值將確定使用者在他的“輸入”鍵上看到的內容：

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

您可以看到這些“提示”如何對使用者有用。使用者是否正在執行一系列操作？他們在提交資訊嗎？他們在儲存設定嗎？根據他們正在做什麼，您可以自定義提示以匹配您的應用程式的需求。

您可以通過在移動裝置上訪問下面的 CodePen 演示來嘗試這個。

html
<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 裝置上，回車鍵的文字會隨著鍵的顏色而變化，具體取決於值，如下面的螢幕截圖所示。這可能會有所不同，具體取決於使用者的裝置。

只是強調一下，這個屬性不接受自定義值；該值需要是上面顯示的七個之一。無法識別的值將預設為輸入鍵的裝置預設文字。

樣式表上的title屬性

在為本文進行研究時，這對我來說是全新的，可能是此列表中最有趣的一個。作為一些背景知識，如果您不知道，Firefox 有一個選項可讓您選擇檢視頁面時要使用的樣式表。通常，此功能顯示兩個選項：“基本頁面樣式”和“無樣式”，如下圖所示在我的 Windows 機器上。

這使您可以快速測試禁用樣式時頁面的外觀，還允許您使用任何備用樣式表檢視頁面。

備用樣式表功能通過兩個屬性啟用：title屬性和rel=alternate應用於<link>元素，如下面的程式碼所示：

html
<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">

在這種情況下，我的“預設”樣式將自動應用，但僅當我使用 Firefox 的“頁面樣式”選項選擇它們時，備用樣式表才會應用。您可以通過使用 Firefox 或其他相容瀏覽器訪問以下 CodePen 來嘗試上述示例：

下面的螢幕截圖顯示了 Firefox 中的樣式表選項：

如前所述，此功能在 Firefox 中有效，但我無法讓它在任何基於 Chromium 的瀏覽器中工作。MDN關於備用樣式表的文章說它可以在其他瀏覽器中使用擴充套件啟用，但我找不到可以執行此操作的活動擴充套件。

和元素 的cite屬性

我敢肯定你<blockquote>經常使用這個元素。您可以在沒有屬性的情況下直接使用它，但您也可以選擇使用該cite屬性。這是一個引用描述使用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>

由於我上面的塊引用來自解釋了什麼是 MDN 文章cite，因此我將指向頁面的 URL 設定為cite值。

您可以看到這是多麼有用，因為它將引用和引用的來源包裝在一個元素中。但請注意HTML 規範中的進一步解釋：

使用者代理可能允許使用者關注此類引用連結，但它們主要用於私人用途（例如，通過伺服器端指令碼收集有關站點使用引用的統計資訊），而不是供讀者使用。

當然，相同的概念也適用於用於內聯引用cite的元素上。<q>

自定義序列列表的屬性

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

• 屬性，以相反的順序對reversed專案進行編號（從高到低，而不是預設的從低到高）；
• 屬性，定義從start哪個數字開始；
• 屬性，定義是type使用數字、字母還是數字；
• 屬性，用於在value特定列表項上指定自定義編號。

如您所見，使用純 HTML 的有序列表比您通常習慣的要靈活得多。

該reversed屬性是一個有趣的屬性，因為它實際上並沒有反轉列表本身的內容；它只會反轉每個列表項旁邊的數字。

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

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

請注意，列表本身保持不變，但數字會發生變化。如果您正在尋找一種反轉內容的方法，請記住這一點。這是您可以使用 JavaScript、CSS 或直接在 HTML 原始碼中執行的操作。

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

<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>

請注意，已新增的type和屬性以及單個列表項上的屬性。該屬性接受表示編號型別的五個單字元值（、、、、 ）之一。start``value``type``a``A``i``I``1

使用以下互動式演示進行嘗試：

使用單選按鈕選擇該type屬性的五個值之一。然後嘗試使用Toggle Reversed按鈕反轉列表。如您所見，除了有序列表的預設行為之外，還有很多可能性！

元素 的download屬性

就像網路上無處不在的連結一樣，擁有一個使連結更加強大的屬性總是很好的。該download屬性是幾年前新增到規範中的，它允許您指定單擊連結時應該下載而不是訪問該連結。

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

如果沒有值，該download屬性會強制下載連結頁面。或者，您可以提供一個值，瀏覽器將其用作下載資源的建議檔名。

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

作為涉及此屬性的額外技巧，您可以將此功能與一些 JavaScript 結合起來，為使用者建立一種下載他們自己建立的內容的方式。

元素 的decoding屬性

在研究這篇文章時，這對我來說是另一篇全新的文章——而且在規範中似乎相當新。將decoding屬性新增到影象元素可為瀏覽器提供影象解碼提示。

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

此屬性類似於async在指令碼上使用該屬性。載入影象所需的時間不會改變，但其“解碼”的方式（因此其內容在視口中變得可見）由decoding屬性決定。

值為：

• sync
  同步解碼影象，一般瀏覽器都是這樣做的。
• async
  非同步解碼影象以避免延遲其他內容的呈現。
• auto
  預設允許瀏覽器使用自己的內建解碼方法。

如果您對解碼影象的概念感到好奇，該規範有[一個很好的解釋]，並不難理解。

元素 的loading屬性

您可能已經知道，影象元素現在可以包含一個loading屬性，將延遲載入作為一項功能放入瀏覽器中，這是我們多年來使用 JavaScript 解決方案所做的事情。但不要忘記該loading屬性也可以用於<iframe>元素：

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

與影象一樣，該loading屬性接受eager（預設瀏覽器行為）或 的值lazy，這會延遲 iframe 內容的載入，直到 iframe 即將進入視口。此屬性的唯一缺點是 Firefox 不支援在 iframe 上使用它（儘管 Firefox 確實支援loading影象）。

表單欄位的form屬性

在大多數情況下，您會將表單輸入和控制元件巢狀在<form>元素中。但是，如果您的應用程式或佈局需要一些不同的東西，您可以選擇將表單輸入放在您想要的任何位置，並將其與任何<form>元素相關聯——即使不是元素的父元素。

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

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

正如您在上面看到<input>的，表單外部的電子郵件的form屬性設定為myForm，該屬性設定為與表單的 相同的值id。submit您可以使用此屬性和表單的 id將表單控制元件（包括按鈕）與文件中的任何表單相關聯。

您可以使用此演示頁面進行嘗試。表單使用 GET 請求提交，因此您可以在 URL 的查詢字串中看到提交的值。在該頁面上，“評論”框位於<form>元素之外。

我對這個屬性的唯一抱怨是它可能應該被賦予一個更獨特的名稱，也許像“formowner”之類的東西。儘管如此，如果您的設計或佈局需要無父表單欄位，請記住它是有用的。

刪除/插入的citeAnddatetime屬性

我在處理塊引用時已經提到cite過，但是這個屬性也可以用於用<del>and<ins>元素標記的刪除和插入。此外，兩個元素都可以包含一個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>

對於每個元素，這兩個屬性代表的內容如下：

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

在我的例子中，我使用了一些文字的例子，描述了一個在 Firefox 中需要供應商字首的 CSS 屬性。這可能是一篇舊部落格文章。刪除字首後，我可以使用and元素來delete獲取舊文字和insert新文字。然後我可以使用該屬性來引用解決問題的錯誤報告。<del>``<ins>``cite

元素 的label屬性

最後，這最後一個有點像老歌，但因為它不經常被使用，也許你甚至不知道它的存在。這是一個元素和一個屬性的組合。

<select>如果下拉選項中包含一長串專案，則可以使用<optgroup>元素及其關聯label屬性將選項分組為可見類別：

<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 來試用一個示例：

請注意，每個<optgroup>都有一個label為每個組定義標題的屬性——但不能選擇標題。作為額外提示，您還可以使用disabledan 上的屬性來禁用下拉選單<optgroup>該部分中的所有選項。<select>

用於預載入響應式影象的imagesizes和imagesrcset屬性

這是我在研究本文時的另一對新屬性，它們在規範中也是相對較新的。

這兩個屬性都可以與元素一起定義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通知瀏覽器我們希望指定的資源優先載入，因此它們不會被指令碼和樣式表之類的東西阻塞。該as屬性指定所請求內容的型別。

您可以使用href屬性以及preload和預載入常規影象as。但最重要的是，您可以使用imagesrcsetandimagesizes屬性，就像我在上面的程式碼中所做的那樣。

這允許您預載入正確的影象，具體取決於視口的大小或您在imagesizes屬性中指定的其他媒體功能。

榮譽提名

除了我已經詳細描述和演示的屬性之外，您可能還想了解其他一些屬性，我將在這裡簡要提及：

• crossorigin可以應用於多個元素的屬性，包括<audio>、<img>、<link>、<script>和<video>，為跨域資源共享（CORS）提供支援；
• 和的title屬性；<dfn>``<abbr>
• 元素的新disablepictureinpicture屬性；<video>
• 指令碼的integrity屬性，幫助瀏覽器驗證資源沒有被不當操作；
• 元素的disabled屬性<fieldset>，輕鬆同時禁用多個表單元素；
• 電子郵件和檔案輸入的multiple屬性。

如果您使用過本文中提到的任何屬性，或者如果您知道在您的專案中使用過的另一個 HTML 功能，請隨時在評論中告訴我。