【网页前端设计HTML】HTML文本标签之换行标签和各类文本标签

5 12霞

于 2024-07-12 23:25:33 发布

阅读量266

点赞数 12

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

本文链接：https://blog.csdn.net/weixin_53597021/article/details/140390361

版权

HTML 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、回顾

上一篇文章个大家留了个问题，除了用P标签实现换行，还可以用什么标签来实现换行？这篇文章，我们一起来探究一下吧。
首先回顾一下，p标签的案例：

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title>段落标签</title>
</head>
<body>
    <h3>爱莲说</h3>
    <p>水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p>
    <p>予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻；莲之爱，同予者何人? 牡丹之爱，宜乎众矣。</p>
</body>
</html>

分析：每个段落都需要一对p标签。在浏览器中观察到的效果是段落与段落之间会隔得比较开，即行间距较大。
那么我们来认识一个换行标签。

二、br标签

从上面的例子我们知道，段落标签是会自动换行的。但是如果想要随意地对文字进行换行处理，该怎么办呢？大家先来看一段代码。

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title>换行标签</title>
</head>
<body>
    <h3>静夜思</h3>                  
    <p>床前明月光，疑是地上霜。举头望明月，低头思故乡。</p>
</body>
</html>

如果要实现：
静夜思
床前明月光，疑是地上霜。
举头望明月，低头思故乡。
这样的效果，有两种方法：一使用两个p标签；二是使用br标签。
在HTML中，我们可以使用br标签来给文字换行。其中 是自闭合标签，br是break（换行）的缩写。
①使用两个p标签

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <h3>静夜思</h3>                  
    <p>床前明月光，疑是地上霜。</p>
    <p>举头望明月，低头思故乡。</p>
</body>
</html>

在这里插入图片描述
②使用br标签：

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title>换行标签</title>
</head>
<body>
    <h3>静夜思</h3>                  
    <p>床前明月光，疑是地上霜。<br/>举头望明月，低头思故乡。</p>
</body>
</html>

在这里插入图片描述

三、文本标签

文本标签有以下几种，重点掌握：strong、em、sup、sub
粗体标签：strong、b
斜体标签：i、em、cite
上标标签：sup
下标标签：sub
划线标签：s、u
字号标签：big、small
①粗体标签
在HTML中，我们可以使用“strong标签”或“b标签”来对文本进行加粗。

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title>粗体标签</title>
</head>
<body>
    <p>这是普通文本</p>
    <strong>这是粗体文本</strong><br/>
    <b>这是粗体文本</b>
</body>
</html>

在这里插入图片描述
②斜体标签
在HTML中，我们可以使用 i 标签、em标签和cite标签来实现文本的斜体效果。

 <i>斜体文本</i><br/>
 <em>斜体文本</em><br/>
 <cite>斜体文本</cite>

在这里插入图片描述
③上标标签
在HTML中，我们可以使用“sup标签”来实现文本的上标效果。sup，是superscripted（上标）的缩写。
语法：
根据图片尝试写出它的代码：

④下标标签
在HTML中，我们可以使用“sub标签”来实现文本的下标效果。sub，是subscripted（下标）的缩写。
语法：
根据图片尝试写出它的代码：
在这里插入图片描述
~~⑤中划线标签~~
在HTML中，我们可以使用“s标签”来实现文本的中划线效果。
语法：<s></s>

<p><s>我爱学习</s>，学习爱我</p>

⑥下划线标签
语法：

<p><u>我爱学习</u>，学习爱我</p>

⑦大字号标签和小字号标签
在HTML中，我们可以使用“big标签”来实现字体的变大，还可以使用“small标签”来实现字体的变小。
例如:

<p>普通字体文本 </p>
<big>大字号文本</big><br/>
 <small>小字号文本</small>

在这里插入图片描述
很晚了，今天就先学到这里了，记得自己要动手实践一下噢！

5 12霞

关注

12
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
【网页前端设计HTML】HTML文本标签之换行标签和各类文本标签

在HTML中，我们可以使用“sup标签”来实现文本的上标效果。在HTML中，我们可以使用“sub标签”来实现文本的下标效果。在HTML中，我们可以使用“big标签”来实现字体的变大，还可以使用“small标签”来实现字体的变小。在HTML中，我们可以使用 i 标签、em标签和cite标签来实现文本的斜体效果。在HTML中，我们可以使用“strong标签”或“b标签”来对文本进行加粗。在HTML中，我们可以使用“s标签”来实现文本的中划线效果。在HTML中，我们可以使用br标签来给文字换行。
复制链接

扫一扫