html文字排版应优先用语义化标签:每页仅一个表主主题,~逐级嵌套不可跳级,表段落,仅用于段内换行,作主题分隔,保格式,对齐缩进交由css处理。

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











