全局属性不能覆盖语义标签职责，如为nav加role="navigation"会干扰辅助技术；id用于唯一锚点引用，class用于样式复用，data-*仅供js/css使用且不参与语义解析。
全局属性不能覆盖语义标签的职责
给 nav 加 role="navigation" 不会增强它的语义，反而可能干扰辅助技术——原生 nav 已自带完整 ARIA 角色和键盘快捷支持（如 Ctrl+Alt+N），加了 role 反而可能覆盖默认行为或触发重复播报。
常见错误现象：用 div role="main" 替代 main，结果在 Chrome DevTools 的 Accessibility 面板里看不到「Main landmark」节点，或者屏幕阅读器跳过该区域。
-
id和aria-labelledby必须指向真实存在的元素，否则关联失效（例如aria-labelledby="missing-id"） -
class仅用于样式或 JS 钩子，不影响语义；但若用它模拟语义（如class="nav"），对 SEO 和可访问性零贡献 -
data-*属性完全不参与语义解析，只供 JS 或 CSS 自定义使用，不可替代aria-*或结构标签
id 和 class 在语义化布局中的分工边界
id 应用于需要唯一锚点或跨元素引用的场景，比如表单控件与 label 关联、aria-describedby 指向错误提示、或页面内跳转锚点；class 则用于复用样式或批量操作，比如给所有 article 下的标题统一加响应式字号。
容易踩的坑是把 id 当成样式类用：id="btn-primary" 违反唯一性原则，且一旦复制多个按钮就直接破坏 HTML 合法性；而用 class="header" 套在 header 标签上纯属冗余，除非你真有多个不同样式的 header 变体要区分。
-
id命名必须以字母或下划线开头，不能含空格或特殊符号（如id="user:profile"合法，但id="user profile"不合法） - 多个
section共享同一类名（如class="topic-section"）合理；但给每个section都配独立id（如id="section-1"）仅在需 JS 精准控制或锚点时才必要 -
class名应反映用途而非视觉（避免class="blue-box"），更不应与语义标签名重复（如class="main"+main标签）
data-* 属性如何安全配合 article 或 section 使用
data- 属性是唯一允许开发者自由扩展的全局属性，但它和语义标签之间是「并列协作」关系，不是「修饰补充」关系。比如一个 article 表示博客条目，你可以加 data-author-id="123" 或 data-published-at="2026-09-03"，这些值只对 JS 逻辑或后端模板有意义，不会让浏览器把它识别得“更像一篇文章”。
性能影响极小，但滥用会导致 DOM 膨胀。如果把本该用 time 标签表达的时间信息塞进 data-timestamp，就等于放弃语义化优势——搜索引擎无法提取时间，屏幕阅读器不会自动读出日期。
- 优先用原生语义标签承载结构化信息：
<time datetime="2026-09-03">昨天</time>比data-date="2026-09-03"更可靠 -
data-适合存非公开、非结构化、运行时才需要的数据，比如data-tracking-id、data-render-mode - 不要用
data-模拟 ARIA 属性（如data-label替代aria-label），那不会被辅助技术识别
hidden 属性与语义标签的可见性冲突
hidden 是布尔全局属性，设为存在即生效，它会让元素及其子树对渲染、辅助技术、CSS 伪类（如 :focus-within）全部不可见。但它不改变元素本身的语义角色——一个 hidden 的 nav 仍是导航区，只是当前被隐藏了。
这和 display: none 行为一致，但关键区别在于：hidden 是 HTML 原生控制，无需依赖 CSS，且能被 JS 通过 element.hidden = false 直接切换。不过要注意：它不能条件性地隐藏部分子内容，比如想只隐藏 nav 里的某几个链接，就必须单独作用于那些 a 元素，而不是整个 nav。
- 不要对
main使用hidden——主内容区域被隐藏会直接破坏可访问性流，屏幕阅读器用户可能找不到任何主体内容 -
hidden不会阻止 JS 执行，所以仍需检查element.hidden状态再执行相关逻辑 - 若需动画过渡隐藏，
hidden不支持 CSS 过渡，必须配合opacity或transform使用
复杂点往往藏在「看似无害」的组合里：比如给 article 加 id="post-1" 再配 data-slug="how-to-use-html"，看起来很规范，但如果这个 article 实际嵌套在另一个 article 里，或者没带 h2 标题，那它就根本不符合 article 的语义要求——全局属性再正确，也救不了错误的语义结构。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
