HTML/CSS布局：从表格到DIV与框架的应用

"这份资料主要讲述了网页布局的相关知识，包括表格、框架和DIV层技术的使用。" 在网页设计中，布局是至关重要的，它决定了网页内容的展示方式和用户体验。本资料主要探讨了三种常见的网页布局技术：表格布局、框架布局和DIV+CSS布局。 1. 表格布局： 表格在早期的网页设计中广泛用于布局，通过HTML的`<table>`标签，可以创建多行多列的结构，用于放置文字和图片。在描述中提到，使用"DIV+TABLE"的方式，即将表格用于内容区块，而用DIV进行整体布局。这种混合使用的方法既可以利用表格的整齐排列特性，又可以通过DIV进行更灵活的样式控制。不过，现代网页设计更倾向于使用CSS来替代表格进行布局，因为CSS提供了更高的灵活性和更好的可访问性。 2. 框架布局： 框架是HTML中的`<frameset>`和`<frame>`元素组合使用，可以将浏览器窗口分割成多个独立的区域，每个区域可以加载不同的网页内容。框架常用于创建固定不变的导航栏或头部信息，而主要内容区域可以动态改变。例如，描述中提到了一个典型的框架布局，包括顶部广告栏、左侧导航栏和右侧主要内容区域。框架的使用可以使得页面的某些部分保持不变，而其他部分更新，提高用户体验。但需要注意的是，框架在SEO（搜索引擎优化）方面存在一定的劣势，因为它可能会影响搜索引擎对网页内容的抓取。 3. DIV层布局： DIV是HTML中的一个块级元素，通过CSS可以定义其尺寸、位置和其他样式属性，从而实现更灵活的布局。在描述中提到的"head导航块层"、"content内容块层"和"foot版权块层"就是使用DIV进行划分的典型例子。通过CSS，我们可以创建浮动元素、定位元素，实现响应式设计，使网页适应不同设备的屏幕尺寸。 此外，资料还涉及了HTML/CSS的基础知识，如选择器的使用（类选择器、标签选择器和ID选择器）、超链接的四种伪类（`:link`、`:visited`、`:hover`、`:active`）以及样式表的三种应用方式（内部样式、外部样式和行内样式）。这些基础知识对于理解和创建网页布局至关重要。 这份资料提供了一个全面的视角，涵盖了从传统的表格布局到现代的框架和DIV布局，以及相关的HTML/CSS基础，是学习网页布局设计的良好参考资料。