html结构规划应先于编码，需从内容层级出发明确主次关系，用语义标签（如）替代无意义，控制嵌套深度在三层内，严控dom节点数量（单容器≤50），并确保语义正确以提升seo与无障碍访问。
HTML结构规划先于写代码：从内容层级开始
页面结构混乱，不是因为标签不会用，而是没想清楚内容之间谁主谁次、谁属于谁。直接开写 <div> 堆砌，等于先盖房再画图纸。
<p>真实做法是：拿出纸笔（或白板），列出页面所有内容块——比如「顶部导航栏」「左侧菜单」「主数据表格」「操作按钮组」「页脚版权信息」，然后问自己三个问题：</p>
<ul>
<li>哪些内容是全站共用的？→ 适合用 <code><header></header>、<nav></nav>、<footer></footer>
<main></main> 里，且一个文档只出现一次<article></article> 或 <section></section>，别用 <div>
<p>常见错误是把整个侧边栏塞进 <code><aside></aside>，但其实只有当它与 <main></main> 内容弱相关（比如博客的“热门文章”）才适用；如果是后台系统的权限控制面板，它就是功能模块，该用 <section></section> + 明确 aria-labelledby。
嵌套深度控制在三层以内：为什么浏览器会卡、CSS会失控
DOM 树过深（比如 <div><div><div><div><p>文字</p></div></div></div></div>）不只是难读，它直接影响渲染性能和样式继承链。
浏览器解析 HTML 是自上而下构建 DOM 树，每层嵌套都增加节点创建和样式计算开销；更麻烦的是，CSS 选择器如 .container .sidebar .item .link 会因层级过深触发低效匹配。
实操建议：
- 用浏览器开发者工具的「Elements」面板右键「Edit as HTML」临时删减，观察是否影响语义或布局——能删掉的包裹层，大概率是冗余的
- 合并相邻的
<div class="wrapper"><div class="inner"> → 改成 <code><div class="wrapper inner"> <li>避免为纯样式目的加层，比如只为加个内边距而套一层 <code><div>；直接给目标元素设 <code>padding或用<section></section>这类语义容器替代特别注意：Vue/React 组件输出的 HTML 往往自带多层
<div>，上线前务必检查编译后的真实 DOM 结构。 <h3>语义标签不是装饰品：它们直接影响 SEO 和屏幕阅读器</h3> <p><code><div> 和 <code><section></section>在视觉上可能完全一样，但对搜索引擎和读屏软件来说，含义天差地别。用错标签，等于给机器撒谎。典型误用场景：
- 把导航菜单放在
<div class="nav"> 里 → 应该用 <code><nav></nav>，否则读屏软件无法识别这是导航区块 - 用
<h2></h2>当作样式标题（实际内容逻辑上只是强调文字）→ 破坏标题层级，影响大纲生成和跳转导航 - 整个页脚用一个
<div> 包住，里面混着版权、备案号、友情链接 → 应拆成 <code><footer></footer>+ 多个<section></section>或<address></address>验证方法很简单：打开 Chrome，按
Ctrl+Shift+U（Windows）或Cmd+Opt+U（Mac）调出「无障碍树」，看结构是否与你预期一致。如果<main></main>没出现，或者<header></header>被识别成普通<div>，说明语义丢失了。 <h3>DOM 节点数量要盯紧：50 是单容器的安全线</h3> <p>一个 <code><ul></ul>里塞 500 条<li>，看似没问题，但滚动、搜索、动态增删时，重排（reflow）和重绘（repaint）成本会指数级上升。这不是理论，是真实卡顿来源。解决方案不是“换框架”，而是结构层面的约束：
- 列表类内容超过 50 项，强制分页或虚拟滚动（virtual scroll），别让全部 DOM 节点同时存在
- 后台表格每行用
<tr> 没问题，但整张表不要用 <code><div> 模拟，坚持用原生 <code><table> —— 它的渲染优化是浏览器内置的 <li>动态插入内容时，用 <code>DocumentFragment批量操作，而不是循环调用appendChild()
最容易被忽略的一点：服务端渲染（SSR）或静态生成（SSG）时，模板引擎可能悄悄注入大量空
<span></span>或注释节点。上线前用document.querySelectorAll('*').length粗略统计节点数，超 2000 就该警惕了。
- 把导航菜单放在
