div与span标签

最新推荐文章于 2025-05-22 07:00:00 发布

原创最新推荐文章于 2025-05-22 07:00:00 发布 · 529 阅读

2 ·

CC 4.0 BY-SA版权

HTML与CSS 专栏收录该内容

73 篇文章

订阅专栏

1、div标签

div标签是用来对网页进行布局的，把网页分成几个部分。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
        .front {
            height: 100px;
            background: blue;
            font-family: "华文琥珀";
        }

        .middle {
            height: 300px;
            background: red;
            font-family: "华文琥珀";
        }

        .end {
            height: 100px;
            background: green;
            font-family: "华文琥珀";
        }
    </style>
</head>
<body>
<div class="front">
    <p>我是页面顶部</p>
</div>
<div class="middle">
    <p>我是页面中部</p>
</div>
<div class="end">
    <p>我是页面底部</p>
</div>
</body>
</html>

2、span标签

span标签是用于对局部内容进行修改的标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
        span {
            color: red;
        }
    </style>
</head>
<body>
<p>我是<span>内容1</span>，我是<span>内容2</span></p>
</body>
</html>