分享 24 个鲜为人知的 HTML 属性，助你提升开发效率

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

翻译 | 杨小爱

之前，我写了一篇关于介绍了有用的 HTML 标记及其类型的文章。今天，我决定再写一个续片，回顾一些我们可能需要使用到的 HTML 属性。

所有属性都易于设置，并且可以帮助我们完成常见任务，否则我们可以通过使用一些复杂的外部库来完成这些任务。

因此，在本文中，我将回顾每个属性并包含代码片段，以便我们更容易理解属性的用例和语法。

1、Accept

描述允许的输入文件类型。

代码语言：javascript复制仅与 标记的文件类型一起使用。接受一种或多种文件类型的逗号分隔列表。要允许特定媒体类型的所有文件，请使用 accept="image/*"。

2、Autofocus

它表明特定元素应该专注于页面加载。

代码语言：javascript复制文档或对话框中只有一个元素能具有 autofocus 属性。如果需要应用于多个元素中，则会将第一个元素设置为焦点。

3、Inputmode

提示用户在编辑元素或其内容时可能输入的数据类型。

代码语言：javascript复制

它允许浏览器显示适当的虚拟键盘。

4、Pattern

指定在表单提交时检查 值的正则表达式。

代码语言：javascript复制5、 Required

确保在提交表单之前必须填写元素。

代码语言：javascript复制

Username:

6、Autocomplete

指定浏览器是否有权提供帮助以填写电子邮件、电话号码、国家/地区等表单字段。

代码语言：javascript复制有关可用自动完成值的完整列表，请参阅 MDN 参考：https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete

7、Multiple

该属性允许用户选择多个值。

代码语言：javascript复制我们可以将它与 和 标记的文件和电子邮件类型一起使用。

8、Download

指定当用户单击超链接时将下载目标。

代码语言：javascript复制Download PDF9、Contenteditable

该属性允许用户编辑元素的内容。

代码语言：javascript复制

This text can be edited by the user.

10、Readonly

指定输入字段是只读的。

代码语言：javascript复制

用户仍然可以选择它、突出显示它并从中复制文本。要禁止这些操作，请改用 disabled 属性。

11、Hidden

指定元素是否可见。

代码语言：javascript复制

12、Spellcheck

定义是否检查元素的拼写错误。

代码语言：javascript复制

Myy spellinng is checkd

通常，不会检查所有不可编辑的元素，即使 spellcheck 属性设置为 true 并且浏览器支持拼写检查。

13、Translate

指定页面本地化时是否应翻译元素。

代码语言：javascript复制

一个示例用例是我们的公司名称、书名、位置等。

14、Loading

指定浏览器是应该立即加载图像还是推迟加载屏幕外图像，例如，直到用户滚动到它们附近。

代码语言：javascript复制eager 是默认行为，lazy 用于延迟（也称为延迟加载）。

15、Onerror

如果未加载原件，则允许添加备用图像。

代码语言：javascript复制如果后备图像本身不可用， this.onerror=null 用于防止循环。

16、Poster

允许在下载视频时添加要显示的图像。

代码语言：javascript复制如果未指定，则在第一帧可用之前不显示任何内容，然后，第一帧显示为张贴帧。

17、Controls

指定是否应在播放器上显示音频/视频控件。

代码语言：javascript复制18、Autoplay

确保音频/视频在加载后立即自动开始播放。

代码语言：javascript复制19、Loop

指定音频/视频将在每次完成时重新开始。

代码语言：javascript复制20、Cite

指向内容的来源、更改或删除的参考点。

代码语言：javascript复制

Some awesome quote

21、Datetime

它指定删除/插入文本的日期和时间。

代码语言：javascript复制

My plans for 2021 include visiting Thailand,

creating 6 courses,

writing 12 articles.

I will evaluate the completion on

.

当与 元素一起使用时，它表示机器可读格式的日期/时间。

22、Async

确保脚本与页面的其余部分异步执行。

代码语言：javascript复制async 属性只对外部脚本有影响（src 属性必须存在）。

23、Defer

确保在页面完成解析后执行脚本。

代码语言：javascript复制defer 属性只对外部脚本有影响（src 属性必须存在）。

24、Draggable

指定元素是否可拖动。

代码语言：javascript复制

Drag me into box

总结

写作一直是我的热情所在，它让我思考并总结，同时还可以帮助大家。如果您有任何问题，请随时在留言区给我留言。

最后，感谢您的阅读。