当前位置：首页 > 文章列表
>
文章 >
前端 >
HTML中ins和del标签用于标记文本的插入和删除，常用于显示文档的修订版本。以下是它们的基本用法：ins 标签作用：表示插入的文本，通常用于显示新增内容。默认样式：通常会以斜体或下划线显示（可通过CSS自定义）。示例： 这是一段原始文本。这是插入的内容。
HTML中ins和del标签用于标记文本的插入和删除，常用于显示文档的修订版本。以下是它们的基本用法：ins 标签作用：表示插入的文本，通常用于显示新增内容。默认样式：通常会以斜体或下划线显示（可通过CSS自定义）。示例：
这是一段原始文本。这是插入的内容。
del 标签作用：表示删除的文本，通常用于显示被删除的内容。默认样式：通常会以删除线显示（可通过CSS自定义HTML中的ins和del标签远不止是加下划线或删除线的“装饰工具”，而是承载关键语义的修订标记——它们明确告诉浏览器、屏幕阅读器和开发者“此处新增”或“此处删除”，直接影响可访问性、DOM结构稳定性及前端框架的diff逻辑；若误用（如标签未闭合、错误包裹块级元素或粗暴正则转换diff文本），轻则样式错乱，重则导致JS查询失效、React/Vue渲染异常甚至语义丢失；掌握其规范用法、CSS适配技巧与diff安全转换策略，是构建健壮、可维护、无障碍文档修订功能的必备基础。
ins 和 del 必须成对闭合，否则会破坏后续 DOM 操作
常见错误是只写 新内容 不写
document.querySelectorAll('ins') 可能漏掉节点，innerHTML 替换后父容器的 childNodes 顺序错乱，甚至导致 React/Vue 的 diff 失效。务必检查浏览器开发者工具 Elements 面板里标签是否完整嵌套，尤其注意跨行、含换行符或空格的场景。
包裹块级元素时需显式设置 display 样式
浏览器会渲染异常（比如列表项缩进丢失、段落间距塌陷）。解决方法只有两个： 从 正确做法是逐行解析：按 diff 规范识别以 到这里，我们也就讲完了《HTML中ins和del标签用于标记文本的插入和删除，常用于显示文档的修订版本。以下是它们的基本用法：ins 标签作用：表示插入的文本，通常用于显示新增内容。默认样式：通常会以斜体或下划线显示（可通过CSS自定义）。示例： 这是一段原始文本。这是插入的内容。 这是一段原始文本。 这是一段原始文本。 和 、。如果直接这么写：
<ins>
<p>这是新增的一整段</p>
<ul><li>第一项</li></ul>
</ins>
ins 和 del 加 CSS：display: block 或 display: inline-block（后者更安全，避免意外触发 BFC） 分别包每段文字或列表项diff 文本转 HTML 时不能靠正则粗暴替换 +/− 行
git diff 或 API 返回的纯文本 diff（如 + console.log("hello")）不能直接用 str.replace(/^\+/, '') 这类正则处理。原因有三：+ 可能出现在字符串字面量里（如 JSON 中的 "status": "+ok"），误替换会毁掉语义 包裹整块& → &，< → < 等），否则 XSS 风险极高+ 开头且非 +++ 的行，再对内容单独转义并包裹 ；− 行同理处理 cite 和 datetime 属性不是摆设，但要用对场景
cite 应指向解释修改原因的文档 URL，比如 PR 描述页、需求文档链接；datetime 必须是完整 ISO 8601 时间（2026-04-09T14:22:00+08:00），不能只写日期或随便填数字。这两个属性在屏幕阅读器中会被读出，也影响某些 CMS 的版本比对逻辑。但注意：
— 不要填虚构 URL 或空字符串，会降低可信度
— 后端生成时若时间精度不够（如只到天），datetime 值仍需补全时分秒（可用 T00:00:00Z）
— cite 值必须可访问，否则辅助技术可能报错。混用或过度包裹会让 AT 工具（如 NVDA、VoiceOver）朗读混乱，也削弱 diff 的可读性。这是被删除的内容。被删除的内容新增的内容。
移动端CSS媒体查询失效？检查viewport配置是否正确
