Div+css的入门必读

发表时间：2009年04月 14th ， 分类：技术与产品, 搜索引擎营销， 标签： div+css, web前端设计, 大连seo, 大连网站建设, 大连网站开发, 网站推广

我从2004年接触div+css，当时不懂SEO，所以对div+css的理解只有两点：1，高效，精简代码，节省带宽；2，便于管理，多终端兼容。

2007年我开始接触SEO，并不断调整自己在css编写上的思维，向html+css转换，发现这种布局办法非常利于搜索引擎抓录，甚至能够占到整个seo工作中50%强的效果，虽然编写成本高，但值得运用到建站阶段里。

我先后给公司多人培训过css前端设计，也给客户讲过div+css的意义，这是较难理解的一个概念，所以希望这篇文章能尽量浅显地讲清楚div+css的概念、意义。

1，什么是div+css

我举过一个例子，网站好比一间房子，程序是房子的地基和毛坯，设计是房子的装修，设计师把图纸画好，然后准备砖头、木材、涂料进行装修。这个准备装修材料和装修的过程，我们称为“web前端设计开发”，它区别于程序开发和美工设计，浪漫一点的讲，这个工作是把美丽的设计和严谨的程序相结合的过程。

我甚至可以称这个职位的人为工业设计师，因为在内涵上看，他们的意义是一样的，都是实用和美感结合的过程，都要找这其中的平衡点。

在div+css的概念成熟之前，网页设计师都用table进行web前端设计开发，div+css和table的关系，很像汽车和马的概念，他们的区别我在后面会讲，总之table是过时的产物，它臃肿且对搜索引擎很不友好。

现在你大体上能知道div+css存在的意义，当你要对它顶礼膜拜之时，我不得不告诉你，它只是一种过渡的产物，n年以后成熟的技术会取代它，不过n是多少还不确定，你大可放心的去学习。

2，div+css的核心是什么？

如果你查过div+css的相关资料，你会看到这样的字眼：内容和样式分离。不错，div+css的最大特点就在于内容和样式分离，这个概念很抽象，有人曾这样举例子：

我们看如下的文字：

再别康桥轻轻的我走了正如我轻轻的来我轻轻的招手作别西天的云彩

———————————这就是内容，再看：

再别康桥
轻轻的我走了
正如我轻轻的来
我轻轻的招手
作别西天的云彩

———————————-这就是结构，再看

再别康桥

轻轻的我走了
正如我轻轻的来
我轻轻的招手
作别西天的云彩

———————————-这就是样式。

问题开始明朗，事实上你可以认为div+css里的div就是内容，css就是样式，div是一滩烂泥的趴在地上，你把css给它后，它立即生龙活虎，生动起来。你是否感觉开窍了？下一个问题马上到来。

3，为什么内容和样式要分离？

对啊，内容和样式是分离了，但是有什么用？我混在一起岂不是更好？别着急，你可以看看下面的几对组合：

div+css1、div+css2、div+css3、div+css4、div+css5、……

同一个内容可以配好几套样式，厉害吧，我做365套样式的话，每天都可以给网站改版一次，我可以做成大人看的，小孩看的，老人看的；电脑看的，开车看的，电梯看的。等等。很显然这就是div+css引以为豪的多终端兼容显示。

作为div+css的死对头，table是绝对做不到这一点的，因为table的样式就写在内容里，无法分离。

4，为什么div+css适合搜索引擎优化（SEO）？

终于到SEO出场的时候了，我们了解div+css内容和形式分离的特点，就很容易理解它为什么适合SEO了。我们知道，搜索引擎是靠他们研究的一种程序来索引整个互联网的信息，这种程序的工作原理和蜘蛛一样，在浩瀚的蜘蛛网上来回爬行，它爬到每个网页上，读取网页内容，然后将信息带回总部，这些“钦差大人”对你的态度就决定了你在搜索引擎中的排名和权重。好了，我们知道“钦差大人”要读你网站的内容，为什么用“读”字而不用“看”字呢，因为程序没长眼睛，它和人不一样，看不见网页，你设计得再漂亮也没用，它只能分析网页的内容结构。这时候，div+css内容和形式分离的优势立即凸显，它把内容交给“钦差大人”，完全不干扰它的思路，table就不行了，因为table的内容和形式是混在一起的，这让钦差大人读的稀里糊涂，而后勃然大怒，后果可想而知。

不过要注意，你会div+css并不等于就符合SEO了，关键的问题在后面，请看。

5，什么是html+css？

这只是一种概念转移，其实html+css和div+css一模一样，前面的《再别康桥》里，我们已经知道了形式、结构、样式的区别，你可以理解为div+css就是内容+样式，而html+css却是内容结构+样式。比如<h1>是一级标题，<li>是信息列表，<strong>是加粗。

“钦差大人”读起这些标签非常过瘾，因为内容结构完全符合它的程序逻辑，它能迅速知道一个页面的中心内容是什么，重点在哪里。这样“钦差大人”读得快又读得懂，当然优先考虑你的权重，也愿意经常来光顾你的网页了。

那些大量运用flash和图片的网站，排名效果都不太好，因为它们只考虑给人看了，没考虑搜索引擎的“钦差大人”，它读不懂，自然不愿意给你排个好位置。

6，难道div+css就没有图片和flash了吗？

这是非常好的问题，div+css的网站一样要用图片和flash，当然css可以用某种手段将图片和文字完美结合，这是它的技术优势，具体实现办法就属于技术细节问题了。

OK，以上是liooran我对div+css技术的简单描述，叫“入门必读”有点标题党，主旨还是让大家正确认识div+css技术，了解它在网站开发和seo推广中的重要地位，运用得当，必将事半功倍。