详解HTML中del标签的删除线样式_通过datetime属性标注时间-html教程-PHP中文网

的删除线由浏览器 ua 样式定义（如 del { text-decoration: line-through; }），非 css 默认行为，可覆盖但移除后语义仍在；datetime 必须双引号包裹且严格符合 iso 8601（如 "2026-06-11t15:30:22+08:00"），非法值将导致机器无法读取时间信息；与语义不同，不可混用或嵌套。

详解html中del标签的删除线样式_通过datetime属性标注时间

del 标签的删除线样式不是 CSS 控制的默认行为

浏览器对 <del></del> 的渲染是内置样式，不是靠 text-decoration: line-through 自动生效——它本质是 UA stylesheet 里写的规则，比如 Chrome 默认有 del { text-decoration: line-through; }。这意味着：你可以用 CSS 覆盖它（比如改成虚线、红底白字），但不能指望删掉样式后“语义还在”；一旦移除所有样式，<del></del> 在视觉上就和普通文本一样，可访问性信息却仍在。

常见错误是以为加了 <del></del> 就等于加了删除线，结果在重置 CSS 的项目里（如某些 UI 框架）发现没效果。这时不是标签失效，而是 UA 样式被覆盖了。解决方法很简单：del { text-decoration: line-through !important; } 不推荐，更稳妥的是显式声明：

del {
  text-decoration: line-through;
  text-decoration-color: #e71d36;
  text-decoration-thickness: 2px;
}

datetime 属性必须带双引号且严格 ISO 8601

datetime 不是装饰字段，它是机器可读的时间锚点。当前时间是 2026-06-11，如果你标记今天发生的删除，合法写法只有：

datetime="2026-06-11" ✅（仅日期，被解析为当日 00:00 UTC）
datetime="2026-06-11T15:30:22+08:00" ✅（含本地时区，推荐）
datetime="2026-06-11T07:30:22Z" ✅（UTC 时间，需确认是否真为 UTC）

以下全错，且浏览器静默忽略：

datetime=2026-06-11 ❌（缺双引号）
datetime="2026/06/11" ❌（斜杠分隔不合法）
datetime="2026-06-11 15:30" ❌（缺 T 和时区，Safari 可能不认）
datetime="2026-06-11T15:30:22" ❌（无时区，部分解析器按本地时区推断，协作时易错位）

前端动态生成时，别用 new Date().toString()，优先用：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

const dt = new Date().toISOString(); // 输出类似 "2026-06-11T15:30:22.123Z"
// 或带本地时区：
const localDt = new Date().toLocaleString('sv-SE', { timeZoneName: 'short' }).replace(' ', 'T');

datetime 错误不会报错，但会彻底丢失语义

浏览器不校验 datetime，控制台也不警告。问题出在下游：屏幕阅读器（如 NVDA）开启详细模式后，只对合法值播报“已删除，2026年6月11日”；非法值则只读“已删除”，时间信息归零。CMS 的修订比对工具、法律存证系统、Git HTML diff 插件，全都依赖这个属性做时间排序和溯源——格式一错，整段修订就可能排到版本历史最开头或末尾，甚至被过滤掉。

容易被忽略的一点是：datetime 值不参与任何 CSS 渲染或 JS 运行时逻辑，但它一旦非法，就无法被任何结构化数据提取器捕获。你看到页面显示正常，不代表机器能读懂它。