标签核心作用是语义标记“内容已被逻辑性删除”，非纯视觉装饰；它支持cite和datetime属性，影响无障碍访问、seo及dom行为，而和text-decoration: line-through无此语义能力。

<del></del> 标签不是为了加删除线而存在，它的核心作用是语义标记：明确告诉浏览器、屏幕阅读器和搜索引擎，“这段文本已被逻辑性删除，当前版本中不再有效”。视觉上的删除线只是默认渲染结果，可被 CSS 覆盖；但语义一旦写入，就影响可访问性、SEO 和 DOM 行为。

为什么不能用 <s></s> 或 text-decoration: line-through 替代

<s></s> 表示内容“不再准确或不再相关”（比如商品原价），不暗示编辑行为；text-decoration: line-through 是纯样式，无任何语义。两者都无法携带 cite 或 datetime 属性，也无法被辅助技术识别为“被删除的内容”。在需要记录修订历史、支持残障用户理解上下文、或对接文档比对系统时，它们会直接失效。

<del></del> 必须闭合，且不能随意包裹块级元素

常见错误包括：<del></del> 单标签写法、嵌套在 <p></p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill8272" title="anything-to-html"><img src="https://img.php.cn/upload/skill/000/000/081/179195588450431.jpg" alt="anything-to-html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill8272" title="anything-to-html" class="overflowclass">anything-to-html</a> <p class="overflowclass">将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。</p> </div> <a rel="nofollow" href="/xiazai/skill8272" title="anything-to-html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> 内却包含未闭合的 <ul></ul>、或跨行粘贴后丢失结束标签。这些都会导致：

• DOM 解析错乱，document.querySelectorAll('del') 漏匹配
• React/Vue 中 key 机制失效，diff 出现意外节点复用
• 屏幕阅读器跳读或重复播报
• 服务端解析时无法提取有效修订时间戳

若需包裹段落或列表，必须显式设置 display: inline-block 或 display: block，否则浏览器会强制扁平化处理，破坏结构。

cite 和 datetime 属性的实际可用性

cite 属性目前没有主流浏览器渲染支持，但会被屏幕阅读器读出，也保留在 DOM 中供 JS 提取；datetime 则被所有现代浏览器识别，格式必须严格为 ISO 8601（如 2024-03-15T14:22:07+08:00），否则属性值无效。JS 可通过 del.dateTime 或 del.getAttribute('datetime') 安全读取——但注意：该值不会自动转为 Date 对象，需手动解析。

真正容易被忽略的是：语义标记本身不保存历史，<del></del> 只是“此刻的快照”。要实现可追溯的修订轨迹，必须配合服务端存档逻辑或前端变更日志机制，否则刷新页面后，所有 datetime 都只是静态字符串。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！