<div>元素是个有故事的元素，这个元素很早就涌如今html超文本标记措辞中，它设计之初便是为理解决网页页面布局的需求。但是遗憾的是它出生后一贯怀才不遇。
在我还上初中的时候，智好手机还没有涌现，更没有平板电脑等移动设备。上网是通过摆在桌子上的打算机来完成的。
那时，大街小巷上有好多网吧。
那时，马云刚刚辞去事情准备创业。
那时，发送邮件的操作都会涌如今打算机课程中。
那时，对页面还没有现在的跨平台哀求。
那时，flashplayer大行其道。
那时，dreamwaver、flash、fireworks被称为网页三剑客！
那时，制作网页可以不用懂的html的写法！
第一次打仗网页制作是在大学的专业课上，利用三剑客，通过点击软件菜单中的按钮就能制作网页，精力都放在了如何利用flash制作酷炫的交互动画上了。
那时，对html还没有深刻的认识，但是却对<table></table>这个标签有着极深的印象。
由于当时的dreamwaver通过非代码办法天生的页面都是利用<table>表格元素进行布局的！
也便是说，在移动智能设备出身之前，在用户对页面还没有可以适应不同屏幕比例的哀求前，<table>这个本来用来做表格的元素同时兼职了<div>的页面布局事情，而且把兼职干成了主业，让<div>这个专业的块元素闲置了好久。
直到智好手机，平板电脑产生后，由于对页面的跨平台显示的哀求的涌现（这类适应多平台的页面布局叫做相应式布局），<table>表格制作的页面在相应式布局大行其道的本日，用它布局的页面开始涌当代码冗余，掩护困难等诸多问题。手机真个浏览器在播放视频或其他交互动画时也不再依赖flashplayer这个给我们带来无数反感和恼火的插件。
从此，页面制作的世道变了，从不须要编程就能制作页面的三剑客，变成了必须懂得干系代码写法才能利用的HTML+CSS+JavaScript了。dreamwaverCC版本也规复了写代码做页面的操作办法，过去的点击加拖拽的制作办法也消逝了。这让很多不懂编程和HTML等页面制作核心技能的从业人感到难熬痛苦。
dreamwaver的老雇主Adobe后来也考试测验过推出新模式下通过界面操作来制作网页的软件，还搞出一个叫做Muse的软件，但是依旧没能撬动代码书写的办法。
这个故事在开始学习<div>和css布局之前我都会讲给学生（一群文科生）听，我只是想见告大家，学习任何打算机技能，我们可以从大略易学的办法入手，但要有透过这种办法向下挖掘核心知识的决心和勇气！
对付自己从事的事情我们不能知足于会做，还要只管即便透析它的事理，这样才能在技能换代中不会被轻易淘汰。
在我研究生阶段，有一门让我终生难忘的选修课，这门课叫做《数字娱乐技能概述》，这门课既不娱乐也不概述，但是通篇都是数字，那位年轻的教授为我们透析了游戏、影视殊效的核心----打算机图形学。
从此我开始学习数学。由于老师的一句话：从2000年到现在（2014）虽然各种软件层出不穷，但是打算机图形学的核心算法却险些没什么改变。
向下挖掘虽然很难，但是有必要！
与各位共勉！
下面开始本日的内容。
首先，我们将之前的"第一个页面.html"文件复制一个，叫做"块元素学习.html"。然后把<body></body>中间的内容清空。
如图：
下面，我们在<body></body>中间添加<div></div>标签。示例代码如下：
<body><div></div></body>
我们看看效果：
啦啦啦，什么都没有！
为了让大家可以看出来不同，我们为<div>添加边框属性！
我们利用style属性为<div>添加边框，style属性里的代码便是往后在CSS中利用的代码！
实际上我们已经开始打仗CSS的一些内容了。详细写法的讲解大家可以看这个教程，这里不再赘述。
示例代码如下：（通过style = "border-style: solid;"可以为很多元素添加边框，就不须要大家影象或查询不同元素的不同写法，是不是很方便！
）
<div style = "border-style: solid;">
效果如图：
由于里面没有内容，以是<div>的宽度是0，因此显示的便是一条直线。下面我们向<div>中添加内容。
为了看起来花哨些，加张图片吧！
示例图片
示例代码如下：
<div style = "border-style: solid;"><img src = "img/示例图片/image4.jpg"/ style = "width:50%；"></div>
大家请按照<img>中的scr自行建立文件夹和命名吧！
如果您看不懂请参照《HTML元素中的属性2（路径详解）——零根本自学网页制作》
效果如下：
个中，我们也是利用了style的办法为<img>设置的宽度，这个设置方法在<div>中一样利用！
代码示例：大家把稳写法，不同的属性都添加到style的双引号中即可，同时利用；隔开！
<div style = "border-style: solid; width:50%;"> <img src = "img/示例图片/image4.jpg"/ style = "width:50%;"> </div>
效果如图：
全体边框缩小了50%，图片更有趣，尺寸变成了div的50%乘以自身的50%。这个特性大家要记住。
为了方便不雅观看，我们去掉div的width设置。同时在<div>中连续添加<div>标签。为了方便显示，我们在新的<div>中添加一段笔墨！
示例代码如下：
<div style = "border-style: solid;"> <img src = "img/示例图片/image4.jpg"/ style = "width:50%;"> <div> <p>学习网页制作非常有趣！
</p></div></div>
效果如下：
如果为了都雅，我们让笔墨到图片右边的空间中怎么做呢？
示例代码如下：
<div style = "float:right;"><p>学习网页制作非常有趣！
</p></div>
我们通过为新的<div>标签中的style属性添加float（浮动）属性，同时设置为right（右）。
页面效果如图：
大家思考一下如何让图片与笔墨都靠在左边呢？
是不是为图片style添加float:left;同时把新<div>的float改为left？
我们试试看！
示例代码如下：
<div style = "border-style: solid;"> <img src = "img/示例图片/image4.jpg" style = "width:50%; float:left;"/> <div style = "float:left;"> <p>学习网页制作非常有趣！
</p></div></div>
页面效果：
效果完备不对，图片和笔墨跑到外边来了。
这是div布局中常常涌现的一个问题！
办理方案有点奇葩，既不是修正<img>属性也不是修正<div>属性，而是增加一组空的<div></div>标签！
给这个新的空的<div>的style设置为"clear:both"即可改动。
示例代码如下：
<div style = "border-style: solid;"> <img src = "img/示例图片/image4.jpg" style = "width:50%; float:left;"/> <div style = "float:left;"> <p>学习网页制作非常有趣！
</p></div><div style = "clear:both;"></div></div>
页面效果如下：
值得把稳的是，如果您不该用<div>的话直策应用<img>和<p>，同时对两个标签的style设置为float：left，是没有问题的，只有把它们放到<div>中才会涌现上面的情形。
代码如下：
<body> <img src = "img/示例图片/image4.jpg" style = "width:50%; float:left;"/> <p style = "float:left;">学习网页制作非常有趣！
</p></body>
页面显示效果如下：
大家不雅观察一下，笔墨也变小了。至于为什么去掉<div>之后就不会涌现上面那种出框的情形，而且笔墨也变小的问题在往后的讲解中我们再深入磋商！
现在希望大家可以记牢这个情形和操作，更多布局问题我们会在CSS的浮动（float）的讲解中详细解释。
疫情期间，请大家少出门，不聚会，没事在家学学网页制作，即抗击疫情又提高自己!
喜好的小伙伴请关注我，阅读中碰着任何问题请给我留言，如有疏漏或缺点欢迎大家斧正，不胜感激！
HTML序章（学习目的、工具、基本观点）——零根本自学网页制作
HTML是什么？——零根本自学网页制作
第一个HTML页面如何写？——零根本自学网页制作
HTML页面中head标签有啥用？——零根本自学网页制作
初识meta标签与SEO——零根本自学网页制作
HTML中的元素利用方法1——零根本自学网页制作
HTML中的元素利用方法2——零根本自学网页制作
HTML元素中的属性1——零根本自学网页制作
HTML元素中的属性2（路径详解）——零根本自学网页制作
利用HTML添加表格1（基本元素）——零根本自学网页制作
利用HTML添加表格2（表格头部与脚部）——零根本自学网页制作
利用HTML添加表格3（间距与颜色）——零根本自学网页制作
利用HTML添加表格4（行颜色与表格嵌套）——零根本自学网页制作
16进制颜色表示与RGB色彩模型——零根本自学网页制作
HTML中的块级元素与内联元素——零根本自学网页制作
初识HTML中的<div>块元素——零根本自学网页制作
在HTML页面中嵌入其他页面的方法——零根本自学网页制作
封闭在家学网页制作！
为页面嵌入PDF文件——零根本自学网页制作
HTML表单元素初识1——零根本自学网页制作
HTML表单元素初识2——零根本自学网页制作
HTML表单3（下拉列表、多行笔墨输入）——零根本自学网页制作
HTML表单4（form的action、method属性）——零根本自学网页制作
HTML列表制作讲解——零根本自学网页制作
为HTML页面添加视频、音频的方法——零根本自学网页制作
音视频格式转换神器与html视频元素加字幕——零根本自学网页制作
HTML中利用<a>标签实现文本内链接——零根本自学网页制作
