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

文本修饰的常用标签

1.文本加粗效果

        b标签和strong标签可以实现文本加粗效果，双标签，基本语法为<b>文本内容</b>，<strong>文本内容</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>文本内容</i>，<em>文本内容</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标签可以实现下划线效果，双标签，基本语法为<u>文本内容</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>

效果如下：