首页 > 编程 > HTML > 正文

html如何给文本文字添加删除线?两种方法添加删除线(实例)

2020-03-24 17:30:31
字体:
来源:转载
供稿:网友
首页 > web前端 > html教程 > 正文 html如何给文本文字添加删除线?两种方法添加删除线(实例) 2018-10-09 14:22:07 2433 第六期线上培训班
相信大家在各大商场网站浏览时,总是会看到某个产品的原价标记是多少,再在原价上添加一个明显的删除线,表明现在做促销,现价又改成了多少,给用户一个直观的差距感,吸引用户购买!那么这样的删除线效果是如何添加到文本文字上的?本章就给大家介绍html给文本文字添加删除线的两种方法。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

首先我们来看看在html页面上给文本文字添加删除线效果的两种方法分别是什么:

html strike 标签元素实现文本文字添加删除线效果;

html del 标签元素实现文本文字添加删除线效果;

下面我们具体来介绍这两种方法是如何实现文本文字添加删除线效果的,通过简单的例子来介绍。

html strike 标签

strike 标签可定义加删除线文本定义。

 !DOCTYPE html  html  head  meta charset= UTF-8  title html strike 标签 /title  /head  body  p strike 这是测试代码,被删除了 /strike /p  /body  /html 

效果图:

1.jpg

如例子中所示,只要在 strike 标签中添加好文本文字,就可实现想要的效果。 strike 标签可以缩写为 s 标签,实现的效果不变。

Netscape 和 Internet Explorer 都支持这两种写法。

注意: strike 标签( s 标签)在 HTML 4 和 XHTML 中已经不再赞成使用了,意思就是不再使用了;早晚有一天将会消失。

一般都会建议不使用 strike 标签,而改为使用 del 标签实现删除线效果,下面我们就来介绍html del 标签。

html del 标签

del 标签定义文档中已被删除的文本。

 !DOCTYPE html  html  head  meta charset= UTF-8  title html del 标签 /title  /head  body  p 原价: del 20 /del ,现在促销价:10 /p  /body  /html 

效果图:

2.jpg

如例子中所示, del 标签的使用和 strike 标签一样都很简单、方便。并且所有主流浏览器都支持 del 标签。

注意:请与 ins 标签配合使用,来描述文档中的更新和修正。

总结:以上就是本篇文的全部内容,其实除了用上述的两种方法添加删除线,还可以使用css来实现删除线,同时设置删除线样式。后续文章【css如何添加删除线?css text-decoration属性设置删除线(代码实例)】中将会介绍如何使用css设置删除线样式。希望能对大家的学习有所帮助,更多相关教程请访问 HTML视频教程!

相关推荐:php公益培训视频教程

以上就是html如何给文本文字添加删除线?两种方法添加删除线(实例)的详细内容,html教程

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表