这些标签的核心作用是表达语义而非仅改变样式：表强重要性，表语气强调，用于附属细则，标记上下文相关引用，和配合datetime表示带时间戳的删除与插入。

<p></p>、<strong></strong>、<em></em>、<small></small>、<mark></mark>、<del></del>、<ins></ins> 这些标签不是为了“让文字变样”而存在，它们的核心作用是表达语义——告诉浏览器、屏幕阅读器和搜索引擎“这段文字在内容逻辑上意味着什么”。

为什么不能只用 <b></b> 和 <i></i>？

很多初学者习惯用 <b></b> 加粗、<i></i> 斜体，但这两个标签只描述外观，不传递含义。<strong></strong> 表示内容具有强重要性（会被屏幕阅读器加重朗读），<em></em> 表示强调语气（语调变化）。搜索引擎和辅助技术依赖这种区别。

• <b></b>：纯视觉加粗，比如产品名、关键词、未定义重要性的短语
• <strong></strong>：需要用户特别注意的内容，如警告、必填项说明、法律条款重点
• <i></i>：表示技术术语、外语词、船名、生物分类名等特殊用法，非语气强调
• <em></em>：真正要“读出来时重音”的部分，比如“你不能删除此文件”中的“不能”适合用 <em></em>

<mark></mark> 和 <small></small> 的真实使用场景

<mark></mark> 不是“高亮背景色”的 CSS 替代品，而是标记文档中与当前上下文相关的**匹配或引用内容**。例如搜索结果页中关键词高亮、文章中被引用的原文片段、代码示例中被指出的某一行。

<small></small> 也不是“调小字号”的快捷方式，它专用于**附属细则类文本**：版权信息、免责声明、脚注、许可协议链接旁的“点击查看”提示等。浏览器默认渲染为小号字，但语义才是关键——它会降低该段内容在文档大纲中的权重。

• 错误用法：<small>欢迎光临！</small>（这不是细则，只是想让欢迎语小一点）
• 正确用法：<p>本服务受<small>《用户协议》</small>约束。</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf"><img src="https://img.php.cn/upload/skill/000/000/081/178956546773641.jpg" alt="html-ppt-to-pdf" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="overflowclass">html-ppt-to-pdf</a> <p class="overflowclass">将使用 `<section class="slide">` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。</p> </div> <a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>
• 兼容提示：某些旧版 IE 对 <small></small> 默认样式支持弱，需配合 font-size: 80% 微调

<del></del> 和 <ins></ins> 要配合时间戳才完整

仅用 <del></del> 划掉旧价格、<ins></ins> 标出新价格，对机器而言只是“删了又加”，无法判断修改发生的时间和依据。W3C 推荐在必要时添加 datetime 属性：

<p>原价：<del datetime="2026-08-15">¥199</del> 现价：<ins datetime="2026-08-20">¥149</ins></p>

• 没有 datetime 时，语义仍成立，但失去可追溯性
• 日期格式必须是 ISO 8601（YYYY-MM-DD 或完整带时分秒），否则无效
• 不要用 <del></del> 模拟“禁用按钮”或“不可点击链接”——那是 CSS + disabled / aria-disabled 的职责

最容易被忽略的一点：这些文本标签本身不带默认 margin 或 padding，但浏览器 user agent stylesheet 会给 <p></p>、<h1></h1>～<h6></h6> 等块级文本标签加空白。如果你发现 <strong></strong> 套在 <p></p> 里后行距异常，问题往往不在 <strong></strong>，而在父级 <p></p> 的默认样式被覆盖或重置了。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！