语义优先选 <strong>，纯样式需求可用 <b>；<strong> 表示重要性（屏幕阅读器加重），<b> 仅视觉加粗；现代 HTML5 推荐 <strong>，注意避免嵌套、块级误用和滥用样式。
用 <strong> 还是 <b> 给文字加粗？
语义优先选 <strong>，纯样式需求可用 <b>。浏览器默认都渲染为加粗，但 <strong> 表示内容重要性（屏幕阅读器会加重语气），<b> 仅表示视觉加粗（比如关键词、产品名等无语义强调的场景）。现代 HTML5 推荐优先用 <strong>。
<strong> 的基本写法和常见错误
直接包裹文字即可，不需额外属性：
<p>这是一个<strong>重要提醒</strong>，请勿忽略。</p>
容易踩的坑：
- 嵌套错误：比如
<strong><strong>重复嵌套</strong></strong>—— 不报错但冗余，语义不叠加 - 块级误用：把
<strong>当容器放<div>或段落 —— 它是行内元素，不能包含块级标签 - 滥用样式：以为加了
<strong>就能控制粗细程度（如“更粗一点”）—— 实际粗细由字体本身决定，CSS 的font-weight才管这个
需要动态加粗？别用 <b> 拼字符串
如果是在 JavaScript 中生成加粗文本，避免拼接 HTML 字符串引入 XSS 风险：
根据ui图生成前端页面
下载
将一个或多个 UI 原型图、线框图、产品截图或设计稿转换为标准化、可直接交付的 PRD 风格文档，供产品、设计、前端和测试共同使用。适用于 Codex 需要分析 PC 网页、桌面端、移动端、响应式页面、独立弹窗、表单、表格、看板、数据大屏或多页面流程截图，还原页面结构与交互，强制套用固定文档模板，抽取跨页面共享规则，或把一组原型沉淀为单页规范文档加整体业务流程文档的场景。不适用于纯视觉审美点评、代码实现、接口设计、埋点方案、竞品分析或无 UI 输入的业务需求创作。
立即学习“前端免费学习笔记（深入）”；
// ❌ 危险：用户输入未转义
element.innerHTML = '<strong>' + userInput + '</strong>';
// ✅ 安全：用 textContent + 元素插入
const strong = document.createElement('strong');
strong.textContent = userInput;
element.appendChild(strong);
另外注意：若后端返回已含 <strong> 的 HTML 字符串，前端用 innerHTML 渲染时需确保内容可信；否则应先做 HTML 转义或使用 DOMPurify 等库过滤。
CSS 的 font-weight 和 HTML 加粗的关系
HTML 标签加粗本质是触发浏览器默认样式中 font-weight: bold。但如果你自定义了字体，而该字体没有 bold 变体，加粗可能无效或降级为伪粗体（看起来糊）。这时要检查：
- 字体是否加载了
font-weight: 700对应的文件（如font-face中声明了weight: 700） - 是否被其他 CSS 覆盖，比如写了
strong { font-weight: normal; } -
<strong>在某些旧版邮箱客户端中可能不生效，发邮件时更倾向用<b>或内联style="font-weight:bold"
真正影响“是否加粗”的，是最终计算出的 font-weight 值，而不是用了哪个标签 —— 这点在调试时容易被忽略。
