首页 web前端 html教程 html如何给文本文字添加删除线?两种方法添加删除线(实例)

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

Oct 09, 2018 am 11:53 AM
html 删除线

相信大家在各大商场网站浏览时,总是会看到某个产品的原价标记是多少,再在原价上添加一个明显的删除线,表明现在做促销,现价又改成了多少,给用户一个直观的差距感,吸引用户购买!那么这样的删除线效果是如何添加到文本文字上的?本章就给大家介绍html给文本文字添加删除线的两种方法。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

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

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

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

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

html  标签

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>html <strike> 标签</title>
	</head>
	<body>
		<p><strike>这是测试代码,被删除了</strike></p>
	</body>
</html>
登录后复制

效果图:

1.jpg

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

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

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

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

html 标签

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>html <del> 标签</title>
	</head>
	<body>
		<p>原价:<del>20</del>,现在促销价:10</p>
	</body>
</html>
登录后复制

效果图:

2.jpg

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

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

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

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

以上是html如何给文本文字添加删除线?两种方法添加删除线(实例)的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

HTML 中的表格边框 HTML 中的表格边框 Sep 04, 2024 pm 04:49 PM

HTML 表格边框指南。在这里,我们以 HTML 中的表格边框为例,讨论定义表格边框的多种方法。

HTML 中的嵌套表 HTML 中的嵌套表 Sep 04, 2024 pm 04:49 PM

这是 HTML 中嵌套表的指南。这里我们讨论如何在表中创建表以及相应的示例。

HTML 左边距 HTML 左边距 Sep 04, 2024 pm 04:48 PM

HTML 左边距指南。在这里,我们讨论 HTML margin-left 的简要概述及其示例及其代码实现。

HTML 表格布局 HTML 表格布局 Sep 04, 2024 pm 04:54 PM

HTML 表格布局指南。在这里,我们详细讨论 HTML 表格布局的值以及示例和输出。

HTML 输入占位符 HTML 输入占位符 Sep 04, 2024 pm 04:54 PM

HTML 输入占位符指南。在这里,我们讨论 HTML 输入占位符的示例以及代码和输出。

HTML 有序列表 HTML 有序列表 Sep 04, 2024 pm 04:43 PM

HTML 有序列表指南。在这里我们还分别讨论了 HTML 有序列表和类型的介绍以及它们的示例

在 HTML 中移动文本 在 HTML 中移动文本 Sep 04, 2024 pm 04:45 PM

HTML 中的文本移动指南。在这里我们讨论一下marquee标签如何使用语法和实现示例。

HTML onclick 按钮 HTML onclick 按钮 Sep 04, 2024 pm 04:49 PM

HTML onclick 按钮指南。这里我们分别讨论它们的介绍、工作原理、示例以及各个事件中的onclick事件。

See all articles