del 和 ins 标签的语义作用是明确表达内容被删除或插入，而非仅视觉修饰；必须遵守行内元素规则、正确使用 cite 与 iso 8601 格式 datetime 属性，避免样式掩盖语义或嵌套滥用。
del 和 ins 标签的实际语义作用是什么
它们不是简单的“加删除线”或“加下划线”样式工具，而是明确表达内容被删除（del）或插入（ins）的语义。浏览器默认用删除线和下划线渲染，但真正价值在可访问性（屏幕阅读器会读出“已删除”“已插入”）和文档结构表达上。如果只是想视觉强调，用 span + CSS 更合适。
怎么写才符合 HTML 规范
-
del 和 ins 是行内元素，不能包裹块级元素（比如 div、p），否则 HTML 会校验失败；只能包文本、em、strong 等行内容器
- 推荐加上
cite 属性说明修改来源，例如 <del cite="https://example.com/changelog">旧价格</del>
-
datetime 属性必须是完整 ISO 8601 时间（如 2024-03-15T14:30:00Z），不是 2024-03-15 或 14:30，否则会被忽略
常见错误：样式覆盖后语义丢失
del 和 ins 是行内元素，不能包裹块级元素（比如 div、p），否则 HTML 会校验失败；只能包文本、em、strong 等行内容器cite 属性说明修改来源，例如 <del cite="https://example.com/changelog">旧价格</del>
datetime 属性必须是完整 ISO 8601 时间（如 2024-03-15T14:30:00Z），不是 2024-03-15 或 14:30，否则会被忽略很多人直接用 CSS 把 del 的删除线去掉，或把 ins 的下划线改成背景色，结果视觉变了，但屏幕阅读器仍按原语义播报，造成认知错位。如果不想让用户感知“删/增”，就别用这两个标签——改用 span 并加自定义 class。
例如下面这段代码看似合理，实则误导：
<del style="text-decoration: none; color: #999;">已下架</del>
它既没传达删除动作，又让辅助技术误报“已删除”，纯属滥用。
搭配 JavaScript 动态更新时要注意什么
用 JS 插入 del/ins 时，别只靠 innerHTML 拼字符串。DOM 方法更可控：
const oldEl = document.querySelector('.price');<br>const newEl = document.createElement('ins');<br>newEl.dateTime = '2024-03-15T14:30:00Z';<br>newEl.textContent = '¥299';<br>oldEl.replaceWith(newEl);
- 动态生成的
datetime必须确保格式合法，建议用new Date().toISOString() - 避免在
ins里再嵌套del（比如“删了又加回来”），语义混乱，多数屏幕阅读器不支持嵌套播报 - 服务端渲染时若时间戳来自数据库，注意时区转换——
datetime值必须带Z或偏移量（如+08:00）
del 和 ins。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
