标签不能靠堆空行分隔段落，因浏览器忽略多余空白符，空行无语义、不可样式控制且不被屏幕阅读器识别；真正起作用的是p的默认margin。
为什么
标签不能靠
堆出段落间距
靠连续写 <br> 或空行来分隔段落，是初学者最常踩的坑。浏览器会忽略多余空白符，<br> 只是换行符，不是语义化分隔；它不带任何结构含义，也无法被 CSS 控制间距，更无法被屏幕阅读器识别为内容边界。
真正起作用的是 <p></p> 的默认 margin。每个 <p></p> 本身就是一个逻辑独立的信息块，它的上下外边距天然形成呼吸感。
- 不要用
<br><br>模拟段落空隙 - 避免在
<p></p>内部手动加<br>实现换行——那是换行，不是分段 - 如需统一控制段落间距，直接改
p { margin: 1.2em 0; }，而不是在 HTML 里塞空行或<br>
块级元素之间要不要空行，取决于逻辑区块
空行不是装饰，是视觉锚点。它告诉读代码的人：“这里开始一个新功能模块”。但空行滥用反而会稀释信号——比如在 <nav></nav> 内部的每个 <a></a> 之间加空行，毫无意义。
-
<header></header>和<main></main>之间必须空一行 -
<section></section>与相邻的<aside></aside>或<footer></footer>之间空一行 - 同一
<ul></ul>下的多个<li>不空行，保持紧凑 - 表单内部的
<label></label>和<input>不空行，但整个<form></form>前后空一行
缩进用空格不用 Tab，2 空格是协作底线
Tab 在不同编辑器里显示宽度不一致，有人设成 2 格，有人设成 4 或 8，协作时一眼看错嵌套层级，比语法错误还难定位。而 2 个空格是确定值，且足够表达父子关系又不浪费横向空间。
立即学习“前端免费学习笔记（深入）”；
- 所有子元素相对于父元素缩进 2 个空格，包括
<div>、<code><section></section>、<ul></ul>等 -
<p></p>、<span></span>这类内联元素不强制缩进，除非内容过长需换行 - 闭合标签（如
）和对应开始标签垂直对齐，不紧贴内容尾部 - 别用 Prettier 自动格式化就以为万事大吉——它不会判断你该不该把
<img alt="统一排版间距：高可读性HTML代码质量编写规范" >放进<figure></figure>，语义决策还得人来定 - 用语义命名：
class="article-intro"比class="big-paragraph"更可靠 - 命名全小写 + 短横线：
user-avatar✅，userAvatar❌，user_avatar❌ - 如果真需要控制间距，用 BEM 的修饰符：
class="card card--tight"，而不是card-mt-16 - 所有间距相关样式，应由 CSS 统一管理，HTML 只负责说“这是什么”，不说“它离上面多远”
class 命名里藏了排版意图，别用样式词当 class 名
像 class="mt-20" 或 class="red-text" 这类名字，看起来方便写 CSS，实则埋下维护雷：设计一改，class 就失效；别人读代码时得反推“这个红色现在还是不是重点？”
<p></p> 加 id，或者在 <main></main> 外再套一层 <div class="wrapper">。语义清晰的结构本身就在控制排版节奏，额外包裹和冗余属性，只会让间距逻辑变得不可预测。</div>
