要在网页中添加删除线，可以使用HTML的<del>标签、CSS的text-decoration: line-through;属性、JavaScript操作DOM。其中，使用CSS的text-decoration: line-through;属性是最常见的方法，因为它灵活、易于控制，并且可以与其他样式混合使用。具体方法如下：
使用HTML的<del>标签：这是最简单的方法，但它在语义上意味着文本被删除，适用于需要保留被删除内容的场景。
<p>This is an example of <del>deleted text</del>.</p>
使用CSS的text-decoration: line-through;属性：这种方法更灵活，可用于任何元素，并且不改变文档的语义。
<p>This is an example of <span style="text-decoration: line-through;">strikethrough text</span>.</p>
接下来，我们将详细探讨这些方法的实现和它们的实际应用场景。
一、使用HTML标签实现删除线
1、<del>标签
<del>标签用于表示被删除的文本，通常会显示为带删除线的文本。这种方法非常简单，但它在语义上表示文本被删除。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Deleted Text Example</title>
</head>
<body>
<p>This is an example of <del>deleted text</del>.</p>
</body>
</html>
2、<s>标签
<s>标签表示不再准确或不再相关的文本，也会显示为带删除线的文本。与<del>不同的是，它在语义上更适合表示修正或替换的内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Strikethrough Text Example</title>
</head>
<body>
<p>This is an example of <s>strikethrough text</s>.</p>
</body>
</html>
二、使用CSS实现删除线
1、内联样式
直接在HTML元素中使用style属性添加删除线。这种方法快捷，但不适合大规模应用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inline CSS Example</title>
</head>
<body>
<p>This is an example of <span style="text-decoration: line-through;">strikethrough text</span>.</p>
</body>
</html>
2、内部样式表
在HTML文档的<head>部分使用<style>标签定义CSS规则。这种方法适合单个页面的样式控制。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Internal CSS Example</title>
<style>
.strikethrough {
text-decoration: line-through;
}
</style>
</head>
<body>
<p>This is an example of <span class="strikethrough">strikethrough text</span>.</p>
</body>
</html>
3、外部样式表
将CSS规则定义在单独的CSS文件中，然后在HTML文档中引用。这是最推荐的做法，适合多页面或大型项目。
styles.css:
.strikethrough {
text-decoration: line-through;
}
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>External CSS Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>This is an example of <span class="strikethrough">strikethrough text</span>.</p>
</body>
</html>
三、使用JavaScript动态添加删除线
1、通过DOM操作
使用JavaScript，可以动态添加或移除删除线，这在需要动态更新内容的应用中非常有用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Example</title>
<style>
.strikethrough {
text-decoration: line-through;
}
</style>
</head>
<body>
<p id="text">This is an example of strikethrough text.</p>
<button onclick="addStrikethrough()">Add Strikethrough</button>
<button onclick="removeStrikethrough()">Remove Strikethrough</button>
<script>
function addStrikethrough() {
document.getElementById('text').classList.add('strikethrough');
}
function removeStrikethrough() {
document.getElementById('text').classList.remove('strikethrough');
}
</script>
</body>
</html>
2、结合事件监听器
可以结合事件监听器实现更复杂的交互，比如在用户点击某个元素时添加或移除删除线。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event Listener Example</title>
<style>
.strikethrough {
text-decoration: line-through;
}
</style>
</head>
<body>
<p id="text">This is an example of strikethrough text.</p>
<button id="toggleButton">Toggle Strikethrough</button>
<script>
document.getElementById('toggleButton').addEventListener('click', function() {
var textElement = document.getElementById('text');
textElement.classList.toggle('strikethrough');
});
</script>
</body>
</html>
四、实际应用场景
1、内容管理系统（CMS）
在内容管理系统中，经常需要标记被删除或不再相关的内容。使用删除线可以直观地展示这些变化。
<p>This is the original content. <del>This content has been deleted.</del></p>
2、购物车应用
在购物车应用中，常常需要显示折扣价格。使用删除线可以直观地展示原价与折扣价。
<p>Original Price: <span style="text-decoration: line-through;">$100</span></p>
<p>Discounted Price: $80</p>
3、评论系统
在评论系统中，管理员可能需要标记某些违规或不适当的评论。使用删除线可以保留原始内容，同时表明该内容已被标记。
<p>This comment is inappropriate: <del>This is a bad comment.</del></p>
4、项目管理系统
在项目管理系统中，比如研发项目管理系统PingCode或通用项目协作软件Worktile，删除线可以用于标记已完成的任务或不再需要的项目项。
<ul>
<li>Task 1: <span style="text-decoration: line-through;">Completed</span></li>
<li>Task 2: In Progress</li>
<li>Task 3: Not Started</li>
</ul>
五、最佳实践
1、语义化标签
尽量使用语义化标签（如<del>和<s>）来标记删除内容，这不仅有助于SEO，还能提高可读性和可维护性。
2、CSS 优先
在大多数情况下，使用CSS来实现删除线是最佳选择。它不仅灵活，而且可以与其他样式规则结合使用。
3、JavaScript 动态控制
在需要动态更新内容的场景下，使用JavaScript来控制删除线的添加和移除是非常有效的做法。
4、一致性
确保在整个项目中使用一致的方法来实现删除线，这有助于代码的可维护性和团队协作。
总之，添加删除线的方式多种多样，选择合适的方法取决于具体的应用场景和需求。无论是使用HTML标签、CSS样式还是JavaScript动态操作，都应遵循最佳实践，以确保代码的可读性、可维护性和用户体验。
相关问答FAQs：
1. 如何在网页中添加删除线？
要在网页中添加删除线，您可以使用HTML标记语言中的<del>标签。只需将要添加删除线的文本包含在<del>标签中即可。例如，要在网页中添加删除线的文本“Hello World”，可以这样写：
<del>Hello World</del>
这将使“Hello World”显示为带有删除线的文本。
2. 如何在网页中删除删除线？
要从网页中删除删除线，只需将包含删除线的文本的<del>标签删除即可。例如，如果您有一个带有删除线的文本“Hello World”：
<del>Hello World</del>
只需将<del>标签删除，文本将恢复为普通文本，不再显示删除线：
Hello World
3. 如何在特定条件下添加或删除网页中的删除线？
要根据特定条件在网页中添加或删除删除线，您可以使用JavaScript来实现。通过在特定条件下添加或删除HTML标签中的<del>标签，您可以动态地控制删除线的显示和隐藏。例如，您可以使用JavaScript编写一个函数，在满足某个条件时添加删除线，否则删除删除线。以下是一个简单的示例：
function toggleStrikethrough(condition) {
var text = "Hello World";
var element = document.getElementById("textElement");
if (condition) {
element.innerHTML = "<del>" + text + "</del>";
} else {
element.innerHTML = text;
}
}
在上面的示例中，函数toggleStrikethrough接受一个条件作为参数。如果条件为真，它将在具有id为"textElement"的元素中添加删除线，否则将删除删除线。您可以根据自己的需求修改函数来实现特定条件下的删除线操作。
文章包含AI辅助创作，作者：Edit1，如若转载，请注明出处：https://docs.pingcode.com/baike/2932520
