web标准在线交流讲座记录（第一天）

来源：互联网发布：打开摄像头软件编辑：程序博客网时间：2024/06/02 18:33

第一天

概要
1什么是web标准？
2.为什么要采用web标准？
3.本课程主要都讲解哪些内容？
4.一个简单的例子。

什么是web标准
大家现在做网页大多都是在用Dreamweaver之类的软件，通过表格的方式布局。
由于HTML本身在发明的时候并非一个排版性质的语言，这导致了很多美工设计上的问题出现。
同时由于由于浏览器对CSS的支持不够，再加上一些平面设计师的要求（这些要求与他们经常与印刷品打交道有关）导致他们为了控制网页的视觉表现而滥用HTML。一个典型的例子就是，当设计师可以用border="0"来隐藏表格的边框时，用隐藏表格来控制布局的方法同样被使用。另一个例子是对“transparent”（透明）的使用，同样是不可见，他们却使用空白的GIF图片来控制布局。
也由于上世纪中后期浏览器的市场争夺战，导致大量的乱码、非法代码、浏览器的专用代码和属性存在于我们的网页中。
这使得开发效率极为低下，同时，为了能够有更多的用户群体，网站开发人员往往要为不同的浏览器开发多份不同的网站。
新版本的web浏览器的发布，使得对CSS的支持得到了加强与扩展，但是并没有达到它应有的水平。尽管浏览器的开发商对CSS支持的步伐很缓慢，但是现在已经有许多浏览器选择了支持CSS，此时，不应该再有任何理由再像以前那样使用HTML了，应该让它恢复本来的面貌：去描述文档的结构，而不是它的表现。正因为此，我们现在才能够用CSS来达到其本来的目的了。
为了改变这种现状，包括微软和netscape这些公司会员在内的W3C标准组织制订了一整套建议标准，并被大部分的浏览器厂商接收和支持。这就是web标准。
它的具体内容如下：
结构化语言
HTML (超文本置标语言) 4.01
XHTML (可扩展超文本置标语言) 1.0
XHTML 1.1
XML (可扩展标记语言) 1.0
表现类语言
CSS (层叠式样式表) Level 1
CSS Level 2 revision 1
CSS Level 3 (正在开发中)
MathML (数学置标语言)
SVG (可变矢量图形)
对象模型
DOM (文档对象模型) Level 1
DOM Level 2
DOM Level 3 Core
本讲座主要关注XHTML (可扩展超文本置标语言) 1.0和CSS (层叠式样式表) Level.1、CSS Level 2 revision 1这三种标准。
英文好的朋友可以在www.w3.org上阅读这些标准化文档。
标准化究竟可以带来哪些好处呢？
1. 更简易的开发与维护: 使用更具有语义和结构化的HTML，将让您更加容易、快速的理解他人编写的代码。
2. 与未来浏览器的兼容: 当您使用已定义的标准和规范的代码，那么您这个向后兼容的文本就消除了不能被未来的浏览器识别的后患。
3. 更快的网页下载、读取速度: 更少的HTML代码带来的将是更小的文件和更快的下载速度。如今的浏览器当处于标准模式下将比它在以前的兼容模式下拥有更快的网页读取速度。
4. 更好的可访问性: 更少的HTML代码带来的将是更小的文件和更快的下载速度。如今的浏览器当处于标准模式下将比它在以前的兼容模式下拥有更快的网页读取速度。
5. 更高的搜索引擎排名: 内容和表现的分离使内容成为了一个文本的主体。与语义化的标记结合会提高您在搜索引擎中的排名。
6. 更好的适应性: 一个用语义化标记的文档可以很好的适应于打印和其他的显示设备（像掌上电脑和智能电话），这一切仅仅是通过链接不同的CSS文件就可以完成。你同样可以仅仅通过编辑单独的一个文件就完成跨站点般的表现上的转换。

这幅图简单的说明了CSS和XHTML是如何合作把美观的网站内容展示给浏览者的。
xhtml是内容，css对内容进行排版，然后通过浏览器的解析，把它们整合成美观的页面展示给浏览者。

下面是一个简单的实例
大家打开记事本和UE这样的编辑工具，Editplus也可以。
新建一个HTML文件。
使用Dreamweaver的朋友请切换到代码编辑页。
<!DOCTYPE HTML BLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="zh">
<head>
<title>测试页面</title>
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=gb2312">
</head>
<body>
</body>
</html>
请按照如上代码修改你的页面代码。
将前两行改成：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
我这样分两次做的原因是很多网页编辑软件都会在创建页面的时候默认给成HTML低版本的声明。而如果我们使用遵循web标准的方式来做的话，这两行声明是不同于默认给出的声明的。
在body区里添加如下代码：
<div id="topCell">顶部区域</div>
<div id="leftCell">左侧区域</div>
<div id="rightCell">右侧区域</div>
<div id="footer">底部区域</div>
那行声明表示我们现在使用的是xhtml 1.0的Strict（严格）规范。xhtml 1.0共有三种规范，其中学习的时候建议遵循这个严格规范，有助于提高。
而在正文（body标签包含的区域）中，我们添加了4个区域。
现在存盘为test1.html文件，用IE打开，看一下效果。

我们可以看到一个很简陋的页面，声明也没有，只有4行文字。接下来，我们会把这4个区域通过css来形成一个简单的页面结构。
新建一个css文件，使用记事本和UE等编辑器的朋友请新建一个文本文件。
然后存盘为test1.css
对了，添加代码的时候注意大小写。css和严格标准的xhtml对大小写有些敏感。
存盘完成后，在title那行的下面添加
<style media="all">

</style>
这段代码会让我们引用同目录下名位test1.css的CSS文件。
media参数表示这个css文件适用的范围，可以定义成屏幕，也可以定义为打印机适用，这里使用的是all，也就是任何情况下都适用。
现在，我们继续编辑test1.css文件，目前它是一个空文本文件，我们添加如下代码：
body{
background: #F3F3F3;
margin: 0;
font: 12px 宋体;
}
这里定义的内容相信大家应该能看懂，首行定义整个页面的背景颜色，第二行定义了页面边距为0，最后一行定义了字体和大小。
然后，我们来定义topCell，顶部区域的样式。
#topCell{
background: #C6C6C6;
width: 775px;
height: 60px;
margin: 5px;
}
我们定义它的背景为较深的灰色，宽度775象素，高度60象素，与其他同级元素的边距是5象素。
再来定义中间左侧的区域。
#leftCell{
background: White;
border: 3px double Black;
width: 144px;
height: 244px;
margin: 0 5px 5px 5px;
float: left;
}
边框3象素宽，双线，黑色，左侧浮动。设定为左侧浮动的原因是因为我们希望它的右边可以放其他的内容。
这是右侧的区域定义。
#rightCell{
float: left;
background: #990000;
color: White;
margin: 0 0 5px 0;
width: 615px;
height: 250px;
}
下面是定义最下面区域footer的代码
#footer{
background: #FF6E37;
clear: both;
margin: 0 0 5px 5px;
width: 775px;
height: 50px;
}

现在大家可以存盘看一下你的页面效果了。框架已经做出来了。

大家可以看到，现在的效果还有一些瑕疵，比方说中间部分和上下两个区域并不对齐，右侧也没有完全对齐这些，我们可以通过微调CSS中的width和margin等属性来使它们对齐，这里我们见到了IE的一个BUG和对盒模型的奇怪解释方式，以后的课程中会讲解这些。

明天继续!