语言属性
- lang: 指定页面或元素使用的语言。搜索引擎和屏幕阅读器利用此属性确定内容的语言，实现准确的翻译和无障碍访问。
字符集属性
- charset: 指定页面或元素使用的字符集。确保字符集与页面内容一致，避免乱码和显示问题。
链接属性
- href: 指定链接的目标 URL。使用相对或绝对路径来链接到外部或内部资源。
- target: 指定链接在哪个窗口或框架中打开。"_blank" 可以在新标签页中打开，"_self" 在当前窗口中打开。
媒体属性
- media: 指定 CSS 样式表适用的媒体类型（例如，打印、屏幕、语音）。确保样式表仅在预期的媒体类型中应用。
访问属性
- accesskey: 指定快速访问元素的键盘快捷键。这对于残疾用户和更高效的导航很有用。
- tabindex: 指定元素在按 Tab 键时的顺序。合理设置 tabindex 可以提高键盘导航的易用性。
全局事件属性
- onclick: 指定元素在单击时触发的事件处理程序。它允许添加交互性，例如打开弹出窗口或提交表单。
- onmouseover: 指定元素在光标悬停时触发的事件处理程序。它可以用于显示提示或更改元素外观。
数据属性
- **data-***: 自定义属性，可以存储特定于元素的数据。它们不会影响元素的呈现，但可以由 JavaScript 脚本或第三方工具使用。
其他属性
- id: 唯一的元素标识符。用于 JavaScript DOM 操作和 CSS 样式。
- class: 一个或多个元素分类。允许应用通用的 CSS 样式并进行元素分组。
- style: 内联 CSS 规则，用于覆盖或扩展元素的样式。
- title: 元素的提示文本。在光标悬停时显示，提供额外信息。
最佳实践
- 始终使用适当的语言属性，确保内容的可访问性。
- 使用 UTF-8 字符集，它是 Web 标准。
- 谨慎使用链接目标，优先使用 "_self"。
- 明智地设置 media 属性，避免样式表的意外应用。
- 为键盘导航设置有意义的 accesskey 和 tabindex。
- 仅在需要时使用事件处理程序，避免不必要的开销。
- 使用 data-* 属性存储关键信息，以进行动态处理。
- 正确使用 id 和 class 属性，确保元素识别和样式化。
