HTML的屬性有很多，除了一些基本的屬性外，還有很多有用而且特別強大的屬性；

本文將介紹 24 個強大的 HTML 屬性，它們可以使您的網站更具活力和交互性，讓用戶感到更加舒適和愉悅。

讓我們一起探索這 24 個強大的 HTML 屬性吧！

1.Accept

Accept 屬性用于指定瀏覽器可以處理的 MIME 類型列表。

tips：

MIME 類型是識別文檔類型的標準，

例如，text/html 表示一個 HTML 文檔，image/jpeg 表示一個 JPEG 圖像，等等。

通過在 HTTP 請求標頭中包含 Accept 屬性，瀏覽器可以告訴服務器它可以接受哪些 MIME 類型作為響應。基于這些信息，服務器可以選擇最合適的響應類型并將其返回給瀏覽器。

Accept 屬性的值是以逗號分隔的 MIME 類型列表，通配符可以用來表示一類 MIME 類型，例如 text/* 表示所有文本類型。

2.Autofocus

Autofocus 屬性用于在頁面加載時自動將焦點設置到指定元素。

tips：

Autofocus 屬性可以應用于各種 HTML 元素，例如文本框、按鈕、下拉列表等。

在 HTML5 中，Autofocus 屬性可以省略屬性值，表示將焦點設置到第一個具有 Autofocus 屬性的元素。

當頁面加載時，如果存在具有Autofocus屬性的元素，瀏覽器會自動將光標聚焦在該元素上，這樣用戶就可以直接與該元素進行交互，而無需手動點擊或使用Tab鍵切換焦點。

3.Inputmode

Inputmode屬性是用于指定在文本框中輸入的內容類型的屬性。

它可以幫助瀏覽器更好地優化輸入體驗，比如在移動設備上自動彈出合適的虛擬鍵盤。

text：默認值，表示輸入任意文本。

none：表示不需要輸入。

tel：表示輸入電話號碼。

url：表示輸入的URL地址。

電子郵件：表示輸入電子郵件地址。

numeric：表示輸入的數字。

decimal：表示輸入帶小數點的數字。

搜索：表示輸入搜索關鍵字。

不同瀏覽器對 Inputmode 屬性的支持程度可能不同。

因此，在使用 Inputmode 屬性時需要進行兼容性測試。

4.Pattern 

Pattern 屬性是一個正則表達式模式，用于指定文本框中的輸入內容。它可以幫助瀏覽器驗證用戶輸入的內容是否符合規定的格式要求。

如果用戶輸入的內容不符合Pattern屬性指定的正則表達式模式，瀏覽器將顯示默認的錯誤信息。

tips：

Pattern 屬性的值必須是有效的正則表達式。

Pattern 屬性只能應用于可以輸入文本的元素，例如文本框、文本字段和密碼框。

Pattern屬性不會阻止用戶輸入非法字符，但會在提交表單時驗證輸入的內容是否符合規定的格式要求。

可以使用 title 屬性自定義 Pattern 屬性的錯誤消息。

Pattern屬性通常與required屬性一起使用，保證用戶輸入的內容符合規定的格式要求，且不為空。

例如，您可以使用 Pattern 屬性來驗證用戶輸入的郵政編碼、電話號碼、電子郵件地址等。

5.Required

Required 屬性是用于指定表單元素是否必需的屬性。

如果一個表單元素設置了Required屬性，那么在提交表單時，如果該元素的值為空，瀏覽器將阻止表單提交并提示用戶填寫該字段。

tips：

Required 屬性只能應用于表單元素，不能應用于其他 HTML 元素。

Required 屬性不驗證用戶輸入的內容是否符合規定的格式要求，只驗證元素是否為空。

Required 屬性不會阻止用戶提交空格或空白字符，因此需要一些其他方法來驗證用戶輸入。

Required 屬性可以和Pattern 屬性一起使用來驗證用戶輸入的內容是否符合指定的格式要求。

Required 屬性可以與 Autofocus 屬性結合使用，以確保當用戶進入表單頁面時，焦點自動位于必填字段上。

Required屬性常與表單元素的type屬性一起使用，如文本框、下拉列表、單選框、復選框等。

6.Autocomplete

Autocomplete 屬性是用于指定表單元素是否啟用自動完成的屬性。

自動完成可幫助用戶更快地填寫表單并減少輸入錯誤的機會。

tips：

on：默認值，表示開啟自動補全功能。

off：表示關閉自動補全功能。

name：表示將表單元素的name屬性作為自動補全的關鍵字。

email：表示使用用戶最近輸入的電子郵件地址作為自動完成關鍵字。

username：表示使用用戶最近輸入的用戶名作為自動補全的關鍵字。

current-password：表示使用用戶最近輸入的密碼作為自動完成的關鍵字。

new-password：表示使用用戶最近輸入的新密碼作為自動完成的關鍵字。

tel：表示使用用戶最后輸入的電話號碼作為自動補全的關鍵字。

address-level1：表示將用戶最近輸入的國家或地區名稱作為關鍵字自動補全。

address-level2：表示將用戶最近輸入的省或州名作為關鍵詞自動補全。

address-level3：表示將用戶最近輸入的城市或地區名稱作為關鍵字自動補全。

address-level4：表示使用用戶最近輸入的街道名稱作為自動補全的關鍵字。

country：表示將用戶最近輸入的國家名稱作為自動補全的關鍵字。

不同瀏覽器對 Autocomplete 屬性的支持程度可能不同。因此，在使用自動完成屬性時需要進行兼容性測試。

7. Multiple

Multiple 屬性是用來指定表單元素是否允許多選的屬性。

Multiple 屬性通常應用于表單元素，例如下拉列表、文件上傳和復選框。

tips：

Multiple屬性只能應用于下拉列表、文件上傳、復選框等表單元素，不能應用于單選框、文本框等表單元素。

Multiple 屬性的值必須是布爾值，true 或 false。

Multiple 屬性的默認值為 false，表示不允許多選。

當Multiple屬性值為true時，下拉列表顯示為多選列表框，復選框顯示為多選復選框列表，文件上傳允許用戶 選擇多個文件。

使用Multiple屬性時，需要在后臺程序中對多選值進行處理，比如用數組來存儲多選值。

如果表單元素設置了 Multiple 屬性，則用戶可以選擇多個選項，而不僅僅是一個。

8. Download

Download屬性是用于在鏈接下載文件時指定文件名的屬性。

如果鏈接設置了Download屬性，那么當用戶點擊鏈接下載文件時，瀏覽器會將文件保存到本地，并使用Download屬性指定的文件名來命名文件。

tips：

Download屬性的值可以是任意字符串，代表下載文件時使用的文件名。

Download 屬性只能應用于標簽，不能應用于其他 HTML 元素。

Download 屬性不會改變文件的實際名稱，它只是在下載時使用指定的文件名。

Download 屬性的值可以動態生成，例如使用 JavaScript 生成文件名。

使用下載屬性時，需要保證下載的文件是合法的，不侵犯他人的版權和隱私。

Download屬性通常用在標簽中，用于下載PDF、圖片、音頻、視頻等文件。

9.Contenteditable

HTML中的Contenteditable屬性是用來指定元素是否可編輯的屬性。

tips：

Contenteditable 屬性的值可以是 true、false 或 inherit。

Contenteditable 屬性的默認值為 false，表示該元素不可編輯。

當 Contenteditable 屬性的值為 true 時，該元素是可編輯的。

當Contenteditable 屬性的值為inherit 時，元素的可編輯性從父元素繼承。

Contenteditable 屬性不會改變元素的默認行為，例如標簽仍然可以跳轉到其他頁面。

使用Contenteditable屬性時需要注意安全問題，避免XSS攻擊和惡意腳本注入。

如果一個元素設置了Contenteditable屬性，那么用戶就可以在該元素中輸入文字、插入圖片、修改樣式等。

Contenteditable屬性通常應用于，其他元素用于實現富文本編輯器、可編輯表格等功能。

10.Readonly

HTML中的Readonly屬性是用來指定一個表單元素是否為只讀的屬性。

tips：

Readonly 屬性的值必須是布爾值，true 或 false。

Readonly 屬性的默認值為 false，表示表單元素是可編輯的。

當 Readonly 屬性的值為 true 時，表單元素是只讀的。

Readonly 屬性不會阻止用戶通過 JavaScript 修改表單元素的值。

Readonly 屬性不同于 Disabled 屬性，后者禁用表單元素，使其無法提交數據。

使用Readonly屬性時，需要在后臺程序中對只讀值進行處理，比如使用隱藏域來存儲只讀值。

如果表單元素設置了 Readonly 屬性，則用戶可以看到該元素的值，但不能修改該元素的值。Readonly 屬性通常應用于文本框、下拉列表和日期選擇器等表單元素，以顯示數據或防止用戶修改數據。

11.Hidden 

Hidden 屬性是用于指定元素是否隱藏的屬性。

tips：

Hidden 屬性的值必須是布爾值，true 或 false。

Hidden 屬性的默認值為 false，表示該元素未隱藏。

當 Hidden 屬性的值為 true 時，元素被隱藏。

Hidden 屬性不同于 CSS 的 display:none 屬性。display:none 屬性會將元素從頁面中完全移除，并且無法通過 JavaScript 或其他方法訪問該元素。

使用Hidden屬性時，需要在后臺程序中對隱藏值進行處理，比如使用一個隱藏字段來存儲隱藏值。

如果一個元素設置了Hidden屬性，則該元素不會顯示在頁面上，但它仍然存在于頁面上，可以通過JavaScript等方式訪問。

Hidden屬性通常應用于表單元素、按鈕、 圖像等，以在不影響頁面布局的情況下傳遞數據或控制頁面行為。

12.Spellcheck

HTML 中的 Spellcheck 屬性是用來指定是否對元素啟用拼寫檢查的屬性。

tips：

Spellcheck 屬性的值必須是布爾值，true 或 false。

Spellcheck 屬性的默認值為 false，表示該元素不啟用拼寫檢查。

當 Spellcheck 屬性的值為 true 時，該元素將啟用拼寫檢查。

Spellcheck 屬性的支持程度因瀏覽器而異，不同的瀏覽器可能有不同的拼寫檢查算法和詞典。

使用Spellcheck屬性時需要注意安全問題，避免XSS攻擊和惡意腳本注入。

如果一個元素設置了 Spellcheck 屬性，那么當用戶在該元素中輸入文本時，瀏覽器會自動檢查拼寫錯誤，并在不正確的單詞下方顯示一條紅色波浪線。Spellcheck 屬性通常應用于文本框和文本字段等元素，以提高用戶輸入的準確性。

13.Translate

HTML 中的 Translate 屬性是用于指定元素是否應被翻譯的屬性。

tips：

Translate 屬性的值必須是布爾值，yes 或 no。

Translate 屬性的默認值為 yes，表示該元素需要翻譯。

當 Translate 屬性的值為 no 時，該元素不需要翻譯。

Translate 屬性的支持程度因瀏覽器而異，不同的瀏覽器可能有不同的翻譯算法和詞典。

使用Translate屬性時需要注意安全問題，避免XSS攻擊和惡意腳本注入。

如果一個元素設置了Translate屬性，瀏覽器會根據該屬性的值來決定是否翻譯該元素的內容。Translate 屬性通常用于多語言版本的網站，以控制哪些元素需要翻譯，哪些元素不需要。

14.loading

HTML loading中的屬性是一個新的屬性，可以用來指定瀏覽器在加載資源時的優先級。

此屬性可應用于 <img>、<iframe>、<script>、<link> 和 <audio> 等標簽。

tips：

lazy：表示資源應該在頁面加載后延遲加載。這是默認值。

eager：表示應該在頁面加載時立即加載資源。

auto：表示由瀏覽器自行決定何時加載資源。

并非所有瀏覽器都支持 loadingAttributes，因此在使用它們時需要進行兼容性檢查。

15.onerror

onerroris 是一個在 JavaScript 錯誤時觸發的 JavaScript 事件處理程序。

onerrorEvent 處理程序可以添加到 windowto 對象以全局捕獲 JavaScript 錯誤。

tips：

message：錯誤信息。

source：發生錯誤的腳本的URL。

lineno：發生錯誤的行號。

colno：發生錯誤的列號。

onerror：包含有關錯誤的詳細信息的錯誤對象。

onerrorEvent 處理程序只能捕獲其他錯誤處理程序未捕獲的 JavaScript 錯誤。

最好在代碼中使用 try-catch 語句來捕獲和處理 JavaScript 錯誤。

16.poster

poster 是 HTML5 <video> 標簽的一個屬性，用于指定在視頻加載之前和播放之前顯示的圖像。

tips：

posterAttributes 僅適用于 <video> 標簽，不適用于 <audio> 標簽。

它通常用于提供視頻的預覽圖像或縮略圖。

17. controls

controls是HTML5中<video>,<audio>中性標簽的一個屬性，用于指定是否顯示媒體播放器的控件。

如果controls屬性設置為controls，則在媒體播放器上顯示控件，如播放/暫停按鈕、音量控制、進度條等。

<!DOCTYPE html>
<html>
<head>
<title>Controls Example</title>
</head>
<body>
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>`

controlsAttributes 僅在支持 HTML5 的瀏覽器中可用。如果瀏覽器不支持HTML5，則不會顯示該控件。

18. autoplay

autoplay 是 HTML5 <video> 中性標簽的一個屬性，<audio> 指定媒體是否應在頁面加載時自動播放。

如果 autoplay 屬性設置為自動播放，媒體將在頁面加載時自動播放。

<!DOCTYPE html>
<html>
<head>
<title>Autoplay Example</title>
</head>
<body>
<video width="320" height="240" autoplay>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>`

自動播放會對用戶體驗產生負面影響，因此請謹慎使用自動播放屬性。在某些情況下，瀏覽器可能會阻止自動播放，例如在移動設備上，用戶必須首先與頁面交互才能允許自動播放。

19.loop

loop 是 HTML5 中 <video>neutral <audio> 標簽的一個屬性，指定媒體播放結束后是否循環播放。

如果 loop 屬性設置為循環播放，媒體將在播放結束后循環播放。

<!DOCTYPE html>
<html>
<head>
<title>Loop Example</title>
</head>
<body>
<video width="320" height="240" loop>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>`

循環會對用戶體驗產生負面影響，因此請謹慎使用循環屬性。

20. cite

cite 是 HTML 中的一個全局屬性，可用于指定引用的來源。

cite屬性的值應該是一個指向引用來源的URL。

tips：

citeAttributes可以應用于<blockquote>、<q>、<del>等標簽<ins>

如果 referrer 的來源不是 URL，cite 屬性的值可以設置為描述 referrer 的字符串。

<!DOCTYPE html>
<html>
<head>
<title>Cite Example</title>
</head>
<body>
<blockquote cite="https://www.example.com/quote">
This is a quote from an external source.
</blockquote>
<q cite="https://www.example.com/quote">
This is a short quote from an external source.
</q>
<del cite="https://www.example.com/deleted">
This text has been deleted from an external source.
</del>
<ins cite="https://www.example.com/inserted">
This text has been inserted from an external source.
</ins>
</body>
</html>

citeAttributes 不會自動創建鏈接，因此如果需要創建鏈接，需要使用<a>a 標簽并將屬性hrefset 為citethe 屬性的值。

21.datetime

datetime是HTML<time>標簽的一個屬性，用來指定日期和時間。

datetime屬性的值應該是有效的日期和時間格式，例如YYYY-MM-DDThh:mm:ss。

datetimeAttributes 不會自動格式化日期和時間，因此您需要使用 JavaScript 或其他工具來格式化日期和時間。

22.async 

async 是 HTML <script> 標簽的一個屬性，它指定腳本是否應該被異步加載。

如果async屬性設置為async，腳本將被異步加載，不會阻塞頁面的解析和渲染。

異步加載的腳本可能會在頁面其余部分加載之前執行，因此請謹慎使用。如果腳本依賴于頁面的其他部分，這可能會導致錯誤。

23.defer

defer 是 HTML <script> 中標記的一個屬性，它指定腳本是否應該延遲加載。

如果 defer 屬性設置為 defer，腳本將延遲加載，直到頁面被解析后再執行。

<!DOCTYPE html>
<html>
<head>
<title>Defer Example</title>
<script defer src="script.js"></script>
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>

在上面的示例中，我們將屬性 defer 設置為 defer，這將導致腳本延遲加載。在這種情況下，腳本將在頁面被解析后執行，并且不會阻止頁面加載。

24.Draggable

Draggable 是 HTML5 中的一個屬性，允許用戶通過拖動來移動元素。draggable 當元素設置為 時，用戶可以用鼠標或觸摸屏幕拖動元素。

當拖拽一個元素時，會觸發一系列的事件，比如dragstart, , drag, dragend，這些事件可以用來實現拖放功能。

如果你是專業的前端工程師，今天分享的這些屬性中，肯定有很多是你用過的！