东方营销网 让你推广更轻松 马上注册获得免费链接推广网站地图 | 加入收藏 | 简体中文 | 繁体中文
你现在的位置:首页 >> SEO答疑 >> 正文

DIV和Table,到底哪个更符合SEO

发布时间:2008-11-13 22:50:58     PDF浏览

  很多站长朋友做站,似乎都喜欢DIV,哪怕自己不会DIV+CSS技术,也要硬着头皮一点点改样式表,因为他们都认为搜索引擎不喜欢Table做的网站,其实,使用WEB标准之后,并不是说排除表格的使用,表格并不是鸡肋,而正好相反是一盘鲍鱼。

  之所以在很多关于CSS布局的文章中常提到"为什么使用表格排版是不明智的"这句话,可能是大家对他的理解有误,这里注意一点"使用表格排版" 是"不明智"的.指的是我们使用了很多年的,用表格来排版是不明智的,表格归根截底是一种显示"数据"的方式,有些站完全是用Table做的,只要的很简洁,最多2层嵌套,能不用表格的尽量不用。大家可以想象一下 EXCEL,表格就是起这个使用的,有的时候信息使用表格显示让我们能清晰易读,所以才使用表格.

  那么所谓表格鲍鱼呢,也就是说你如果能像专业市场分析公司那样,灵活使用表格来显示客户数据和调查数据等消息的时候,那才是真正利用了表格的优势.

  关于其它元素div、ul、li、span

  一般来说按照XHTML标准中的一些元素,分为三大类:

  第一类是我称之为辅助布局设计元素:

  这里我指的是DIV,SPAN等,这类元素的主要功能是用来布局整个页面的,灵活使用这些元素的各种属性,可以让你的页面表现丰富多彩.

  第二类我称为结构化元素或叫信息元素:

  这里指的是TABLE,UL,PRE,CODE类元素是一种信息显示与整理方式,比如TABLE很明显就是用来显示表格信息的,UL是用来显示列化信息的,当需要用表格或列表的时候,用这二种方式来显示是明智的

  第三类指的是A meta这样的,完全是为了实现一些功能,如填上关键字的META keyword.

  那么正确的符合W3C标准的设计思路是:

  使用DIV+CSS等布局元素来制作页面的设计布局、定位、色块、图片等。

  DIV也起整理数据的作用,这里的http://www.eastsem.com这个网站是完全用DIV做的,这个网站使用DIV的ID属性可以很方便的将一个DIV作为一个已命名的数据块进行填充,这样的布局及搭配也很合理,符合用户习惯.

  所以使用WEB标准来制作网站,达到减小代码冗余的实际目的,实际上也是信息合理化整合的一个过程,什么地方该用什么元素还是照用不误,别把表格当布局工具或唯一解决方式就行.分析到此,我们才更明白,原来DIV并非搜索引擎的宠儿,只要能将代码简洁、清晰、明了的展示给浏览者,给访客良好的用户体验,无论是DIV还是Table搜索引擎都会喜欢。别忘了,我们做站是给用户看的,而不是搜索引擎!不过div+css很多优势,也正是这些优势让div流行起来!

什么是DIV+CSS
  DIV+CSS是网站标准(或称“WEB标准”)中常用术语之一,通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别,因为XHTML网站设计标准中,不再使用表格定位技术,而是采用DIV+CSS的方式实现各种定位。
  CSS是英语Cascading Style Sheets(层叠样式表单)的缩写,它是一种用来表现 HTML 或 XML 等文件式样的计算机语言。
  HTML语言自HTML4.01以来,不再发布新版本,原因就在于HTML语言正变得越来越复杂化、专用化。即标记越来越多,甚至各个浏览器生产商也开发出只适合于其特定浏览器的HTML标记,这显然有碍于HTML网页的兼容性。于是W3C组织进而重新从SGML中获取营养,随后,发布了XML,XML是一种比HTML更加严格的标记语言,全称是可扩展标记语言(EXtensible Markup Language http://www.seoyouhua.net/)。但是XML过于复杂,且当前的大部分浏览器都不完全支持XML。于是XHTML这种语言就派上了用场,XHTML语言就是一种可以将HTML语言标准化,用XHTML语言重写后的HTML页面可以应用许多XML应用技术。使得网页更加容易扩展,适合自动数据交换,并且更加规整。说了这么多,现在该说正题了——CSS。其实CSS单独使用除了麻烦一点之外,我个人觉得并无明显的优于HTML的好处。而关键就在于其与脚本语言(如Javascript)及XML技术的融合,即CSS+Javascript+XML(实际上有一种更好的融合:XML+XSL+Javascript)——但XSL,即可扩展样式表语言相较于CSS过于复杂,不太容易上手。自从CSS出现之后,HTML终于摆脱了杂乱无章的恶梦,开始将页面内容与样式分离。说了这么多,其实,个中真谛,还得使用过后才知道,所以,现在就开始学习使用吧。
  DIV元素是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的,其中所包含元素的特性由DIV标签的属性来控制,或者是通过使用样式表格式化这个块来进行控制。
  在可以预计的将来,table的地位依然十分重要,于是,如google之流依然会生意兴隆。但是div代表的是网络世界发展的方向。它们一个简单,一个先进,萝卜白菜,您选什么都是有可取只处的.我们都很按您的要求认真服务的!
  div是html(超文本语言)中的一个元素,div+css 是一种网页的布局方法,这一种网页布局方法有别于传统的table布局,真正地达到了w3c内容与表现相分离.
  div 是标签 css是层叠样式表
  DIV+CSS高级布局已逐渐流行,但面对所谓DIV+CSS布局的叫法让人更为担心,不要让DIV成为Table的替代品,多层嵌套的DIV会严重影响代码的可阅读性,活用HTML为我们提供的标签吧。
  什么时候应该用DIV?在http://www.020webseo.com中有详细解释。
  虽然在这方面没有什么硬性的规定,但个人认为DIV更适用于大体框架的定位.例如我们要定义一块头部的区域,一般会这样定义一个DIV:
  这里就是头部框架里要写的内容
  当然,可以用class来定义,但一般来讲如不是在同一页面会重复的元素,用id能更好的区别开来.
  查看如下定义代码
  <ul id="navbar">
  <li id="articles">
  Articles</li>
  <li id="topics">
  Topics</li>
  <li id="about">
  About</li>
  <li id="contact">
  Contact</li>
  <li id="contribute">
  Contribute</li>
  <li id="feed">
  Feed</li>
  </ul>
  <h1 id="masthead">
  <a href="/">
  <img src="/pix/alalogo.gif" alt="A LIST Apart: For People Who Make Websites" />
  </h1>
  No. 214
  定义了最上面的导航(ul部分),左边的大logo和那个圆圆的No.xxxx的标记.
  他没有使用DIV来做顶部的框架,但却很好的说明了这些代码的用途,为什么?因为他活用了HTML提供的标签,以及样式名称的定义
  其它最常用的布局标签
  h1
  这个标签或许真正会去用的人很少,因为它显示的字体真的是太"大"了,但我们是CSSer,有什么标签样式不能改呢?而且它所能表达的意思就如同它原先的作用一样明显(大标题)我想你已经知道怎么去用它了 ^_^
  ul
  这个标签很多情况是用来定义导航部分的,当然也可以用ol来代替,但导航连接没有什么顺序之分吧,所以还是用ul来的比较确切(去掉CSS后效果更明显)
  b
  这个已经不再推荐使用的标签,在布局上却能带来不少的方便(因为短),虽然我不是太赞成使用这个标签,但有些时候(比如细小地方的布局定义)还是不错的选择
  h2
  h2使用最多的地方应该不是布局上,而是副标题,但有些地方需要定义栏目样式的话,用这个标签比较合适,栏目内容就使用p

DIV+CSS的优势何在?
  1、符合W3C标准。微软等公司均为W3C支持者。这一点是最重要的,因为这保证您的网站不会因为将来网络应用的升级而被淘汰。 2、支持浏览器的向后兼容,也就是无论未来的浏览器大战,胜利的是IE7或者是火狐,您的网站都能很好的兼容。 3、搜索引擎更加友好。相对与传统的table, 采用DIV+CSS技术的网页,对于搜索引擎的收录更加友好。 4、样式的调整更加方便。内容和样式的分离,使页面和样式的调整变得更加方便。现在YAHOO,MSN等国际门户网站,网易,新浪等国内门户网站,和主流的WEB2.0网站,均采用DIV+CSS的框架模式,更加印证了 DIV+CSS是大势所趋。5、CSS的极大优势表现在简洁的代码,对于一个大型网站来说,可以节省大量带宽,而且众所周知,搜索引擎喜欢清洁的代码。
编辑本段CSS放入网页的几种方式
  行内套用
  我们可以在HTML文件内直接宣告样式。
  举例来说,Thisisfontsize16.
  以上的HTML文件在浏览器上会显现为:Thisisfontsize16.
  嵌入套用样式可以嵌入于HTML文件中(通常是在<head>内)。
  举例来说,<head><styletype="text/css"& gt;<styletype="text/css">div{div{background-color:#FF0000;}< /style></head><body>背景颜色是红色</body>
  以上的HTML会显现出:背景颜色是红色
  外部连接套用在这种方式下,所有的CSS样式宣告都是存在另外一个档案中。
  该档案通常名称为.css。
  在HTML文件的<header>..</header>之中,我们将用以下的程式码将这个.css档案连接进入:
  <linkrel=stylesheettype="text/css" href="external-stylesheet.css">
  以上这一行会将在external-stylesheet.css这个档案内所宣告的样式加入HTML文件内。
  汇入套用汇入套用外部的CSS样式也可以被汇入进HTML文件。
  汇入的做法为利用@import这个指令。
  @import的语法为:<STYLETYPE="text/css">< STYLETYPE="text/css"><</STYLE>@import">!--@importurl(http://www.divhome.com/#.mysite.com/style.css);@importurl(</STYLE>
  @import指令最初的用意,是为了能够针对不同的浏览器而运用不同的样式。不过,现在已经没有这个必要。现在用@import的目的,最常是要加入多个CSS样式。当多个CSS样式被@import的方式加入,而不同CSS样式互相有冲突时,後被加入的CSS样式有优先的顺位(详情请见CSS串接)。
CSS+DIV网站设计的问题
  尽管[url=http://www.meimeisky.com/divcss]DIV+CSS具有一定的优势,不过现阶段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本身。[url=http://www.meimeisky.com/divcss]CSS+DIV网页设计并不能保证网页对搜索引擎的优化,甚至不能保证一定比HTML网站有更简洁的代码设计,何况搜索引擎对于网页的收录和排序显然不是以是否采用表格和CSS定位来衡量,这就是为什么很多传统表格布局制作的网站在搜索结果中的排序靠前,而很多使用CSS及web标准制作的网页排名依然靠后的原因。因为对于搜索引擎而言,网站结构、内容、相关网站链接等因素始终是网站优化最重要的指标。

标签:DIV  Table  SEO   相关文章:
优化申请
姓名: 电话:
手机: E-mail:
备注:
 

Copyright © 2008 北京亦乐互动科技有限公司
本网站出处信息及版权均属于北京亦乐互动科技有限公司所有,未经协议授权,禁止下载使用。
客户联系热线:010-58777904/7966-601