HTML5中三种布局方式的分析比较

时间：2024-05-04

隋潮李金友通化师范学院计算机学院

HTML5中三种布局方式的分析比较

隋潮李金友通化师范学院计算机学院

随着网络科技的发展，网页设计已进入人们的生活，并发挥着至关重要的作用。网页设计的整体效果直接取决于网页布局，为了更好的了解HTML5，本文简单分析比较一下HTML5中的三种布局：表格、框架和DIV+CSS方式。

布局 HTML DIV+CSS

1 概述

网页是网站的基本要素，网页中的布局更是吸引浏览者的一大要素，网页只有布局和内容完美的结合才能深受浏览者的喜爱。网页布局的类型有很多，那么，如何选择布局就要视情况而定了，如果内容繁多，“国”字型或拐角型比较实用；遇到说明性较强但内容数量上一般时，标题正文型布局比较实用；而三种框架型布局速度较快，浏览起来较方便，但是结构变化上不是很灵活；如果想要展示个人主页的个性风采或者一个公司想要展示他的形象，则应该选择封面型布局；如果不想使用过多的文字只想更灵活，更丰富的展现页面，那么Flash型布局最为合适不过。

2 三种布局方式

HTML5中三种布局方式分别为表格布局、框架布局和DIV+CSS布局。下面简单介绍一下三种布局方式。

2.1 表格布局

表格布局早期较为常见，表格可以简明扼要的显示和组织数据，准确的定位是表格的一大优势，而且不用考虑各元素之间的相互影响。表格布局简单灵活，比较直观，使用方便，适用于初学者，支持大多数浏览器也是表格布局的一个有利因素。至今还有很多网站在使用表格布局。表格布局的缺点就是当页面想要调整时，通常都需要重新制作表格。遇到多处页面需要修改时，工作量将十分庞大。当面临一个较为复杂的页面时，HRML中将布满lt;trgt;和lt;tdgt;标签。如果表格过长或者内容过多，则需要下载较长的时间，页面才能显示出来。

2.2 框架布局

框架作为导航很是方便，在网页的若干个区域中可以明显的找出不同的内容。框架布局看起来清晰明了，并且有滚动条可以显示更多的数据，各个框架之间互不干扰，减少了下载次数和下载时间，使网速有一定的提高。通常导航种类较多或网页的功能较复杂时，则选择框架结构。lt;framegt;lt;/framegt;是框架结构的常用标签。但是框架结构不能为每个页面都设置标题，同事也不适用于搜索引擎方面的问题。从而，框架结构布局使用率较低。

2.3 DIV+CSS布局

DIV是一种布局的元素，为内容提供内容和背景，相当于容器的性质，它把文档分成几个区域或模块，不用CSS技术就可以改变页面的布局，颜色，内容等等，DIV标签的属性同事时控制了所包含元素的特性。CSS（Cascading Style Sheets）可译为“层叠样式表”它控制着网页的样式，目前最新版本是CSS3。为了控制网页布局，将格式和结构相分离，制作出小巧灵活的便捷的网页。

DIV+CSS布局具有如下优势：

（1）表现与内容相分离

只把储文本信息放在HTML中，设计部分单独放在一个样式文件里，这种净内容和表现分离的形式更符合搜索引擎的标准。

（2）提高索引效率

标签的嵌套形式可以由HTML来替代，页面内容也将会使用搜索引擎更快更有效的搜索到，一定程度上提高了索引的效率。

（3）提高网页浏览速度，代码简洁

从文件大小的角度看，DIV+CSS重构的页面要比表格编码的页面文件容量小得多，一般情况下前者只有后者的一半大小，大大减少了浏览器需要解析的标签。

（4）易于维护和改版

一个CSS文件可以由多个页面所共享，要想改变网站的整体布局只需要修改CSS文件就可以了，比较方便。

3 三种布局方式的比较

3.1 重构性布局

表格布局和框架布局所生成的页面布局文件都是页面的内容和布局格式控制混合在一起的，如此一来如果想对网页布局进行略大的改动或者重新发布整个布局时，就会十分的麻烦，很可能会重新制作整个页面。在DIV+CSS布局方式中，内容和布局两者之间则是一个分离体，只要简单的使用属性就可以轻轻松松改变布局的风格和结构。