XHTML 结构化之二：案例分析：W3Cschool 的结构化标记.pdf

XHTML 结构化之⼆：案例分析：W3Cschool 的结构化标记 ⽆论如何，不要跳过本节。阅读本章将增进你的技能，为你的⽹页减肥，并且使你对 记与设计之间的差异有更清晰的认识。本章中的理念是易于学习的，但是却能极⼤ 的提⾼⽹站的性能，以及设计、制作和更新⽹站的便利性。 在本节，你将学到如何撰写合乎逻辑的、紧凑的 记，使得你有能⼒将带宽流量降低 50%左右，在减少服务器负担和压⼒的同时，减少⽹站的加载时间。通过去除那些表 现元素，并改掉那些没有任何好处的坏习惯，我们就可以达到上述的⽬的。 这些坏习惯折磨着⽹络中的许多站点，特别是那些将 CSS 代码与主要基于表格的布局 混合在⼀起的站点。这种做法笨拙且不经济，即使是对于那些在其他领域很有经验的 设计师来说。同时，出现这个问题的⼏率是均等的，不论是那些⼿写代码的站点，还 是利⽤可见编辑⼯具，⽐如 Dreamweaver 和 GoLive ，来创建的站点。 本节会提出这些常见的错误，这样你就可以识别和防范它们，并且学会如何改正错 误。我们详细阐述唯⼀ 识符属性 (id) - ，并展⽰它如何使你可以编写极其紧凑的 XHTML 代码，不论你创建的是混合布局还是纯粹的 CSS 布局。 每个元素都必须结构化吗？ 正如上⼀节中我们讲到的那样，每个元素都可以被结构化，CSS 可使得⼀个有序或⽆ 序的列表显⽰为彻头彻尾的导航栏，其中还拥有反转按钮效果。⽂档的内容可以通过 普通的元素进⾏ 记，这些元素通过特定的结构化属性 志来指⽰出它们在⽹站设计 中所扮演的语义⾓⾊。 我们在公元 2006 年创建了 W3Schoo 的第⼀个中⽂测试版，我们在⼀开始就使⽤了 CSS 进⾏布局，并使⽤ XHTML 来结构化⽂档。每⼀个其中的元素都是结构化的，从 题到列表，乃⾄段落。你可以在 W3Cschoo 的每个页⾯看到具有反转效果的⾸页按 钮和⼆级菜单按钮。下⾯是这两个组件的 XHTML 代码： div id=headerh1a href=/W3Cschool在线教程/a/h1/div div id=navfirst ul id=menu li id=ha href=/h.asp title=html教程html教程/a/li li id=xa href=/x .asp title=XM 教程XM 教程/a/li li id=ba href=/b.asp title=浏览器脚本浏览器脚本/a/li li id=sa href=/s.asp title=服务器脚本服务器脚本/a/li li id=da href=/d.asp title=dot net教程dot net教程/a/li li id=ma href=/m.asp title=多媒体教程多媒体教程/a/li li id=wa href=/w .asp title=建站⼿册建站⼿册/a/li /ul /div div、id 和其他帮⼿ 如果被正确地使⽤，div 可以成为结构化 记的好帮⼿，⽽ id 则是⼀种令⼈惊讶的⼩ ⼯具，它使你有能⼒编写极其紧凑的 XHTML ，以及巧妙地利⽤ CSS ，并通过 准⽂ 档对象模型 (DOM) 向站点添加复杂精巧的⾏为。 W3C 在其最新的 XHTML2 草案的 XHTML 结构模型中这样定义 div ： div 元素，通过与 id、c ass 及 ro e 属性配合，提供向⽂档添加额外结构的通⽤机制。 这个元素不会将表现的风格定义于内容。所以，创作者可以通过将这个元素与样式 表、xm : ang、属性等配合使⽤，使 XHTML 适应他们⾃⾝的需求和⼜味。 div 是 division 的简写。division 意为分割、区域、分组。⽐⽅说，当你将⼀系列的链 接组合在⼀起，就形成了⽂档的⼀个 division 。 确定结构的通 机制 所有编写 HTML 的⼈对段落和 题这类常见的元素都很熟悉，但是有些⼈对 div 就可 能不那么熟悉了。在W3C的描述中我们可以找到理解 div 元素的关键，“⼀种添加结构 的通⽤机制。” 在本站的⾸页，我们将教程⽬录列表封装于⼀个 div 之中，这是因为教程⽬录并不是 正⽂的任何元素的⼀部分。其中，h2元素 记每个教程的 题，同时 u 列表元素 记 每个教程的详细列表。但是在更⼤更具体的意义中，这个教程⽬录扮演了⼀个结构化 的⾓⾊，即⼆级导航组件。为了强调这个⾓⾊，我们使⽤ navsecond 这个 id 注这个 div 。 div id=navsecond h2HTM 教程/h2 ul lia