HTML s 语法
在 HTML4 时代,s 被视为表现层标签(用于画删除线),甚至一度被废弃。但在 HTML5 中,s 标签 “复活”了,并且被赋予了明确的语义:用于表示 “不再准确或不再相关的内容”,比如过时的 “原价” 等。
语法:
<s>要添加删除线的文本</s>说明:
如果你希望带有 “删除” 的语义,应该使用 del 标签。如果你希望文本带有下划线效果,应该使用 CSS 的 text-decoration 属性来实现。
提示: s 是 “strike-through(删除线)” 的缩写。
HTML s 摘要
| 属于 | HTML 标签 |
|---|---|
| 使用频率 | 低 |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
HTML s 示例
接下来,我们通过几个简单的例子来讲解一下 HTML s 标签是如何使用的。
示例 1:s 标签的基本用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h3>新西兰奇异果</h3>
<p>原价:<s>¥6.50/kg</s></p>
<p>现价:<strong>¥4.00/kg</strong></p>
</body>
</html>页面效果如下图所示。

分析:
虽然 s 标签在 HTML5 中有特定的语义(表示过时内容),但如果仅仅是为了给文字添加删除线效果(没有过时的含义),建议使用 CSS 的 text-decoration 属性来实现。
示例 2:使用 CSS 代替 s 标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
span { text-decoration: line-through; }
</style>
</head>
<body>
<h3>新西兰奇异果</h3>
<p>原价:<span>¥6.50/kg</span></p>
<p>现价:<strong>¥4.00/kg</strong></p>
</body>
</html>页面效果如下图所示。

