和 通过语义角色界定页面交互边界： 声明导航链接集合， 标识唯一主体内容区域，二者按 dom 顺序构成“导航→内容”逻辑动线，共同保障键盘导航、屏幕阅读器播报与搜索引擎解析的准确性。

用对 `

` 和 `

`，页面的交互边界就自然清晰了——不是靠视觉位置，而是靠语义角色告诉浏览器“哪里该导航、哪里是内容主体”。两者配合，直接决定键盘用户能否快速跳过导航、屏幕阅读器是否准确播报正文、搜索引擎怎么提取核心信息。

nav：只管“去哪”，不管“是什么”

`

` 的唯一职责是声明“这是一组有明确导航目的的链接集合”。它不负责样式、不控制行为，只回答一个问题：“用户点这里，会跳到页面其他地方吗？”

• 顶部主导航、面包屑、文章内章节锚点栏，都算——只要链接目标是本页或站内其他可访问路径
• 页脚的“关于我们”“隐私政策”通常不算主导航，更适合放在 `
  ` 内普通 `` 或 `

  ` 中

  单个链接（如“返回首页”按钮）或纯功能按钮（如“点赞”“分享”）不用 `

  `，语义过重

  多个导航区要区分用途：`

  ` 和 `

  ` 不仅便于辅助技术识别，也方便开发者维护

  main：内容的“主权区域”，不可共享也不可嵌套

  `

  ` 是页面中唯一一块“当前视图专属内容”的容器。它不看大小、不看居中，只看是否可复用——能复制粘贴到别的页面还能直接用的内容，就不该进 `

  `。

  

  anything-to-html

  将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

  下载

  • 必须全页唯一，且不能出现在 `
    `、`

    `、`

    ` 或 `

    ` 内部；正确层级是 `` 直接子元素，与 `

    ` 并列
  • 里面可以放 `
    `（独立成篇）、`

    `（提交型表单）、纯文本段落，但不能塞进全局导航、侧边广告、页脚版权
  • SPA 项目中，`
    ` 应由最外层布局组件统一包裹，路由切换时不新增、不重复，避免 Lighthouse 报 `duplicate-main` 错误
  • 即使视觉上某块内容在页眉下方或卡片里，只要它是当前页面独有主体，就应确保 DOM 结构中它属于 `
    ` 的直系后代

  nav 与 main 的协作关系：顺序即逻辑

  它们不是孤立存在，而是在文档流中形成天然的“导航→内容”动线。这个顺序本身就在告诉机器：“先处理导航选项，再进入主内容区。”

  • 典型结构是 `
    ` → `

    ` → `

    ` → `

    `，其中 `

    ` 可在 `

    ` 内部，也可紧随其后，不影响语义有效性
  • 不要把 `
    ` 塞进 `

    ` 里——导航不是“主要内容”，它只是通向内容的路径
  • 也不要让 `
    ` 包裹 `

    ` 或 `

    `——那会让辅助技术误判内容层级，甚至跳过真正主体
  • 键盘用户按 `Tab` 键时，浏览器默认按 DOM 顺序聚焦；加上 `
    ` 后，读屏软件支持 `Insert+M`（NVDA）或 `Control+Option+Shift+Down Arrow`（VoiceOver）一键跳转，省去手动遍历导航

  常见误区：看似合理，实则破坏边界

  很多结构问题不是写错了标签，而是误解了语义边界。几个高频踩坑点：

  • 给 `
    ` 加 `role="navigation"` 而不用原生 `

    `——多此一举，还可能漏掉隐式语义

    在 `

    ` 里放 `

    ` 推荐文章——可以，但 `

    ` 必须与 `

    ` 内容相关；若只是通用广告位，应移出 `

    `

    用 `

    ` 包住搜索 `

    ` ——搜索本身不是导航，应单独用 `

    `；如需整合，可放在 `

    ` 内部，但需明确标注 `` 和 `aria-label`

    为 SEO 堆砌空 `

    ` 或多个 `

    ` ——不仅无效，还会触发无障碍检测失败和搜索引擎降权

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！