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

一、回顾

上一篇文章个大家留了个问题,除了用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/>是自闭合标签,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(上标)的缩写。
语法:<sup></sup>
根据图片尝试写出它的代码:
在这里插入图片描述
④下标标签
在HTML中,我们可以使用“sub标签”来实现文本的下标效果。sub,是subscripted(下标)的缩写。
语法:<sub></sub>
根据图片尝试写出它的代码:
在这里插入图片描述
⑤中划线标签
在HTML中,我们可以使用“s标签”来实现文本的中划线效果。
语法:<s></s>

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

⑥下划线标签
语法:<u></u>

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

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

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

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

相关推荐

  1. Django文章标签推荐

    2024-07-13 09:12:01       49 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-13 09:12:01       67 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-13 09:12:01       72 阅读
  3. 在Django里面运行非项目文件

    2024-07-13 09:12:01       58 阅读
  4. Python语言-面向对象

    2024-07-13 09:12:01       69 阅读

热门阅读

  1. 代码随想录算法训练营第33天

    2024-07-13 09:12:01       25 阅读
  2. 总结:Hadoop高可用

    2024-07-13 09:12:01       26 阅读
  3. 使用Python进行音频处理:掌握音频世界的魔法

    2024-07-13 09:12:01       28 阅读
  4. ssh:(xshell)远程连接失败

    2024-07-13 09:12:01       24 阅读
  5. Hadoop 面试题(十一)

    2024-07-13 09:12:01       26 阅读
  6. 深入理解外观模式(Facade Pattern)及其实际应用

    2024-07-13 09:12:01       21 阅读
  7. MyBatis(17)MyBatis 如何处理枚举类型

    2024-07-13 09:12:01       22 阅读
  8. RIP 路由 3 个定时器的工作流程和 4 种防环方法

    2024-07-13 09:12:01       22 阅读
  9. 【python】函数重构

    2024-07-13 09:12:01       27 阅读
  10. 服务端生成RSA密钥实例

    2024-07-13 09:12:01       25 阅读
  11. Python面试题:解释一下什么是 `__new__` 方法

    2024-07-13 09:12:01       26 阅读
  12. linux UDP通讯:接口函数&示例

    2024-07-13 09:12:01       23 阅读