在HTML中，我们可以使用“div标签”来划分HTML结构，从而配合CSS来整体控制某一块的样式。

举例：

在线测试
<!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标签”来划分一下区域，代码如下：

在线测试
<!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针对该区域进行样式控制，这一点我们学了CSS才会知道。