HTML删除线怎么设置_HTML的s和del标签使用教程-html教程-PHP中文网

HTML删除线怎么设置_HTML的s和del标签使用教程

蓮花仙者

发布： 2025-09-21 11:50:01

原创

914人浏览过

<s>标签表示内容不再准确或相关，适用于过时信息如旧价格；2. <del>标签表示内容被删除，适用于文档修订等场景，可配合datetime和cite属性；3. 纯视觉删除线应使用CSS的text-decoration: line-through，用于待办事项完成等无语义变化的情况；4. 选择依据是语义：信息过时用s，内容被删用del，仅视觉效果用CSS。

html删除线怎么设置_html的s和del标签使用教程

HTML删除线可以通过

<s>

登录后复制

和

<del>

登录后复制

这两个语义化标签来实现，它们虽然视觉效果相似，但在语义层面有着显著的区别，各自适用于不同的场景。此外，纯粹的视觉需求也可以通过CSS来满足。

解决方案

在HTML中设置删除线，最直接且语义明确的方式就是使用

<s>

登录后复制

和

<del>

登录后复制

标签。

<s>

登录后复制

标签，全称是“strikethrough”，它表示内容已经不再准确或不再相关。想象一下你在一个网站上看到一件商品的原价，现在打折了，原价就会被划掉。这个被划掉的原价，就是“不再准确”的信息。它告诉读者，这部分内容曾经是正确的，但现在已经过时了。

<p>原价：<s>¥199.00</s> 现价：¥99.00</p>
<p>旧的地址：<s>北京市朝阳区某某路123号</s> 新的地址：北京市海淀区某某路456号</p>

登录后复制

而

<del>

登录后复制

标签，全称是“deleted text”，它表示文档中已被删除或移除的内容。这个标签通常用于标记文档修订、版本控制或者追踪修改。它强调的是“内容被删除”这一行为，而不是仅仅“不再准确”。

<del>

登录后复制

标签还可以配合

cite

登录后复制

属性（指向解释删除原因的URL）和

datetime

登录后复制

属性（表示删除发生的时间）来提供更详细的上下文信息。

立即学习“前端免费学习笔记（深入）”；

<p>这篇文章的草稿中，我们曾写道：<del datetime="2023-10-26T14:30:00Z">“AI将完全取代人类工作。”</del> 经过讨论，此观点已修正。</p>
<p>用户评论：<del>（此评论因违反社区规定已被删除）</del> 谢谢您的反馈。</p>

登录后复制

从视觉上看，浏览器默认都会给这两个标签内的文本添加一条横穿的删除线。但它们背后的语义意图，才是我们选择时真正需要考量的。

<s>

登录后复制

和

<del>

登录后复制

标签在语义上有什么区别？

说到底，这两个标签最大的区别就在于它们所传达的“意图”或者说“语义”。在我看来，理解这一点是正确使用它们的关键。

<s>

登录后复制

标签的语义核心是“不再准确”或“不再相关”。它暗示着内容本身曾经是有效的，但随着时间推移、信息更新，它已经失去了其准确性或关联性。举个例子，一家商店的促销活动，原价被划掉，表示这个价格现在已经不适用了，新的价格才是当前的。它不是说这个价格“被删除了”，而是说它“过时了”。它的作用更像是给读者一个提醒：这部分信息已经失效了，请关注旁边的最新信息。

而

<del>

登录后复制

标签的语义则更为严肃和具体，它强调的是“内容被移除”或“被删除”这一事实。这通常发生在文档修订、版本更新、内容审查等场景。比如，你在编辑一份合同，其中某段条款被删除，这时就应该使用

<del>

登录后复制

来标记。它不仅仅是视觉上的划掉，更是告诉搜索引擎和辅助技术（如屏幕阅读器），这部分内容在文档的当前版本中已经不存在了。它甚至可以配合

datetime

登录后复制

属性，精确到秒地记录内容被删除的时间，这在需要追溯历史修改的场景下尤其有用，比如法律文书或学术论文的修订记录。

简单来说，

<s>

登录后复制

是“这个信息现在不对了”，而

<del>

登录后复制

是“这个信息被拿掉了”。这种区别，对于构建语义清晰、易于理解和维护的网页内容至关重要。

除了

<s>

登录后复制

和

<del>

登录后复制

，还有其他方法可以实现删除线效果吗？

当然有，而且在某些情况下，它可能是更合适的选择。除了这两个语义标签，我们还可以利用CSS的

text-decoration

登录后复制

属性来纯粹地实现视觉上的删除线效果。

text-decoration

登录后复制

属性是一个非常强大的CSS属性，它可以控制文本的装饰线，包括下划线（

underline

登录后复制

）、上划线（

overline

登录后复制

）和删除线（

line-through

登录后复制

）。

智标领航

专注招投标业务流程的AI助手，智能、高效、精准、易用！

117

查看详情

.strikethrough-visual {
  text-decoration: line-through;
}

登录后复制

<p class="strikethrough-visual">这是一段纯粹视觉上被划掉的文字。</p>

登录后复制

什么时候应该用CSS而不是

<s>

登录后复制

或

<del>

登录后复制

呢？答案很简单：当删除线仅仅是为了“好看”或者“表示状态”，而没有“不再准确”或“内容被删除”的语义时。

举个例子，你有一个待办事项清单（To-Do List），当一个任务完成时，你希望它被划掉。这个“划掉”仅仅是表示任务的状态从“未完成”变成了“已完成”，它并没有说这个任务内容本身“不准确”了，也没有说这个任务“被删除了”。在这种情况下，使用CSS的

text-decoration: line-through;

登录后复制

是最恰当的。

<ul>
  <li><span class="strikethrough-visual">完成项目报告</span></li>
  <li>安排会议</li>
  <li>回复邮件</li>
</ul>

登录后复制

这样做的好处是，你将内容的语义（

<li>

登录后复制

表示列表项）和其展示样式（

text-decoration

登录后复制

）清晰地分开了。这符合Web开发的最佳实践，即结构（HTML）、样式（CSS）和行为（JavaScript）分离的原则。如果你为了一个纯粹的视觉效果而滥用

<s>

登录后复制

或

<del>

登录后复制

，反而会给搜索引擎和辅助技术传递错误的语义信息，这在我看来是得不偿失的。

值得一提的是，HTML早期还有一个

<strike>

登录后复制

标签，它的作用就是纯粹地给文本加删除线，但它是一个纯粹的表示性标签，在HTML5中已经被废弃了。所以，我们应该避免使用它，转而使用CSS或者语义更明确的

<s>

登录后复制

和

<del>

登录后复制

。

如何选择合适的删除线标签或样式？

选择正确的删除线方式，其实就是理解你的内容想表达什么。这事儿有点像在厨房里选工具，勺子、叉子、筷子都能吃东西，但吃面条、喝汤、夹菜，各有各的顺手。

核心原则是：语义优先。 始终问自己，我为什么要给这段文字加上删除线？

内容“不再准确”或“不再相关”了？
- 选择：
  <s>
  登录后复制
  标签。
- 场景： 旧价格、过时的信息、错误的描述。比如，你更新了一个产品的规格，旧的规格信息就可以用
```
<s>
```
  登录后复制
  划掉。
- 例子：
```
<p>CPU: <s>Intel i5-9400F</s> Intel i7-12700K</p>
```
  登录后复制
内容“被删除”或“被修订”了？
- 选择：
  <del>
  登录后复制
  标签。
- 场景： 文档修订历史、法律条文修改、用户评论被管理员删除、文章中的错误内容被修正并移除。它强调的是“移除”这个动作。
- 例子：
```
<p>在会议纪要中，<del datetime="2023-10-27T15:00:00Z">我们曾计划推迟项目启动日期</del>，但最终决定按原计划进行。</p>
```
  登录后复制
纯粹是视觉效果，没有语义上的“不准确”或“删除”？
- 选择：CSS
  text-decoration: line-through;
  登录后复制
  。
- 场景： 待办事项清单中已完成的任务、购物清单中已购买的商品、或者任何仅仅需要视觉上划掉但内容本身没有语义变化的场景。
- 例子：
```
<li class="task-completed">完成报告撰写</li>
```
  登录后复制
  （CSS中
```
.task-completed { text-decoration: line-through; }
```
  登录后复制
  ）

在实际工作中，我发现很多人会混淆这几者，或者为了方便直接用CSS。但从长期维护、可访问性（屏幕阅读器对不同标签的处理可能不同）和搜索引擎优化（SEO）的角度来看，正确地使用语义标签是更专业的做法。当你给内容赋予了正确的语义，它就能更好地被机器理解，这对于信息传递的准确性和效率都有着不可忽视的价值。所以，花点时间思考一下你的删除线到底想表达什么，这绝对是值得的。

以上就是HTML删除线怎么设置_HTML的s和del标签使用教程的详细内容，更多请关注php中文网其它相关文章！