html如何给文本文字添加删除线？两种方法添加删除线（实例）_JavaScript

上一篇: html按钮怎么设置超链接？html按... 下一篇:小白如何学习html？学习html有哪...

html如何给文本文字添加删除线？两种方法添加删除线（实例）

发布时间：2022-05-16 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了html如何给文本文字添加删除线？两种方法添加删除线（实例），脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

相信大家在各大商场网站浏览时，总是会看到某个产品的原价标记是多少，再在原价上添加一个明显的删除线，表明现在做促销，现价又改成了多少，给用户一个直观的差距感，吸引用户购买！那么这样的删除线效果是如何添加到文本文字上的？本章就给大家介绍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>

效果图：

html如何给文本文字添加删除线？两种方法添加删除线（实例）

如例子中所示，只要在<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>

效果图：

html如何给文本文字添加删除线？两种方法添加删除线（实例）

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

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

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

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

以上就是html如何给文本文字添加删除线？两种方法添加删除线（实例）的详细内容，更多请关注脚本宝典其它相关文章！

脚本宝典总结

以上是脚本宝典为你收集整理的html如何给文本文字添加删除线？两种方法添加删除线（实例）全部内容，希望文章能够帮你解决html如何给文本文字添加删除线？两种方法添加删除线（实例）所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：删除线

上一篇: html按钮怎么设置超链接？html按... 下一篇:小白如何学习html？学习html有哪...

猜你在找的JavaScript相关文章

html font标签如何设置字体大小？html font标签属性用法介绍 2022-05-16
vue3+TypeScript+vue-router的使用方法 2022-04-16
vue3获取当前路由地址 2022-04-16
如何利用React实现图片识别App 2022-04-16
JavaScript展开运算符和剩余运算符的区别详解 2022-04-16
微信小程序中使用vant框架的具体步骤 2022-04-16
Vue elementUI表单嵌套表格并对每行进行校验详解 2022-04-16
如何利用Typescript封装本地存储 2022-04-16
微信小程序中wxs文件的一些妙用分享 2022-04-16
JavaScript的Set数据结构详解 2022-04-16