结构化HTML，DIV＋CSS网页布局

 正在学习 CSS 布局吗？不是还不能完全掌握纯 CSS 布局？通常有两种情况阻碍你学习： 第一种可能是还没有理解 CSS 处置页面的原理。考虑你页面整体表示效果前，应当先考虑内容的语义和结构，然后再针对语义、结构添加 CSS 这篇文章将告诉你应该怎样把 HTML 结构化。 另一种原因是对那些非常熟悉的表示层属性 ( 例如： cellpadding, hspace align="left" 等等 ) 束手无策，不知道该转换成对 应的什么 CSS 语句。当你解决了第一种问题，知道了如何结构化你 HTML 再给出一个列表，详细列出原来的表示属性用什么 CSS 来代替。 结构化 HTML 刚学习网页制作时，总是先考虑怎么设计，考虑那些图片、字体、颜色、以及布局方案。然后我用 Photoshop 或者 Firework 画出来、切割成小图。最后再通过编辑 HTML 将所有设计还原表现在页面上。 如果你希望你 HTML 页面用 CSS 布局 ( CSS-friendli 需要回头重来，先不考虑 “ 外观 ” 要先思考你页面内容的语义和结构。 外观并不是最重要的一个结构良好的 HTML 页面可以以任何外观表现出来， CSS Zen Garden 一个典型的例子。 CSS Zen Garden 协助我最终认识到 CSS 强大力量。 HTML 不只仅只在电脑屏幕上阅读。用 photoshop 精心设计的画面可能不能显示在 PDA 移动电话和屏幕阅读机上。但是一个结构良好的 HTML 页面可以通过 CSS 不同定义，显示在任何地方，任何网络设备上。 开始思考 首先要学习什么是 " 结构 " 一些作家也称之为 " 语义 " 这个术语的意思是需要分析你内容块，以及每块内容服务的目的然后再根据这些内容目的建立起相应的 HTML 结构。 如果你坐下来仔细分析和规划你页面结构，可能得到类似这样的几块： 标志和站点名称 主页面内容 站点导航 ( 主菜单 ) 子菜单 搜索框 功能区 ( 例如购物车、收银台 ) 页脚 ( 版权和有关法律声明 ) 通常采用 P 元素来将这些结构定义出来，类似这样： ＜ div id="header" ＞＜ /div ＞ ＜ div id="content" ＞＜ /div ＞ ＜ div id="globalnav" ＞＜ /div ＞ ＜ div id="subnav" ＞＜ /div ＞ ＜ div id="search" ＞＜ /div ＞ ＜ div id="shop" ＞＜ /div ＞ ＜ div id="footer" ＞＜ /div ＞ 这不是布局，结构。这是一个对内容块的语义说明。当你理解了结构，就可以加对应的 ID P 上。 P 容器中可以包含任何内容块，也可以嵌套另一个 P 内容块可以包含任意的 HTML 元素 --- 标题、段落、图片、表格、列表等等。 根据上面讲述的已经知道如何结构化 HTML 现在可以进行布局和样式定义了每一个内容块都可以放在页面上任何地方，再指定这个块的颜色、字体、边框、背景以及对齐属性等等。 使用选择器是件美妙的事 id 名称是控制某一内容块的手段 , 通过给这个内容块套上 P 并加上唯一的 id, 就可以用 CSS 选择器来精确定义每一个页面元素的外观表示 , 包括标 题、列表、图片、链接或者段落等等。例如你为 #header 写一个 CSS 规则，就可以完全不同于 #content 里的图片规则。 另外一个例子是可以通过不同规则来定义不同内容块里的链接样式。类似这样： #globalnav a:link 或者 #subnav a:link 或者 #content a:link 也可以定义不同内容块中相同元素的样式不一样。例如，通过 #content p 和 #footer p 分别定义 #content 和 #footer 中 p 样式。从结构上讲，页面是由图片、链接、列表、段落等组成的这些元素自身并不会对显示在什么网络 设备中 ( PDA 还是手机或者网络电视 ) 有影响，可以被定义为任何的表示外观。 一个仔细结构化的 HTML 页面非常简单，每一个元素都被用于结构目的当你想缩进一个段落，不需要使用 blockquot 标签，只要使用 p 标签，并对 p 加一个 CSS margin 规则就可以实现缩进目的 p 结构化标签， margin 表示属性，前者属于 HTML 后者属于 CSS 这就是结构于表现的相分离 . 良好结构的 HTML 页面内几乎没有表现属性的标签。代码非常干净简洁。例如，原先的代码＜ tabl width="80%" cellpadding="3" border="2" align="left" ＞，现在可以只在 HTML 中写＜ tabl ＞，所有控制表示的东西都写到 CSS 中去，结构化的 HTML 中， tabl 就是表格，而不是其他什么 ( 比如被用来布局和定位 )