html如何划掉横线

由于<strike>标签在HTML5中已被废弃，建议避免使用这个标签。可以使用<del>或<s>标签来实现相同的效果。

3、使用CSS实现划线效果

除了使用HTML标签，还可以使用CSS来实现划线效果。这样可以更好地控制样式，并且不影响语义。

<p class="strikethrough">这个段落包含了一些被删除的文本。</p>

.strikethrough {

    text-decoration: line-through;
}

三、应用场景

1、编辑器功能

在文本编辑器中，经常需要提供划掉文本的功能。使用<del>标签是一个很好的选择，因为它不仅提供了视觉效果，还具有语义上的意义。

2、价格对比

在电商网站中，经常需要显示商品的原价和折扣价。可以使用<del>标签来表示原价，使用普通文本来表示折扣价。

<p>原价: <del>¥100</del> 现价: ¥80</p>

3、内容更新

在博客或新闻文章中，经常需要更新内容。使用<del>标签可以清晰地标示出哪些内容被删除或修改。

<p>旧内容: <del>这个功能已经废弃。</del> 新内容: 这个功能已被替换为新的实现方式。</p>

四、兼容性与性能

1、浏览器兼容性

<del>和<s>标签在现代浏览器中的兼容性非常好，可以放心使用。而<strike>标签虽然在一些旧版浏览器中仍然支持，但由于它已被废弃，建议避免使用。

2、性能影响

使用HTML标签或CSS来实现划线效果对页面性能影响很小，基本可以忽略不计。但在大量使用时，仍需注意代码的简洁和优化。

五、总结

在HTML中实现文字划掉横线效果有多种方法，标签、标签、标签各有优缺点。推荐使用<del>标签，因为它不仅提供了视觉效果，还具有语义上的意义，有利于SEO和无障碍设计。避免使用<strike>标签，因为它在HTML5中已被废弃。通过合理选择标签和使用CSS，可以实现更加灵活和优化的划线效果。

p {
  text-decoration: line-through;
}