HTML Div 标签

<div>是最常用的HTML块级元素，它像一个容器，用来组织和结构化网页内容。

什么是 div 标签？

<div> 是 division 的缩写，意为"分割"。它是一个块级容器，用于将相关的HTML元素组合在一起，形成网页的各个区块。

<div> 是块级元素，会独占一行
本身没有语义，用于布局和样式控制
可以嵌套使用
通常配合 class 或 id 属性使用

基本用法

最简单的 div 使用方式：

HTML

<div>
    <h1>网站标题</h1>
    <p>这是段落内容</p>
</div>

配合 class 使用

在实际开发中，通常为 div 添加 class 属性以便CSS样式控制：

HTML

<div class="header">
    <h1>我的网站</h1>
</div>

<div class="content">
    <p>页面主要内容</p>
</div>

<div class="footer">
    <p>版权信息</p>
</div>

div 嵌套

可以多层嵌套来创建复杂的页面结构：

HTML

<div class="container">
    <div class="sidebar">
        <h3>侧边栏</h3>
        <ul>
            <li>菜单项1</li>
            <li>菜单项2</li>
        </ul>
    </div>
    <div class="main">
        <h2>主要内容</h2>
        <p>文章内容...</p>
    </div>
</div>

配合 CSS 样式

div 通常配合 CSS 来控制布局和外观：

HTML + CSS

<!-- HTML -->
<div class="box">
    <h3>标题</h3>
    <p>内容区域</p>
</div>

<!-- CSS -->
<style>
    .box {
        border: 1px solid #ccc;
        padding: 20px;
        margin: 10px;
        border-radius: 8px;
        background-color: #f9f9f9;
    }
</style>

常见布局模式

经典三栏布局

HTML

<div class="wrapper">
    <header class="header">页头</header>
    <nav class="nav">导航菜单</nav>
    <main class="content">主要内容</main>
    <aside class="sidebar">侧边栏</aside>
    <footer class="footer">页脚</footer>
</div>

提示

现代网页布局更推荐使用语义化标签（header、nav、main、section、article、aside、footer），但 div 仍然是需要分组时的最佳选择。

💻 在线代码编辑器

👁️ 预览效果