在HTML中，给文字加横线通常是指使用“删除线”效果来标示文字，这种效果可以通过HTML的<del>标签或者通过CSS样式来实现。
使用 <del> 标签
HTML中的<del>标签用来表示文档中已被删除的文本，浏览器默认会为<del>标签内的文本添加一条横线，以显示被删除的效果。
<p>原价是 <del>100</del> 元，现在只要 <ins>80</ins> 元！</p>
在上面的例子中，数字“100”会被加上横线，表示这个价格已经被删除或不再适用。
使用 CSS 样式
除了使用<del>标签外，还可以通过CSS的text-decoration属性给文字添加横线。text-decoration属性可以为元素添加下划线、上划线、横线等装饰效果。
方法一：内联样式
你可以直接在HTML元素的style属性中设置text-decoration属性为line-through。
<p style="text-decoration: line-through;">这段文字将带有横线</p>
方法二：内部样式表
如果你有多个需要添加横线的文本，可以使用内部样式表来统一设置。
<head>
<style>
.strikethrough {
text-decoration: line-through;
}
</style>
</head>
<body>
<p class="strikethrough">这段文字将带有横线</p>
<p class="strikethrough">这段文字也将带有横线</p>
</body>
在上面的例子中，我们定义了一个名为.strikethrough的CSS类，并在两个<p>标签中应用了这个类，使得这两段文字都被加上了横线。
方法三：外部样式表
对于大型项目，通常会使用外部样式表来管理所有的样式规则，你可以创建一个CSS文件，然后在HTML文件中链接这个CSS文件。
创建一个名为styles.css的文件，内容如下：
.strikethrough {
text-decoration: line-through;
}
在HTML文件中链接这个CSS文件：
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p class="strikethrough">这段文字将带有横线</p>
<p class="strikethrough">这段文字也将带有横线</p>
</body>
相关问题与解答
Q1: <del>标签和text-decoration有何不同？
A1: <del>是一个语义化的HTML标签，它不仅为文本添加横线，而且向浏览器和搜索引擎传达了这段文字被删除的信息，而text-decoration只是一个视觉上的样式修饰，并不包含任何语义信息。
Q2: 如何取消文字的横线效果？
A2: 如果要取消由<del>标签引起的横线效果，可以将<del>标签改为<span>或者其它不具有特定样式的标签，并确保CSS中没有设置text-decoration: line-through;，如果横线是通过CSS设置的，可以将其设置为text-decoration: none;来移除横线效果。
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/412739.html
微信扫一扫 