11個(gè)你可能還沒有聽說過的 HTML 屬性
來源 | https://www.fly63.com/
html 是網(wǎng)絡(luò)的基石。 了解這種標(biāo)記語言的一些鮮為人知但有用的部分可以讓您的前端工作更輕松。HTML 屬性提供了多種功能，可以幫助您充分利用 HTML。 它定義了 HTML 元素的附加特征或?qū)傩浴?/p>
在本文中，我將帶您了解 11 個(gè)您可能還沒有聽說過的 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)頁上的 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 屬性告訴瀏覽器在頁面本地化時(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 controlssrc="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" />
<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)該專注于頁面加載。 您可以將此屬性與<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>
總結(jié)
以上就是我今天跟大家分享的全部內(nèi)容。
學(xué)習(xí)更多技能
請(qǐng)點(diǎn)擊下方公眾號(hào)
