应使用html5语义化标签替代div堆砌，如，确保结构清晰、seo友好、可访问性强；标题需严格嵌套不跳级；须唯一且为直系子元素，符合wcag 2.1 aa标准。
用语义化标签替代 div 堆砌
HTML5 提供了 <header></header>、<nav></nav>、<main></main>、<article></article>、<section></section>、<aside></aside>、<footer></footer> 等语义化标签，它们不是“可选装饰”，而是浏览器和辅助技术识别内容角色的依据。滥用 <div> 会导致结构扁平、SEO 削弱、屏幕阅读器无法正确导航。
<ul>
<li>一个页面通常只应有一个 <code><main></main>，且不能嵌套在 <article></article> 或 <aside></aside> 内
<section></section> 必须有明确的主题（通常带 <h2></h2>–<h6></h6>），否则不如用 <div>
<li>
<code><nav></nav> 仅用于主要导航链接集合；页脚链接、面包屑、分页控件不属于 <nav></nav>
<section></section> 套 <section></section> 而无实质层级关系——这时更可能是 <article></article> 或普通容器标题层级必须严格嵌套且不可跳级
HTML 标题 <h1></h1>–<h6></h6> 不是样式标签，而是文档大纲的骨架。跳级（如 <h1></h1> 后直接 <h3></h3>）会让大纲解析器（如 Chrome 的“文档大纲”面板、NVDA 屏幕阅读器）丢失结构逻辑，影响可访问性和 SEO。
- 每个
<section></section>、<article></article>、<aside></aside>可有自己的<h1></h1>（在 HTML5 outline algorithm 中成立），但实践中仍推荐统一用<h2></h2>开始以兼容旧工具 -
<h1></h1>应全页唯一，代表页面核心主题；<h2></h2>是一级子主题，<h3></h3>是其下细分，依此类推 - 用浏览器开发者工具的“Accessibility”或“Elements > Outline”视图实时验证大纲是否连贯
确保
很多模板习惯把所有内容塞进一个顶层 <div id="app"> 或 <code><div class="wrapper">，这人为打断了 HTML 的天然块级流和语义继承。搜索引擎与无障碍工具依赖 <code> 下的直接子元素判断内容优先级和区域划分。
-
<header></header>、<nav></nav>、<main></main>、<aside></aside>、<footer></footer>应作为的直系子元素（顺序按视觉/逻辑流排列） - 若需布局包裹，用 CSS Grid / Flex 容器替代 DOM 层级包裹；例如给
<main></main>加最大宽度，直接在其上设max-width，而非套一层<div class="container"> <li>检查 <code>document.body.children在控制台输出，确认没有无关的包裹<div> <h3>用 <code><main></main>显式标出核心内容区域很多人以为
<main></main>是锦上添花，其实它是 WCAG 2.1 AA 级可访问性要求：键盘用户按Ctrl+Alt+I（或特定快捷键）跳转到主要内容，依赖的就是<main></main>标签。没有它，辅助技术只能靠启发式猜测，极易出错。-
<main></main>内不应包含重复性内容（如站点导航、侧边栏广告、页脚链接）——这些属于<nav></nav>、<aside></aside>、<footer></footer> - 同一页面不可出现多个
<main></main>；若存在多个独立内容区块（如仪表盘多卡片），用<article></article>包裹各卡片，整体仍由一个<main></main>包围 - 服务端渲染时注意：若
<main></main>被框架模板动态替换，需确保最终 HTML 中该标签真实存在且非空
-
