你正在学习CSS布局吗？是不是还不能完全掌握纯CSS布局？通常有两种情况阻碍你的学习： 第一种可能是你还没有理解CSS处理页面的原理。在你考虑你的页面整体表现效果前，你应当先考虑内容的语义和结构，然后再针对语义、结构添加CSS。这篇文章将告诉你应该怎样把HTML结构化。 另一种原因是你对那些非常熟悉的表现层属性(例如：cellpadding,、hspace、align="left"等等)束手无策，不知道该转换成对应的什么CSS语句。当你解决了第一种问题，知道了如何结构化你的HTML，我再给出一个列表，详细列出原来的表现属性用什么CSS来代替。 结构化HTML 我们在刚学习网页制作时，总是先考虑怎么设计，考虑那些图片、字体、颜色、以及布局方案。然后我们用Photoshop或者Fireworks画出来、切割成小图。最后再通过编辑HTML将所有设计还原表现在页面上。
### DIV+CSS布局入门知识点详解
#### CSS布局基础与HTML结构化
- **CSS处理页面原理**：在学习CSS布局之前，首先需了解CSS如何处理页面。CSS的主要职责是为HTML文档提供样式和布局，而HTML则负责内容的结构与语义。这意味着，在思考页面的整体表现效果之前，应优先关注内容的组织方式。
- **结构优先原则**：构建网页时，应遵循“内容（Content）—结构（Structure）—表现（Presentation）”的原则。即首先确定页面的内容和信息，接着构建合理的HTML结构，最后才应用CSS进行样式美化。
- **语义化标签**：选择正确的HTML标签不仅有助于提高网站的可访问性和搜索引擎优化（SEO），还能让CSS更易于编写和维护。例如，使用`<header>`、`<nav>`、`<main>`、`<section>`等语义化标签来明确各部分的作用。
- **DIV的作用**：`<div>`标签是一个无意义的容器元素，常用于组合其他HTML元素，并为它们添加样式。在CSS布局中，`<div>`作为通用的分组元素，广泛应用于创建复杂布局。
#### CSS属性与传统HTML表现属性的对应关系
- **替代`cellpadding`**：在表格中，`cellpadding`属性用于设置单元格内部边距。在CSS中，可以通过`padding`属性实现相同的效果。例如，设置表格单元格内边距为5px：
```css
td {
padding: 5px;
}
```
- **替代`hspace`和`vspace`**：这两个属性用于控制图像的水平间距和垂直间距。在CSS中，可以使用`margin`属性替代它们。例如，设置图片左右间距为10px，上下间距为5px：
```css
img {
margin: 5px 10px;
}
```
- **替代`align="left"`**：`align`属性用于设置元素的对齐方式。在CSS中，可以使用`text-align`属性控制文本对齐，或使用`float`属性（对于块级元素）进行浮动布局。例如，使文本左对齐：
```css
p {
text-align: left;
}
```
#### XHTML下的CSS+DIV布局技巧
- **DOCTYPE声明**：在XHTML文档中，正确地声明文档类型非常重要。例如，使用严格模式（Strict）的XHTML 1.0：
```html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
```
- **命名空间**：为了确保文档的兼容性，尤其是当文档中包含多个XML命名空间时，需要正确地声明命名空间。例如：
```html
<html xmlns="http://www.w3.org/1999/xhtml">
```
- **语言编码**：在`<head>`部分使用`<meta>`标签指定字符集，如UTF-8：
```html
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
```
- **外部样式表**：通过`<link>`标签引用外部CSS文件，增强代码的重用性和维护性：
```html
<link rel="stylesheet" type="text/css" href="styles.css" />
```
- **双表法调用样式表**：有时需要同时加载多个样式表文件，可以使用多个`<link>`标签实现：
```html
<link rel="stylesheet" type="text/css" href="reset.css" />
<link rel="stylesheet" type="text/css" href="styles.css" />
```
- **其他Head区设置**：除了上述设置外，还可以在`<head>`部分添加其他元信息，比如收藏夹小图标：
```html
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
```
通过以上知识点的学习和实践，可以更好地理解和掌握DIV+CSS布局的基本原理和技术细节，为成为一名优秀的网页设计师打下坚实的基础。
