HTML del、ins 标签：显示删除、新增内容与修改日期

HTML <del> 标记文档中已删除的内容，<ins> 标记已插入的内容。尽管它们的默认外观通常是删除线和下划线，但它们的主要目的是传达更改的含义；它们不会自动管理文档版本或保存编辑历史。

完整示例：同时显示已删除和已插入的内容

以下日程公告是一个练习示例。将其保存为 changes.html 并在浏览器中打开，以查看旧值和新值。日期和原因也会显示在可见文本中，以便读者在难以区分颜色或线条时也能理解更改。

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>日程修改示例</title>
</head>
<body>
  <h1>练习聚会：日程修改</h1>
  <p>开始时间:
    <del datetime="2026-10-30" cite="#reason">10:00</del>
    <ins datetime="2026-10-30" cite="#reason">11:00</ins>
  </p>
  <p>原开始时间为10:00，修改后的开始时间为11:00。</p>
  <p id="reason">2026年10月30日，为留出更多准备时间，调整了日程。</p>
</body>
</html>

在典型的默认样式下，10:00 会有删除线，11:00 会有下划线。CSS 可以改变它们的外观。应用 del 不会从数据中删除原始文本，因此不要用它来隐藏密码、个人信息或其他不应公开的内容。

datetime 和 cite 属性的作用

可选的 datetime 属性用于记录更改发生的日期，或日期和时间。示例中的 2026-10-30 是年-月-日格式的日期。如果需要精确时间，可以包括明确的时区偏移，如 2026-10-30T09:00:00+09:00 所示。添加日期不会安排发布，也不会使文档在该时间自动更改。

cite 属性指定解释更改的资源的 URL。示例使用 #reason 指向同一文档中的说明段落。该属性不会自动显示解释或可点击的链接，因此请在可见文本中包含任何必要的原因和日期。

区分文档编辑和装饰性线条

使用 del 和 ins 来表示文档的编辑。对于不再准确或不再适用的信息，如需加上删除线，也应考虑 <s> 的含义。对于纯装饰性线条，请使用 CSS text-decoration。视觉上的相同外观并不意味着意义相同。

屏幕阅读器在默认设置下可能不会宣布每一个删除或插入的边界。对于重要更改，请像示例一样在一句话中解释旧值和新值。不要仅通过颜色区分两种状态，并明确说明当前有效的信息。MDN 的 del 元素参考 和 MDN 的 ins 元素参考 描述了这些元素及其属性。