• :在线测试工具暂时不可用,小伙伴们可以使用本地编辑器来代替,绿叶全新版本正在快马加鞭开发中,比心~

4.4 文本格式化标签

文本格式化标签就是针对文本进行各种格式化的标签,例如加粗、斜体、上标、下标等。

一、粗体标签<b>、<strong>

在HTML中,对文本加粗,可以使用2个标签:<b>或<strong>。

举例:

 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>粗体标签</title>
</head>
<body>
    <p>这是普通文本</p>
    <b>这是粗体文本</b><br/>
    <strong>这是粗体文本</strong>
</body>
</html>

在浏览器预览效果如下:

HTML中strong标签

说明:

<b>标签和<strong>标签加粗的效果是一样的。但是在实际开发中,想要对文本加粗,尽量用<strong>标签,不要用<b>标签,这是由于<strong>标签比<b>标签更具有语义性。也就是说,大家只要记住<strong>标签即可,具体原因我们在“HTML进阶教程”会详细分析。

:大家把上面代码中的换行标签<br/>去掉,看看会出现什么结果?

二、斜体标签<i>、<cite>、<em>

举例:

 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>斜体标签</title>
</head>
<body>
    <i>斜体文本</i><br/>
    <cite>斜体文本</cite><br/>
    <em>斜体文本</em>
</body>
</html>

在浏览器预览效果如下:

HTML中em标签(斜体标签)

说明:

对于要对文本进行斜体设置,尽量用<em>标签,其他两个用得极少。在后续的CSS进阶教程中,我们会慢慢了解到原因。

:大家把上面代码中的换行标签<br/>去掉,看看会出现什么结果?

三、上标标签<sup>

举例:

 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>上标标签</title>
</head>
<body>
    <p>(a+b)<sup>2</sup>=a<sup>2</sup>+b<sup>2</sup>+2ab</p>
</body>
</html>

在浏览器预览效果如下:

HTML中sup标签

说明:

要想将某个数字或文本变成上标形式的效果,就把这个数字或文本放在<sup></sup>标签对内。

四、下标标签<sub>

举例:

 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>下标标签</title>
</head>
<body>
    <p>H<sub>2</sub>SO<sub>4</sub>指的是硫酸分子</p>
</body>
</html>

在浏览器预览效果如下:

HTML中sub标签

说明:

要想将某个数字或文本变成下标形式的效果,就把这个数字或文本放在<sub></sub>标签对内。注意,上标标签是<sup>,下标标签是<sub>,别混乱了。

五、大字号标签<big>和小字号标签<small>

举例:

 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <p>普通字体文本 </p>
    <big>大字号文本</big><br/>
    <small>小字号文本</small>
</body>
</html>

在浏览器预览效果如下:

HTML中big标签和small标签

说明:

大字号标签和小字号标签在实际开发中极少使用,因为这两个标签都是纯样式标签,我们可以用CSS来控制字体的大小。

六、删除线标签<s>

s标签用来呈现那些不再准确或不再相关的内容。

举例:

 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>删除线标签</title>
</head>
<body>
    <p>新鲜的新西兰奇异果</p>
    <p><s>原价:¥6.50/kg</s></p>
    <p><strong>现在仅售:¥4.00/kg</strong></p>
</body>
</html>

在浏览器预览效果如下:

HTML中s标签(删除线标签)

说明:

在实际开发中,删除线效果一般用于商品标价中,大家在淘宝天猫中经常能看到这样的效果。

在我们学了CSS之后,对于删除线效果,一般采用CSS实现,极少使用<s>标签实现。

七、下划线标签<u>

在HTML中,对文本实现下划线效果使用的是u标签。

举例:

 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>下划线标签</title>
</head>
<body>
    <p><u>视觉化思考</u>能以独特而有效的方式,让你的心有更大的空间来解决问题。</p>
</body>
</html>

在浏览器预览效果如下:

HTML中u标签(下划线标签)

说明:

在实际开发中,对文本实现下划线效果,我们往往都是使用CSS来实现,大家可以完全忽略这个u标签。

总结

这节课,准确来说,只需要掌握以下几个重要标签就可以了,因为其他标签完全可以用CSS实现,这些实现方式,我们在“CSS入门教程”会讲解到。

表1 重要的文本格式化标签
文本格式化标签 语义 说明
<strong> strong(加强) 加粗
<em> emphasized(强调) 斜体
<cite> cite(块引用) 斜体
<sup> superscripted(上标) 上标
<sub> subscripted(下标) 下标

此外,顺便说一下,这些标签是要记忆的,大家一定要根据他们的语义来记忆,这是最有效的记忆方法,而且还要辅以练习才可以掌握。我们在“标签的语义”这一节中列举了所有最实用的标签极其语义,以方便大家记忆这些标签。

:本站所有教程均为原创,大部分已经与人民邮电出版社合作出版,禁止转载和抄袭,否则绿叶学习网和人民邮电出版社必将追究法律责任,附录:互联网著作权保护法。【法律顾问:张俊律师】

小伙伴们也可以加一下QQ群,在“群文件”中可以获取学习资源以及配套资源,以及跟其他小伙伴交流,站长也在群内。

(1)QQ群:519225291(暗号:lvye

(2)绿叶学习网常见问题解答

回到顶部