HTML段落标签、换行标签、文本格式化标签与水平线标签

目录

HTML段落标签

HTML换行标签

HTML格式化标签

加粗标签

倾斜标签

删除线标签

下划线标签

HTML水平线标签


HTML段落标签

在网页中,要把文字有条理地显示出来,就需要将这些文字分段显示。在 HTML 标签中,<p>标签用于定义段落,它可以将整个网页分为若干个段落。

为文本分段可以使用段落标签<p> </p>包裹需要放在一段的文字

<p>这是第一个段落</p>
<p>这是第二个段落</p>

注意:

  1. 在网页界面显示时,段落和段落之间存在一个较大的空隙
  2. 当前的<p>标签描述的段落,前面还没有缩进
  3. 文本在一个段落中会根据浏览器窗口的大小自动换行
  4. HTML 内容首尾处的换行, 空格均无效
  5. 在 HTML 中文字之间输入的多个空格只相当于一个空格.
  6. HTML中直接输入换行不会真的换行,而是相当于一个空格

示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>段落标签</title>
</head>
<body>
    <p>这是第一个段落</p>当前段落内容
    第二行内容
    <p>这是第二个段落</p>当前段落内容
    第二行内容
</body>
</html>

效果如下:

HTML换行标签

在HTML中,常见用<br/>标签表示换行,也可以用<br>标签,但是不规范

📌

注意<br/>标签为单标签

这是第一句话,接下来需要换行<br/>已经换行

示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>段落标签</title>
</head>
<body>
    这是第一句话,接下来需要换行<br/>已经换行
</body>
</html>

效果如下:

HTML格式化标签

在HTML中,可以使用下面的标签实现对应的属性,并且这些标签可以嵌套使用

  1. 加粗: <strong> 标签 和 <b> 标签
  2. 倾斜: <em> 标签 和 <i> 标签
  3. 删除线: <del> 标签 和 <s> 标签
  4. 下划线: <ins> 标签 和 <u> 标签

📌

在四个格式化标签中虽然每一类的第一个标签和第二个标签实现的效果相同,但是为了更加强调文本效果,提高代码可读性,推荐用第一种标签

加粗标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>粗体测试</title>
</head>
<body>
    <h1>下面是加粗文本和非加粗文本的对比</h1>
    <strong>这是一个加粗文本</strong><br>
    这是一个普通文本
</body>
</html>

效果如下:

倾斜标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>倾斜标签测试</title>
</head>
<body>
    <h1>下面是倾斜文本和非倾斜文本对比</h1>
    <em>这是一个倾斜的文本</em><br>
    这是一个普通文本
</body>
</html>

效果如下:

删除线标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>删除线标签测试</title>
</head>
<body>
    <h1>下面是有删除线和没有删除线的文本对比</h1>
    <del>这是有删除线的文本</del><br>
    这是一个普通文本
</body>
</html>

效果如下:

下划线标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>下划线标签测试</title>
</head>
<body>
    <h1>下面是有下划线的文本和无下划线的文本对比</h1>
    <ins>这是一个有下划线的文本</ins><br/>
    这是一个普通文本
</body>
</html>

效果如下:

HTML水平线标签

在HTML中,使用<hr>标签可以在网页上实现水平分割线的效果

📌

注意,水平分割线标签为单标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水平线标签测试</title>
</head>
<body>
    <h1>当前标签下面的横线为水平线</h1>
    <hr>
    这是分割线下方的测试文本
</body>
</html>

效果如下:

相关推荐

  1. HTML格式化文本 pre 标签

    2024-04-20 18:08:06       4 阅读
  2. HTML标签介绍

    2024-04-20 18:08:06       36 阅读
  3. HTML】实现 pre 标签内容超出自动

    2024-04-20 18:08:06       12 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-04-20 18:08:06       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-04-20 18:08:06       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-04-20 18:08:06       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-04-20 18:08:06       20 阅读

热门阅读

  1. 基于simulink的配网自动化仿真

    2024-04-20 18:08:06       15 阅读
  2. html用法

    2024-04-20 18:08:06       13 阅读
  3. Nginx 负载均衡配置

    2024-04-20 18:08:06       17 阅读
  4. 09篇 docker命令详解

    2024-04-20 18:08:06       13 阅读
  5. 在单片机中什么是FLASH

    2024-04-20 18:08:06       18 阅读
  6. MCU的启动流程

    2024-04-20 18:08:06       13 阅读
  7. 设计模式(021)行为型之访问者模式

    2024-04-20 18:08:06       15 阅读
  8. chrome中使用AppEmit调用ocx使用文档,vue调用ocx

    2024-04-20 18:08:06       13 阅读
  9. 安装kafka需优先安装 zookeeper ,scala

    2024-04-20 18:08:06       13 阅读