div是什么呢？div也是html众多标签中的一个，它就相当是一个容器，一个方框，我们可以把网页上的文字，图片等都放到这个容器中。但这个有什么好处呢？好处就是利于网站的布局，想想，我先把网页的各元素按着分类都在div中放好，再把div按着某种顺序排起来，整个网站的代码是不是看起来很有条理呢。
div是一个标准的对称封闭的标签，示例如下：
<div>我是div中的文字，这里面也可以放图片哦！</div>
多个div组合示例：
<div>我是放最学习类文章的地方</div>
<div>我是放娱乐类文章的地方</div>
<div>我是放竞猜类文章的地方</div>
仅仅是使用div来将网站元素归类，还满足不了我的要求，可不可以对div进行一些修饰，让网站看起来更漂亮些呢？当然是可以的，现在我们就为上面三个div加上漂亮的边框和背景色吧。
(注：从这里开始，我们的教程会涉及到css的知识了，css就是对网站元素进行修饰的技术，大家参考本站的
CSS教程!)
<html>
<head></head>
<body>
<div style="border:2px solid #0000ff; width:180px; height:150px; margin-top:10px; background:#FFCCFF">我是放最学习类文章的地方</div>
<div style="border:2px solid #ff0000; width:180px; height:150px; margin-top:10px; background:#FFCCFF">我是放娱乐类文章的地方</div>
<div style="border:2px solid #00ff00; width:180px; height:150px; margin-top:10px; background:#FFCCFF">我是放竞猜类文章的地方</div>
</body>
</html>
运行的效果如下：
我是放最学习类文章的地方
我是放娱乐类文章的地方
我是放竞猜类文章的地方
一个大的div中还可以嵌套一个小的div，示例如下：
<html>
<head></head>
<body>
<div style="border:2px solid #0000ff; width:180px; height:150px; background:#FFCCFF; padding-left:18px; padding-top:18px;">
<div style="border:2px solid #ff0000; width:140px; height:100px; background:#FFCC99"></div>
</div>
</body>
</html>
运行效果如下：
好吧，div简单布局就讲到这里，更精彩的布局建议大家做一个简单的网站来实践了。
在
HTML教程-使用表格布局网站一章我们有讲到过，我们可使用table对网站进行布局，而div也是用来对网站进行布局的，那么这两者之间有什么区别呢？
div是在table之后兴起来的一种更快，更灵活的布局方式(当然，这样并不是说明div布局就一定比table布局要好)，合理使用div+css布局，可以减少我们的代码量，让网页的加载速度更快一些，也让程序看上去更加的优雅。但更重要的是div的灵活性，这点，大家在实践中就会慢慢的体会到了。
还有seo也比较喜欢div+css布局的网站哦，想让百度等搜索引擎更加喜欢你的网站的话，这点可不能忽视掉哦。