英文 | https://javascript.plainenglish.io/24-lesser-known-html-attributes-you-may-want-to-use-326dca041fdb

翻譯 | 楊小愛

之前，我寫了一篇關(guān)于介紹了有用的 HTML 標(biāo)記及其類型的文章。今天，我決定再寫一個續(xù)片，回顧一些我們可能需要使用到的 HTML 屬性。

所有屬性都易于設(shè)置，并且可以幫助我們完成常見任務(wù)，否則我們可以通過使用一些復(fù)雜的外部庫來完成這些任務(wù)。

因此，在本文中，我將回顧每個屬性并包含代碼片段，以便我們更容易理解屬性的用例和語法。

1、Accept

描述允許的輸入文件類型。

<input type="file" accept=".jpg, .png">

僅與 <input> 標(biāo)記的文件類型一起使用。接受一種或多種文件類型的逗號分隔列表。要允許特定媒體類型的所有文件，請使用 accept="image/*"。

2、Autofocus

它表明特定元素應(yīng)該專注于頁面加載。

<input type="text" autofocus>

文檔或?qū)υ捒蛑兄挥幸粋€元素能具有 autofocus 屬性。如果需要應(yīng)用于多個元素中，則會將第一個元素設(shè)置為焦點。

3、Inputmode

提示用戶在編輯元素或其內(nèi)容時可能輸入的數(shù)據(jù)類型。

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

它允許瀏覽器顯示適當(dāng)?shù)奶摂M鍵盤。

4、Pattern

指定在表單提交時檢查 <input> 值的正則表達(dá)式。

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

5、 Required

確保在提交表單之前必須填寫元素。

<form action="/send_form.js">  Username: <input type="text" name="username" required>  <input type="submit">  </form>

6、Autocomplete

指定瀏覽器是否有權(quán)提供幫助以填寫電子郵件、電話號碼、國家/地區(qū)等表單字段。

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

有關(guān)可用自動完成值的完整列表，請參閱 MDN 參考：https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete

7、Multiple

該屬性允許用戶選擇多個值。

<input type="file" multiple>

我們可以將它與 <input> 和 <select> 標(biāo)記的文件和電子郵件類型一起使用。

8、Download

指定當(dāng)用戶單擊超鏈接時將下載目標(biāo)。

<a href="document.pdf" download>Download PDF</a>

9、Contenteditable

該屬性允許用戶編輯元素的內(nèi)容。

<div contenteditable="true">  This text can be edited by the user.</div>

10、Readonly

指定輸入字段是只讀的。

<input type="text" id="sports" name="sports" value="golf" readonly>

用戶仍然可以選擇它、突出顯示它并從中復(fù)制文本。要禁止這些操作，請改用 disabled 屬性。

11、Hidden

指定元素是否可見。

<p hidden>This text is hidden</p>

12、Spellcheck

定義是否檢查元素的拼寫錯誤。

<p contenteditable="true" spellcheck="true">Myy spellinng is checkd</p>

通常，不會檢查所有不可編輯的元素，即使 spellcheck 屬性設(shè)置為 true 并且瀏覽器支持拼寫檢查。

13、Translate

指定頁面本地化時是否應(yīng)翻譯元素。

<footer><p translate="no">Printing Works, Inc</p></footer>

一個示例用例是我們的公司名稱、書名、位置等。

14、Loading

指定瀏覽器是應(yīng)該立即加載圖像還是推遲加載屏幕外圖像，例如，直到用戶滾動到它們附近。

<img src="https://cdn.mysite.com/media/image.jpg" loading="lazy">

eager 是默認(rèn)行為，lazy 用于延遲（也稱為延遲加載）。

15、Onerror

如果未加載原件，則允許添加備用圖像。

<img src="imageafound.png" onerror="this.onerror=null;this.src='imagenotfound.png';"/>

如果后備圖像本身不可用， this.onerror=null 用于防止循環(huán)。

16、Poster

允許在下載視頻時添加要顯示的圖像。

<video src="https://cdn.mysite.com/media/video.mp4"poster="image.png"></video>

如果未指定，則在第一幀可用之前不顯示任何內(nèi)容，然后，第一幀顯示為張貼幀。

17、Controls

指定是否應(yīng)在播放器上顯示音頻/視頻控件。

<audio controls<source src="track11.mp3"  type="audio/mpeg"></audio>

18、Autoplay

確保音頻/視頻在加載后立即自動開始播放。

<video autoplaysrc="https://cdn.mysite.com/media/myvideo.mp4"poster="image.png"></video>

19、Loop

指定音頻/視頻將在每次完成時重新開始。

<audio loop<source src="track323.mp3"  type="audio/mpeg"></audio>

20、Cite

指向內(nèi)容的來源、更改或刪除的參考點。

<blockquote cite="https://mysite.com/original-source-url">  <p>Some awesome quote</p></blockquote>

21、Datetime

它指定刪除/插入文本的日期和時間。

<p>  My plans for 2021 include visiting Thailand,  <del datetime="2021-01-01T18:21">creating 6 courses,</del>   <ins datetime="2021-02-02T14:07">writing 12 articles.</ins></p><p>I will evaluate the completion on <time datetime="2021-12-31"></time>.</p>

當(dāng)與 <time> 元素一起使用時，它表示機(jī)器可讀格式的日期/時間。

22、Async

確保腳本與頁面的其余部分異步執(zhí)行。

<script src="script.js" async></script>

async 屬性只對外部腳本有影響（src 屬性必須存在）。

23、Defer

確保在頁面完成解析后執(zhí)行腳本。

<script src="script.js" defer></script>

defer 屬性只對外部腳本有影響（src 屬性必須存在）。

24、Draggable

指定元素是否可拖動。

<script>const allowDrop = (e) => e.preventDefault();const drag = (e) => e.dataTransfer.setData("text", e.target.id);const drop = (e) => {  var data = e.dataTransfer.getData("text");  e.target.appendChild(document.getElementById(data));}</script><div ondrop="drop(event)" ondragover="allowDrop(event)" style="width:150px; height:50px; padding: 10px; border:1px solid black"></div><p id="drag" draggable="true" ondragstart="drag(event)">Drag me into box</p>

總結(jié)

寫作一直是我的熱情所在，它讓我思考并總結(jié)，同時還可以幫助大家。如果您有任何問題，請隨時在留言區(qū)給我留言。

最后，感謝您的閱讀。

分享 24 個鮮為人知的 HTML 屬性，助你提升開發(fā)效率

學(xué)習(xí)更多技能
請點擊下方公眾號

分享 24 個鮮為人知的 HTML 屬性，助你提升開發(fā)效率

學(xué)習(xí)更多技能請點擊下方公眾號

學(xué)習(xí)更多技能
請點擊下方公眾號