十天学会Web标准：从入门到精通div+css布局

需积分: 9 77 浏览量更新于2024-07-26 收藏 4.48MB DOC 举报

"学习div+css布局的初学者教程" 这篇教程是针对初学者设计的，旨在帮助已经有一定HTML和CSS基础的学习者从表格布局转向Web标准（div+css）布局。尽管“div+css”这个术语并不准确，但在业界常被用来指代基于Web标准的页面布局方法。学习本教程前，需要具备基本的HTML和CSS知识，尤其是表格布局的经验。教程将通过实例教学，逐步解析关键点和难点，而非深入讨论抽象概念，以便更直观地理解和应用。教程第一天的内容主要涵盖XHTML和CSS的基础知识，包括以下几个方面： 1. **文档类型**：文档类型的声明是HTML文档的开头部分，例如`<!DOCTYPE html>`，它告诉浏览器文档遵循的规范。在这个例子中，使用的是XHTML 1.0的过渡类型，这种类型允许混合HTML4.01的标签，但要求语法的严谨性。不包含文档类型声明可能会导致样式问题。 2. **语言编码**：`<meta>`标签用于定义文档的字符编码，例如`charset=gb2312`，意味着文档使用GB2312编码。正确设置字符编码能确保文本的正确显示，避免乱码问题。现在普遍推荐使用UTF-8编码，因为它支持更多的字符集。 3. **HTML标签**：HTML标签是构建网页结构的基本元素，比如`<div>`就是一个常用的内容容器，而`<p>`用于段落，`<h1>`到`<h6>`表示标题等级等。理解并熟练运用这些标签是创建结构化页面的关键。 4. **CSS样式**：CSS（层叠样式表）用于控制网页的样式和布局，通过选择器如类名（`.class`）、ID（`#id`）或元素名（`element`）来指定样式。它可以实现颜色、字体、位置等视觉效果的控制。 5. **CSS优先级**：CSS的优先级决定了样式如何覆盖。内联样式（如`style="..."`）> ID选择器 > 类选择器/属性选择器/伪类 > 元素选择器。了解优先级有助于解决样式冲突问题。 6. **CSS盒模型**：盒模型是CSS布局的核心概念，包括内容(content)、内边距(padding)、边框(border)和外边距(margin)。理解盒模型可以帮助精确控制元素的大小和位置。教程中没有将CSS和CSS Hack单独讲解，而是结合实际需要在适当的地方介绍。HTML基础和CSS基础的介绍较为简洁，重点放在了实践中必需的知识点。通过这样的方式，初学者可以快速上手，制作出基于Web标准的常见页面。