和是语义标签而非样式工具：表强重要性，表语气强调；与仅用于视觉突出或特殊语义状态，如品牌名、外文词；、、各有明确语义边界，不可滥用为样式替代。
<strong></strong> 和 <em></em> 是实际开发中最常被误用的两个文本标签——它们不是“加粗”和“斜体”的快捷键，而是语义标记。用错会导致可访问性下降、SEO 偏差，甚至屏幕阅读器读错重点。
什么时候该用 <strong></strong> 而不是 <b></b>
<strong></strong> 表示内容具有强重要性（比如警告、必填项、法律条款中的责任条款），浏览器默认加粗，但关键在语义；<b></b> 仅表示“视觉上要突出”，不带重要性含义（比如产品名、中文里的“某某牌”、关键词高亮）。
- 表单中提示“密码必须包含大写字母” → 用
<strong></strong>，因为这是强制约束 - 文章里写“iPhone 15 Pro” → 用
<b></b>，只是品牌名需视觉区分，无语义权重 - 搜索引擎和读屏软件会把
<strong></strong>内容加重朗读，<b></b>不会 - CSS 可覆盖默认样式，但语义层无法靠样式补救
<em></em> 和 <i></i> 的本质区别
<em></em> 表示强调语气（类似说话时重读），读屏器会改变语调；<i></i> 表示非文本常规语义的特殊状态，比如外文词、科技术语、船名、生物分类名。
- 他说：“我真的没看到” → “真的”用
<em></em>，体现反语或强调 - 文档中首次出现
<i>Homo sapiens</i>→ 正确，符合生物学命名惯例 - 用户昵称“
<i>前端老张</i>”是错的，这里没有语义特殊性，应改用<span></span>+ class 或直接用 CSS 控制样式 - 旧项目里大量用
<i></i>做图标字体（如<i class="icon-home"></i>）已不推荐，应改用<span></span>或专用 icon 标签
<mark></mark>、<small></small>、<del></del> 的典型误用场景
这三个标签常被当成“样式工具”滥用，但它们各自有明确语义边界：
立即学习“前端免费学习笔记（深入）”；
-
<mark></mark>表示页面中与当前用户查询或上下文相关的高亮部分（比如搜索结果页中匹配的关键词），不是“随便标黄”。用它替代<span style="background: yellow"></span>有意义，但若全篇乱标，会稀释语义价值 -
<small></small>专用于免责声明、版权信息、法律细则等次要但需保留的正文内容，不是“缩小字号”的通用手段。浏览器默认缩小，但语义上它仍是正文一部分 -
<del></del>表示已被删除但仍需保留在文档中的内容（比如合同修订痕迹、价格划掉显示原价），不是“装饰性删除线”。若只是想加条线，用 CSStext-decoration: line-through
最易被忽略的一点：所有这些标签都**不自动换行、不自带 margin/padding**，它们是纯内联语义容器。布局和间距得靠 <p></p>、<div> 或 CSS 控制——混用段落结构和内联语义，是 HTML 文本混乱的根源。</div>
