十天掌握Web标准:从表格到DIV+CSS布局

5星 · 超过95%的资源 需积分: 29 40 下载量 104 浏览量 更新于2024-07-24 14 收藏 4.31MB DOC 举报
"《十天学会DIV+CSS教程完整版》是一个面向有一定HTML和CSS基础的学习者提供的教程,旨在帮助他们从传统的表格布局过渡到基于Web标准的布局,特别是使用DIV和CSS进行页面构建。本教程注重实践,通过实例逐步讲解关键点和难点,而不是深入理论概念。" 在第一天的学习中,主要介绍了XHTML和CSS的基础知识,包括以下要点: 1. **文档类型**:DOCTYPE声明定义了HTML或XHTML文档遵循的规范。在例子中提到的`<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">`表示这是一个XHTML 1.0过渡类型的文档。过渡类型允许使用一些HTML4.01的标签,但应遵循XHTML的语法规则。保留DOCTYPE声明对于浏览器正确解析和展示页面至关重要。 2. **语言编码**:`<meta http-equiv="Content-Type" content="text/html;charset=gb2312">`这行代码设置了文档的字符集,这里是GBK(国标2312),用于表示汉字编码。不同的编码会影响页面中文字的显示,确保正确设置能避免乱码问题。 3. **HTML标签**:HTML标签是构成网页结构的基本元素,如`<html>`, `<head>`, `<body>`等,它们用于组织网页内容。 4. **CSS样式**:CSS(层叠样式表)用于控制网页的外观和布局,通过选择器选取HTML元素并应用样式规则。例如,`.class {property: value;}`定义了一个类选择器的样式。 5. **CSS优先级**:CSS的优先级取决于选择器的权重,权重越高,样式优先级越高。权重由内联样式、ID选择器、类选择器、元素选择器等计算得出。 6. **CSS盒模型**:盒模型是CSS布局的核心,包括`margin`(外边距)、`border`(边框)、`padding`(内边距)和`content`(内容)。了解盒模型有助于精确控制元素的尺寸和间距。 本教程的目标是让学员能够使用Web标准(即DIV+CSS布局)制作常见页面,通过实例教学,让学生逐步掌握布局技巧,而不过于深究抽象的概念。初学者在开始前需要具备一定的HTML和CSS基础,这样才能更好地跟上课程进度。