11個你可能還沒有聽說過的 HTML 屬性

​

html 是網絡的基石。 了解這種标記語言的一些鮮為人知但有用的部分可以讓您的前端工作更輕松。HTML 屬性提供了多種功能，可以幫助您充分利用 HTML。 它定義了 HTML 元素的附加特征或屬性。

在本文中，我将帶您了解 11 個您可能還沒有聽說過的 HTML 屬性。

1、multiple

此屬性允許使用者輸入多個值。 您可以将 multiple 屬性與 标簽和 标簽一起使用。 此布爾屬性僅對電子郵件或檔案輸入類型有效。

在 标簽中使用 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" />      

Email

<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>      

總結

以上就是我今天跟大家分享的全部内容。

學習更多技能

請點選下方公衆号