和表达语义强调，和仅表视觉样式；与标记内容增删状态；用于非文本标注如拼写错误；所有标签均限行内使用。
<strong></strong> 和 <em></em> 不是“加粗”和“斜体”的快捷写法，它们表达的是语义强度与语气强调——浏览器默认渲染为加粗/斜体，但可被 CSS 覆盖；而 <b></b> 和 <i></i> 仅表示视觉样式，无语义含义。选错标签会影响可访问性（如屏幕阅读器行为）和 SEO。
什么时候该用 <strong></strong> 而不是 <b></b>
当某段文字在内容逻辑上具有更高重要性或警告意味时，必须用 <strong></strong>。比如表单错误提示、价格变动说明、法律条款关键句。
-
<strong>密码强度不足</strong>：传达严重性，辅助技术会加重语气朗读 -
<b>¥99</b>：只是视觉突出价格数字，不改变其语义权重 - 搜索引擎可能对
<strong></strong>内容赋予略高相关性权重，但不会因此排名跃升 - 若全局 CSS 清除了
strong { font-weight: bold }，<strong></strong>仍保有语义，<b></b>则彻底失去作用
<ins></ins> 和 <del></del> 的真实使用场景
这两个标签不是为了“画删除线”或“加下划线”而存在，而是标记内容的编辑状态：新增或删除。常用于版本对比、法律条文修订、协作编辑界面。
-
<p>本协议自<del>2025年1月1日</del><ins>2026年8月1日</ins>起生效。</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20d3191a227.jpg" alt="DeepBI DHTML 页面生成器" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器">DeepBI DHTML 页面生成器</a> <p>生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur</p> </div> <a href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>：明确展示修改痕迹 - 配合
datetime属性可记录时间：<del datetime="2026-03-15">旧条款</del> - 不要用
<del></del>做“划掉促销价”，那是视觉需求，应改用span+ class + CSS - 部分屏幕阅读器会读出
<ins></ins>为“插入”，<del></del>为“删除”，增强可理解性
<u></u> 标签已被重新定义，慎用
HTML5 中 <u></u> 不再等同于“下划线”，而是表示**非文本标注类内容**：拼写错误、专有名词、中文专名号、翻转注释等。浏览器默认加下划线只是历史兼容表现。
- 正确用法：
<u class="spelling">recieve</u>（配合 CSS 控制样式），表示拼写待确认 - 错误用法：
<u>点击此处下载</u>—— 这会让用户误以为是超链接（下划线是链接的视觉约定） - 若真需下划线装饰，优先用
span+style="text-decoration: underline"或 class -
<u></u>在无障碍检测工具中可能触发警告，除非明确设置了role或上下文说明
最容易被忽略的一点：所有这些标签都只作用于**行内内容**，不能包裹块级元素（如 <p></p>、<div>）。强行嵌套会导致 HTML 验证失败，部分浏览器会自动修复结构，结果不可控。语义化不是贴标签，而是匹配内容意图——多看一眼文案想表达什么，再伸手敲标签。</div>
