HTML5新标签详解与版本特性解析

• 误用现象：
  套着整个首页布局，导致屏幕阅读器反复播报“文章开始/结束”
• 浏览器不报错，但会破坏文档大纲（document-outline），影响 h1~h6 层级逻辑
• SEO 工具（如 Lighthouse）会警告“语义化缺失”，但不会直接扣分——真正影响的是结构化数据解析

的 datetime 属性为什么经常写错

它只接受特定格式的机器可读时间，不是随便填个“2024年3月”就能用。浏览器靠这个生成时间戳、排序、日历集成，填错等于没填。

• 正确写法：3月15日 或 下午2:30
• 常见错误：用中文“2024年03月15日”、空格分隔“2024-03-15 14:30”、漏掉 T（ISO 8601 要求）
• 不写 datetime 属性时， 仅是普通内联元素，无语义价值

为什么

页面里只能出现一次

它是 WAI-ARIA 定义的“主内容区域”地标（landmark），辅助技术靠它快速跳转。重复会导致焦点混乱，尤其对键盘用户和读屏软件。

• 典型踩坑：在 SPA 中多个路由组件都渲染了
  ，实际 DOM 里出现多个
• Vue/React 项目需确保只在根级布局或路由出口处包裹一次，子组件禁用
• 浏览器开发者工具的“Accessibility”面板能直接检测重复 landmark，比手动查 HTML 更可靠

最常被忽略的其实是