前端程序員不可忽略的11個有用的 HTML 屬性
HTML 是網絡的基石。 了解這種標記語言的一些鮮為人知但有用的部分可以讓您的前端工作更輕松。 HTML 屬性提供了多種功能，可以幫助您充分利用 HTML。 它定義了 HTML 元素的附加特征或屬性。在本文中，小編將帶您了解 11 個您可能還沒有聽說過的 HTML 屬性。
1. multiple
此屬性允許用戶輸入多個值。 您可以將 multiple 屬性與 標簽和 標簽一起使用。 此布爾屬性僅對電子郵件或文件輸入類型有效。
在 <select> 標簽中使用 multiple 屬性
<label for="language">Select languages:</label>
<select name="language" id="language" multiple>
<option value="C++">C++</option>
<option value="Python">Python</option>
<option value="JavaScript">JavaScript</option>
<option value="Java">Java</option>
</select>
使用 multiple 屬性進行文件輸入
通過對文件輸入使用 multiple 屬性，您可以選擇多個文件(通過按住 Shift 或 Ctrl 鍵)。
<input type="file" multiple>
使用 multiple 屬性進行電子郵件輸入
通過對電子郵件輸入使用 multiple 屬性，您可以輸入以逗號分隔的電子郵件地址列表。 將從列表中的每個地址中刪除所有空格。
<input type="email" multiple>
2.contenteditable
您可以使用 contenteditable 屬性使網頁上的 HTML 內容可編輯。 這是一個全局屬性，即它對所有 HTML 元素都是通用的。
<p contenteditable="true">
在這里您可以編輯您想輸入的內容
</p>
3.spellcheck
spellcheck 屬性指定是否可以檢查元素的拼寫錯誤。 您可以對 元素中的文本、可編輯元素中的文本或輸入元素中的文本(密碼除外)中的文本進行拼寫檢查。
<p contenteditable="true" spellcheck="true">
在這里輸入您想拼寫檢查的內容
</p>
4.download
您可以使用下載屬性下載資源。 download 屬性告訴瀏覽器下載指定的 URL 而不是導航到它。 您可以將下載屬性與 標簽和 標簽一起使用。
注意：下載屬性僅適用于同源 URL。 它遵循同源策略的規則。
<a href="xyz.png" download="myImage">下載</a>
5. accept
標簽的 accept 屬性指定用戶可以上傳的文件類型。 您可以指定一個或多個文件類型的逗號分隔列表作為其值。
接受音頻文件
<input type="file" id="audioFile" accept="audio/*">
接受視頻文件
<input type="file" id="videoFile" accept="video/*">
接受圖像文件
<input type="file" id="imageFile" accept="image/*">
接受 Microsoft Word 文件
<input type="file" id="docpicker"
accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document">
接受 PNG 或 JPEG 文件
<input type="file" id="imageFile" accept=".png, .jpg, .jpeg">
接受 PDF 文件
<input type="file" id="pdfFile" accept=".pdf">
6. translate
translate 屬性告訴瀏覽器在頁面本地化時該元素是否應該被翻譯。 它可以有 2 個值：“是”或“否”。
<p translate="no">
輸入您想翻譯或者不需要翻譯的內容
</p>
輸入您想翻譯或者不需要翻譯的內容
7.poster
poster 屬性用于在視頻下載或用戶播放視頻之前顯示圖像。
注意：如果您不指定任何內容，則在第一幀可用之前不會顯示任何內容。 當第一幀可用時，它顯示為海報幀。
<video controls
src="http://www.示例.com/gtv-videos-bucket/sample/ElephantsDream.mp4"
poster="posterImage.png">
</video>
8.inputmode
inputmode 屬性指示瀏覽器在用戶選擇任何 input 或 textarea 元素時顯示哪個鍵盤。 此屬性接受各種值：
None
<input type="text" inputmode="none" />
Numeric
<input type="text" inputmode="numeric" />
Tel
<input type="text" inputmode="tel" />
Decimal
<input type="text" inputmode="decimal" />
<input type="text" inputmode="email" />
URL
<input type="text" inputmode="url" />
Search
<input type="text" inputmode="search" />
9. pattern
元素的模式屬性允許您指定一個正則表達式，元素的值將根據該正則表達式進行驗證。 您可以將模式屬性與多種輸入類型一起使用，例如文本、日期、搜索、URL、電話、電子郵件和密碼。
<form>
<input name="username" id="username" pattern="[A-Za-z0-9]+">
</form>
10.autocomplete
autocomplete 屬性指定瀏覽器是否應根據用戶輸入自動完成輸入。 您可以將 autocomplete 屬性用于多種輸入類型，例如文本、搜索、URL、電話、電子郵件、密碼、日期選擇器、范圍和顏色。 您可以將此屬性與 元素或 元素一起使用。
<input name="credit-card-number" id="credit-card-number" autocomplete="off">
11.autofocus
autofocus 屬性是一個布爾屬性，指示元素應該專注于頁面加載。 您可以將此屬性與<button>、<input>、<keygen>、<select> 或 <textarea> 或 元素一起使用。
在 input 元素中使用 autofocus 屬性
在 input 元素中使用 autofocus 屬性
在 select 元素中使用 autofocus 屬性
select name="languages" id="languages">
<option value="C++">
C++
</option>
<option value="Python">
Python
</option>
<option value="JavaScript">
JavaScript
</option>
<option value="Java">
Java
</option>
</select>
在 textarea 元素中使用 autofocus 屬性
<textarea autofocus>
輸入您想要顯示的內容
</textarea>
使用 JavaScript One-Liners 讓您的生活更輕松
單行代碼有助于以更少的代碼實現更多的目標。 您可以像專業人士一樣使用多個 JavaScript 單行代碼來編寫代碼。
只需一行代碼，您就可以對數組進行混合、求數組的平均值、檢查數組是否為空、生成隨機十六進制顏色、生成隨機 UUID 等等。
