IT兄弟连 HTML5教程 DIV+CSS网页标准化布局的优势

 

标准的网页都需要对内容进行布局，以前都是采用表格的定位技术，从2005年开始逐步转向DIV+CSS的布局方式，目前绝大多数的网站都是采用这种布局方式。使用DIV+CSS对网站进行布局符合W3C标准，采用这种方式布局通常是为了说明与HTML表格定位方式的区别。通过使用DIV盒子模型结构将各部分内容划分到不同的区块，然后用CSS来定义盒子模型的位置、大小、边框、内外边距、排列方式等。简单地说，DIV用于搭建网站结构（框架），CSS用于创建网站表现（样式/美化）。该标准简化了HTML页面代码，获得了一个较优秀的网站结构，有利于日后网站维护、协同工作和便于搜索引擎抓取。当然并不是所有的网页都需要用DIV布局，例如数据页面、报表之类的页面，还是使用HTML的表格会比较方便，Web标准里并没有说要抛弃Table。

 

DIV+CSS对页面布局的优势

DIV+CSS是一种网页的布局方法，在HTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。DIV+CSS是网站标准（也称“Web标准”）中的常用术语之一，可实现网页页面内容与表现相分离。采用DIV+CSS对网站进行构建越来越被网页设计者重视，因为在DIV+CSS结构的网页中，几乎每个元素的属性都是使用CSS定义的，所以对于网页区域和元素的调整起到了很大的作用。这种DIV+CSS模式的网站设计具有以下优势。

 

1．表现和内容相分离

在HTML文件中只存放文本信息，而将设计部分放在一个独立样式文件中，使我们能够对页面的布局施加更多的控制，HTML代码仍然可以保持简单明了的初衷。

 

2．代码简洁，提高页面浏览速度

CSS的极大优势表现在简洁的代码。对于一个大型网站来说，不仅可以节省大量的带宽、提高页面的浏览速度，而且增加了有效关键词占网页总代码的比重。因此使用DIV+CSS的Web标准制作的网站，对搜索引擎抓取页面具有一定的优势。

 

3．易于维护和改版

网页内容和设计样式的分离，减少了一些重复构建的方法，使页面和样式的调整变得更加方便，只要简单地修改几个CSS文件，就可以重新设计整个网站的页面。很多问题只需要改变CSS而不需要改动程序，从而降低了网站改版的成本。

 

4．提高搜索引擎对网页的索引效率

使用DIV+CSS方式构建的网站容易向W3C标准靠拢，因为网站是否符合W3C标准是搜索引擎对网页排名的一个影响因素。另外，网站源代码简洁，除了几个div、span、ul、li之类的标签，几乎不用其他标签，而且使用DIV+CSS可以把网页中的主要内容放在前面。这样网站的内容完全裸露在搜索引擎面前，便于搜索引擎抓取关键内容。