在HTML中为文字添加垂直划线，通常是指给文本添加删除线效果，这种效果可以通过使用HTML的<del>标签或者通过CSS样式来实现，下面将详细介绍这两种方法。
使用 <del> 标签
HTML中的<del>标签用于表示文档中已被删除的文本，浏览器默认会为<del>标签内的文本添加一条中线，表现为被划掉的效果。
<p>这个商品原价是<del>100</del>元，现在只要<ins>80</ins>元！</p>
在上面的例子中，<del>标签包围的“100”会被显示为带有删除线的文字，而<ins>标签则用于表示插入的文本，这里用来显示新的价格。
使用 CSS 样式
除了使用<del>标签外，我们还可以通过CSS的text-decoration属性来给元素添加删除线。text-decoration属性可以应用于任何HTML元素，它不仅可以添加删除线，还可以添加下划线或上划线。
方法一：内联样式
内联样式是直接在HTML标签中使用style属性来定义样式。
<p style="text-decoration: line-through;">这段文字将显示为带删除线的文字。</p>
方法二：内部样式表
内部样式表是将CSS样式规则写在HTML文档的<head>部分中的<style>标签内。
<head>
<style>
.strikethrough {
text-decoration: line-through;
}
</style>
</head>
<body>
<p class="strikethrough">这段文字将显示为带删除线的文字。</p>
</body>
方法三：外部样式表
外部样式表是最专业的应用方式，它涉及创建一个独立的CSS文件，并在HTML文件中引用该文件。
假设你有一个名为styles.css的文件，内容如下：
.strikethrough {
text-decoration: line-through;
}
然后在你的HTML文件中链接这个CSS文件：
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p class="strikethrough">这段文字将显示为带删除线的文字。</p>
</body>
相关问题与解答
Q1: 如何取消HTML元素的删除线？
A1: 要取消一个HTML元素的删除线，你可以将text-decoration属性设置为none，无论是使用内联样式、内部样式表还是外部样式表，都可以通过指定text-decoration: none;来达到这个效果。
Q2: <del>标签是否会影响SEO（搜索引擎优化）？
A2: 使用<del>标签不会直接影响SEO，因为它是一个被认可的HTML标签，用于语义化地标记内容变化，频繁地使用可能会影响内容的可读性，从而间接影响用户体验和SEO，建议适度使用，并确保页面上有足够的未修改内容来提供价值。
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/293196.html
微信扫一扫 