掌握HTML文字排版核心是理解“语义结构→默认渲染→有意识干预”三步流程：用<p><h1>–<h6>构建真实层级，遵循闭合规范与嵌套规则，区分/（语义）与/（外观），通过CSS在正确语义元素上控制缩进、间距与换行。
掌握 HTML 文字排版，核心不是记住所有标签，而是理解「语义结构 → 默认渲染 → 有意识干预」这三步流程。跳过语义直接写 <b> 和 <span style="font-size:14px">，短期能出效果，长期会卡在对齐错乱、无障碍失败、维护成本飙升上。
用 <p>、<h1>–<h6> 构建真实段落与层级
浏览器对 <p> 和标题标签的默认样式（如上下 margin、字体大小、加粗）是排版起点，不是干扰项。滥用 <div> 包文字或靠 <br> 换行，等于主动放弃这个基础支撑。
-
<p>必须闭合，且不能嵌套<div>、<h2>等块级元素；错误嵌套会导致浏览器静默修正，实际 DOM 结构和你写的不一致 - 每个页面只用一个
<h1>，它代表内容主干，不是“最大的字”；<h2>–<h6>是子级逻辑关系，不是视觉大小滑动条 - 标题之间不要跳级，比如
<h2>后直接写<h4>，屏幕阅读器会丢失结构感知
区分 <strong>/<em> 和 <b>/<i>
前者表达语义（重要性、强调），后者仅表示外观（加粗、斜体）。搜索引擎、语音助手、高对比度模式都依赖前者；而后者在纯视觉场景下可用，但不可替代语义。
-
<strong>默认渲染为加粗，但它的价值在于被 AT（辅助技术）识别为“需提高音量/语速”；<b>只是“画得粗一点” -
<em>触发语调变化，<i>常用于外文术语、船名、思想实验名称等非强调类斜体，MDN 明确建议优先用<em>表达强调 - 不要用
<strong>实现图标旁的文字加粗——那是 CSS 该干的事；语义标签只负责“这是什么”，不负责“怎么画”
控制缩进、间距与换行必须基于语义容器
text-indent、margin、line-height 这些 CSS 属性起效的前提，是它们作用在正确的语义元素上。对 <span> 设 text-indent 无效，对 <p> 设 display: inline 会让缩进失效——这不是 bug，是规范行为。
立即学习“前端免费学习笔记（深入）”；
- 中文首行缩进用
p { text-indent: 2em; }，别用20px；em相对于当前字号，缩放时不会崩 - 段落间距离靠
p { margin-bottom: 1.2em; }，不是靠多个<br>；相邻<p>的 margin 会合并（collapse），这是 CSS 正常机制，不是错误 -
<br>只适用于诗歌、地址、歌词等需要**保留特定换行语义**的场景；普通段落内强行换行，应调整布局容器（如flex或grid）或用white-space控制
避免用注释或空标签“撑结构”
写 <!-- 导航开始 --> 没问题，但靠 <p></p> 或 <div></div> 在页面里“占位留白”，会污染语义树、干扰爬虫、让屏幕阅读器念出无意义停顿。
- 需要垂直留白，调
margin或padding；需要水平分隔，用<hr>（有语义：主题切换）或 CSSborder - 注释只用于解释逻辑，不用于组织 DOM；模块分隔用语义化标签如
<header>、<section>、<article> -
<hr>是自闭合标签，不是装饰线；它表示内容主题的中断，比<div class="divider"></div>更准确
真正难的不是写出 <p>Hello</p>，而是判断什么时候该用 <p>、什么时候该用 <blockquote>、什么时候连标签都不该加——这取决于文字在文档中的角色，而不是它看起来像什么。
