21. 删除 del 与插入 ins

本节目标：学会用 del 标记已删除内容、用 ins 标记新插入内容，理解它们的语义和实际应用。

del：标记删除

<del> 标签表示从文档中删除的内容。浏览器默认给它加删除线。

<p>原价：<del>199</del> 元，现价：99 元。</p>

显示效果：原价划了一条线，旁边是新的价格。

ins：标记插入

<ins> 标签表示新插入文档的内容。浏览器默认给它加下划线。

<p>活动时间：<del>7月15日</del><ins>7月20日</ins></p>

del 和 ins 的语义

这两个标签不只是改变外观。它们有明确的语义：

<del> = 这部分内容被删掉了
<ins> = 这部分内容是新增的

典型场景：文档修订记录、商品原价现价、法律条文修改历史、协作文档的编辑痕迹。

cite 和 datetime 属性

<del> 和 <ins> 都可以有两个属性提供额外信息：

cite — 指向解释为什么修改的文档 URL
datetime — 修改发生的时间

<p>
  <del datetime="2026-07-15T10:00" cite="/changelog.html">
    旧版内容
  </del>
  <ins datetime="2026-07-20T14:30" cite="/changelog.html">
    新版内容
  </ins>
</p>

这些属性不会在页面上显示，但对机器可读很有价值。

块级使用

<del> 和 <ins> 不仅可以包裹文字（行内），还可以包裹整段内容（块级）。

<del>
  <p>这一整段内容都被删除了。</p>
</del>

<ins>
  <p>这是新插入的一个完整段落。</p>
</ins>

常见误区

<del> 和 <ins> 是语义标签，不是纯装饰。如果你只是想画条删除线，用 CSS 的 text-decoration: line-through 就好。

s 标签：不再准确的删除线

<s> 标签也表示删除线，但它的语义是**“不再准确或不再相关”**。

<p><s>199元</s> 现在只要99元！</p>

价格曾经标 199 元，现在不是了——不再准确。和 <del> 的区别是：<s> 不表示编辑操作，只表示”过时”。

小结

<del> 标记删除的内容，默认加删除线
<ins> 标记插入的内容，默认加下划线
两者都可以是行内或块级
cite 和 datetime 提供修改原因和时间
用 CSS 画删除线而不表达语义时，用 text-decoration
<s> 表示不再准确，<del> 表示编辑删除