学习用Xhtml+CSS2构建网页

第一篇：喜新厌旧，逐步习惯Xhtml+CSS2的布局方式

近来有很多网站用Xhtml1.0标准将站点重构，其中包括yahoo，163，CSDN等这些大站。近来一段时间Xhtml+CSS2的热潮更是一浪高过一浪，所以偶也开始学起了，慢慢的就爱上她们了，页面构建技术就是若干MM，我们也要来个喜新厌旧。

一、为什么要学Xhtml+CSS2

  首先，标准的代码便于网页在各种浏览器中的顺利显示。
  一些不规范代码的网页在IE下能正常显示的，在Firefox和Opera上可能就无法正常显示。在这一点上我们不得不说IE相比之下更有包容之心，虽然现在浏览器的主流是IE以及以IE为内核的各种浏览器，但我们同样无法忽视Firefox、Opera等浏览器在逐渐增大的用户群，而这些人群多是对计算机较为精通的老鸟，被他们骂自己网站太垃圾的话我想滋味应该不好受，呵呵。
  当然这也不是说使用table等做的网页就不符合标准（使用table带来的一些弊端下面也要谈到），只是当前不少人习惯用先用Photoshop（以下简写为PS）设计平面图，之后用Fireworks（以下简写为FW）或Imageready（以下简写为IR）做切割，之后在Dreamweaver（以下简写为DW）或是Forntpage（以下简写为FP）来生成html，这些可视化的软件固然方便，但由此带来的问题也是多多，这些软件多多少少会自动增减一些代码，如果没有查看代码的习惯，很容易导致一些不规范代码的产生。，由于使用FW或IR做出的切片一般对图片的特征无法做出直观的描述，所以这样做出的html给以后的维护也带来了麻烦。

  其次，Xhtml + CSS2使页面布局更加简单
  假如之前对页面进行布局或设置了一些相对复杂效果的话，通常的做法是采用大量的表格嵌套对一个页面进行布局，用单元格来描述区域，这样在WYSIWYG等软件中倒是比较直观，但这样影响的有几个方面，首先影响下载速度，因为table的显示不像DIV一样，table在浏览器中的显示是需要全部下载之后才能显示，所以会影响下载速度；其次对于手写代码来讲，这样的结构非常不直观，大堆的表格嵌套可能让习惯手写代码的设计师感觉头晕；另外，还可能牵扯到一个地方就是单元格的合并，假如你不小心搞错了一个colspan=”？”，那么整个页面的布局将面目全非。
  而用CSS做布局，就像是在PS中对图层进行操作一样，利用CSS中相对和绝对的概念，整个页面的布局就轻松和方便多了

  此外，Xhtml可以减小网页文件体积
  使用Xhtml+CSS2构建网页其实一个很重要的目的就是提高浏览速度，虽说现在网速越来越大了，但谁不想自己的站点速度更快呢，有人还曾经说“世上最远的距离不是地球到太阳，而是中国电信到中国网通”，如果你在电信服务器上的站点被网通线路的用户浏览，网页文件大小势必也会影响浏览者的感受。而采用Xhtml来构建网页则利于你解决这个问题，经过笔者测试，实现同样的效果图，使用Xhtml构建的网页比使用传统table方式构建的页面体积减小1/2左右。相信很多人会喜欢身材苗条的MM，呵呵

  二、不同层次的学习者如何快速入门

  感受了以上几点，我开始逐渐习惯使用Xhtml+CSS2来构建网站，那么谈了这么多，究竟从哪里入门呢？这里，对于不同的人群，我建议以下几种方法快速入门：

  对于html及css完全不了解的新手：首先建议你还是学习以下html，因为它当对简单一些，更易于入门，熟悉了一些html的基本语法之后，开始学习Xhtml的一些规范写法，这里推荐一些学习资料：
  Xhtml中文参考：
  http://www.standme.com/Xhtml.htm
  HTML和XHTML常见问答：
  http://www.transwiki.org/cn/xhtmlfaq.htm
  有英文基础的可以查看这些页面：
  XHTML™ basic：
  http://www.w3.org/TR/xhtml-basic/
  XHTML™ 1.0 The Extensible HyperText Markup Language (Second Edition)：
  http://www.w3.org/TR/xhtml1/
  XHTML™ 1.1 - Module-based XHTML：
  http://www.w3.org/TR/xhtml11/
  XHTML™ 2.0：
  http://www.w3.org/TR/xhtml2/

  对于有html基础的朋友，推荐这篇阿捷写的文章：
  循序渐进学习Xhtml+CSS2：
  http://www.w3cn.org/article/step/index.html
  通过一步步的逐渐由不够规范的html转变到Xhtml

  对于有html及PHP语言基础的朋友，这里推荐一个快速搞定Xhtml的方法：
  安装一个Wordpress，官方站点：www.wordpress.org，当前最新版本是1.5.2，之后用最短的时间熟悉wordpress的模板系统，改动以下wordpress的模板算是熟悉一下DIV和CSS2的感觉，之后找一个不错的页面，将wordpress的模板改成与之相同的。最后一步则是按照自己所学到的Xhtml+CSS2的知识做一套wordpress的模板出来，经过这三步，我想你的Xhtml+CSS2算是真正入门了。

转载于:https://www.cnblogs.com/Spring/archive/2005/12/02/288972.html