HTML语义化排版优先：用<p>和<h1>~<h6>构建文档骨架，严格遵循层级规则；<br>仅用于段内换行，<hr>用于主题分隔；对齐缩进等视觉控制全交由CSS处理，禁用align属性；<pre><code>用于预格式化内容。
用 <p> 和 <h1>~<h6> 搭出骨架
别一上来就调 margin 或写 CSS，HTML 原生标签本身就能完成 80% 的基础文字排版。浏览器对 <p> 自动加上下外边距，对 <h1>~<h6> 自动加粗、缩放、换行，这是语义和样式天然绑定的结果。
常见错误是把所有标题都写成 <h1>，或用多个 <br> 替代段落分隔——这会让结构混乱、SEO 受损、屏幕阅读器无法理解层级。
- 每个页面只用一个
<h1>，代表主主题（比如文章标题、页面名称） -
<h2>用于一级子模块（如“简介”“功能”“联系方式”），<h3>往下逐级嵌套，不跳级 -
<p>包裹自然段，不要在其中塞<div>或其他块级元素
<br> 和 <hr> 的真实使用场景
<br> 是强制换行，不是分段；<hr> 是内容分隔线，不是装饰横线。两者都该少用，但该用时必须精准。
比如诗歌排版：<p> 包住整首诗，内部用 <br> 控制每句位置；而章节之间用 <hr>，比手动加 <div style="border-top:1px solid #ccc"></div> 更轻量、更语义化。
立即学习“前端免费学习笔记（深入）”；
-
<br>只在段落内需换行但不新建逻辑段时用（如地址、歌词、代码注释行） -
<hr>适合视觉上明显切换内容主题的地方（如“上文是产品介绍，下文是用户评价”） - 避免用
<hr>做“分割空白”——那是 CSSmargin的事
对齐和缩进别靠 align 属性
align="center" 这类属性在 HTML5 中已被废弃，现代浏览器虽仍支持，但 W3C 不再推荐，且与 CSS 冲突风险高（比如你写了 <p align="right">，又在 CSS 里设了 text-align: left，结果不可控）。
真正可控的做法是：给元素加 class，用 CSS 控制。哪怕只是临时快速排版，也建议直接写内联 style：
<p style="text-align: center;">居中段落</p> <h2 style="text-align: right;">右对齐标题</h2>
- 所有对齐、缩进、行高、字间距等视觉控制，都交给 CSS 处理
- 如果项目不允许写 style，至少用 class + 简单的外部 CSS 规则，例如
.text-right { text-align: right; } -
<blockquote>适合引用文本，自带缩进语义，比手动加空格或 padding 更可靠
预格式化文本用 <pre>，不是空格和 <span>
需要保留原始换行、缩进、多空格的文本（比如代码片段、ASCII 图、日志输出），<pre> 是唯一正确选择。它会原样渲染，还默认用等宽字体，这对可读性至关重要。
反例是用一堆 或 <span style="margin-left:20px"> 模拟缩进——既难维护，又破坏语义，复制粘贴还会出问题。
-
<pre>内部可嵌套<code>标签，形成语义组合：<pre><code>console.log("hello");</code></pre> - 若需限制宽度或加滚动条，用 CSS 控制
max-width和overflow-x: auto，不要改 HTML 结构 - 注意：
<pre>会把 HTML 特殊字符（如<）当普通文本显示，如需渲染标签，得先 HTML 编码或用 JS 转义
最容易被忽略的是：排版不是“让文字看起来整齐”，而是“让结构被人和机器都能读懂”。<p> 和 <h1> 不只是样式开关，它们是文档大纲的锚点。跳过语义直接调样式，后面加无障碍支持、SEO 优化、自动化测试时，会反复踩坑。
