初识HTML中的
在我还上初中的时候，智能手机还没有出现，更没有平板电脑等移动设备。上网是通过摆在桌子上的计算机来完成的。
那时，大街小巷上有好多网吧。
那时，马云刚刚辞去工作准备创业。
那时，发送邮件的操作都会出现在计算机课程中。
那时，对页面还没有现在的跨平台要求。
那时，flashplayer大行其道。
那时，dreamwaver、flash、fireworks被称为网页三剑客！
那时，制作网页可以不用懂的html的写法！
第一次接触网页制作是在大学的专业课上，使用三剑客，通过点击软件菜单中的按钮就能制作网页，精力都放在了如何使用flash制作酷炫的交互动画上了。
初识HTML中的
那时，对html还没有深刻的认识，但是却对
这个标签有着极深的印象。因为当时的dreamwaver通过非代码方式生成的页面都是使用
也就是说，在移动智能设备诞生之前，在用户对页面还没有可以适应不同屏幕比例的要求前，
直到智能手机，平板电脑产生后，由于对页面的跨平台显示的要求的出现(这类适应多平台的页面布局叫做响应式布局)，
从此，页面制作的世道变了，从不需要编程就能制作页面的三剑客，变成了必须懂得相关代码写法才能使用的HTML+CSS+JavaScript了。dreamwaverCC版本也恢复了写代码做页面的操作方式，过去的点击加拖拽的制作方式也消失了。这让很多不懂编程和HTML等页面制作核心技术的从业人感到难受。
dreamwaver的老东家Adobe后来也尝试过推出新模式下通过界面操作来制作网页的软件，还搞出一个叫做Muse的软件，但是依旧没能撬动代码书写的方式。
初识HTML中的
这个故事在开始学习
在我研究生阶段，有一门让我终生难忘的选修课，这门课叫做《数字娱乐技术概述》，这门课既不娱乐也不概述，但是通篇都是数字，那位年轻的教授为我们透析了游戏、影视特效的核心----计算机图形学。
从此我开始学习数学。因为老师的一句话：从2000年到现在(2014)虽然各种软件层出不穷，但是计算机图形学的核心算法却几乎没什么改变。
向下挖掘虽然很难，但是有必要！与各位共勉！
下面开始今天的内容。
首先，我们将之前的"第一个页面.html"文件复制一个，叫做"块元素学习.html"。然后把
中间的内容清空。如图：
初识HTML中的
初识HTML中的
下面，我们在
中间添加我们看看效果：
初识HTML中的
啦啦啦，什么都没有！
为了让大家可以看出来不同，我们为
我们使用style属性为
示例代码如下：(通过style = "border-style: solid;"可以为很多元素添加边框，就不需要大家记忆或查询不同元素的不同写法，是不是很方便！)
效果如图：
初识HTML中的
因为里面没有内容，所以
为了看起来花哨些，加张图片吧！
初识HTML中的
示例图片
示例代码如下：
大家请按照中的scr自行建立文件夹和命名吧！如果您看不懂请参照《HTML元素中的属性2(路径详解)——零基础自学网页制作》
效果如下：
初识HTML中的
其中，我们也是使用了style的方式为设置的宽度，这个设置方法在
代码示例：大家注意写法，不同的属性都添加到style的双引号中即可，同时使用；隔开！
效果如图：
初识HTML中的
整个边框缩小了50%，图片更有趣，尺寸变成了div的50%乘以自身的50%。这个特性大家要记住。
为了方便观看，我们去掉div的width设置。同时在
示例代码如下：
效果如下：
初识HTML中的
如果为了美观，我们让文字到图片右边的空间中怎么做呢？
示例代码如下：
学习网页制作非常有趣！
我们通过为新的
页面效果如图：
初识HTML中的
大家思考一下如何让图片与文字都靠在左边呢？
是不是为图片style添加float:left;同时把新
我们试试看！
示例代码如下：
页面效果：
初识HTML中的
效果完全不对，图片和文字跑到外边来了。
这是div布局中经常出现的一个问题！解决方案有点奇葩，既不是修改属性也不是修改
示例代码如下：
页面效果如下：
初识HTML中的
值得注意的是，如果您不使用
，同时对两个标签的style设置为float：left，是没有问题的，只有把它们放到
代码如下：
页面显示效果如下：
初识HTML中的
大家观察一下，文字也变小了。至于为什么去掉
现在希望大家可以记牢这个情况和操作，更多布局问题我们会在CSS的浮动(float)的讲解中详细说明。
157
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
