<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>中间的内容清空。
如图: