html排版核心是语义正确：用和~实现结构化布局，区分格式与代码语义，禁用align属性，表达重要性与语气强调。
直接用 <p></p> 和 <h1>~<h6></h6>
</h1> 就能完成 90% 的基础排版
别被“技巧”二字带偏——HTML 文字排版不是炫技，而是把语义做对。浏览器默认渲染已足够清晰：<p></p> 自动加段前段后空白，<h1></h1> 到 <h6></h6> 自动缩放字号并带额外间距。强行用 <br> 换行、嵌套 <font></font> 或滥用 <div> 包裹文本，反而破坏可访问性和维护性。
<p>常见错误现象：<code><p></p> 里塞 <h2></h2>、连续写三个 <p></p> 只为多空两行、给标题加 align="center" 却不配 CSS。这些做法在现代项目中基本等于埋雷。
- 每个
<p></p>应承载一个完整语义单元（比如一句话观点，或一段解释），不是“换行工具” -
<h1></h1>全页只能出现一次，且必须是页面主标题；子级标题严格按层级递进（<h2></h2>→<h3></h3>） - 对齐、颜色、字体等样式问题，交给 CSS 控制，HTML 标签只负责“这是标题”“这是段落”
<pre class="brush:php;toolbar:false;"></pre> 和 <code> 的区别不能只看渲染效果
很多人看到两者都显示等宽字体，就混用。但语义完全不同：<pre class="brush:php;toolbar:false;"></pre> 表示“保留原始格式的文本块”，包括空格、缩进、换行；<code> 表示“一段内联代码片段”，必须嵌套在段落或其他块级元素中。
典型误用：<pre class="brush:php;toolbar:false;"></pre> 里写大段说明文字（本该用 <p></p> + CSS）、把单个函数名包成 <pre class="brush:php;toolbar:false;"></pre>、或用 <code> 直接包裹多行代码（会丢失换行和缩进）。
- 展示命令行输出、JSON 结构、或带缩进的 HTML 片段 → 用
<pre class="brush:php;toolbar:false;"><code></code> 嵌套（<code><pre class="brush:php;toolbar:false;"></pre>管格式，<code>管语义） - 文中提到一个变量名
userList或函数fetchData()→ 单独用<code> -
<pre class="brush:php;toolbar:false;"></pre>内容若含用户可控输入，需做 HTML 实体转义，否则可能触发 XSS
别碰 align 属性，它早已被废弃
你在老教程里看到的 <p align="center"></p> 或 <h2 align="right"></h2>，在 HTML5 中属于过时用法，W3C 不再推荐，主流浏览器虽仍支持，但校验器会报错，且与 CSS Flex/Grid 布局冲突。
真实场景中，居中标题、右对齐引用、两端对齐正文——全靠 CSS。用内联 style 是临时方案，长期应走 class + 外部样式表。
- 居中标题：用
text-align: center配合 class，而不是align属性 - 右对齐引文：给
<blockquote></blockquote>加text-align: right，比硬编码align="right"更灵活 - 响应式对齐（如移动端左对齐、桌面端居中）：必须用媒体查询 + CSS，
align属性完全无解
<strong></strong> 和 <em></em> 不是“加粗”和“斜体”的快捷键
它们是语义标签：<strong></strong> 表示内容有强重要性（屏幕阅读器会加重语气），<em></em> 表示强调某词的语义重点（类似说话时重读）。而 <b></b> 和 <i></i> 仅表示视觉样式，无语义权重。
容易踩的坑：用 <strong></strong> 给品牌名加粗（应是 <span></span> + CSS）、在技术文档里把所有命令都包成 <em></em>（其实该用 <code>）、或者以为 <em></em> 就是“让读者注意这里”——实际它表达的是“这个词在这句话里承担特殊语义角色”。
- 密码规则提示中，“必须包含数字”里的“数字” → 用
<strong></strong>，因为它是强制要求 - 句子“你**真的**确定要删除？”中的“真的” → 用
<em></em>，因为它是语气强调点 - 命令
git commit -m "init"→ 整体用<code>，不要拆开加<strong></strong>
<p></p>、哪个词值得用 <em></em> 而不是 <strong></strong>。这种判断力来自反复阅读规范文档 + 审查自己写的 HTML 是否能被屏幕阅读器自然朗读出来。
