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等工具查询支持情况。