html标签学习之排版标签

最新推荐文章于 2025-08-15 20:44:49 发布

原创最新推荐文章于 2025-08-15 20:44:49 发布 · 503 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html #学习

本文介绍了HTML中的基础标签，包括h系列的标题标签，用于区分内容的重要程度；p标签，用于创建段落；br标签，实现文本强制换行；以及hr标签，用于在页面中添加水平线，分割内容。

1.标题标签

代码：h系列标签

    <h1>1级标题</h1>
    <h2>2级标题</h2>
    <h3>3级标题</h3>
    <h4>4级标题</h4>
    <h5>5级标题</h5>
    <h6>6级标题</h6>

语义：1~6级标题，重要程度依次递减

特点：（1）文字都有加粗

（2）文字都有变大，并且从h1~h6文字逐渐变小

（3）独占一行

代码如下：

<!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>
    <!-- 此为注释内容 -->
    <h1>1级标题</h1>
    <h2>2级标题</h2>
    <h3>3级标题</h3>
    <h4>4级标题</h4>
    <h5>5级标题</h5>
    <h6>6级标题</h6>
</body>
</html>

2.段落标签

应用场景：文章的页面中，用于分段显示。

代码：<p>我是一段文字</p>

语义：段落

特点：（1）段落之间存在间隙

（2）独占一行

代码如下：

<!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>
    <p>在见过深刻的黑喑，最凶的罪孽，最丑的可怕以后，我依旧幸运，我见过光辉，见过心地善良，见过最美丽的人的内心对啊，我依旧感谢，我亲眼见过那一片白色橄榄树林</p><p>别把我埋的太深，兄弟。如果有人侵略我的国家，请叫醒我，我会爬起来继续战斗。</p><p>世界或许黑暗，或许无光，但个体的善，却像沙滩上闪亮的珍珠，哪</p>
</body>
</html>

3.换行标签

场景：让文字强制换行显示

代码：<br>

特点：（1）单标签

（2）让文字强制换行

代码如下：

<!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>
    <!-- 让文字强制换行 -->
    在见过深刻的黑喑，最凶的罪孽，最丑的可怕以后，<br>我依旧幸运，我见过光辉，见过心地善良，<br>见过最美丽的人的内心对啊，我依旧感谢，我亲眼见过那一片白色橄榄树林
</body>
</html>

4.水平线标签

场景：分割不同主题内容的水平线

代码：<hr>

特点：（1）单标签

（2）在页面中显示一条水平线

代码如下：

<!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>
    <!-- 在页面中显示一条水平线 -->
    白色橄榄树<hr>
    在见过深刻的黑喑，最凶的罪孽，最丑的可怕以后，我依旧幸运，我见过光辉，见过心地善良，见过最美丽的人的内心对啊，我依旧感谢，我亲眼见过那一片白色橄榄树林
</body>
</html>

代码整和：

<!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>
    <!-- 标题标签 -->
    <h1>白色橄榄树</h1>
    <h2>白色橄榄树</h2>
    <h3>白色橄榄树</h3>
    <h4>白色橄榄树</h4>
    <h5>白色橄榄树</h5>
    <h6>白色橄榄树</h6>
    <!-- 水平线标签 -->
    白色橄榄树<hr>
    <!-- 段落标签 -->
    <p>在见过深刻的黑喑，最凶的罪孽，最丑的可怕以后，我依旧幸运，我见过光辉，见过心地善良，见过最美丽的人的内心对啊，我依旧感谢，我亲眼见过那一片白色橄榄树林</p>
    <p>别把我埋的太深，兄弟。如果有人侵略我的国家，请叫醒我，我会爬起来继续战斗。</p>
    <p>世界或许黑暗，或许无光，但个体的善，却像沙滩上闪亮的珍珠，哪</p><hr>
    <!-- 换行标签 -->
    在见过深刻的黑喑，最凶的罪孽，最丑的可怕以后，<br>我依旧幸运，我见过光辉，见过心地善良，<br>见过最美丽的人的内心对啊，我依旧感谢，我亲眼见过那一片白色橄榄树林
</body>
</html>