div+css特点与优势

简介:
< DOCTYPE html PUBLIC -WCDTD XHTML StrictEN httpwwwworgTRxhtmlDTDxhtml-strictdtd>

1.结构清晰
分离页面的表现与结构,我们可以构建一个div+css+js文件的做到表现、结构、行为分离,这样做的话就像我们做程序用到的那种mvc模式一样,好处就是耦合性更小,更易维护。因为代码少,结构清晰。
2.速度
   速度的优势分两点考虑
占用带宽
<div></div> 至少要比<table><tr><td></td></tr></table>要少写很多代码
    table嵌套一般是
   <table>
     <tr>
      <td></td>
    </tr>
   </table>
  <div></div> 这样写,所以行数也要少,当然table也可以写成一行,但是div代码确是要比table少得多。
网页执行速度
1)整体显示速度,学过编译原理的人都知道需要文法分析,一个<table><tr><td></td></tr></table> 到ie或其他浏览器中首先要分析意思,这样的话div简单,很容易就能匹配,暂且想象是用堆栈的方法去做的分析。
2)客户体验
      如果是table嵌套的话,倒霉了,如果不到最后一个</table>执行的时候,整个就是个白板
 而div的话,可以先显示一部分,客户体验也要好的多,其原理跟第一条有关
3.针对搜索引擎的优化
    爬虫一上来load进你的网页后,如果是table嵌套的话,还要对一大堆的复杂结构的table进行分析,写个正则都不容易,但是div不同,明显要简单得多。搜索引擎喜欢清洁的代码(其真正意义在于,增加了有效关键词占网页总代码的比重),因此使用CSS+DIV的web标准制作的网站具有搜索引擎友好的一定优势。

    不过,CSS+DIV网站建设的不足现阶段也比较明显:

比较表格布局和CSS+DIV发现,CSS语法其实很容易方便,设计师也都承认掌握CSS+DIV并非需要达到让火箭上天那样高深莫测的知识才行,但某些概念的确还是需要他们去消化吸收。同时,bug问题也是阻止CSS普及的原因之一,即使是web专业人士往往也要花费大量时间修改bug,不用说那些对CSS使用的新手了。深度比较发现,一些通过表格方式可以轻松解决的问题在使用CSS+DIV的时候变得复杂,如果是一个CSS爱好者这可能对他是一种挑战和乐趣,但对于一般设计者而言,这无疑令人沮丧。

    此外,如果说大部分网站的设计元素是均匀分布于整个站点,则CSS网站制作的设计元素通常放在几个external外部文件中,这一个或几个文件有可能相当复杂,文件并不小,由此引起的问题也将变得不可忽视,比如CSS文件调用出现异常,那么整个网站将变得惨不忍睹。

    浏览器兼容问题也是目前阻碍CSS+DIV的一个问题,可能在IE里面正常显示的页面,到FireFox中却面目全非。CSS+DIV还有待于个浏览器厂商的进一步支持。种种原因使得web标准的普及有着较高的门槛,这也是很多web标准倡导者的优越感所在。

对于网络营销人员最关心的搜索引擎友好而言,众所周知,搜索引擎喜欢清洁的代码(其真正意义在于,增加了有效关键词占网页总代码的比重),因此使用CSS+DIV的web标准制作的网站具有搜索引擎友好的一定优势。不过,搜索引擎对于网页的收录和排序显然不是以是否采用表格和CSS定位来衡量,这就是为什么很多传统表格布局制作的网站排序很靠前,而很多使用CSS及web标准制作的网页排名依然靠后的原因。因为对于搜索引擎而言,内容、结构、链接等因素始终是网站优化最重要的指标。 

本文转自 netcorner 博客园博客,原文链接:http://www.cnblogs.com/netcorner/archive/2006/12/20/2912461.html  ,如需转载请自行联系原作者

相关文章
|
5月前
|
前端开发
CSS div隐藏滚动条
CSS div隐藏滚动条
38 0
|
19天前
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——5、DIV+CSS百分比布局
H5+CSS3+JS逆向前置——5、DIV+CSS百分比布局
19 0
|
19天前
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——4、DIV+CSS绘制旗帜练习
H5+CSS3+JS逆向前置——4、DIV+CSS绘制旗帜练习
10 0
|
20天前
|
人工智能 前端开发 开发者
Baidu千帆大模型赋能——CSS控制DIV垂直水平居中——送给大一的孩子们,学会用AI思维来帮助你解决问题
Baidu千帆大模型赋能——CSS控制DIV垂直水平居中——送给大一的孩子们,学会用AI思维来帮助你解决问题
14 1
|
23天前
|
前端开发 JavaScript 开发者
优化CSS重置过程:探索CSS层叠技术的应用与优势
这篇文章介绍了一种名为CSS层叠的技术,用于优化CSS重置过程。它解释了CSS重置的概念,即通过删除浏览器默认样式来确保在不同浏览器上呈现一致的外观。然后,它引入了CSS层叠技术,以更好地控制样式的层次结构和优先级。
|
2月前
|
前端开发
css 实现 div 宽高同比
css 实现 div 宽高同比
|
2月前
|
前端开发
CSS div 水平排列
CSS div 水平排列
|
3月前
|
前端开发
CSS写一个缺角的div
CSS写一个缺角的div
23 1
|
3月前
|
前端开发
css设置div水平居中
css设置div水平居中
|
3月前
|
Web App开发 设计模式 前端开发
DIV+CSS布局总结
DIV+CSS布局总结

相关产品

  • 云迁移中心