必须用于传达不可逆操作、核心风险或关键数据的语义强调，而非视觉加粗；误用会破坏可访问性与seo。
必须用 <strong></strong>，而不是靠 CSS 或 <b></b> 模拟——否则语义就断了，读屏软件和搜索引擎根本“看不见”重点。
什么时候非得用 <strong></strong> 而不是 <b></b>
关键看内容删掉会不会导致用户漏掉不可逆动作或核心风险。不是“想加粗”，而是“你必须注意”。
- 表单错误提示里的判定词：
<strong>邮箱格式不正确</strong>（不是整句都包） - 权限操作动词：
<strong>永久删除</strong>、<strong>不可恢复</strong> - 支付页金额：
<strong>¥1,280.00</strong>（金额本身是关键数据） - 必填字段标记：
<label>手机号 <strong>(必填)</strong></label> - 法律条款责任锚点：
<strong>全部免责条款</strong>，不能只靠样式
<strong></strong> 不能怎么用
语义错位比样式错更难修复，常见误用直接破坏可访问性。
- 整段包裹：
<strong>请仔细阅读以下说明</strong>——稀释重点，读屏软件可能跳过 - 纯品牌露出：
<strong>Apple Watch</strong>——该用<b></b>或 CSS - 段落小标题：
<p><strong>使用说明</strong>：……</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a> <p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p> </div> <a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>——该用<h3></h3> - 嵌套块级标签：
<strong><p>这是段落</p></strong>——HTML 解析会自动修正，语义已损坏 - 用 CSS 强行取消加粗：
<strong style="font-weight: normal">看起来没加粗</strong>——视觉无反馈，但读屏仍强调，造成认知冲突
<strong></strong> 和 <em></em> 别混用
两者语义完全不同：<strong></strong> 是“这事很严重”，<em></em> 是“这话有语气”，混用会让读屏软件读错重点。
- 该用
<strong></strong>：<strong>此操作将清空全部缓存</strong>（后果明确、不可逆） - 该用
<em></em>：这个按钮会删除数据，<em>不是备份</em>（消除歧义，语气补足） - 别嵌套太多层：
<strong><strong>危险</strong></strong>——读屏软件会困惑，实际极少需要 - 副词慎包：
<strong>请立即保存</strong>中“立即”不是风险核心，通常只需包“保存”
最容易被忽略的一点：加粗只是手段，语义才是目的。<strong></strong> 不是“让字变粗的标签”，而是“告诉世界‘这段话你得当回事’的声明”。一旦用错位置，修复成本远高于写错一行 CSS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
