html嵌套应遵循语义先行、层级扁平原则，推荐使用等语义标签替代无意义div嵌套，dom深度控制在3层以内，缩进统一为2空格且子元素独占一行，属性按优先级排序并显式闭合标签。
HTML 嵌套过深是可读性崩坏的起点，不是“写得对不对”的问题，而是“别人能不能一眼看出结构意图”的问题。真正有效的嵌套标准，核心就两条：语义先行、层级扁平。
用 <header></header> <nav></nav> <main></main> 替代无意义的 <div> 嵌套
<p>看到 <code><div class="wrap"><div class="inner"><div class="content"> 这种结构，没人能立刻判断这是页眉、导航还是正文区域。浏览器和读屏软件也完全无法识别。
<ul>
<li>
<code><header></header> 明确表示页面顶部区域，会被读屏软件播报为“页眉”
<nav></nav> 不只是“放链接的盒子”，它代表一组导航链接，语义+可访问性双达标<main></main> 是文档唯一主内容容器，一个页面只能有一个，且不能嵌套在 <article></article> 或 <aside></aside> 内<main></main> 当成万能包裹容器——它不是 <div class="main"> 的替代品，而是有严格语义边界的元素
<h3>嵌套深度控制在 3 层以内</h3>
<p>DOM 层级越深，CSS 选择器越难写，JS 查询越慢，团队成员理解成本越高。所谓“3 层”，是指从语义容器开始算起（不含 <code> 和 - 推荐结构：
<main></main>→<section></section>→<article></article>（共 3 层） - 危险信号：
<div><div><div><div><p> 或连续嵌套多个 <code><div class="xxx"> <li>深层嵌套常源于“先套盒子再填内容”的习惯，应改为“先定语义再组织内容”</li> <li>若必须展开细节（如表单字段组），优先用 <code><fieldset></fieldset>+<legend></legend>，它们自带语义层级，不额外增加 DOM 深度 - 强制使用 2 个空格（不是 4 个，也不是 Tab），项目内全员统一
- 每个块级标签（
<header></header>、<section></section>、<div> 等）独占一行，闭合标签与开始标签垂直对齐 <li>单行内联元素（<code><span></span>、<em></em>、<a></a>）可与文本同行，但不要强行折行破坏语义流 -
<style></style>和<script></script>内部代码缩进，需与外层标签对齐，不是另起一套缩进规则 - 属性按优先级排序：
class、id、src/href、alt、loading等，布尔属性（如disabled）不写= "disabled" - 所有标签必须显式闭合：即使
<p></p>在 HTML5 中允许省略结束标签，也必须写—— 否则嵌套边界模糊，易引发意外渲染 - 空元素（
<img>、<input>、<br>）不加尾部/，即写<img src="x.jpg" alt="x">，而非<img src="x.jpg" alt="x"> - 属性值一律用双引号，禁止单引号或无引号，尤其当值含空格或连字符时（如
class="product-card"）
缩进统一用 2 空格，且子元素独占一行
缩进不是为了“好看”，是为了让父子关系肉眼可判。Tab 键在不同编辑器里行为不一致，必须禁用。
属性顺序和闭合写法影响嵌套可维护性
看似琐碎的写法差异，会在多人协作时放大嵌套理解难度。
嵌套不是技术能力的体现，而是结构思考的痕迹。最易被忽略的，是把“能跑通”当成“写对了”——浏览器容错强，不代表结构合理；代码能渲染，不代表别人能快速接手。语义标签选错、层级无意加深、缩进混用，三者叠加，三天后你自己都可能需要重读一遍才能理清逻辑。
