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

有次和公司大佬閑余時間進行討論時，說到了一個問題：

今年你很高興學習或更深入地學習哪些語言/技術？

我的：typescript、next.js、react、graphql、solidity、node

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

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

enterkeyhint虛擬鍵盤 的屬性

iOS 13.7+，以及Chrome77+新支持了一個HTML屬性enterkeyhint，可以修改軟鍵盤中的enter鍵，也就是回車鍵的文案或者UI。

該HTML屬性的兼容性如下圖所示：

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

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

<link>標簽的title屬性

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

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

備用樣式表功能通過兩個屬性啟用：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 的“頁面樣式”選項選擇它們時，備用樣式表才會應用。

<blockquote>標簽定義及用法

<blockquote>標簽定義塊引用。

<blockquote>與</blockquote>之間的所有文本都會從常規文本中分離出來，經常會在左、右兩邊進行縮進（增加外邊距），而且有時會使用斜體。也就是說，塊引用擁有它們自己的空間。

<blockquote></blockquote>這個標簽可以將其包起來的文字，全部往右縮排。而且加一組標簽，往右縮排一單位，加兩組標簽，往右縮排兩單位，依此類推。

現在我們來看看長文本的引用，還有和p標簽的對比，效果如圖：

自定義有序列表的屬性<ol>

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

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

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

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

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

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

<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和屬性以及單個列表項上的屬性。該屬性接受表示編號類型的五個單字符值（、、、、 ）之一，效果如圖：

<a>標簽的download屬性

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

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

<img>標簽的decoding屬性

在研究這個標簽時，這對我來說是另一篇全新的文章——而且在規范中似乎相當新。將decoding屬性添加到圖像元素可為瀏覽器提供圖像解碼提示。

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

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

值為：

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

<iframe>標簽 的loading屬性

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

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

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

刪除/插入的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 刪除或插入的日期。

HTML <optgroup> 標簽

通過 <optgroup> 標簽把相關的選項組合在一起：

<select>
  <optgroup label="Swedish Cars">
    <option value ="volvo">Volvo</option>
    <option value ="saab">Saab</option>
  </optgroup>

  <optgroup label="German Cars">
    <option value ="mercedes">Mercedes</option>
    <option value ="audi">Audi</option>
  </optgroup>
</select>

optgroup 元素用于組合選項。當您使用一個長的選項列表時，對相關的選項進行組合會使處理更加容易。

用于預加載響應式圖像的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）提供支持；
• HTML屬性；<dfn><abbr>
• HTML的新disablepictureinpicture屬性；<video>
• HTML的integrity屬性，幫助瀏覽器驗證資源沒有被不當操作；
• HTML的disabled屬性<fieldset>，輕松同時禁用多個表單元素；
• 電子郵件和文件輸入的multiple屬性。

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

lement的el-transfer穿梭框很好用，但是總有滿足不了業務的需求的時候，比如要修改el-transfer穿梭框的默認按鈕顏色，如下圖

一般看到這樣的需求，我首先會去element的官網看看這個el-transfer穿梭框有沒有提供相應的參數來實現，結果去看一下發現沒有，只有可以自定義按鈕文案，卻沒有自定義按鈕的顏色或樣式。怎么辦？只好自己去研究默認按鈕顏色的css和html是怎么寫，然后自己寫css進行覆蓋默認的樣式。

經過我的研究，發現倆個按鈕ccs和html一模一樣,但是我只需要修改第一個按鈕的顏色。所以想到用css的:nth-of-type(n)選擇器，這個選擇器可以匹配屬于父元素的特定類型的第 N 個子元素的每個元素。也就是我可以用:nth-of-type(1)選到第一個按鈕，然后可以寫css樣式改變顏色，具體代碼如下：

.el-transfer__button:nth-of-type(1).el-button--primary {
    // 寫你覆蓋樣式
  }

最終代碼如下：