英文 | https://javascript.plainenglish.io/7-useful-html-attributes-that-you-probably-dont-know-661784fe21e
翻譯 | web前端開發
HTML是每個Web開發人員都必須具備的技能。如果你不了解這種标記語言，你就不能稱自己為Web開發人員。
你在網絡上看到的每個網站都是使用HTML建構的，因為它具有許多有用而強大的功能，作為開發人員，你可以從中受益以建立網頁。話雖如此，HTML還具有可以附加到元素或标簽的屬性，以便向HTML元素添加某些互動功能。
在本文中，我們将為你提供一些你可能尚未聽說過的有用的HTML屬性的清單。是以，讓我們開始吧。
1、accept
如你所知，HTML允許你建立輸入，你可以在其中上傳檔案。除此之外，HTML屬性accept還用于上傳輸入，以指定檔案類型或使用者可以上傳到伺服器的唯一格式。
例如，我們可以接受僅上傳jpg并上傳png到我們的伺服器。
示例如下：
<input type =“file” accept =“.jpg，.png” > 你可以在Codepen中檢視它的線上效果：https://codepen.io/MehdiAoussiad/pen/jOrZVeo
2、multiple
multiple 屬性可以附加到标記<input>和<select>中。它允許使用者輸入多個值。
例如，我們還可以允許使用者上載多個檔案。
示例如下：
<input type =“ file” multiple /> 3、contenteditable
該屬性contenteditable用于使HTML内容在網頁上可編輯。基本上，它允許使用者編輯具有contenteditable屬性的頁面元素。
示例如下：
<div>
<h1> Employees: </h1>
<ul contenteditable="true">
<li> 1. John </li>
<li> 2. Mehdi </li>
<li> 3. James </li>
</ul>
</div> 上面的示例使我們可以編輯網頁上的清單。
你可以在Codepen中檢視它的線上效果：
https://codepen.io/MehdiAoussiad/pen/VwKzmKL
4、Download
download屬性在HTML中指定當使用者單擊連結時将下載下傳連結。此屬性允許使用者從你的網站下載下傳檔案。
示例如下：
<div>
<a href="index.html" download="fileName">下載下傳此檔案</a>
</ div> 但你隻需要在屬性上指定檔案名，指定download檔案的href路徑。
你可以在Codepen中檢視示例效果：
https://codepen.io/MehdiAoussiad/pen/eYBWopo
5、translate
translate屬性用于告訴内容是否應該翻譯。可以将其附加到所有HTML标記，因為它是全局屬性。
例如，每當将頁面翻譯成另一種語言時，就可以在文本徽标上使用此屬性，以保持相同的品牌名稱。
這是代碼示例：
<p translation =“ no” > Mehdi </ p> 6、poster
Poster屬性用于在HTML視訊下載下傳時或使用者單擊播放按鈕之前顯示圖像。
代碼示例如下：
<video poster="picture.jpeg" controls>
<source src="file.mp4" type="file/mp4">
<source src="file.ogg" type="file/ogg">
</video> 在你單擊播放按鈕之前，圖像将顯示為視訊的縮略圖。
7、pattern
通過使用pattern屬性，你可以輕松地将正規表達式添加到表單内的輸入元素。
我們還可以将另一個title屬性與pattern屬性一起使用，以幫助使用者在輸入上編寫正确形式的文本。
代碼示例如下：
<form >
<label for="input">Country Code:</label>
<input type="text" id="input" pattern="[A-Za-z]{3}" title="Three letters country code.">
<input type="submit">
</form> 你可以在Codepen中檢視線上效果：
https://codepen.io/MehdiAoussiad/pen/xxRaPZW
結論
這些HTML屬性非常有用并且非常重要。它們可以使你向HTML元素添加額外的有用功能。這就是為什麼我鼓勵你從其他資源中了解更多屬性的原因。
感謝您閱讀本文，希望對你有用。
本文完〜
