上一篇
html文字变粗体
在HTML中，使用`
或 标签包裹文字可加粗，如粗体 或粗体
实现HTML文字加粗的常用方法
HTML标签方法
| 标签类型 | 语法示例 | 说明 |
|---|---|---|
<b> | <b>加粗文字</b> | 纯样式标签，无语义含义 |
<strong> | <strong>重要内容</strong> | 语义化标签，表示内容重要性 |
注意：<b> 仅改变字体粗细，而 <strong> 会同时触发浏览器默认的语义强调（如朗读时重音）。
CSS样式方法
| 实现方式 | 语法示例 | 特点 |
|---|---|---|
| 行内样式 | <span style="font-weight:bold;">文本</span> | 直接作用于当前元素 |
| 类选择器 | <span class="bold-text">文本</span>css .bold-text { font-weight: bold; } | 可复用样式，推荐方式 |
| 继承样式 | css .container { font-weight: bold; } | 容器内所有文本均加粗 |
语义化选择建议
| 场景类型 | 推荐方案 | 原因 |
|---|---|---|
| 强调重要内容 | <strong> | 符合W3C语义规范，辅助技术优先识别 |
| 纯视觉加粗 | <b> 或 CSS | 当无需语义时可用 |
| 多处复用 | CSS类 + 语义标签 | 兼顾可维护性与语义化 |
方法对比表
| 特性 | <b> | <strong> | CSS类 |
|---|---|---|---|
| 语义化 | 无 | 高 | 取决于命名 |
| 样式控制 | 固定加粗 | 固定加粗 | 灵活可调 |
| 可维护性 | 低 | 低 | 高 |
| 兼容性 | IE6+ | IE6+ | 全平台支持 |
常见问题解答
Q1：<strong>和<b>标签有什么区别？
A：<strong>是语义化标签，表示内容重要性（如关键词），浏览器会赋予其更强的语义权重；<b>仅实现视觉加粗，无语义含义，推荐在需要强调内容时优先使用<strong>。
Q2：为什么推荐用CSS而不是标签实现加粗？
A：CSS方式能分离内容与样式，提高代码可维护性，例如通过修改.bold-text的样式，可全局调整加粗效果，而无需逐个修改标签，CSS可精确控制加粗程度（如`font-weight:800
