ins 和 del 标签明确标识新增和删除的语义内容，而非仅样式；需显式设置 css 确保跨浏览器渲染；不可直接嵌套块级元素；配合 datetime 和 cite 属性可记录修改时间与依据，但需额外样式或脚本展示。
ins 和 del 标签到底改了什么内容
<ins></ins> 和 <del></del> 是语义化标签，不是装饰用的下划线或删除线样式开关。它们明确告诉浏览器和辅助技术：“这段文字是新增的”“这段文字已被删除”。搜索引擎、屏幕阅读器、版本对比工具都依赖这个语义。如果只是想加样式，用 <span></span> 配 CSS 更合适；用了 <ins></ins>/<del></del> 却没对应实际编辑行为，反而会误导。
怎么写才不会被浏览器忽略样式
默认情况下，<ins></ins> 通常带下划线，<del></del> 带删除线，但部分浏览器（比如旧版 Safari 或某些邮件客户端）可能不渲染，或者渲染得极淡。必须显式声明样式才能稳定生效：
ins {
text-decoration: underline;
background-color: #fff9c4;
}
del {
text-decoration: line-through;
background-color: #ffcdd2;
}
注意：text-decoration 在内联元素中可能被父级 text-decoration 覆盖；如果父容器设了 text-decoration: none，<ins></ins> 的下划线也会消失——这是最常被忽略的坑。
能不能嵌套、能不能放块级元素
<ins></ins> 和 <del></del> 属于「短语内容」（phrasing content），按 HTML5 规范，它们内部**不能直接放 <p></p>、<div>、<code><h2></h2> 这类块级元素**。常见错误写法：
<ins><p>这段新增段落</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/shouce/1862" title="使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件"><img src="https://img.php.cn/upload/manual/000/000/010/170901721079108.gif" alt="使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/shouce/1862" title="使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件" class="overflowclass">使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件</a> <p class="overflowclass">如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更</p> </div> <a rel="nofollow" href="/xiazai/shouce/1862" title="使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div></ins> ❌
正确做法是把语义范围控制在行内：要么只包文字、<em></em>、<strong></strong> 等短语级内容；要么把 <ins></ins> 放到块级标签内部：
<p><ins>这段文字被新增了</ins></p> ✅
配合 datetime 和 cite 属性让修改可追溯
光标悬停看不到修改时间？加上 datetime 就能补全关键上下文：
<ins datetime="2024-06-12T14:30">新增说明</ins> <del datetime="2024-06-10" cite="/docs/old-spec.md">已废弃的参数</del>
datetime 必须是 ISO 8601 格式（如 2024-06-12 或完整带时分秒的 2024-06-12T14:30:00Z），否则无效；cite 指向修改依据来源，可以是 URL 或文档路径，但浏览器不会自动跳转——它主要供脚本解析或静态站点生成器提取变更日志。
真正容易被忽略的是：这些属性对视觉毫无影响，不加 CSS 或 JS 支撑，用户根本感知不到修改时间。要展示出来，得靠额外 DOM 操作或 CSS 伪元素（比如 ins::after { content: ' [' attr(datetime) ']'; }），但这已经超出原生标签能力范围了。
