% Q$ k0 S Z& D, V ＜div id="subnav"＞＜/div＞ 3 Y, j3 @0 p2 g: U3 s, l4 Q' P
4 R0 v+ r2 z6 d! F0 ]
＜div id="search"＞＜/div＞ & h. a5 K; H M # H. j2 |7 y E8 V$ U, M4 Y% ?8 t; z ＜div id="shop"＞＜/div＞ ' K& \/ d" R) z; |2 y+ u
( d8 d! P6 m& t. ?$ Z1 U3 i ＜div id="footer"＞＜/div＞ 9 A, J$ P4 |, a/ i2 O0 |$ R; S8 t( M& q% `* r
这不是布局，是结构。这是一个对内容块的语义说明。当你理解了你的结构，就可以加对应的ID在DIV上。DIV容器中可以包含任何内容块，也可以嵌套另一个DIV。内容块可以包含任意的HTML元素---标题、段落、图片、表格、列表等等。 ( C+ ^' C4 g: l ; \5 d7 Z# J r% \4 U4 l 根据上面讲述的，你已经知道如何结构化HTML，现在你可以进行布局和样式定义了。每一个内容块都可以放在页面上任何地方，再指定这个块的颜色、字体、边框、背景以及对齐属性等等。 c' S2 d" m1 a0 d" t' D : ?9 \* |: U' s: M( H b 使用选择器是件美妙的事 9 m$ `* W: Z6 B1 P0 [
id的名称是控制某一内容块的手段,通过给这个内容块套上DIV并加上唯一的id,你就可以用CSS选择器来精确定义每一个页面元素的外观表现,包括标 题、列表、图片、链接或者段落等等。例如你为#header写一个CSS规则，就可以完全不同于#content里的图片规则。 T& r. }! _' f! b/ s4 {
/ i1 c* r2 d1 |8 u) c0 K4 y
另外一个例子是：你可以通过不同规则来定义不同内容块里的链接样式。类似这样：#globalnav a:link或者 #subnav a:link或者#content a:link。你也可以定义不同内容块中相同元素的样式不一样。例如，通过#content p和#footer p分别定义#content和#footer中p的样式。从结构上讲，你的页面是由图片、链接、列表、段落等组成的，这些元素本身并不会对显示在什么网络 设备中(PDA还是手机或者网络电视)有影响，它们可以被定义为任何的表现外观。 9 E/ {( [+ ~4 j% T! [
" m% N, ~2 W8 y$ v% b2 K0 S
一个仔细结构化的HTML页面非常简单，每一个元素都被用于结构目的。当你想缩进一个段落，不需要使用blockquote标签，只要使用p标签，并对p 加一个CSS的margin规则就可以实现缩进目的。p是结构化标签，margin是表现属性，前者属于HTML，后者属于CSS。(这就是结构于表现的 相分离.)' H; ~% _5 i# p* P
良好结构的HTML页面内几乎没有表现属性的标签。代码非常干净简洁。例如，原先的代码＜table width="80%" cellpadding="3" border="2" align="left"＞，现在可以只在HTML中写＜table＞，所有控制表现的东西都写到CSS中去，在结构化的HTML中， table就是表格，而不是其他什么(比如被用来布局和定位)。 , u+ Q7 e+ s$ S' }
' k2 d4 L T2 v. f
亲自实践一下结构化 + k% g& x# y2 J% g6 Q) k g, k% R" a% k) i; O8 G1 i. P$ ^
上面说的只是最基本的结构，实际应用中，你可以根据需要来调整内容块。常常会出现DIV嵌套的情况，你会看到"container"层中又有其它层，结构类似这样： 1 K: Q# a# Y, ?. D7 R
$ w2 M" u* b4 \' o9 Q. I* f% X
＜div id="navcontainer"＞ ; W; a; ~. d1 h
' z3 h2 W5 H7 i/ r$ L1 j$ ]- d ＜div id="globalnav"＞ 5 S: v5 m* I$ P8 N! I6 ~ / O2 S8 E. q& b1 m ＜ul＞a list＜/ul＞ ! W' s, L% b0 }; \ 6 ?7 M& V {0 L4 k- z ＜/div＞ 1 p7 A' k! t5 o7 e; V 1 o4 W9 f7 P" n& w0 G M1 j5 \ ＜div id="subnav"＞ - e# i2 f: V8 N5 z3 Y5 s7 S$ ^8 C# r4 m. h( O
＜ul＞another list＜/ul＞ " R, y h- T6 F8 B) e+ E- U, @3 N. @( o* }4 Y$ T/ F
＜/div＞ - ^+ q* Y/ _: D4 r) G& H. K, j# J + z+ r0 n, U& l, V9 o+ w+ T ＜/div＞ . Z" J, |, W) A) r, t* u
