html语义化排版优先：用和~构建文档骨架，严格遵循层级规则；仅用于段内换行，用于主题分隔；对齐缩进等视觉控制全交由css处理，禁用align属性；用于预格式化内容。

用 <p></p> 和 <h1></h1>~<h6></h6> 搭出骨架

别一上来就调 margin 或写 CSS，HTML 原生标签本身就能完成 80% 的基础文字排版。浏览器对 <p></p> 自动加上下外边距，对 <h1></h1>~<h6></h6> 自动加粗、缩放、换行，这是语义和样式天然绑定的结果。

常见错误是把所有标题都写成 <h1></h1>，或用多个 <br> 替代段落分隔——这会让结构混乱、SEO 受损、屏幕阅读器无法理解层级。

• 每个页面只用一个 <h1></h1>，代表主主题（比如文章标题、页面名称）
• <h2></h2> 用于一级子模块（如“简介”“功能”“联系方式”），<h3></h3> 往下逐级嵌套，不跳级
• <p></p> 包裹自然段，不要在其中塞 <div> 或其他块级元素 <h3> <code><br> 和 <hr> 的真实使用场景

  <br> 是强制换行，不是分段；<hr> 是内容分隔线，不是装饰横线。两者都该少用，但该用时必须精准。

  比如诗歌排版：<p></p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a> <p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p> </div> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> 包住整首诗，内部用 <br> 控制每句位置；而章节之间用 <hr>，比手动加 <div style="border-top:1px solid #ccc"></div> 更轻量、更语义化。

  • <br> 只在段落内需换行但不新建逻辑段时用（如地址、歌词、代码注释行）
  • <hr> 适合视觉上明显切换内容主题的地方（如“上文是产品介绍，下文是用户评价”）
  • 避免用 <hr> 做“分割空白”——那是 CSS margin 的事

  对齐和缩进别靠 align 属性

  align="center" 这类属性在 HTML5 中已被废弃，现代浏览器虽仍支持，但 W3C 不再推荐，且与 CSS 冲突风险高（比如你写了 <p align="right"></p>，又在 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></blockquote> 适合引用文本，自带缩进语义，比手动加空格或 padding 更可靠

  预格式化文本用 <pre class="brush:php;toolbar:false;"></pre>，不是空格和 <span></span>

  需要保留原始换行、缩进、多空格的文本（比如代码片段、ASCII 图、日志输出），<pre class="brush:php;toolbar:false;"></pre> 是唯一正确选择。它会原样渲染，还默认用等宽字体，这对可读性至关重要。

  反例是用一堆   或 <span style="margin-left:20px"></span> 模拟缩进——既难维护，又破坏语义，复制粘贴还会出问题。

  • <pre class="brush:php;toolbar:false;"></pre> 内部可嵌套 <code> 标签，形成语义组合：<pre class="brush:php;toolbar:false;">&lt;code&gt;console.log(&quot;hello&quot;);&lt;/code&gt;</pre>
  • 若需限制宽度或加滚动条，用 CSS 控制 max-width 和 overflow-x: auto，不要改 HTML 结构
  • 注意：<pre class="brush:php;toolbar:false;"></pre> 会把 HTML 特殊字符（如 ）当普通文本显示，如需渲染标签，得先 HTML 编码或用 JS 转义

  最容易被忽略的是：排版不是“让文字看起来整齐”，而是“让结构被人和机器都能读懂”。<p></p> 和 <h1></h1> 不只是样式开关，它们是文档大纲的锚点。跳过语义直接调样式，后面加无障碍支持、SEO 优化、自动化测试时，会反复踩坑。