main标签必须且只能出现一次，多个会导致屏幕阅读器无法准确定位主内容、Lighthouse报duplicate-main错误，WCAG 2.1明确要求“one main landmark per page”，应通过开发者工具搜索验证唯一性。
main标签必须且只能出现一次
页面中存在多个 <main></main> 是最常见也最致命的错误。浏览器不会报错，但屏幕阅读器（如 NVDA、VoiceOver）会把 <main></main> 当作“按 M 键直达主内容”的唯一锚点——多个就等于没有锚点。Lighthouse 或 axe 工具会直接标红 duplicate-main，WCAG 2.1 也明确要求“one main landmark per page”。
实操建议：
立即学习“前端免费学习笔记（深入）”；
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
- 用浏览器开发者工具（F12 → Elements 面板），Ctrl+F / Cmd+F 搜索
<main>，确认全文仅匹配一个开始标签和一个结束标签</main> - 特别注意 SPA 场景：React/Vue 组件里别各自写
<main>{children}</main>；应只由顶层路由容器包裹一次，子组件用<section></section>或普通<div> <li>服务端模板（如 EJS、Twig）中，避免列表页和详情页共用同一套 <code><main></main>包裹逻辑，导致渲染出嵌套或并列的多个 - 检查
<main></main>的直接父节点：右键 → “Reveal in Elements panel”，看它是否直属于 - 若发现被包在
<header></header>下（比如误把文章标题区块当网站头部），需整体剪切<main></main>并粘贴到层级，与<header></header>、<nav></nav>等同级并列 -
<header></header>可以作为<main></main>的子元素存在，但仅限“本页专属标题与元信息”，例如博客正文前的<h1></h1>和发布时间，不是整个网站的 Logo + 全局导航 - 逐行审查
<main></main>内部：看到<nav></nav>、<footer></footer>、<aside></aside>、含role="navigation"的容器，立刻剪出去 - 首页的“热门推荐”区块容易误判——若它随路由变化主题（如从“科技新闻”切到“本地活动”），才可纳入；否则只是通用模块，改用
<section></section> - 允许放进
<main></main>的典型内容：<article></article>（单篇博文）、<ol></ol>（商品列表）、<form></form>（独立提交表单）、纯文本段落；禁止放入版权信息、全局搜索框、多页一致的侧边广告位 - 给
<main></main>加aria-labelledby="main-title"，并在内部或附近放一个带对应id="main-title"的标题元素（如<h1 id="main-title">最新动态</h1>） - 若无显式标题，用
aria-label="页面主要内容区域"也可，但不如aria-labelledby精准 - 最后务必用 Lighthouse 运行无障碍审计，确认 “Main landmark is unique” 通过，且 no
duplicate-main报错
main不能嵌套在header、footer、nav等语义元素内
<main></main> 的父元素必须是 ，不能是 <header></header>、<footer></footer>、<nav></nav>、<aside></aside> 或 <article></article>。这些元素本身已有明确语义边界，再往里塞 <main></main> 就像在“目录”里再标一个“全书主干”，逻辑冲突。
实操建议：
立即学习“前端免费学习笔记（深入）”；
main里只能放当前页面独有、不可复用的内容
<main></main> 不是视觉居中那块，也不是最重要的那块，而是“去掉页眉、页脚、侧栏、面包屑、登录框之后剩下的那部分”。判断标准很实在：如果这块内容复制粘贴到另一个页面还能原样用，那它就不该进 <main></main>。
实操建议：
立即学习“前端免费学习笔记（深入）”；
必须配 aria-label 或 aria-labelledby 才算真正生效
光写 <main></main> 不够。旧版读屏工具（尤其某些国产辅助软件）可能忽略其语义，除非你显式提供可访问性标签。W3C 推荐但不强制，但实际项目中不加就等于没用。
实操建议：
立即学习“前端免费学习笔记（深入）”；
