英文 | https://javascript.plainenglish.io/24-lesser-known-html-attributes-you-may-want-to-use-326dca041fdb
翻譯 | 楊小愛
之前，我寫了一篇關于介紹了有用的 HTML 标記及其類型的文章。今天，我決定再寫一個續片，回顧一些我們可能需要使用到的 HTML 屬性。
所有屬性都易于設定，并且可以幫助我們完成常見任務，否則我們可以通過使用一些複雜的外部庫來完成這些任務。
是以，在本文中，我将回顧每個屬性并包含代碼片段，以便我們更容易了解屬性的用例和文法。
1、Accept
描述允許的輸入檔案類型。
<input type="file" accept=".jpg, .png"> 僅與 <input> 标記的檔案類型一起使用。接受一種或多種檔案類型的逗号分隔清單。要允許特定媒體類型的所有檔案，請使用 accept="image/*"。
2、Autofocus
它表明特定元素應該專注于頁面加載。
<input type="text" autofocus> 文檔或對話框中隻有一個元素能具有 autofocus 屬性。如果需要應用于多個元素中，則會将第一個元素設定為焦點。
3、Inputmode
提示使用者在編輯元素或其内容時可能輸入的資料類型。
<input type="text" inputmode="url" />
<input type="text" inputmode="email" />
<input type="text" inputmode="numeric" />
它允許浏覽器顯示适當的虛拟鍵盤。
4、Pattern
指定在表單送出時檢查 <input> 值的正規表達式。
<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
指定浏覽器是否有權提供幫助以填寫電子郵件、電話号碼、國家/地區等表單字段。
<input name="credit-card-number" id="credit-card-number" autocomplete="off"> 有關可用自動完成值的完整清單，請參閱 MDN 參考：https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
7、Multiple
該屬性允許使用者選擇多個值。
<input type="file" multiple> 我們可以将它與 <input> 和 <select> 标記的檔案和電子郵件類型一起使用。
8、Download
指定當使用者單擊超連結時将下載下傳目标。
<a href="document.pdf" download>Download PDF</a> 9、Contenteditable
該屬性允許使用者編輯元素的内容。
<div contenteditable="true"> This text can be edited by the user.</div> 10、Readonly
指定輸入字段是隻讀的。
<input type="text" id="sports" name="sports" value="golf" readonly> 使用者仍然可以選擇它、突出顯示它并從中複制文本。要禁止這些操作，請改用 disabled 屬性。
11、Hidden
指定元素是否可見。
<p hidden>This text is hidden</p> 12、Spellcheck
定義是否檢查元素的拼寫錯誤。
<p contenteditable="true" spellcheck="true">Myy spellinng is checkd</p> 通常，不會檢查所有不可編輯的元素，即使 spellcheck 屬性設定為 true 并且浏覽器支援拼寫檢查。
13、Translate
指定頁面本地化時是否應翻譯元素。
<footer><p translate="no">Printing Works, Inc</p></footer> 一個示例用例是我們的公司名稱、書名、位置等。
14、Loading
指定浏覽器是應該立即加載圖像還是推遲加載螢幕外圖像，例如，直到使用者滾動到它們附近。
<img src="https://cdn.mysite.com/media/image.jpg" loading="lazy"> eager 是預設行為，lazy 用于延遲（也稱為延遲加載）。
15、Onerror
如果未加載原件，則允許添加備用圖像。
<img src="imageafound.png" onerror="this.onerror=null;this.src='imagenotfound.png';"/> 如果後備圖像本身不可用， this.onerror=null 用于防止循環。
16、Poster
允許在下載下傳視訊時添加要顯示的圖像。
<video src="https://cdn.mysite.com/media/video.mp4"poster="image.png"></video> 如果未指定，則在第一幀可用之前不顯示任何内容，然後，第一幀顯示為張貼幀。
17、Controls
指定是否應在播放器上顯示音頻/視訊控件。
<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
指向内容的來源、更改或删除的參考點。
<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> 當與 <time> 元素一起使用時，它表示機器可讀格式的日期/時間。
22、Async
確定腳本與頁面的其餘部分異步執行。
<script src="script.js" async></script>
async 屬性隻對外部腳本有影響（src 屬性必須存在）。
23、Defer
確定在頁面完成解析後執行腳本。
<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> 總結
寫作一直是我的熱情所在，它讓我思考并總結，同時還可以幫助大家。如果您有任何問題，請随時在留言區給我留言。
最後，感謝您的閱讀。
![JAVA 系列——>開發工具IntelliJ IDEA的安裝以及配置、快捷鍵IDEA 簡介[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)