div可以将html的文档划分成多个区块或者进行一个逻辑的分组。

div用途分为三类：

  • 分组或者划分区块
  • 样式控制
  • 网页布局

一、div用途1-分组或者划分区块

1、创建一个名为html-study的文件夹并使用VSCode打开，再创建一个名为8-1.HTML布局标签-分组或者划分区块.html

<!DOCTYPE html>
<html>
<head>
    <title>div用途1：分组区块</title>
    <style>
        /* 通过div划分不同区块 */
        .header { background: #f0f0f0; padding: 20px; }
        .content { background: #fff; padding: 20px; margin: 10px 0; }
        .footer { background: #333; color: white; padding: 10px; }
    </style>
</head>
<body>
    <!-- 分组页眉 -->
    <div class="header">
        <h1>网站标题</h1>
        <p>欢迎访问！</p>
    </div>

    <!-- 分组主体内容 -->
    <div class="content">
        <h2>最新文章</h2>
        <p>这里是文章内容...</p>
    </div>

    <!-- 分组页脚 -->
    <div class="footer">
        <p>© 2024 版权所有</p>
    </div>
</body>
</html>

2、双击【8-1.HTML布局标签-分组或者划分区块.html】

image-20250518222845218

二、div用途2-样式控制

1、创建一个名为html-study的文件夹并使用VSCode打开，再创建一个名为8-2.HTML布局标签-样式控制.html

<!DOCTYPE html>
<html>
<head>
    <title>div用途2：样式控制</title>
    <style>
        /* 通过div统一控制内部元素样式 */
        .highlight-box {
            border: 2px solid #3498db;
            background: #f8f9fa;
            padding: 15px;
            margin: 20px;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <!-- 普通段落 -->
    <p>这是一个普通段落，无特殊样式。</p>

    <!-- 用div包裹需要统一样式的内容 -->
    <div class="highlight-box">
        <h3>特别提示</h3>
        <p>这段内容被div包裹，应用了统一的边框和背景色。</p>
        <p>注意：div本身不添加语义，仅用于样式控制。</p>
    </div>
</body>
</html>

2、双击【8-2.HTML布局标签-样式控制.html】

image-20250518222942673

三、div用途3-网页布局

1、创建一个名为html-study的文件夹并使用VSCode打开，再创建一个名为8-3.HTML布局标签-网页布局.html

<!DOCTYPE html>
<html>
<head>
    <title>div用途3：网页布局</title>
    <style>
        /* 使用div构建页面布局 */
        .container {
            display: flex;
            gap: 20px;
            padding: 20px;
            background: #f0f0f0;
        }
        .sidebar {
            width: 200px;
            background: #fff;
            padding: 15px;
        }
        .main-content {
            flex: 1;
            background: #fff;
            padding: 15px;
        }
    </style>
</head>
<body>
    <!-- 整体布局容器 -->
    <div class="container">
        <!-- 左侧边栏 -->
        <div class="sidebar">
            <h3>导航菜单</h3>
            <ul>
                <li>首页</li>
                <li>产品</li>
                <li>关于我们</li>
            </ul>
        </div>

        <!-- 右侧主内容 -->
        <div class="main-content">
            <h1>欢迎访问</h1>
            <p>这里是网页的主要内容区域...</p>
        </div>
    </div>
</body>
</html>

2、双击【8-3.HTML布局标签-网页布局.html】

image-20250518223039040