关键在于理解标签的语义角色：<p>表示独立逻辑段落，自带间距与结构；<br>仅强制换行、无语义；<strong>强调重要性（影响SEO与读屏），<b>仅视觉加粗；标题需严格层级嵌套；重置CSS后须手动恢复<p>间距。
掌握HTML文字排版标签，关键不是背住所有标签名，而是理解每个标签在文档结构中的“身份”和“职责”。用错标签，页面照样能显示，但后续维护、SEO、无障碍访问会陆续出问题。
什么时候该用 <p> 而不是 <br>
<p> 是语义块，<br> 是纯视觉换行。很多人写地址或诗歌时，一股脑塞进一个 <p> 里再狂敲 <br>，结果搜索引擎读不出段落边界，屏幕阅读器念成一整段。
- 用
<p>：每段表达独立意思（如条款、说明、新闻段落） - 用
<br>：同一语义块内强制分行（如地址、诗行、签名档） - 危险信号：如果一段里用了 3 个以上
<br>，大概率该拆成多个<p>或改用<address>等更合适的语义标签
<strong> 和 <b> 的区别不只是加粗效果
视觉上没差别，但浏览器、爬虫、读屏软件会按语义处理它们。<strong> 表示内容重要性提升，会被读屏软件加重语气；<b> 只是“想让它看起来突出”，没有额外含义。
- 用
<strong>：错误提示、必填项说明、安全警告（如<strong>密码必须包含特殊字符</strong>） - 用
<b>：仅需视觉强调且无语义权重（如商品名出现在广告文案中），但更推荐用 CSS class 控制样式 - 重置 CSS 后
<strong>仍保留语义价值，而<b>一旦样式被清空，就彻底“隐身”了
标题层级 <h1>–<h6> 不是字号调节器
标题标签自带默认字号和加粗，但它的核心作用是构建文档大纲。跳级使用（比如 <h1> 后直接跟 <h4>）、重复使用多个 <h1>，都会破坏结构逻辑，影响 SEO 和辅助技术解析。
立即学习“前端免费学习笔记（深入）”；
- 每个页面只应有一个
<h1>，代表主主题（如文章标题、页面核心功能） -
<h2>–<h6>应逐级嵌套，反映内容从属关系（如章节→小节→子项） - 不要靠改标题标签来“调大小”——那是 CSS 的事；滥用
<h3>做副标题样式，等于把楼层编号贴错门牌
为什么注释和默认间距常被忽略却最影响协作体验
注释 <!-- --> 不渲染，但它是代码的“上下文说明书”。没人愿意维护一段没注释的 HTML，尤其当它混着 CSS 重置、响应式断点、临时屏蔽区块时。
- 注释要说明“为什么”，而不是“是什么”（比如写
<!-- 防止 Safari iOS 16.4 下 margin collapse 异常 -->，比<!-- 清除浮动 -->有用得多） -
<p>默认有margin，但全局重置（如* { margin: 0; }）会干掉它，导致段落粘连——最简修复是加p { margin: 1em 0; } - 移动端小屏下，过大的段间距会撑开视口，建议配合
@media (max-width: 768px) { p { margin: 0.8em 0; } }
真正难的不是写出合法 HTML，而是每次敲标签前，先问一句：这段文字在文档里扮演什么角色？机器怎么理解它？人下次打开时能不能一眼看懂意图？
