HTML s 标签

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>

页面效果如下图所示。

HTML s标签示例

分析:

虽然 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>

页面效果如下图所示。

CSS实现s标签的效果

上一篇: i

下一篇: u

给站长反馈

绿叶网正在不断完善中,小伙伴们如果发现任何问题,还望多多给站长反馈,谢谢!

邮箱:lvyenet@vip.qq.com

「绿叶网」服务号
绿叶网服务号放大
关注服务号,微信也能看教程。
绿叶网服务号