用于语义化分段，自带默认间距；仅强制换行，不替代段落；原样保留空白与换行，专用于代码、ASCII图等场景。

HTML 格式化不是靠“美化工具”一键搞定的，而是由标签语义、空白处理规则和 CSS 协同决定的。直接用 <pre class="brush:php;toolbar:false;">&lt;/code&gt; 或硬塞 &lt;code&gt;&lt;br&gt;&lt;/code&gt; 反而会让结构混乱、可维护性崩塌。&lt;/strong&gt;&lt;/p&gt; &lt;H3&gt;什么时候该用 &lt;code&gt;&lt;p&gt;&lt;/code&gt; 而不是连续 &lt;code&gt;&lt;br&gt;&lt;/code&gt;&lt;/H3&gt; &lt;p&gt;浏览器会忽略源码中的换行和多余空格，所以手动敲回车不会产生段落效果。很多人误用 &lt;code&gt;&lt;br&gt;&lt;/code&gt; 模拟段落，结果是：语义丢失、无法统一控制间距、屏幕阅读器读不出段落边界。&lt;/p&gt; &lt;ul&gt; &lt;li&gt;&lt;code&gt;&lt;p&gt;&lt;/code&gt; 是块级元素，自带上下外边距（&lt;code&gt;margin&lt;/code&gt;），天然表达“一段独立内容”&lt;/li&gt; &lt;li&gt;&lt;code&gt;&lt;br&gt;&lt;/code&gt; 仅表示“此处强制换行”，语义上等于“换行符”，不该承担段落分隔职责&lt;/li&gt; &lt;li&gt;若需取消默认段落间距，改用 CSS：&lt;code&gt;p { margin: 0; }&lt;/code&gt;，而不是删掉 &lt;code&gt;&lt;p&gt;&lt;/code&gt;&lt;/li&gt; &lt;/ul&gt; &lt;H3&gt;&lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;/code&gt; 的真实用途和常见误用&lt;/H3&gt; &lt;p&gt;&lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;/code&gt; 不是“让文字好看点”的格式化开关，它只做一件事：**原样保留所有空白字符（空格、制表符、换行）并按等宽字体渲染**。典型场景只有两类：代码块、ASCII 图、日志输出。&lt;/p&gt; &lt;ul&gt; &lt;li&gt;错误用法：&lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;p&gt;这是一段文字&lt;/p&gt;&lt;p&gt;&lt;span&gt;立即学习&lt;/span&gt;“&lt;a href=&quot;https://pan.quark.cn/s/cb6835dc7db1&quot; style=&quot;text-decoration: underline !important; color: blue; font-weight: bolder;&quot; rel=&quot;nofollow&quot; target=&quot;_blank&quot;&gt;前端免费学习笔记（深入）&lt;/a&gt;”；&lt;/p&gt;&lt;div class=&quot;aritcle_card flexRow&quot;&gt; &lt;div class=&quot;artcardd flexRow&quot;&gt; &lt;a class=&quot;aritcle_card_img&quot; href=&quot;/xiazai/skill12116&quot; title=&quot;DeepBI DHTML 页面生成器&quot;&gt;&lt;img src=&quot;https://img.php.cn/upload/skill/001/246/273/6adaf20d3191a227.jpg&quot; alt=&quot;DeepBI DHTML 页面生成器&quot; &gt;&lt;/a&gt; &lt;div class=&quot;aritcle_card_info flexColumn&quot;&gt; &lt;a href=&quot;/xiazai/skill12116&quot; title=&quot;DeepBI DHTML 页面生成器&quot;&gt;DeepBI DHTML 页面生成器&lt;/a&gt; &lt;p&gt;生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur&lt;/p&gt; &lt;/div&gt; &lt;a href=&quot;/xiazai/skill12116&quot; title=&quot;DeepBI DHTML 页面生成器&quot; class=&quot;aritcle_card_btn flexRow flexcenter&quot;&gt;&lt;b&gt;&lt;/b&gt;&lt;span&gt;下载&lt;/span&gt; &lt;/a&gt; &lt;/div&gt; &lt;/div&gt;</pre> —— <p></p> 在 <pre class="brush:php;toolbar:false;">&lt;/code&gt; 里不会被解析为段落，只会当纯文本显示&lt;/li&gt; &lt;li&gt;正确搭配：&lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;code&gt;console.log('hello');&lt;/code&gt;</pre>，再配合 CSS 设置 font-family: monospace

注意：默认 <pre class="brush:php;toolbar:false;"></pre> 不自动换行，长行会溢出；加 white-space: pre-wrap; 可解决

强调类标签选 <strong></strong> 还是 <b></b>？

二者都渲染为粗体，但语义天差地别：<strong></strong> 表示内容有强重要性（影响 SEO、屏幕阅读器语气），<b></b> 仅表示“视觉加粗”，无语义权重。

• 标题中关键词强调、警告信息、法律条款重点句 → 用 <strong></strong>
• 产品名、人名、短语需要突出但不增加语义权重 → <b></b> 更合适
• <i></i> 和 <em></em> 同理：<em></em> 表示“重读”，<i></i> 用于外文、术语、船名等

为什么 align 属性在现代 HTML 中基本不用了

早期 HTML 允许在 <p align="center"></p> 里写对齐，但现在所有主流浏览器已废弃该属性（HTML5 不再支持），强行使用会导致验证失败、CSS 覆盖失效、响应式错乱。

• 替代方案统一用 CSS：p { text-align: center; }
• 若需局部控制，加 class：<p class="text-right">...</p>，再在 CSS 里定义
• 特别注意：<center></center> 标签已彻底淘汰，不要用

真正难的不是记住哪些标签能“变样式”，而是判断哪段内容该用什么语义标签——因为一旦结构定型，后期改布局、加无障碍、做 SEO 优化，全卡在这一步。空格缩进、引号包裹、闭合规范这些事，VS Code 插件能帮你，但语义选择没人能替你决定。