是html5中定义页面唯一主体内容的语义化标签，不可嵌套于其他语义标签内且每页仅能有一个；它提升可访问性与seo，需注意兼容性处理及路由切换时的动态更新。
<main></main> 是 HTML5 中定义页面核心内容的语义化标签，它明确告诉浏览器和辅助技术：“这部分是当前页面独一无二、不可重复的主体内容”。
为什么不能用 <div> 替代 <code><main></main>
语义缺失会直接影响可访问性和 SEO。屏幕阅读器遇到 <div> 无法判断其作用，而 <code><main></main> 可被快捷键（如 JAWS 的 M 键）直接跳转；搜索引擎也优先提取 <main></main> 内容作为页面摘要依据。
- 一个页面最多只能有一个
<main></main>，且不能嵌套在<article></article>、<aside></aside>、<footer></footer>、<header></header>、<nav></nav>内 - 如果页面有多个“主要内容区块”（比如首页的推荐区 + 热榜区），应只把用户当前视图焦点所在的核心区块包进
<main></main>，其余用<section></section> - 服务端渲染（SSR）或静态站点中，若
<main></main>被动态插入（如通过innerHTML），部分旧版读屏工具可能忽略其语义
<main></main> 和 <article></article> 的边界在哪
<main></main> 描述“页面层级”的主体性，<article></article> 描述“内容单元”的独立性。比如博客列表页：<main></main> 包住整个列表容器，每个博客条目再各自用 <article></article> 包裹——前者是页面主区域，后者是可单独分发、复用的内容块。
- 单篇博客详情页：整篇文章内容应放在
<main></main>内，标题、正文、评论区都属于它 - 仪表盘页面：若主体是图表+数据表格，就该用
<main></main>；侧边菜单、顶部导航栏必须在外 - 避免把广告位、版权声明、通用页脚塞进
<main></main>，哪怕它们视觉上在“中间”
兼容性与降级处理要注意什么
IE 不支持 <main></main> 的语义识别，但能正常渲染。真正的问题在于：当 CSS 用 main { display: block; } 时，IE8 及更早版本会忽略该规则，导致样式丢失。
立即学习“前端免费学习笔记（深入）”；
- 必须为
<main></main>添加 CSS 重置：main { display: block; }，并确保该样式表不被条件注释排除 - 使用 polyfill（如 html5shiv）仅解决 IE9 以下的标签识别问题，不解决语义暴露——读屏工具仍无法感知
- React/Vue 等框架中，若 SSR 输出的 HTML 已含
<main></main>，客户端 hydration 无需额外处理；但若用document.createElement('main')动态创建，需手动设置role="main"补充语义
实际项目里最容易被忽略的是：路由切换后没更新 <main></main> 的位置。比如从列表页跳到详情页，旧的 <main></main> 没被移除或替换，新内容又塞进另一个 <main></main>，结果页面出现两个 <main></main> —— 这直接违反规范，辅助技术行为不可预测。
