HTML入门基础（2）-----文本修饰的常用标签

Litheng

已于 2023-03-20 11:37:58 修改

阅读量1.2k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： HTML 文章标签： html 前端 html5

于 2022-12-26 17:21:09 首次发布

本文链接：https://blog.youkuaiyun.com/Litheng/article/details/128446246

HTML 专栏收录该内容

5 篇文章

订阅专栏

文本修饰的常用标签

1.文本加粗效果

b标签和strong标签可以实现文本加粗效果，双标签，基本语法为文本内容，文本内容

b标签和strong标签都可以使文本进行加粗效果，但是strong标签的效果语义更加强烈，对于搜索优化更好，而b标签仅仅是对视觉效果进行优化，对语义没有帮助。为了符合W3C标准，推荐使用strong标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>加粗效果</title>
</head>
<body>
    <b>b 标签</b> <br>
    <strong>strong 标签</strong>
</body>
</html>

效果如下：

2.文本倾斜效果

i标签和em标签可以实现文本的倾斜效果，双标签，基本语法为文本内容，文本内容

两者的区别：i标签仅仅是为了让字体显示斜体，没有强调的语义，em标签不仅能让字体显示斜体，还可以加强语气。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>倾斜效果</title>
</head>
<body>
    <i>i 标签</i> <br>
    <em>em 标签</em>
</body>
</html>

效果如下：

3.删除线效果

s标签和del标签都可以实现删除线效果，双标签，基本语法为<s>文本内容</s>，<del>
文本内容</del>，但是HTML5已经不支持s标签了，建议使用del标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>删除线效果</title>
</head>
<body>
    <s>s 标签</s><br>
    <del>del 标签</del>
</body>
</html>

效果如下：

4.下划线效果

u标签可以实现下划线效果，双标签，基本语法为文本内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>下划线效果</title>
</head>
<body>
    <u>u 标签</u>
</body>
</html>

效果如下：

5.角标效果

角标效果分为上角标和下角标

上角标效果可以用sup标签来实现，双标签，基本语法为需要上角标的文本内容

下角标效果可以用sub标签来实现，双标签，基本语法为需要下角标的文本内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>角标效果</title>
</head>
<body>
    <!-- 上角标 -->
    28<sup>o</sup>C <br>

    <!-- 下角标 -->
    H<sub>2</sub>O<br>
</body>
</html>

效果如下：

6.角标嵌套效果

标签嵌套来实现样视叠加的效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>叠加效果</title>
</head>
<body>
    <!-- 既加粗又倾斜 -->
    <strong><em>加粗倾斜</em></strong>
    <br>
    <!-- 既加粗又删除 -->
    <strong><del>加粗删除</del></strong>
</body>
</html>