鮮爲人知但很有用的 HTML 屬性

大家好，我是 CUGGZ。

HTML 是 Web 開發的基石，下面來分享一些鮮爲人知但很有用的 HTML 屬性！

  1. inputmode

inputmode 全局屬性是一個枚舉屬性，它提供了用戶在編輯元素或其內容時可能輸入的數據類型的提示。

<input type="text" inputmode="tel" />

該屬性可以取以下值：

當我們將 inputmode 屬性設置爲 tel 時，調起的虛擬鍵盤如下

  1. multiple

multiple 屬性可設置或返回是否可有多個選項被選中。該屬性可以用於 input 或 select 標籤。

在 input 標籤中，當指定類型爲 file 或 email 時，可以設置 multiple 多選選項。

<input type="file"  multiple>

在 select 標籤中，當設置了 multiple 屬性時，同時可以通過 size 屬性來指定可選項的個數：

<select multiple="multiple" size="2"> 
  <option value="1">北京</option>
  <option value="2">上海</option>
  <option value="3">廣州</option>
  <option value="4">深圳</option>
</select>
  1. 自定義有序列表的屬性

在 <ol> 元素可以用於指定有序列表。我們可以通過一些屬性來指定列表中的編號行爲：

（1）reversed

以相反的順序對項目進行編號（從高到低）：

<ol reversed>
  <li>潯陽江頭夜送客，楓葉荻花秋瑟瑟。</li>
  <li>主人下馬客在船，舉酒欲飲無管絃。</li>
  <li>醉不成歡慘將別，別時茫茫江浸月。</li>
  <li>忽聞水上琵琶聲，主人忘歸客不發。</li>
  <li>尋聲暗問彈者誰？琵琶聲停欲語遲。</li>
  <li>移船相近邀相見，添酒回燈重開宴。</li>
  <li>千呼萬喚始出來，猶抱琵琶半遮面。</li>
</ol>

這裏只有編號會發生變化，並不會影響內容的順序。

（2）start

定義從哪個數字開始：

<ol start="10">
  <li>潯陽江頭夜送客，楓葉荻花秋瑟瑟。</li>
  <li>主人下馬客在船，舉酒欲飲無管絃。</li>
  <li>醉不成歡慘將別，別時茫茫江浸月。</li>
  <li>忽聞水上琵琶聲，主人忘歸客不發。</li>
  <li>尋聲暗問彈者誰？琵琶聲停欲語遲。</li>
  <li>移船相近邀相見，添酒回燈重開宴。</li>
  <li>千呼萬喚始出來，猶抱琵琶半遮面。</li>
</ol>

（3）type

用於定義是使用數字、字母還是羅馬數字。type 屬性接受表示編號類型的五個單字符值（a、A、i、I、1）之一。

<ol type="i">
  <li>潯陽江頭夜送客，楓葉荻花秋瑟瑟。</li>
  <li>主人下馬客在船，舉酒欲飲無管絃。</li>
  <li>醉不成歡慘將別，別時茫茫江浸月。</li>
  <li>忽聞水上琵琶聲，主人忘歸客不發。</li>
  <li>尋聲暗問彈者誰？琵琶聲停欲語遲。</li>
  <li>移船相近邀相見，添酒回燈重開宴。</li>
  <li>千呼萬喚始出來，猶抱琵琶半遮面。</li>
</ol>

（4）value

用於在特定列表項上指定自定義數字：

<ol>
  <li>潯陽江頭夜送客，楓葉荻花秋瑟瑟。</li>
  <li>主人下馬客在船，舉酒欲飲無管絃。</li>
  <li>醉不成歡慘將別，別時茫茫江浸月。</li>
  <li value="10">忽聞水上琵琶聲，主人忘歸客不發。</li>
  <li>尋聲暗問彈者誰？琵琶聲停欲語遲。</li>
  <li>移船相近邀相見，添酒回燈重開宴。</li>
  <li>千呼萬喚始出來，猶抱琵琶半遮面。</li>
</ol>

  1. decoding

<img> 標籤的 decoding 屬性用於告訴瀏覽器使用何種方式解析圖像數據。

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

該屬性可以取以下三個值：

此屬性類似於在<script>上使用 async 屬性。加載圖像所需的時間不會改變，但其 “解碼” 的方式由解碼屬性決定。decoding 屬性可以控制是否允許瀏覽器嘗試異步加載圖像。異步加載對 <img> 元素很有用，對屏幕外的圖像對象可能會更有用。

  1. loading

loading 屬性不僅可以用在 <img> 元素上，也可以用在 <iframe> 元素上，用於觸發<iframe>網頁的懶加載：

<iframe src="/page.html" width="800" height="40" loading="lazy">

該屬性可以取以下三個值：

需要注意，如果<iframe>是隱藏的，則loading屬性無效，將會立即加載。

  1. form

在大多數情況下，我們會將表單輸入和控件嵌套在 <form> 元素中。當然，我們也可以將表單輸入放在任何位置，並將其與所屬的 <form> 元素相關聯。只需要使用 form 屬性來指定其所屬的 form 表單即可：

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

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

可以看到，表單外部的電子郵件 <input> 的 form 屬性設置爲 myForm，該屬性與表單的 id 相同。可以使用此屬性和表單的 id 將表單控件（包括提交按鈕）與任何表單相關聯。

  1. imagesizes 和 imagesrcset

imagesizes 和 imagesrcset 屬性用來預加載響應式圖像，可以與 rel=preload 以及 <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 來預加載常規圖像。還可以使用 imagesrcset 和 imagesizes 屬性來預加載正確的圖像，具體取決於視口的大小或在 imagesizes 屬性中指定的其他媒體功能。

  1. enterkeyhint

當我們在手機鍵盤上按下回車鍵（enter）時，在不同的場景下可能執行的操作有所不同，比如換行、發送消息、執行搜索、確認等等。這些操作可以通過 enterkeyhint 屬性來實現。

enterkeyhint 屬性是一個全局屬性，可應用於將 contenteditable 設置爲 true 的表單控件或元素。它的用法如下：

<input enterkeyhint="values">

它的屬性值有以下情況：

Next：<input type="text" enterkeyhint="next">
Done: <input type="text" enterkeyhint="done">
  Go: <input type="text" enterkeyhint="go">

在手機鍵盤中進行輸入時，可以看到鍵盤的 enter 鍵顯示不同的操作：

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/ADQIMW3uxp8ji1KWI0VFVQ

猜你喜歡