HTML 是網(wǎng)絡(luò)的基石。 了解這種標(biāo)記語(yǔ)言的一些鮮為人知但有用的部分可以讓您的前端工作更輕松。 HTML 屬性提供了多種功能，可以幫助您充分利用 HTML。 它定義了 HTML 元素的附加特征或?qū)傩?。在本文中，小編將帶您了?11 個(gè)您可能還沒有聽說(shuō)過的 HTML 屬性。

1. multiple

此屬性允許用戶輸入多個(gè)值。 您可以將 multiple 屬性與 標(biāo)簽和 標(biāo)簽一起使用。 此布爾屬性僅對(duì)電子郵件或文件輸入類型有效。

在 <select> 標(biāo)簽中使用 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 屬性進(jìn)行文件輸入

通過對(duì)文件輸入使用 multiple 屬性，您可以選擇多個(gè)文件(通過按住 Shift 或 Ctrl 鍵)。

<input type="file" multiple>

使用 multiple 屬性進(jìn)行電子郵件輸入

通過對(duì)電子郵件輸入使用 multiple 屬性，您可以輸入以逗號(hào)分隔的電子郵件地址列表。 將從列表中的每個(gè)地址中刪除所有空格。

<input type="email" multiple>

2.contenteditable

您可以使用 contenteditable 屬性使網(wǎng)頁(yè)上的 HTML 內(nèi)容可編輯。 這是一個(gè)全局屬性，即它對(duì)所有 HTML 元素都是通用的。

<p contenteditable="true">
在這里您可以編輯您想輸入的內(nèi)容
</p>

3.spellcheck

spellcheck 屬性指定是否可以檢查元素的拼寫錯(cuò)誤。 您可以對(duì) 元素中的文本、可編輯元素中的文本或輸入元素中的文本(密碼除外)中的文本進(jìn)行拼寫檢查。

<p contenteditable="true" spellcheck="true">
在這里輸入您想拼寫檢查的內(nèi)容
</p>

4.download

您可以使用下載屬性下載資源。 download 屬性告訴瀏覽器下載指定的 URL 而不是導(dǎo)航到它。 您可以將下載屬性與 標(biāo)簽和 標(biāo)簽一起使用。

注意：下載屬性僅適用于同源 URL。 它遵循同源策略的規(guī)則。

<a href="xyz.png" download="myImage">下載</a>

5. accept

標(biāo)簽的 accept 屬性指定用戶可以上傳的文件類型。 您可以指定一個(gè)或多個(gè)文件類型的逗號(hào)分隔列表作為其值。

接受音頻文件

<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 屬性告訴瀏覽器在頁(yè)面本地化時(shí)該元素是否應(yīng)該被翻譯。 它可以有 2 個(gè)值：“是”或“否”。

<p translate="no">
輸入您想翻譯或者不需要翻譯的內(nèi)容
</p>

輸入您想翻譯或者不需要翻譯的內(nèi)容

7.poster

poster 屬性用于在視頻下載或用戶播放視頻之前顯示圖像。

注意：如果您不指定任何內(nèi)容，則在第一幀可用之前不會(huì)顯示任何內(nèi)容。 當(dāng)?shù)谝粠捎脮r(shí)，它顯示為海報(bào)幀。

<video controls
src="http://www.示例.com/gtv-videos-bucket/sample/ElephantsDream.mp4"
poster="posterImage.png">
</video>

8.inputmode

inputmode 屬性指示瀏覽器在用戶選擇任何 input 或 textarea 元素時(shí)顯示哪個(gè)鍵盤。 此屬性接受各種值：

None

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

Numeric

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

Tel

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

Decimal

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

Email

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

URL

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

Search

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

9. pattern

元素的模式屬性允許您指定一個(gè)正則表達(dá)式，元素的值將根據(jù)該正則表達(dá)式進(jìn)行驗(yàn)證。 您可以將模式屬性與多種輸入類型一起使用，例如文本、日期、搜索、URL、電話、電子郵件和密碼。

<form>
<input name="username" id="username" pattern="[A-Za-z0-9]+">
</form>

10.autocomplete

autocomplete 屬性指定瀏覽器是否應(yīng)根據(jù)用戶輸入自動(dòng)完成輸入。 您可以將 autocomplete 屬性用于多種輸入類型，例如文本、搜索、URL、電話、電子郵件、密碼、日期選擇器、范圍和顏色。 您可以將此屬性與 元素或 元素一起使用。

<input name="credit-card-number" id="credit-card-number" autocomplete="off">

11.autofocus

autofocus 屬性是一個(gè)布爾屬性，指示元素應(yīng)該專注于頁(yè)面加載。 您可以將此屬性與<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>
輸入您想要顯示的內(nèi)容
</textarea>

使用 JavaScript One-Liners 讓您的生活更輕松

單行代碼有助于以更少的代碼實(shí)現(xiàn)更多的目標(biāo)。 您可以像專業(yè)人士一樣使用多個(gè) JavaScript 單行代碼來(lái)編寫代碼。

只需一行代碼，您就可以對(duì)數(shù)組進(jìn)行混合、求數(shù)組的平均值、檢查數(shù)組是否為空、生成隨機(jī)十六進(jìn)制顏色、生成隨機(jī) UUID 等等。