我们先新建一个空白的html文档。选择代码模式。
我们会看到自动生成的一段代码： The xhtml Code:
DOCTYPE是document type的简写。主要用来说明你用的XHTML或者HTML是什么版本。浏览器根据你DOCTYPE定义的DTD(文档类型定义)来解释页面代码。所以，如果你不注意设置了错误的DOCTYPE，结果会让你大吃一惊。现在一般网页都用这句：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
这个是1.0版本的过渡型，另外还有严格型，框架型等。
注意：有些老版本的DreamWeaver会自动生成<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">，请务必到菜单里的修改-页面属性中去修改成1.0的文档类型。
另外要注意的是charset=utf-8，除了它以外，还有GB2312，这些到底是什么？两者又有什么区别呢。
2者都是网页的编码方式，一般国外的网站都会使用utf-8，因为它兼容GB2312、BIG5、EUC-JP等多种国家的语言编码，现在港澳台很多网站也都用了utf-8，与世界接轨嘛~ unicode是趋势，因为很多外国的朋友也想看到中国的网站。而GB2312，只认识中文，简单的说GB2312就是简体中文的编码表。GB2312相当于中文，utf-8相当于世界语言-英文。这下清楚了吧，不过很多中国人的习惯还是用GB2312，网站上的各种插件还是GB2312编码方式多。但是~~但是，我还是建议用utf-8，碰到GB2312的插件，直接转换一下就可以了(图片一里的编码，选择utf-8)。也不是太麻烦嘛。不过2者不可以通用，一个网站不可以同时出现2种编码方式，要不然就会看到很多乱码喽~~
<title></title>这个是网页的名字，比如
这些都是浏览器上每个标签所显示出来的名字。这些字就是在这个title标签里设定的。这2个标签是一对，不能只用一个。
另外一个<html xmlns="http://www.w3.org/1999/xhtml">，xmlns 声明的是一个名称空间，这个不需要管他，在新建的网页中核对一下是不是有这句话就好。其中<html..>和末尾的</html>是一对的。不可以缺少哦。
好啦~~开始说很重要的<head></head>标签和<body></body>标签了。
<head></head>标签放的是装饰材料，<body></body>标签放的是房子的结构。这样说是不是比较容易理解。一般我们将CSS样式，JS代码等放在<head></head>标签里。把<div></div>放在<body></body>里。
我们来试试：The xhtml Code:
<style type="text/css"></style>
这句里面是放CSS的，比如The css Code:
就像这样：The css Code:
我们现在来看“黄香蕉”，我们已经给“黄香蕉”定义了一间宽度为200px，背景色为黄色的房间。可是，为什么和“红苹果”的不一样。
我们仔细观察<body></body>标签里的2行文字。发现，“红苹果”的房间用的是<div></div>那可是有墙有地板的房间啊，而“黄香蕉”的房间，居然是用<span></span>搭建的，晕~~那个，那个其实不是房间，只是在地上铺了一块毯子而已。真惨啊~~因为不是房间，那么对房间定义的宽度当然是没有作用的。发生作用的，只不过是黄香蕉所在的那块地方，是黄颜色的。所以背景色是起效果的。所以，我们看到的代码效果是这样的：
我们赶紧把“黄香蕉”的屋子搭建起来吧，我们除了把<span></span>改成<div></div>以外，还能怎么办呢，其实最偷懒的办法，就是这样在.b的样式里，添加一个属性，.b{width:200px; background:#FF0; display:block;}，好啦，大家看，是不是一样了呢~display:block的属性，可以将不是房间的<span></span>变成一间房间。
也就是说，<span></span>这个属性，不是“块”显示的，而<div></div>是以“块”显示的。在<span></span>属性里增加了一个display:block;来让<span></span>成块显示，就能定义它的宽度，高度等很多属性了。
建完了房间，是不是觉得他们好挤啊~~居然是贴着墙壁的。而且2间屋子居然靠着那么近，不知道隔音好不好~~我们可以先将2间房间分开，看好啦~~
我们在a的样式里，添加一个margin属性。
.a{width:200px; background:#F00; color:#FFF; margin-bottom:20px;}
我们添加了margin-bottom:20px;好啦，看到效果了吧，“红苹果”的房间和“黄香蕉”的房间分开来了。中间的距离是20px，其实就是“红苹果”的房间下面空出了20px。“黄香蕉”的房间没动。
Margin的属性有四个，正好是四个方向，分别是上下左右，
Margin-top,margin-bottom.margin-left,margin-right ，你想空出哪一边，都可以增加margin的属性。当然，也可以四边都空，那么就可以直接写,margin:20px;，这样，就四边都空20px了。
好啦，我们要让“红苹果”和“黄香蕉”住的舒服一点，我们将他们放到房间的中间一点的位置，怎么做呢~我们在a和b的样式里，都增加一个padding:10px;
.a{width:200px; background:#F00; color:#FFF; margin-bottom:20px;padding:10px;}
.b{width:200px; background:#FF0; display:block;padding:10px;}
看，变成这样了：
房间的高度居然变高了，其实还变宽了呢~我们没有设定他们的高度，我们先看下宽度吧，原来的宽度是200px，我们在左边右边各加了10px的空间，所以，现在房间的宽度是220px了。Padding就是在房间里增加空间，当然，如果你还想这个房间的宽度是200px的话，那要减去多出来的空间20px宽度，就可以了。高度也是一样，由于我们没有设定他们的高度，所以准确的说是，默认的高度加上上下各10px的空间，就是这个房间的高度。
padding的属性也有四个，和margin一样，也是四个方向，分别是上下左右，
padding-top, padding-bottom. padding-left, padding-right ，你想给哪一边增加空间，都可以增加padding的属性。当然，也可以四边都空，那么就可以直接写,padding:20px;，这样，就四边都空20px了。
我们来看另外一段代码：The xhtml Code:
这段代码里，要解释2块地方，float:left;和clear:both。
你们可以把float:left;去掉试试，是不是“青苹果”掉到了“红苹果”下面？加了float:left;就是“块”左浮动。什么意思呢，我们先把一个大的home样式看为一间大房子，“红苹果”的房间左对齐，所以用了float:left;“青苹果”的房间是要靠在红苹果边上的，那么相对“红苹果”左对齐。这就是float的浮动作用。现在我们来回顾一下我之前说的DIV裸体日，为什么去掉CSS后，所有的DIV都竖着排的原因。
Float有2个属性，向左，向右。效果大家可以试一下。
另外说下clear:both，clear:both从字面说是清除浮动，为什么在这个home后面要加这个东西呢，因为红色块和绿色块都没有固定高度，没有固定高度的话，下面的黄色块会叠加到上面。大家可以转换到设计模式，鼠标选中黄色块，看下是不是重叠到了上面，通常我们在没有定义高度的时候，碰到DIV错乱，我们可以尝试一下加上clear:both这一属性。
加了clear:both后，home块就独立了，清除了左边，也清除了右边，左边右边都没有东西了，黄色块自然就掉下来，另起一行了。
当然，clear属性，也有clear:left;和clear:right~~ | 
发表于 2009-8-5 14:08
| 
发表于 2009-8-5 17:36
| 
发表于 2009-8-6 10:15
|