HTML文字排版应优先用语义化标签：每页仅一个<h1>表主主题，<h2>~<h6>逐级嵌套不可跳级，<p>表段落，仅用于段内换行，作主题分隔，<pre>保格式，对齐缩进交由CSS处理。
直接用 <p>、<h1>~<h6> 和 <pre> 就能搭出清晰、可用、语义正确的文字排版结构——不需要 CSS 也能跑通基础逻辑，但必须按层级和用途选对标签。
怎么选标题标签：h1 到 h6 不是字号开关
标题标签的核心作用是表达内容层级，不是“让字变大”或“加粗”。浏览器默认样式只是辅助呈现，不能反推语义。
-
<h1>每页只能有一个，代表整个页面的唯一主主题（比如文章标题、产品名） -
<h2>是一级子模块（如“功能介绍”“用户反馈”），<h3>是它的子项，依此类推 - 跳级使用（比如
<h1>后直接<h4>）会破坏屏幕阅读器导航和 SEO 权重分配 - 别用
h1做装饰性大字，也别为“看起来小一点”硬降级到h6；该用<p>+ CSS 控制字号时就用它
段落和换行：什么时候用 p，什么时候用 br
<p> 表示一个完整语义段落，浏览器自动加空行；<br> 只是强制换行，不产生新段落，也不带任何语义。
- 地址、歌词、简历中的联系信息等“视觉上分行但逻辑上是一段”的内容，用
<p>包裹，内部用<br>分行 - 不要用多个
<p>模拟单行间距（比如每行都套<p>），这会让 DOM 结构膨胀且语义混乱 -
<hr>不是换行符，也不是装饰线——它是内容主题切换的语义分隔符，比如“上文讲原理，下文是操作步骤”
对齐、缩进、格式化：别碰 align 属性
align="center" 这类属性在 HTML5 中已废弃。它和 CSS 的 text-align 冲突不可控，还绕过可访问性检查。
立即学习“前端免费学习笔记（深入）”；
- 临时调试可直接写
<p style="text-align: center;">，比用align更可靠 - 正式项目建议统一用 class，比如
<p class="text-right">配合外部 CSS 规则 - 需要保留原始空格/缩进/换行的文本（代码、日志、ASCII 图），必须用
<pre><code>组合，而不是手动敲空格或<span>堆样式
为什么结构比样式更难修好
一旦把 <div> 当段落、用 <h2> 写副标题却漏掉 <h1>、或者用 <br> 撑开所有段间距，后续加 CSS 或接入无障碍工具时就会反复返工。结构错，样式越精细越难改——因为你在补救语义漏洞，而不是表达内容本身。
