HTML中无“格式化标签”标准分类，开发者常称<b><i><u><sub><sup>等为格式化标签，仅改变外观而无语义；应优先使用<strong><em>等语义化标签以提升可访问性、SEO和可维护性。
哪些HTML标签算“格式化标签”而不是语义标签
HTML里没有专门叫“格式化标签”的标准分类，但开发者常把 <b>、<i>、<u>、<sub>、<sup> 这类拿来当视觉样式用的标签统称为格式化标签——它们只改外观，不带语义。
真正该优先用的是语义化标签，比如 <strong> 代替 <b>，<em> 代替 <i>。屏幕阅读器、SEO、可维护性都依赖这个区别。
-
<b>和<strong>渲染效果一样，但前者只是“加粗”，后者表示“内容重要” -
<i>原本是斜体，现在规范里明确用于“不同语调或语境”，比如外文词、船名、术语；日常强调请用<em> -
<u>在 HTML5 中已“洗白”，不再代表下划线装饰，而是表示“非文本标注”，比如拼写错误、专有名词注释——但浏览器默认样式仍是下划线，容易误导
为什么 <pre> 和 <code> 经常一起用却不能互相替代
<pre> 只负责保留空白符和换行，<code> 只表示这段是计算机代码——两者目的完全不同，但组合起来才符合实际需求。
单独用 <pre>：缩进、空格、回车都保留，但没语义，搜索引擎和辅助工具不知道这是代码；单独用 <code>：所有空白被压缩成单空格，缩进全丢，根本没法看结构。
立即学习“前端免费学习笔记（深入）”；
- 正确写法：
<code><pre><code class="js">function hello() {<br> return "world";<br>}</code></pre></code> -
<pre>的white-spaceCSS 属性默认是pre，不可省略；改掉就失效 - 如果内容来自用户输入（比如评论里的代码），记得对
<、>、&做 HTML 实体转义，否则会破坏结构
style="white-space: pre-wrap" 能替代 <pre> 吗
能显示换行和空格，但不是等价替代——它只是 CSS 行为模拟，不提供语义、不保证跨浏览器一致、也不触发 <pre> 的默认字体（如等宽）和行高处理。
典型翻车场景：在移动端 Safari 里，pre-wrap 对连续空格的处理可能和桌面 Chrome 不一致；而且复制粘贴时，<pre> 内容保持原始换行，而 pre-wrap 容器里的文本可能被合并成一行。
- 仅适合临时补丁，比如 CMS 编辑器输出富文本时无法插入
<pre>，才用 CSS 拉一把 - 必须显式设置
font-family: monospace，否则中文/数字对齐错乱 - 不要对整个文章容器加
pre-wrap，它会让段落间空行也变成可见换行，破坏阅读节奏
新手最容易忽略的格式化细节：行内元素嵌套限制
像 <b>、<i>、<em> 这些是严格行内元素，不能直接包块级标签（<p>、<div>、<h3>），否则 HTML 解析器会自动闭合，导致结构意外断裂。
常见现象：写了个 <b><p>标题</p></b>，浏览器渲染时变成 <b></b><p>标题</p>，加粗完全失效。
- 需要整段强调？用
<div>或<section>包住，再用 CSS 控制font-weight - 真要嵌套，请确认子元素也是行内级，比如
<em><span>文字</span></em>是安全的 - 现代框架（React/Vue）模板里，这种嵌套错误常被编译器静默修正，反而掩盖问题，上线后在原生 HTML 环境才暴露
格式化不是“看着像就行”，关键在浏览器怎么解析、辅助工具怎么理解、代码以后好不好改——这三个地方出问题，比样式错位更难排查。
