新手入门：什么是div+css与xhtml+css

  不知道从什么时候开始，在网络上到处可以看到div+css，到底什么是div+css呢？难道就是传说中的标准重构吗？标准从最简单的根源来说不是合理使用xhtml的标签吗？可为什么还是有这么多div+css呢？既然可以div+css，那为什么不可以叫span+css ul+css li+css等等呢？

　　疑问，满脑子的疑问!为了这个疑问，我把自己脑子里的东西从最底层翻了一遍。

　　在几年前大家都是用table来布局，一层套一层，没发现什么不妥，一直用到《网站重构》这本书出来后的不久开始看到很多人讨论重构。当时的我对所谓的重构一点都不清楚，当然啦，现在还不是很清楚，至于《网站重构》这本书我也没看过几页，不敢说自己什么都了解。但就目前而言，还是有很多朋友是从table布局转变过来，也包括我自己在内。

　　看了网上很多教程以及很多朋友的文章或者是提到的问题，代码结构中少不了的是div。甚至看到代码结构中除了div标签在body中外，找不到其他用来处理结构的标签了。或许就是因为如此，才出现了div+css，用div来做布局，结合css来表现样式，那这样就是标准了？

　　是把table换成了div，把td换成ul来排列后，那其他xhtml的标签怎么办呢？

　　或许有朋友会说“我是用div来布局，所以要叫div+css，而且现在大家都这样叫啊”。嗯，没错，因为div在xhtml中没有语意（也可以称为区域划分、部分），而且是块元素，用在布局方面比较合理。但如果因为如此而把div独立出来称呼为了div+css，貌似跟xhtml可以平起平坐了。就好比你的辈分原本就是晚辈，却跑去跟长辈争上座，太不像话了，不是吗？

　　说了这么多，无非是想希望大家以后不要再说div+css了，为什么不能再多打2个字母，改叫xhtml+css呢？如果觉得这样还不妥，那就叫网站重构吧，你也可以称自己为网站重构工程师，多好听的名字呢，总不能让别人叫你div+css人员吧。他们还是推荐大家少用div，多合理的使用标签，不要遗忘了在xhtml中还有p,form诸多的标签。合理的使用标签，合理的页面结构才会让你的站点更容易被搜索找到重要内容。简单说吧，大家都知道hn（n=1,2,3,4,5,6）是用在标题，那p,form,table是不是也可以让他们有自己在页面结构中的一个位置呢？

　　以上只是个人在文字方面对网络上到处可见的div+css一些看法，文字表达方面不对的地方大家批评，但最终希望的大家明白，div+css只是一种通俗的称谓，div不是主要的东西，主要的是xhtml。

采用CSS+DIV对网站重构日趋被大家重视起来了，尤其是大型站点。其实，早些时候像阿里巴巴、163等大型门户站点就已经完成了重构工作。 个人感觉这种方法确实比传统的TABLE形式的源码架构强多了。

　　采用CSS+DIV进行网页重构相对与传统的TABLE网页布局而具有以下4个显著优势：

　　1：表现和内容相分离

　　将设计部分剥离出来放在一个独立样式文件中，HTML文件中只存放文本信息。

　　2：提高搜索引擎对网页的索引效率

　　用只包含结构化内容的HTML代替嵌套的标签，搜索引擎将更有效地搜索到你的网页内容，并可能给你一个较高的评价。

　　3：提高页面浏览速度

　　对于同一个页面视觉效果，采用CSS+DIV重构的页面容量要比TABLE编码的页面文件容量小得多，前者一般只有后者的1/2大小。

　　4：易于维护和改版

　　你只要简单的修改几个CSS文件就可以重新设计整个网站的页面。

　　从以上的描述来看，采用CSS+DIV对网站重构可以大大提升网站用户与搜索引擎的友好度。

 

什么是CSS＋DIV
　CSS＋DIV是网站标准（或称“WEB标准”）中常用的术语之一，通常为了说明与HTML网页设计语言中的表格（table）定位方式的区别，因为XHTML网站设计标准中，不再使用表格定位技术，而是采用css+div的方式实现各种定位。

　　CSS是英语Cascading Style Sheets（层叠样式表单）的缩写，它是一种用来表现 HTML 或 XML 等文件式样的计算机语言。

　　DIV元素是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。

CSS＋DIV网站设计的优势和问题
　　XHTM是目前国际上倡导的网站标准设计语言，因为XHTML网站设计语言具有的基本特点，这种CSS＋DIV模式的网站设计具有一定的优势，不过目前在网站建设应用中CSS＋DIV模式也存在一些问题。本文综合网站技术和设计人员的体会，并从网络营销应用的角度，将CSS＋DIV网站设计的优势和问题归纳如下：

CSS＋DIV网站设计的优势
　　首先，CSS的极大优势表现在简洁的代码，对于一个大型网站来说，可以节省大量带宽，而且众所周知，搜索引擎喜欢清洁的代码（其真正意义在于，增加了有效关键词占网页总代码的比重），因此使用CSS＋DIV的web标准制作的网站具有搜索引擎友好的一定优势。

　　其次，CSS+DIV制作的网站使得网站改版相对简单，很多问题只需要改变CSS而不需要改动程序，从而降低了网站改版的成本。

CSS＋DIV网站设计的问题
　　尽管CSS+DIV具有一定的优势，不过现阶段CSS+DIV网站建设存在的问题也比较明显，主要表现在：

第一，对于CSS的高度依赖使得网页设计变得比较复杂。相对于HTML4.0中的表格布局（table），CSS+DIV尽管不是高不可及，但至少要比表格定位复杂的多，即使对于网站设计高手也很容易出现问题，更不要说初学者了，这在一定程度上影响了XHTML网站设计语言的普及应用。

　　第二，CSS文件异常将影响整个网站的正常浏览。CSS网站制作的设计元素通常放在几个l外部文件中，这一个或几个文件有可能相当复杂，甚至比较庞大，如果CSS文件调用出现异常，那么整个网站将变得惨不忍睹。

　　第三，对于CSS网站设计的浏览器兼容性问题比较突出。基于HTML4.0的网页设计在IE4.0之后的版本中几乎不存在浏览器兼容性问题，但CSS+DIV设计的网站在IE浏览器里面正常显示的页面，到火狐浏览器（FireFox ）中却可能面目全非（这也是为什么建议网络营销人员使用火狐浏览器的原因所在 ）。CSS+DIV还有待于各个浏览器厂商的进一步支持。

第四，CSS+DIV对搜索引擎优化与否取决于网页设计的专业水平而不是CSS+DIV本身。CSS+DIV网页设计并不能保证网页对搜索引擎的优化，甚至不能保证一定比HTML网站有更简洁的代码设计，何况搜索引擎对于网页的收录和排序显然不是以是否采用表格和CSS定位来衡量，这就是为什么很多传统表格布局制作的网站在搜索结果中的排序靠前，而很多使用CSS及web标准制作的网页排名依然靠后的原因。因为对于搜索引擎而言，网站结构、内容、相关网站链接等因素始终是网站优化最重要的指标。