html标签应按语义选用而非视觉效果：表重要性、表语气强调、用于行内代码、保留空白与换行、表引用；滥用/或+style损害可访问性、seo和维护性。
HTML 本身不提供“格式化文本”的编程式能力，它只负责语义化标记；真正起作用的是标签的默认样式 + CSS 渲染规则。 直接用 <b></b> 或 <i></i> 强行加粗斜体，容易语义错位、可访问性差、后期难维护。
哪些 HTML 标签该用来表达文本意图，而不是“看起来像”
浏览器对某些标签有默认样式（比如 <strong></strong> 默认加粗、<em></em> 默认斜体），但它们的核心价值是传达语义：
-
<strong></strong>表示内容重要性高（屏幕阅读器会加重语气） -
<em></em>表示强调，适合轻量级语气变化 <code>用于内联代码片段，浏览器通常用等宽字体+浅灰背景-
<pre class="brush:php;toolbar:false;"></pre>保留空格与换行，适合日志、JSON 块、命令输出 -
<blockquote></blockquote>表示引用，自带缩进和上下边距
为什么 <div> + <code>style 不是好选择
纯靠 <div style="font-weight: bold"> 实现加粗，问题很实际：
<ul>
<li>无法被辅助技术识别语义，视障用户听不出这是重点</li>
<li>搜索引擎无法区分这段文字是否承载关键信息</li>
<li>后续想统一改强调色或字体，得全局搜 <code>style 属性，而不是改一个 CSS 类
<strong></strong> 的视觉权重，但语义仍需保留——这只能靠 CSS 控制，不能靠删标签
<pre class="brush:php;toolbar:false;"></pre> 和 <code> 容易混淆的边界
二者都常用于显示“非普通段落”，但用途严格不同：
-
<pre class="brush:php;toolbar:false;"></pre>是块级容器，适合多行原始文本（如错误堆栈、配置文件片段），会保留所有空白符和换行 <code>是行内元素，只包裹单个函数名、变量名、命令等，比如console.log()或git commit -m- 别把大段 JSON 塞进
<code>—— 它不是为换行设计的，会导致溢出或折行错乱；应该用<pre class="brush:php;toolbar:false;"><code>...</code></pre>嵌套 - 现代做法：给
<pre class="brush:php;toolbar:false;"><code></code> 加上 <code>class="json"</code>，再配 Prism.js 或 highlight.js 自动着色</pre>
CSS 必须介入的三个典型场景
仅靠原生 HTML 标签远远不够，以下情况必须写 CSS：
- 让
<strong></strong>在深色模式下变成高亮底色而非加粗（避免视觉疲劳） - 控制
<pre class="brush:php;toolbar:false;"></pre>内容水平滚动而非折行：white-space: pre; overflow-x: auto; - 统一所有
<code>元素的字体、字号、背景色，避免各浏览器默认差异（Chrome 和 Safari 对<code>的默认font-family就不同）
最常被忽略的一点：HTML 标签选错，CSS 再怎么补救也救不回语义。比如用 <b></b> 标记 API 错误码，既不能被自动化工具提取为关键字段，也无法在无障碍树中正确归类——这种“格式化”本质是退化。
