HTML新属性

HTML5引入了许多新属性，旨在增强语义化、交互性和多媒体支持。以下是一些重要的新属性及其用途分类：

语义化与结构属性

• data-*：自定义数据属性，允许开发者存储额外信息（如data-id="123"）。
• hidden：隐藏元素，无需CSS（<div hidden>）。
• draggable：启用元素拖放功能（<div draggable="true">）。

表单与输入属性

• placeholder：输入框的提示文本（<input placeholder="Enter name">）。
• required：标记必填字段（<input required>）。
• autocomplete：控制自动填充（<input autocomplete="off">）。
• pattern：通过正则表达式验证输入（<input pattern="[A-Za-z]{3}">）。

多媒体属性

• controls：为音视频添加默认控制条（<video controls>）。
• autoplay：媒体自动播放（<audio autoplay>）。
• loop：循环播放（<video loop>）。
• muted：静音播放（<video muted>）。

性能与优化属性

• loading="lazy"：延迟加载图片或iframe（<img loading="lazy">）。
• defer/async：控制脚本加载方式（<script defer>）。

其他实用属性

• contenteditable：使元素可编辑（<div contenteditable="true">）。
• spellcheck：启用拼写检查（<textarea spellcheck="true">）。

这些属性通过简化代码和增强功能，显著提升了开发效率和用户体验。使用时需注意浏览器兼容性，可通过MDN或Can I Use等工具查询支持情况。