基于HTMLCSS的网页布局实现

2023-10-19 理论教育版权反馈

【摘要】：在WEB 标准成为WEB 开发人员的共识以前，或者说在CSS 语言被广大WEB 开发人员掌握并广泛使用之前，网页布局大量使用表格来实现。其次，使用table、tr、td 等标签来实现布局，使得这些标签丧失了它们本来的语义。再次，大量使用表格实现布局，直接违反了结构和表现分离的原则，从而不符合WEB 标准。在目前的WEB 开发实践中，普遍采用CSS 结合div 标签来实现网页的布局。这样整个页面的版式就受到了控制，从而实现了网页的布局。

网页布局又可理解为网页排版。简单地说就是网页中的某一块内容应该放置在网页的哪个位置，占用多大的面积。

在WEB 标准成为WEB 开发人员的共识以前，或者说在CSS 语言被广大WEB 开发人员掌

握并广泛使用之前，网页布局大量使用表格来实现。通过规划表格的行和列，并合理地使用单元格合并，再把需要定位的网页元素放置到各个单元格中，这样可以很容易地实现网页布局。但是，这样做带来了很大的问题。

➢首先，复杂的布局需要多个表格深层嵌套，这会拖累浏览器呈现网页内容的速度，也使得搜索引擎检索内部的数据变得困难。(www.chuimin.cn)

➢其次，使用table、tr、td 等标签来实现布局，使得这些标签丧失了它们本来的语义。从语义上来讲，table 明显是用来承载二维表格数据，比如某个班级在某次考试后的学员成绩表；tr 用来表示表格中的一行，比如特定某个学员的一条成绩记录；td 则用来表示行中的某个单元格，比如特定某一门课程的分数。而使用表格相关的标签实现布局使得它们与它们本来的语义毫不相干。

➢再次，大量使用表格实现布局，直接违反了结构和表现分离的原则，从而不符合WEB 标准。试想一下，网页布局是要解决特定的某一块网页元素应在网页的哪个位置显示以及显示时占用多大面积的问题。这明显属于网页外观样式或者说网页如何表现的范畴，这与表格无关。表格作为HTML 标签，它只应负责承载二维表格的数据以及行与列这种结构。很明显，按照HTML 和CSS 这两种语言的分工，或者按照结构与表现分离的原则，网页布局应该由CSS 样式表语言实现，而与HTML 语言中的表格无关。

在目前的WEB 开发实践中，普遍采用CSS 结合div 标签来实现网页的布局。基本思路是：将整个网页的所有内容分割成为相对独立的内容块，这些内容块分别用一个div标签来包裹，再使用CSS 的属性分别设置这些内容块的位置和尺寸。这样整个页面的版式就受到了控制，从而实现了网页的布局。

基于HTMLCSS的网页布局实现

相关推荐