后端开发教程 - Java、Spring Boot 实战 - msg200.com
24 个鲜为人知的 HTML 属性，你可能想用一下 ✨📚
不久前，我写了一篇文章，介绍了一些常用的 HTML 标签及其类型。本周我决定写一篇续篇，回顾一些你可能用到的 HTML 属性。
所有属性都易于设置，并且可以帮助您完成常见任务，否则您将需要使用一些复杂的外部库来实现。
在本文中，我将回顾每个属性并包含代码片段，以便您更轻松地理解属性的用例和语法。
1.接受
描述允许哪些输入文件类型。
<input type="file" accept=".jpg, .png">
file仅与标签type一起使用<input>。接受以逗号分隔的一个或多个文件类型列表。要允许特定媒体类型的所有文件，请使用accept="image/*"。
2. 自动对焦
表示特定元素应该集中在页面加载上。
<input type="text" autofocus>
文档或对话框中只能有一个元素具有该autofocus属性。如果应用于多个元素，则第一个元素将获得焦点。
3. 输入模式
提示用户在编辑元素或其内容时可能输入的数据类型。
<input type="text" inputmode="url" />
<input type="text" inputmode="email" />
<input type="text" inputmode="numeric" />
这允许浏览器显示适当的虚拟键盘。
4. 图案
<input>指定在表单提交时检查值的正则表达式。
<input name="username" id="username" pattern="[A-Za-z0-9]+">
5.必填
确保在提交表单之前必须填写该元素。
<form action="/send_form.js">
Username: <input type="text" name="username" required>
<input type="submit">
</form>
6. 自动完成
指定浏览器是否有权提供填写表单字段（如电子邮件、电话号码、国家/地区等）的帮助。
<input name="credit-card-number" id="credit-card-number" autocomplete="off">
有关可用值的完整列表autocomplete，请参阅MDN 参考。
7. 多重
此属性允许用户选择多个值。
<input type="file" multiple>
您可以将它与file类型email和<input>标签一起使用<select>。
8.下载
指定当用户单击超链接时将下载目标。
<a href="document.pdf" download>Download PDF</a>
9. Contenteditable
此属性允许用户编辑元素的内容。
<div contenteditable="true">
This text can be edited by the user.
</div>
10. 只读
指定输入字段是只读的。
<input type="text" id="sports" name="sports" value="golf" readonly>
用户仍然可以通过 Tab 键切换到该文本，高亮显示该文本，并复制其中的文本。要禁止这些操作，请使用disabled属性。
11.隐藏
指定元素是否可见。
<p hidden>This text is hidden</p>
12. 拼写检查
定义是否检查元素的拼写错误。
<p contenteditable="true" spellcheck="true">Myy spellinng is checkd</p>
通常，所有不可编辑的元素都不会被检查，即使spellcheck属性设置为true并且浏览器支持拼写检查。
13. 翻译
指定页面本地化时是否应翻译元素。
<footer><p translate="no">Printing Works, Inc</p></footer>
示例用例是您的公司名称、书名、位置等。
14. 加载
指定浏览器是否应立即加载图像或推迟加载屏幕外的图像，直到用户滚动到它们附近。
<img src="https://cdn.mysite.com/media/image.jpg" loading="lazy">
eager是默认行为，lazy用于延迟（又称延迟加载）。
15. 错误
如果未加载原始图像，则允许添加后备图像。
<img src="imageafound.png" onerror="this.onerror=null;this.src='imagenotfound.png';"/>
如果后备图像本身不可用，则this.onerror=null用于防止循环。
16.海报
允许添加在视频下载时显示的图像。
<video
src="https://cdn.mysite.com/media/video.mp4"
poster="image.png">
</video>
如果未指定，则在第一帧可用之前不会显示任何内容，然后第一帧将显示为海报帧。
17. 控件
指定是否应在播放器上显示音频/视频控件。
<audio controls
<source src="track11.mp3" type="audio/mpeg">
</audio>
18.自动播放
确保音频/视频在加载后立即自动开始播放。
<video autoplay
src="https://cdn.mysite.com/media/myvideo.mp4"
poster="image.png">
</video>
19.循环
指定音频/视频每次完成时都会重新开始。
<audio loop
<source src="track323.mp3" type="audio/mpeg">
</audio>
20. 引用
指向内容的出处，或提及的更改或删除。
<blockquote cite="https://mysite.com/original-source-url">
<p>Some awesome quote</p>
</blockquote>
21. 日期时间
指定删除/插入文本的日期和时间。
<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.异步
确保脚本与页面的其余部分异步执行。
<script src="script.js" async></script>
该async属性仅对外部脚本有影响（src属性必须存在）。
23. 推迟
确保页面解析完成后执行脚本。
<script src="script.js" defer></script>
该defer属性仅对外部脚本有影响（src属性必须存在）。
24. 可拖动
指定元素是否可拖动。
<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>
写作一直是我的热情所在，能够帮助和激励他人让我感到快乐。如有任何疑问，欢迎随时联系我们！
请访问我的博客以获取更多类似文章。
文章来源：https://dev.to/madza/24-lesser-known-html-attributes-you-may-want-to-use-1059