Logo

菜单

发布于 2026-01-06 0 阅读
0

15 个被低估的 HTML 属性，每个 Web 开发人员都应该知道 DEV 的全球展示与分享挑战赛，由 Mux 呈现：展示你的项目！

15 个被低估的 HTML 属性，每个 Web 开发人员都应该知道

由 Mux 赞助的 DEV 全球展示挑战赛：展示你的项目！

HTML 本身或许不是一种编程语言，但它所拥有的强大功能毋庸置疑。我们常常依赖外部 JavaScript 库来完成一些基本任务，但或许今天我们就不再需要它们了！

小贴士：在 Genics Blog 收听本文音频，节省时间

本文将讨论15 个你可能不知道但又必须了解的HTML 属性。

我们开始吧！

1. 自动完成

该autocomplete属性指定浏览器是否允许辅助填写表单字段。如果启用，它将帮助用户自动填充电子邮件、电话号码、国籍等信息。

<input name="credit-card-number" id="credit-card-number" autocomplete="off">
Enter fullscreen mode Exit fullscreen mode

您可以从MDN 文档中查看所有自动完成值。

2. 下载

锚标记上的属性download指定当用户点击超链接时，文件/对象应下载到本地存储。

<a href="document.pdf" download>Download PDF</a>
Enter fullscreen mode Exit fullscreen mode

3. 内容可编辑

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

<div contenteditable="true">
  You can now edit this text!
</div>
Enter fullscreen mode Exit fullscreen mode

4. 只读

该readonly属性指定输入字段为只读且不可编辑。

<input type="text" id="sports" name="sports" value="golf" readonly>
Enter fullscreen mode Exit fullscreen mode

用户仍然可以选中文本并复制。要禁止这些操作，请使用disabled相应的属性。

5. 接受

该accept属性指定输入中允许选择哪些文件类型。

<input type="file" accept=".jpg, .png">
Enter fullscreen mode Exit fullscreen mode

此属性只能用于<input>带有 `<img>` 标签的 `<file>` 标签type="file"。要允许特定媒体类型的所有文件，请在其名称旁边使用星号 (*)。例如，`<file>:<media type accept="image/*"...

6. 自动对焦

该autofocus属性表明页面加载时应聚焦于该特定元素。

<input type="text" autofocus>
Enter fullscreen mode Exit fullscreen mode

注意：HTML 文档或对话框中只能有一个元素拥有 autofocus 属性。如果应用于多个元素，则只有第一个元素会获得焦点。

7. 隐藏的

该hidden属性指定元素是否可见。

<p hidden>I am invincible 💪</p>
Enter fullscreen mode Exit fullscreen mode

8. 拼写检查

该spellcheck属性定义是否检查元素是否存在拼写错误。

<p contenteditable="true" spellcheck="true">Cehck mai spellnig</p>
Enter fullscreen mode Exit fullscreen mode

9. 控制

该controls属性指定是否应在默认播放器上显示音频/视频控件。

<audio controls>
  <source src="rick_roll.mp3"  type="audio/mpeg">
</audio>
Enter fullscreen mode Exit fullscreen mode

10. 自动播放

该autoplay属性确保音频/视频加载完成后立即自动开始播放。

<video autoplay
  src="https://cdn.mysite.com/media/myvideo.mp4"
  poster="image.png">
</video>
Enter fullscreen mode Exit fullscreen mode

11. 引用

该cite属性用于指出元素的内容取自何处或引用何处。

<blockquote cite="https://genicsblog.com/">
  <p>An awesome publication for developers.</p>
</blockquote>
Enter fullscreen mode Exit fullscreen mode

12. 日期时间

该datetime属性指定文本被删除/插入的日期和时间。

<p>
  My plans for 2023 include joining Google as a SDE,
  <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>
Enter fullscreen mode Exit fullscreen mode

13. 异步

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

<script src="https://icanheckyou.com/heckingScript.js" async></script>
Enter fullscreen mode Exit fullscreen mode

注意：该async属性仅对外部脚本有效。

14. 延期

该defer属性确保脚本在页面解析完成后执行。

<script src="https://anotherhecker.com/heckingScriptAgainCozWhyNot.js" defer></script>
Enter fullscreen mode Exit fullscreen mode

注意：该defer属性仅对外部脚本有效。

15. 输入模式

该inputmode属性暗示用户在编辑元素或其内容时可能输入的数据类型。它还有助于移动浏览器以适当的模式显示键盘。

<input type="text" inputmode="url" />
<input type="text" inputmode="email" />
<input type="text" inputmode="numeric" />
Enter fullscreen mode Exit fullscreen mode

感谢阅读！

我希望这篇文章能够帮助你更多地了解HTML，并与你分享一些知识。

如果你喜欢这篇文章，请订阅我的电子报，这样你就不会错过我的博客更新、产品发布和科技新闻了。关注我的推特，获取每日网页开发资源分享！

文章来源：https://dev.to/genicsblog/15-undererated-html-attributes-every-web-developer-should-know-5704
你为第一份技术工作进行过薪资谈判吗？
加快您的网站速度