13XHTML结构化之二归类.pdfVIP

XHTML结构化之二：案例分析： W3school 的结构化标记 上一节 下一节 无论如何，不要跳过本节。阅读本章将增进你的技能，为你的网页减肥，并且使你对标记与设计之间的差 异有更清晰的认识。本章中的理念是易于学习的，但是却能极大的提高网站的性能，以及设计、制作和更 新网站的便利性。 在本节，你将学到如何撰写合乎逻辑的、紧凑的标记，使得你有能力将带宽流量降低 50% 左右，在减少服 务器负担和压力的同时，减少网站的加载时间。通过去除那些表现元素，并改掉那些没有任何好处的坏习 惯，我们就可以达到上述的目的。 这些坏习惯折磨着网络中的许多站点， 特别是那些将 CSS 代码与主要基于表格的布局混合在一起的站点。 这种做法笨拙且不经济，即使是对于那些在其他领域很有经验的设计师来说。同时，出现这个问题的几率 是均等的，不论是那些手写代码的站点，还是利用可见编辑工具，比如 Dreamweaver 和 GoLive ，来 创建的站点。 本节会提出这些常见的错误，这样你就可以识别和防范它们，并且学会如何改正错误。我们详细阐述唯一 标识符属性 (id) - ，并展示它如何使你可以编写极其紧凑的 XHTML 代码，不论你创建的是混合布局还 是纯粹的 CSS 布局。 每个元素都必须结构化吗？ 正如上一节中我们讲到的那样， 每个元素都可以被结构化， CSS 可使得一个有序或无序的列表显示为彻头 彻尾的导航栏，其中还拥有反转按钮效果。文档的内容可以通过普通的元素进行标记，这些元素通过特定 的结构化属性标志来指示出它们在网站设计中所扮演的语义角色。 我们在公元 2006 年创建了 W3School 的第一个中文测试版，我们在一开始就使用了 CSS 进行布局， 并使用 XHTML 来结构化文档。每一个其中的元素都是结构化的，从标题到列表，乃至段落。你可以在 w3school 的每个页面看到具有反转效果的首页按钮和二级菜单按钮。下面是这两个组件的 XHTML 代 码： div id=headerh1a href=/w3school 在线教程 /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=XML 教程 XML 教程 /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 、class 及 role 属性配合，提供向文档添加额外结构的通用机制。这个元素不会将 表现的风格定义于内容。所以，创作者可以通过将这个元素与样式表、 xml:lang 、属性等配合使用，使 XHTML 适应他们自身的需求和口味。 div 是 division 的简写。 division 意为分割、区域、分组。比方说，当你将一系列的链