HTML div 标签 - 绿叶网

HTML div 语法

在 HTML 中，div 标签是最常用的块级容器。它主要用于划分一个区域，以方便使用 CSS 来对内容控制样式。

其中，div 是 “division（分区）” 的缩写。

语法：

<div>
    ……
</div>

说明：

div 是最常用的块级容器，而 span 是最常用的行内容器。

提示: 虽然 div 是一个万能容器，但在 HTML5 中，如果这个区域有明确的含义（比如文章、导航、页脚），建议小伙伴们优先使用 article、nav、footer 等语义化标签，将 div 作为最后的通用选择。

HTML div 摘要

属于	HTML 标签
使用频率	高
兼容性	查看
官方文档	查看
MDN	查看

HTML div 示例

接下来，我们通过一个简单的例子来讲解一下 HTML div 标签是如何使用的。

示例：div 标签的基本用法

运行代码

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8">
    <title>div标签</title>
</head>
<body>
    <!--这是第一首诗-->
    <h3>静夜思</h3>
    <p>床前明月光，疑是地上霜。</p>
    <p>举头望明月，低头思故乡。</p>
    <hr/>
    <!--这是第二首诗-->
    <h3>春晓</h3>
    <p>春眠不觉晓，处处闻啼鸟。</p>
    <p>夜来风雨声，花落知多少。</p>
</body>
</html>

页面效果如下图所示。

HTML div标签示例

分析：

对于上面这段代码，我们发现 HTML 代码结构比较凌乱。那么接下来，可以使用 “div 标签” 来划分一下区域，修改后的代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>div标签</title>
</head>
<body>
    <!--这是第一首诗-->
    <div>
        <h3>静夜思</h3>
        <p>床前明月光，疑是地上霜。</p>
        <p>举头望明月，低头思故乡。</p>
    </div>
    <hr/>
    <!--这是第二首诗-->
    <div>
        <h3>春晓</h3>
        <p>春眠不觉晓，处处闻啼鸟。</p>
        <p>夜来风雨声，花落知多少。</p>
    </div>
</body>
</html>

这两段代码的页面效果是一样的，不过实际代码却不一样。使用 div 标签来划分区域，使得代码更具有逻辑性。当然，div 标签最重要的用途是划分区域，然后结合 CSS 针对该区域进行样式控制。

div 和 span 的区别

对于 div 和 span 这两个元素，不少新手也不知道它们之间有什么区别，使用起来也很随便。因此，这里还是有必要认真说一下。

div 和 span 没有任何语义，正是因为没有语义，这两个标签一般都是配合 CSS 来定义元素样式的。它们之间的区别如下：

div 是块级元素，可以包含任何块级元素和行内元素，不会与其他元素位于同一行；span 是行内元素，可以与其他行内元素位于同一行。
div 常用于页面中较大块的结构划分，然后配合 CSS 来操作。span 一般用于包含文字，它没有结构的意义，纯粹是应用样式。当其他行内元素都不适合的时候，可以用 span 来配合 CSS 操作。

除了 div 和 span 标签之外，还有一个 label 标签。其中，div 和 span 是无语义标签，但 label 是有语义标签。label 只适用于表单中，用于显示在输入控件旁边的说明性文字。

提示: 如果小伙伴们不熟悉语义化是什么意思，请先查看：HTML 语义化。