HTML格式化标签删除线效果用法-html教程-PHP中文网

应优先用表示正式删除（如订单取消），支持 cite/datetime 属性；仅用于内容过时（如旧价格）；二者语义不同、屏幕阅读器播报不同，不可混用。

html格式化标签删除线效果用法

用 `<del></del>` 还是 `<s></s>`？语义决定选哪个

别只看效果一样就随便挑——<del></del> 表示内容被正式删除（比如订单取消、文档修订），支持 cite 和 datetime 属性记录原因和时间；<s></s> 表示内容“不再准确”，比如旧价格、过时地址，不强调删除动作。屏幕阅读器会分别读作 “deleted: …” 和 “strikethrough: …”，无障碍体验差异明显。

常见错误：用 <s></s> 标记已被撤回的合同条款——这其实是法律意义上的删除，该用 <del></del> 才对。

整行表格加删除线不能直接包 `<tr><p><code><del></del>` 和 `<s></s>` 是内联元素，按 HTML 规范不能包裹 `<tr> 或 <code><td>。浏览器会自动修复 DOM，导致样式丢失或结构错乱。 <p>正确做法是为每个 <code><td> 内容单独包裹： <pre class="brush:php;toolbar:false;"><tr> <td><del>Item A</del></td> <td><del>$29.99</del></td> <td><del>In stock</del></td> </tr></pre> <ul> <li>若需统一控制样式（如颜色、粗细），建议额外加 CSS 类，避免重复写 <code><del></del>`
不要用已废弃的 `<strike></strike>` ——它在 HTML5 中无语义，也不被现代可访问性工具识别

纯视觉删除线优先用 `text-decoration: line-through`

如果只是想标个“已完成任务”或“临时屏蔽文字”，没有语义变更需求，直接上 CSS 更轻量、更可控。

注意几个实际坑点：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

text-decoration 会继承，子元素（比如 <strong></strong>）也会带删除线，需手动重置：strong { text-decoration: none; }
想改颜色或粗细？必须三者同设：text-decoration-line: line-through + text-decoration-color + text-decoration-thickness，缺一不可
Safari 15.4 之前、Firefox 97 之前不支持 text-decoration-thickness，旧版会安静降级为默认细黑线，不会报错也不会崩

伪元素 `::after` 是最后的自定义手段

当你要斜穿文字、带动画、随文字变色，或者需要精确控制删除线位置（比如避开某些字符），text-decoration 就不够用了。

这时用 ::after 模拟删除线是唯一可靠方案：

.custom-strike {
  position: relative;
}
.custom-strike::after {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 100%; height: 2px;
  background: #ff6b6b;
  transform: translateY(-50%);
}

关键提醒：伪元素不参与语义，也不被屏幕阅读器识别——所以它只适合纯视觉场景，绝不能替代 <del></del> 或 <s></s> 做语义标记。