首先，从基础的开始。
1. DIV布局和TABLE布局的区别
传统TABLE布局方式实际上是利用了HTML table表格元素具有的无边框特性，由于table元素可以在显示时使得单元格的边框和间距为0，即不显示边框，因此可以将网页中的各个元素按版式划分放入表格的各个单元格中，从而实现复杂的排版组合。
表格布局的代码最常见的是在HTML标签之间嵌入一些设计代码，如width=100%,border=0等。表格布局的 混乱代码就是这样编写的，大量样式年设计代码混杂在表格，单元格中，使得可读性大大降低，维护起来成本也相当高，尽管有类似于Dreamweaver（以下简单称dw）这样可视化的界面进行编写，只要你需要什么，他帮你写入什么样式，最终结果是表格中到处留下设计的足迹，混合式代码也由此而成。
DIV可以理解成一个块，是有个比表格简单的元素，从语法上只有<div></div>这样简单的定义。DIV最大的好处就是样式是由CSS来控制。
但总体上而言：
1. div+css布局比table布局节省页面代码，代码结构也更清晰明了.
2. div+css的页面对搜索引擎支持好，而且速度更快了,能够比table 更加快速的显示网站内容.
3. div+css布局使网站版面布局修改变的更简单,因为版面代码都写在独立的css文件里修改起来方便多了,不象table要在页面中修改很多信息.
页面中：
| <div class="style2"></div> //表示调class名为style2的样式 也可以这样写 <div id="style2"></div> 不过CSS表示就有所不同了 |
CSS中
| .style2{ width: 800px; //宽度 height: 100%; //高度 margin: 0px auto; //页面边距离，如 margin-top：10px 表示上边距为10像素,这里是为自动 margin-bottom:20px; //下边距 border:1px solid #9BDF70; //边框 background-color: #F0FBEB //背景色 } (在样式指定为div id=的时候必须这样写) #style2{…… |
不够，第一种写法明显可以提高代码重用率。
2. 符合WEB标准的网站
符合WEB标准的网站首先一点是网页能够通过W 3C 的代码校验，地址http://www.w3.org/QA/Tools/
目前提供了HTML/XHTML/CSS/RDF/P3PXML等多种标记语言的校验工具.
但仅仅为符合标准通过W 3C 校验而设计的网页是没有价值的。个人认为通过这个标准最大的意义在于不同浏览器的兼容性。
3. XHTML
其实XHTML就是HTML的下一个版本，用于替代HTML并帮助转向XML的一套过渡型标记语言.在强调表现分离的WEB标准时代，HTML的语法模式已经不能满足需求. XHTML是一门面向结构的语言，设计目的不象HTML仅仅是为了网页设计与表现，XHTML主要用于对网页内容进行结构设计，其严严谨的语法结构有利于浏览器进行解析处理。
目前XHTML的使用标准也存在多种选者，包含Transitional,Strict和Frameset三种。
1. Transitional代表一种松散过渡型的XHTML应用，允许用户使用一部分旧式的HTML标签来编写XHTML文挡。
2. Strict是一种严格型的应用方式，在这种形式下XHTML中不能使用任何样式表现的标签及属性。如在元素中直接使用bgcolor.
3. Frameset方式是针对框架页的应用方式。
一般情况下还是使用Transitional。
3.1 XHTML（如无特殊说明，开发环境都为dw）
在DW中新建一个HTML页
在代码中可以看到
| <!DOCTYPE html PUBLIC "-//W 3C //DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
这段代码的意思是告诉浏览器该网页代码是什么类型的，如这段代码中后面的参数，指定为XHTML1.0 Transitional类型.
这里提到的XHTML 是XHTML1.0规范，与HTML4.01几乎完全相同。
大概看了下，其语法基本和HTML基本没什么区别，所以这里就不多说了，如果有区别的会下文中提到。
3.2 XHTML编写习惯
虽然说不区分大小写，但要符合标准的话，还是得按照以下建议的做。
1. 属性名称必须小写
在标签中编写树型，必须使用小写，正确的写法是：
<div class=”style”>
2. 属性值必须使用双引号
不允许使用<div id=content>这样的形式
3. 不允许属性简写
在HTML中，特别是表单中，常使用简写属性，如
<input checked> <option selected>
而XHTML对此要求更严格，允许使用简写属性，必须使用完整的写法，正确写法：
<input checked=”checked”/> <option selected=”selected”/>
4. 使用ID代替name
5. 必须使用结束标签，例如
<div></div> <p></p>
如果使用IMG或BR这样的单体标签，那么必须使用正斜钱作为结束，如
<img src=”” /> <br/>
4. CSS语法结构
4.1 CSS属性与选择符
选择符是CSS控制XHTML文挡中对象的一种方式，简单的函索，它用于告诉浏览器这段样式应用到哪个对象。
CSS的语法结构仅仅由三部分组成：选择符(selector)、属性(propetry)和值(value).
Selector { Property:value; }
l 选择符：指这组样式编码所要针对的对象，可以是一个XHTML标签，如body,h1;也可以是定义了特定id 或calss的标签，
如#dd表示 <div id=”dd”> .dd表示<div class=”dd”>
l 属性: 是CSS样式控制的核心，对于每有个XHTML中的标签，CSS都提供了丰富的样式属性，如颜色，大小，定位，浮动方式等。
l 值： 是指属性的值，形式有两种，一种是指定范围的值，如float属性，只可能是left,right,none三种值，另一种数值，如width能够使用0-9999px, 0%-100%或其他数学单位来指定。
如body { backgroud-color:blue;}
表示选择符为body，即选择了页面中的<body>标签，属性为backgroud-color（背景颜色），value为CSS编码中的蓝色.
多个属性的表示就如
| P{ color: # 3f 3f 3f 3; font-family:arial; } |
4.2 类型选择符
所谓类型选择符是指网页中已有的标签类型做为名称的选择符，body是网页中的一个标签类型，div也是,span也是.将控制页面中所有的body或div或span。
4.3 群组选择符
除了对于单个XHTML对象进行样式指定，同样可以对一组对象进行相同的样式指派，如：
| h1,h2,h3,p,span{ font-size:12px; font-family: arial; } |
4.4 包含选择符
| h1 span{ font-weight:bold; } |
当我们仅仅想对某一个对象中的子对象进行样式指定时，包含选择符就被派上了用场。包含选择符指选择符组合中前一个对象包含后一个对象，对象之间使用空格做为分隔符。
| <h1>这是一段文本><span>这是span内的文本></span></h1> <h1>单独文本</h1> <span>单独的span</span> <h2>被h2标签套用的文本<span>这是h2下的span</span></h2> |
如上代码，只有第一段代码会调用上面的样式。
4.5 id与class选择符
上面已多次提到，简单的说就是CSS中 #style 与.style 页面中 id=”style”与class=”style”的区别了。
4.6 组合选择符
对于上述所有CSS选择符而言，无论是什么样的选择符，均可以进行组合使用。
h1 .p1{} 表示HT标签下所有的class为p1的标签。
#content h1{} 表示ID为conten的标签下的所有有h1标签.
h1 .p1,#content h1 {} 表示以上二者进行群组选择
h1 #content h2{} 表示id为content的h1标签下的h2标签.
4.7 伪类及伪对象
是一种特殊的类和对象，由CSS自动支持，属CSS的一种扩展类和对象，名称不能被用户自定义，使用时只能按标准格式进行应用。
a:hover{ backgroud-coloir: # 3f 3f 3f ; }
本例中的hover便是一个伪类，用于指定标签a的鼠标移上状态，CSS内置了几个标准的伪类用于用户的样式定义。
| 伪类 | 用途 |
| :link | a连接标签的未被访问前的样式 |
| :hover | 对象在鼠标移上时的样式 |
| :active | 对象被用户点击及被点击释放之间的样式 |
| :visited | a连对象被访问后的样式 |
| :focus | 对象成为输入焦点的样式 |
| :first-child | 对象的第一个子对象的样式 |
| :first | 对于页面的第一页使用的样式 |
同样CSS内置了几个标准伪对象用于用户的样式定义。
| 伪对象 | 用途 |
| :after | 设置某一个对象之后的内容 |
| :first-letter | 对象内的第一个字符样式设置 |
| :first=line | 对象内第一行的样式设置 |
| :before | 设置某一个对象之前的内容 |
实际上， 除了:hover,:active几个伪类之外，大多数伪类及伪对象在实际使用上并不常见到。
4.8 通配选择符
*{ color:blue;}
*表示所有对象，如上所示，页面中所有对象都会使用color的字体颜色
4.9 CSS数值单位
| 单位 | 描述 | 示例 |
| px | 像素(Pixel) | width:12px; |
| em | 相对于当前对象内文本的字体尺寸 | font-size: 1.2em; |
| Ex | 相对于字符的高度的相对尺寸 | font-size:1.2ex; 当前字符的1.2倍高度 |
| pt | 点/磅（point） | font-size: 9pt |
| pc | 派卡(pica) | font-size: 0.5pc |
| in | 英寸(Omcj) | font-size: 12in ; |
| mm | 毫米(Millmeter) | font-size: 4mm ; |
| cm | 厘米(Centimeter) | font-size: 0.2cm ; |
| rgb | 颜色单位 | color:rgb(255,255,255); color:rgb(12%,100%,50%); |
| #RRGGBB | 十六进制颜色单位 | color:000FFF; |
| ColorName | 浏览器所支持的颜色名称 | color:blue; |
4.10应用CSS到网页中
l 行间样式表
如<h1 style=”font-size:12px;color:#000FFF”>
l 内部样式表
在HTML代码里,如在head下
| <style type="text/css"> u1 { border::dotted; float:left; } </style> |
l 外部样式表
通俗的说就是把样式内容放在CSS文件下，如meta下，添加如下代码
<link rel=”stylesheet” rev=”stylesheet” href=”style.css” type=”text/css”/>
今天就先到这里，下午还有课，晚上还要开会....
1127
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
