html的屬性是什麼?html 是 Web 開發的基石，下面來分享一些鮮為人知但很有用的 HTML 屬性，我來為大家講解一下關于html的屬性是什麼?跟着小編一起來看一看吧!

html的屬性是什麼

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

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

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

該屬性可以取以下值：

• none： 不使用虛拟鍵盤，這個時候頁面需要使用自定義的鍵盤代替。
• text： 默認值，會顯示标準輸入鍵盤。
• decimal： 小數表示鍵盤，除了數字之外可能會有小數點 . 或者千分符逗号 。
• numeric： 顯示0-9的數字鍵盤。
• tel： 手機數字鍵盤，會有星号 * 或者井号 # 鍵。
• search： 提交按鈕會顯示 'search' 或者 ‘搜索’。
• email： 鍵盤上會有 @ 符号鍵。
• url： 鍵盤上會有斜杠 / 符号鍵。

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

在 input 标簽中，當指定類型為 file 或 email 時，可以設置 multiple 多選選項。

• 當類型為email 時，輸入值為逗号分隔的郵件列表，會從裡表中的每個郵件地址中删除所有空格。
• 當類型為file 時，用戶可以選擇多個文件。

<input type="file" name="img" 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>

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

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

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

這裡隻有編号會發生變化，并不會影響内容的順序。

定義從哪個數字開始：

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

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

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

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

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

<img> 标簽的 decoding 屬性用于告訴浏覽器使用何種方式解析圖像數據。

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

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

• sync : 同步解碼圖像，保證與其他内容一起顯示。
• async : 異步解碼圖像，加快顯示其他内容。
• auto : 默認模式，表示不偏好解碼模式。由浏覽器決定哪種方式更适合用戶。

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

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

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

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

• auto：浏覽器的默認行為，與不使用loading屬性效果相同。
• lazy：懶加載，即将滾動進入視口時開始加載。
• eager：立即加載資源 ，無論在頁面上的位置如何。

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

在大多數情況下，我們會将表單輸入和控件嵌套在 <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 将表單控件（包括提交按鈕）與任何表單相關聯。

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 屬性中指定的其他媒體功能。

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

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

<input enterkeyhint="values">

它的屬性值有以下情況：

• done： 完成并關閉輸入法編輯器。
• enter： 換行。
• go： 輸入完并繼續下一個表單。
• search： 輸入後搜索内容。
• send： 發送消息。
• next： 将把用戶帶到下一個接受文本的字段。
• previous： 将用戶帶到将接受文本的上一個字段。

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

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

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!