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

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

今年你想要學習或更深入地學習哪些語言/技術？

typescript、next.js、react、graphql、solidity、node，這幾個是哪個呢

- 麥迪遜卡納 (@Madisonkanna)

2022 年 1 月 3 日

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

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

enterkeyhint`虛擬鍵盤 的屬性

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

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

復制

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

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

您可以看到這些“提示”如何對用戶有用。用戶是否正在執行一系列操作？他們在提交信息嗎？他們在保存設置嗎？根據他們正在做什么，您可以自定義提示以匹配您的應用程序的需求。

您可以通過在移動設備上訪問下面的信息 CodePen 演示來嘗試這個。

<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>元素，如下面的代碼所示：

<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 功能，請隨時在評論中告訴我。