• :绿叶现版本暂时不再更新维护,全新版本已经在开发中,新系列图书(暂时8本,后面再续)也将于12月后陆续出版,敬请期待~

4.6 div标签

一、div标签

div标签,主要用来为HTML文档内大块的内容提供结构和背景。div,即division(分区),用来划分一个区域。div标签,又称为“区隔标签”。我们常见的什么“div+css”中的div就是指我们现在学习的div标签。

div标签内可以放入<body>标签的任何内部标签:段落文字、表格、列表、图像等。

我们先看一段代码:

 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>换行标签</title>
</head>
<body>
    <!--这是第一首诗-->
    <h3>静夜思</h3>                  
    <p>床前明月光,疑是地上霜。</p>
    <p>举头望明月,低头思故乡。</p>
    <hr/>
    <!--这是第二首诗-->
    <h3>春晓</h3>                  
    <p>春眠不觉晓,处处闻啼鸟。</p>
    <p>夜来风雨声,花落知多少。</p>
</body>
</html>

对于这段代码,我们发现这个HTML文档结构比较凌乱。那接下来,我们用div标签为这段代码划分区域如下:

 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>换行标签</title>
</head>
<body>
    <!--这是第一首诗-->
    <div>
        <h3>静夜思</h3>                  
        <p>床前明月光,疑是地上霜。</p>
        <p>举头望明月,低头思故乡。</p>
    </div>
    <hr/>
    <!--这是第二首诗-->
    <div>
        <h3>春晓</h3>                  
        <p>春眠不觉晓,处处闻啼鸟。</p>
    <p>夜来风雨声,花落知多少。</p>
    </div>
</body>
</html>

在浏览器预览效果如下:

div元素,div标签

这两段代码在浏览器预览的效果都是一样的,但是在后台代码中却是不一样的,使用div标签划分区域的代码更加具有逻辑性。

其实div的作用远远不止如此,对于我们初学者来说,现在不需要深入,先给大家留个印象。在后续课程,我们会不断让大家接触div标签,大家去感悟一下,慢慢就知道了。

:本站所有教程均为原创,大部分已经与人民邮电出版社合作出版,禁止转载和抄袭,否则绿叶学习网和人民邮电出版社必将追究法律责任,附录:互联网著作权保护法。【法律顾问:张俊律师】

小伙伴们也可以加一下QQ群,在“群文件”中可以获取更多学习资源和配套资源,以及跟其他小伙伴交流,站长也在群内。

(1)QQ群:593173594(暗号:lvye

(2)绿叶学习网常见问题解答

回到顶部