在现代网站开发领域，元素早已超越简单容器角色，成为构建复杂、灵活、语义化网页结构的核心工具，深入理解其原理与应用策略,是每位前端开发者必备的专业素养。
div+css和table功能实现各有什么优缺点？
DIV与TABLE本身并不存在什么优缺点，所谓web标准只是推荐的是正确的使用标签，好比说：DIV用于布局，而TABLE则本来就是转二维数据的。 让TABLE做该做的事，并不是说页面里不出现TABLE就是多么多么牛。 用DIV进行排版的优势就是我不说，大家应该都比较清楚。 DIV是标准，是大势所趋，但并不意味着所有的页面都适合用它来做。 中国的门户和国外的有很大的区别，中国网民并不喜欢信息量少的页面，YAHOO到了中国页面上的内容就多了不少，而上次改为简洁的页面后访问量下降的厉害以至于没过几天就又改了回来。 正式由于中国的国情造就了搜狐、新浪这样门户。 为什么DIV不适合他们？下面我从几个方面来逐一说明：精简代码：大家都说DIV的布局精简代码，但是用DIV替代TABLE所节约的代码又被CSS（样式）所占用，而这些样式大多用于控制DIV的排版布局。 那你会说了，CSS可以放在外部重用啊，要想得到这个问题的答案请往下看。 重用性与下载量：统一使用一个的样式表文件，可以实现修改一次，全站修改的效果，这样使得维护的成本更低。 但是请大家换一个角度想，如果所有页面在加载时都要访问一个文件，那这个文件每天的下载量，特别时在搜狐、新浪的网站平台上将达到几亿次，这就需要后面有很多台前端web服务器在做支撑，那后台的成本无形中也提高了很多。 如果后台支撑没有做好，那么页面就会出现花屏，之前所作的工作也是白费。 很多人会问，这样的几率太小了。 我们所作的工作就是为了避免这一两次意外的发生，如果意外发生了，对于门户后果将是不堪设想的。 HTTP通讯：统一的样式表文件采用外部调用的形式，这样每次加载单个页面都会多一次对服务器的http请求服务器都会增加一次响应，这样对前端web服务器会是很大的消耗。 而原来很长时间都是将css和js写在页面前端（大家可以看看sohu和sina的页面，大多都是采用这样的形式），而不是作为外部调用的形式，也是为了尽量避免给服务器增加消耗。 页面缓存：每次用户访问的页面，都会在浏览器缓存中保存一定时间，以保证用户下次再访问该页面时能够大大提高页面显示速度。 而每次修改都会使页面重新下载，对于每个外部导入的样式文件也是如此，如果CSS文件修改，那么访问网站的每一个页面都会重新下载，而以往的将样式写在页面中的方式，只是修改的页面需要重新下载。 兼容性：对于CSS（样式表）并不是所有浏览器的所有版本都支持的很好，比如IE5以前的浏览器对于CSS的支持就不是很好。 而现在使用IE5以前版本浏览器的用户不在少数，这样就使得在页面制作的过程中需要针对不同浏览器版本进行测试，以保证兼容性，无形中也增加很多工作量（至少我接触的开发人员制作div页面比table页面的标准时间要长一些）。 横切与延展性：横切——传统的布局方式为了使页面下载的更快，把页面自上而下分成若干个块，但是往往采用DIV进行布局的页面都会出现这样的情况，由于每块中间栏或者其他栏内容条数不固定导致两边栏目没有同时自适应，而出现留白。 相比之下传统的table方式更容易规避这样情况的发生。 以上我们只是讨论某一技术在某一领域的可用性，而非技术本身。 说了这么多并不是说DIV这种布局方式不好，而是说我们应该正确的看待Table在以内容为基础的大型门户中的作用，而不是人云亦云。 之所以DIV的布局方式没有在大型网站应用，不是说门户没有用DIV是技术落后，是里面的人没有前瞻性，而是多种原因决定的。 网易之所以全部采用DIV的方式是因为内容并不是他们主攻方向。 而对于其他门户来说，这样的决策是要靠时间来验证的。 只是现在这个时机还不成熟而已。
DIV+CSS有什么优点？
1、符合W3C标准。 微软等公司均为W3C支持者。 这一点是最重要的，因为这保证您的网站不会因为将来网络应用的升级而被淘汰。 2、支持浏览器的向后兼容，也就是无论未来的浏览器大战，胜利的是IE7或者是火狐，您的网站都能很好的兼容。 3、搜索引擎更加友好。 相对与传统的table,采用DIV+CSS技术的网页，对于搜索引擎的收录更加友好。 4、样式的调整更加方便。 内容和样式的分离，使页面和样式的调整变得更加方便。 现在YAHOO,MSN等国际门户网站，网易，新浪等国内门户网站，和主流的WEB2.0网站，均采用DIV+CSS的框架模式，更加印证了DIV+CSS是大势所趋。 5、CSS的极大优势表现在简洁的代码，对于一个大型网站来说，可以节省大量带宽，而且众所周知，搜索引擎喜欢清洁的代码。 6、表现和结构分离，在团队开发中更容易分工合作而减少相互关联性
网页中使用div+css有什么好处
4、缩短改版时间，因为网站的布局都是通过外部的css文件来控制，只要简单的修改几个CSS文件就可以将许多网页的风格格式同时更新，不用再一页一页地更新了。 你可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的行，那么整个站点的所有页面都会随之发生变动。 5、强大的字体控制和排版能力，CSS控制字体的能力比糟糕的FONT标签好多了，CSS不再需要用FONT标签或者透明的1px图片来控制标题、改变字体颜色、字体样式等等。 6、提高易用性，使用CSS可以结构化HTML，例如：p标签只用来控制段落，h1-h6标签只用来控制标题，table标签只用来表现格式化的数据等等。 你可以增加更多的用户而不需要建立独立的版本。 7、更好的扩展性。 你的设计不仅仅用于web浏览器，也可以发布在其他设备上，比如Powerpoint等。 8、更灵活控制页面布局，通常页面的下载是按照代码的排列顺序，而表格布局代码的排列代表从上向下，从左到右，无法改变。 而通过CSS控制，您可以任意改变代码的排列顺序，比如将重要的右边内容先加载出来。 9、表现和内容相分离，干净利落，将设计部分剥离出来放在一个独立样式文件中，而网页主要来放置您的内容，你可以减少未来网页无效的可能。
发表评论