应优先用而非：表征语义重要性，影响屏幕阅读器停顿、seo加权及wcag合规；仅纯视觉加粗，无语义，合法场景极少，现代开发应优先用css类替代。
<strong></strong> 和 <em></em> 应该优先用于语义化强调，而不是单纯为了加粗或斜体效果；视觉样式交给 CSS 更可靠、更可控。
什么时候该用 <b></b> 而不是 <strong></strong>
当文本需要加粗但**不带重要性语义**时才用 <b></b>，比如产品名、关键词高亮、中文标题中的“重点词”等。浏览器默认渲染为粗体，但屏幕阅读器不会加重语气。
-
<strong></strong>会触发辅助技术的重读提示，适合警告、必填项、权限变更等场景 -
<b></b>在 SEO 和可访问性上无额外价值，纯视觉用途 - 若只是想统一加粗某类元素（如所有
.keyword），用 CSS 的font-weight: bold更灵活
<i></i> 和 <em></em> 的语义边界在哪
<i></i> 表示“区别性文本”，比如拉丁短语 <i>et al.</i>、船名 <i>Titanic</i>、生物学种名；<em></em> 表示“说话时重读的部分”，有明确语义强调作用。
- 写 “
<p>你<em>真的</em>确定吗？</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a> <p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p> </div> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>” —— 语气重心在“真的” - 写 “
<p>请参考 <i>The Web Accessibility Guidelines</i></p>” —— 书名需区分，非强调 - 嵌套
<em></em>（如<em>我<em>真的</em>没看见</em>）是合法的，表示多层语气
<u></u> 不等于下划线 CSS，用错会出可访问性问题
HTML5 中 <u></u> 已不再是“加下划线”的快捷方式，而是语义化标签：表示拼写错误、专名号（如中文人名/地名下划线）、或非文本注释。默认下划线只是浏览器 fallback 渲染。
- 链接自带下划线，不要用
<u></u>包裹链接，否则会叠加、干扰用户识别 - 想给普通文本加装饰性下划线？用
text-decoration: underline+text-underline-offset - 标记错别字：
<u class="spelling"> seperate </u>，再配合 CSS 提示颜色和波浪线
最常被忽略的是：语义标签一旦写错，CSS 很难补救——比如用 <b></b> 替代 <strong></strong>，即使加了 aria-label，也无法让屏幕阅读器自然重读。语义决定行为，样式只是副产品。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
