html如何添加字体删除线

# HTML如何添加字体删除线

在网页设计中，文本装饰是增强视觉效果的重要手段之一。删除线（Strikethrough）作为一种常见的文本修饰方式，常用于表示已删除内容、折扣价格或特殊注释。本文将详细介绍在HTML中添加字体删除线的多种方法，包括HTML原生标签、CSS样式以及相关实用技巧。

---

## 一、使用HTML原生标签实现删除线

HTML提供了两个原生标签可直接实现删除线效果：

### 1. `<s>` 标签
```html
<p>原价：<s>¥999</s> 现价：¥599</p>

效果：¥999
语义：表示不再准确或相关的内容

2. <del> 标签

<p>任务列表：<del>购买食材</del> 烹饪晚餐</p>

效果：购买食材
语义：表示文档中被删除的内容（比<s>更具语义化）

区别：
- <del> 通常用于版本修订场景
- <s> 适用于单纯视觉上的删除线

二、使用CSS实现更灵活的删除线

CSS提供了更强大的控制能力，以下是三种常用方法：

1. text-decoration 属性

<p style="text-decoration: line-through;">此商品已下架</p>

优势：
- 支持与其他装饰组合（如下划线）
- 可通过CSS选择器批量控制

2. 自定义删除线样式

.custom-strike {
  position: relative;
  display: inline-block;
}
.custom-strike::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 2px;
  background: red;
  transform: rotate(-5deg);
}

<span class="custom-strike">限时促销</span>

特点：
- 可自定义颜色、粗细、角度
- 适合创意设计需求

3. 渐变删除线（CSS3）

.gradient-strike {
  background: linear-gradient(transparent 45%, #f00 45%, #f00 55%, transparent 55%);
}

三、高级应用技巧

1. 响应式删除线

@media (max-width: 600px) {
  .responsive-strike {
    text-decoration: line-through;
  }
}

2. 动画删除线

@keyframes strike {
  0% { width: 0; }
  100% { width: 100%; }
}
.animate-strike::after {
  /* ... */
  animation: strike 0.5s ease-out forwards;
}

3. 双删除线效果

.double-strike {
  text-decoration: line-through;
  position: relative;
}
.double-strike::after {
  content: "";
  position: absolute;
  left: 0;
  top: 60%;
  width: 100%;
  height: 1px;
  background: currentColor;
}

四、注意事项

1. 语义化优先：在需要表达”删除”语义时，优先使用<del>标签
2. 可访问性：确保删除线文本仍有足够颜色对比度（WCAG建议至少4.5:1）
3. 浏览器兼容性：
   • 所有现代浏览器均支持基本删除线
   • 自定义样式需测试IE兼容性
4. SEO影响：过度使用删除线可能影响内容可读性

五、实际应用场景

1. 电商价格展示：

<div class="price">
  <span class="original-price"><s>¥1299</s></span>
  <span class="current-price">¥899</span>
</div>

1. 任务管理应用：

<ul>
  <li><del>完成需求文档</del></li>
  <li>进行代码评审</li>
</ul>

1. 教育平台批改作业：

.teacher-correction {
  text-decoration: line-through wavy red;
}

结语

掌握HTML删除线的多种实现方式后，开发者可以根据具体场景选择最合适的方法。对于简单需求，直接使用<s>或<del>标签是最快捷的方案；当需要更精细控制时，CSS提供了无限可能。记得始终平衡视觉效果与语义表达，才能创建出既美观又专业的网页内容。

扩展阅读：
- MDN text-decoration文档
- HTML5语义化标签规范 “`