应使用<strong>包裹警告文字并嵌套于<div>或<p>中，因其语义明确、可访问性强；<b>无语义，纯CSS加粗无法向辅助技术传递警告含义。
直接用 <strong> 包裹警告文字，再配合 <div> 或 <p> 容器加样式，是最轻量、语义正确且可访问的方案。别用 <b> 或纯 CSS 加粗——前者无语义，后者对屏幕阅读器不传递“这是警告”的信号。
为什么必须用 <strong> 而不是 <b>
浏览器默认把 <strong> 渲染为粗体，但这只是副作用；它的核心价值是向辅助技术声明「这段内容有操作后果或安全风险」。比如：
-
<p><strong>此操作不可撤销</strong>，确认后将永久删除所有数据。</p>→ 屏幕阅读器会加重语气读出“此操作不可撤销” -
<p><strong>API_KEY</strong> 不得暴露在前端代码中</p>→ 搜索引擎和代码扫描工具能识别高危关键词 - 用
<b>替代，等于告诉机器：“这只是看着显眼，但不重要”
警告提示容器怎么写才不踩坑
单独一个 <strong> 标签不能撑起完整提示，必须嵌套在语义合理的块级容器里。常见错误是直接写 <strong>警告：...</strong> 而不加外层结构。
- ✅ 推荐：
<div class="alert alert--warning"><strong>⚠️ 警告：</strong>密码强度不足</div>—— 外层<div>提供布局与样式作用域，<strong>锁定关键短语 - ❌ 避免：
<strong><div>警告：...</div></strong>——<strong>是行内元素，不能包裹<div>，HTML 校验失败，部分旧浏览器会自动拆解结构 - ⚠️ 注意：如果警告要出现在段落中（如表单说明），用
<p>包裹更自然：<p>请确认邮箱格式正确，<strong>错误格式将导致验证失败</strong>。</p>
样式怎么加才不影响语义有效性
你可以完全重置 <strong> 的视觉表现，只要不删掉标签本身——它的语义不会因 CSS 改变而丢失。
立即学习“前端免费学习笔记（深入）”；
- 想让它变红+带图标？没问题：
strong { color: #d32f2f; font-weight: normal; } strong::before { content: "⚠️ "; } - 想隐藏文字只留图标给屏幕阅读器？加
strong { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }，再用aria-label补充说明 - 别写
strong { display: block; }—— 这会破坏行内流，可能引发布局错位，尤其在内联文本中
最常被忽略的一点：警告提示是否出现在 DOM 正确位置。比如表单校验错误，<strong> 必须紧跟在对应输入框之后或内部 <label> 里，否则屏幕阅读器无法建立关联。视觉上靠左对齐、顶部留空、加边框底色这些事，都比不上 DOM 结构的语义连通性。
