XHTML结构化：使用XHTML按标准重构网站.doc

XHTML结构化：使用XHTML按标准重构网站.
我们曾经为本节撰写的标题是：“XHTML:简单的规则，容易的方针。”原因之一是，本节讨论的规则和方针是简单和容易的。原因之二是，一本简单和容易的WEB设计图书，就像超级市场的新式的免费商品一样，虽然常见却可以有效地吸引人的眼球，这样的东西可以刺激人的兴趣，并且鼓励人们尝试。我确实希望本节的内容可以激发你的兴趣，并鼓励你去尝试。为什么这么说呢？因为一旦你掌握了本章包含的简单容易的理念，你就会重新思考网页运作的方式，并开始改变建造它们的方法。然而我并不希望你只是将代码重新改写一边。我希望你可以实实在在地以另一种方式思考和工作。另一方面，重构才是XHTML真正的意义。在本章，我们将研究结构化标记的机制和涵义。如果你正在将网站标准融入你的开发项目，你或许会觉得本章的内容有些熟悉。不过即便是这方面的老手，也会从本章发现意外的收获。XHTML规则概要将传统的HTML转换为XHTML 1.0是快捷且无痛的，只要你遵守一些简单的规则和容易的方针。不管是否使用过HTML，都不会妨碍你使用XHTML。使用恰当的文档类型声明和命名空间。 使用meta元素声明你的内容类型。 使用小写字母书写所有的元素和属性。 为所有的属性值加引号。 为所有的属性分配值。 关闭所有的标签。 使用空格和斜线关闭空标签。 不要在注释中写双下划线。 确保小于号及和号为<和& Unicode和其他字符集XML、XHTML、和HTML 4.0文档的默认字符集是Unicode，一个由Unicode联盟定义的标准。Unicode是一套全面的字符集，它为每个字符提供了一个特定的唯一的数字，不论平台、程序和语言。Unicode也是我们拥有的最接近通用字母表的事物，尽管它并不是一个字母表，而是一套数字映射方案。尽管Unicode是web文档默认的字符集，开发人员依然可以自由地选择更适合他们的其他字符集。比方说，美国和西欧的网站常常使用ISO-8859-1 (Latin-1)编码，而中华人民共和国的国家标准是gb2312。为表达语义而标记文档，而不是为了样式记住：请最大限度地使用CSS来进行布局。在web标准的世界里，XHTML标记与表现无关，它只与文档结构有关。结构良好的文档可以向浏览器传达尽可能多的语义，不论是浏览器位于掌上电脑还是时髦的桌面图形浏览器。结构良好的文档都能向用户传达可视化的语义，即使是在老的浏览器，或是在被用户关闭了CSS的现代浏览器中。不是每个站点都能立即抛弃HTML表格布局。CSS的发明者，W3C，直到2002年11月才将官方网站转换为CSS布局。然而，即使是顽固的唯标准主义者也不总是将表现从结构中完全分离处理，至少在XHTML 1中是做不到的。但是现在，我们可以向这个理想迈出重大的一步，通过将表现从结构中分离（或者说将数据从设计中），即使是混合的传统的布局也可从中受益。 下面有一些提示，可以帮助你通过更结构化的方式进行思维：提纲内的色彩在语法学校，我们中的大部分人都被迫使用标准的提纲格式来写文章。现在，我们成为了设计师，可以多么自由地摆脱提纲的限制，然后大胆地投身于独特的个人表达的自由领域（也许我们的宣传册和商业站点还不是那么独特和个人化）。但是至少我们不会再受到提纲的困扰了。实际上，依照HTML，我们应该将内容结构化为有组织的层级。在浏览器不支持CSS的时期，我们无法在交付可供销售的布局的同时做到这一点。但是今天，在将我们的设计不折不扣地实现的同时，我们有能力交付内在结构良好的文档。当你将供网络使用的文本进行标记，或者当你将已有的文本文档转换为网页时，请使用传统提纲的这些条目进行思考。我的主题介绍性文字补充性的观点相关文字同时，避免使用已被废弃的HTML元素比如，或者无语义的元素比如，来模拟其实不存在的逻辑结构。比如，不要像这样做：我的主题介绍性文字补充性的观点相关文字根据它们的意义使用元素，而不是根据它们的外观我们中一些人已经陷在了一个坏习惯中，当我们仅仅需要一个大号字的文本时使用h1，或者在我们需要在前面加一个圆点符号时使用li。就像我们在前面的章节讨论过的，浏览器一直都习惯于将设计属性强加于HTML元素之上。我们都一直习惯于认为，h1意味着大号字，而li意味着圆点，或者blockquote意味着文本缩进。我们中的大多数人还在使用结构化元素模拟表现效果的方式来胡乱地写作HTML。同样地，假如设计师希望所有的标题使用相同的字号，她会将所有的标题设置为h1，即使这么做毫无结构化语义可言。这是主标题，在我将文本按照提纲格式组织的情况下。这不是主标题，但是我希望它与上面的标题使用一样的字体，但是我不知该如何使用CSS。这根本不是一个标题。但是我非常希望页面中的文字使用相同的字体，以达到我希望的，如果我了解CSS，就可以在不打乱文档结构的情况下达到这个设计。我们必须把我们的小把戏放到一边，然后开始根据元素的语义来使用它们，而不是根据它们看上去的样子。实际上，h1可以成为你希望的任何样子。通过CSS，h1可以成为非粗体的小号的罗马字体，而p文本可以成为粗体的大号字，li也可以没有圆点（你或者可以使用小猫小狗或者公司标志的PNG,GIF或者JPEG图片取而代之）等等。从今天开始，我们将要使用CSS来决定元素的外观。我们甚至可以根据元素在页面中或者在站点中所在的位置来改变它们的外观。 CSS可以将表现从结构中彻底抽离，并且允许你按照你喜欢的样式来格式化任何元素。h1, h2, h3, h4, h5, h6 { font-family: georgia, palatino, "New Century Schoolbook", times, serif; font-weight: normal; font-size: 2em; margin-top: 1em; margin-bottom: 0; }你为什么要这么做呢？这么做的目的是为了在图形浏览器中获得品牌化的外观和感觉的同时，在文本浏览器、无线设备、HTML格式的电子邮件中，文档的结构得到保留。我们并不想在关于XHTML的章节讲述更多CSS方面的技术。我们只是希望展示文档结构和可视表达是两个完全不同的事物，并且结构化元素应被用来转换文本，而不是强加显示效果。使用结构化元素，而不是无意义的垃圾由于我们已经忘记或者根本不知道HTML和XHTML的用途是传达结构化的意义，许多HTML争论者这样使用标签来插入列表： 项目一项目二项目三考虑一下使用有序或者无序列表取而代之： 项目一项目二项目三"但是li给我一个圆点，而我不需要圆点！"你也许会这么说。根据上面的章节，CSS不对元素被期望的外观做任何假定。它等待你来告诉它你所期待的元素外观。关闭圆点是CSS的最基本的能力。它有能力使列表看起来和普通文本没有两样，也可以使列表看起来像图形导航栏，具有完整的反转效果。所以，请使用列表元素来标记列表。相似地，使用strong来代替b，使用em代替i，等等。在大多数桌面浏览器缺省状态下，strong的显示效果和b相同，而em和i相同，同时也可以在不破坏文档结构的情况下创建你期待的视觉效果。尽管CSS不会为任何元素的显示作假设，浏览器却作了很多假设，并且我们还没有碰到一个将strong显示为其他效果而不是粗体字的浏览器（除非是被设计师创建的CSS指示以其他方式显示）。假如你担心某个陌生的浏览器不会将strong显示为粗体字，你可以编写这么一条CSS规则：strong { font-weight: bold; font-style: normal; }视觉元素和结构web标准不仅要求我们使用何种科技，而且还要遵守使用这些技术的方式。使用XHTML来编写标记同时使用CSS来处理一部分或者全部的布局，并不一定会使站点更易用更轻便，同时节约多少带宽。就像我们在早期使用的技术那样，XHTML和CSS也会被误用和滥用。冗长的XHTML和冗长的HTML一样，都会浪费用户的带宽和时间。冗长的过度的CSS也不能完全的代替表现HTML代码；这只不过是一种糟糕的东西被另一种代替了而已。无论如何，不要跳过本节。阅读本章将增进你的技能，为你的网页减肥，并且使你对标记与设计之间的差异有更清晰的认识。本章中的理念是易于学习的，但是却能极大的提高网站的性能，以及设计、制作和更新网站的便利性。在本节，你将学到如何撰写合乎逻辑的、紧凑的标记，使得你有能力将带宽流量降低50%左右，在减少服务器负担和压力的同时，减少网站的加载时间。通过去除那些表现元素，并改掉那些没有任何好处的坏习惯，我们就可以达到上述的目的。这些坏习惯折磨着网络中的许多站点，特别是那些将CSS代码与主要基于表格的布局混合在一起的站点。这种做法笨拙且不经济，即使是对于那些在其他领域很有经验的设计师来说。同时，出现这个问题的几率是均等的，不论是那些手写代码的站点，还是利用可见编辑工具，比如Dreamweaver和 GoLive，来创建的站点。本节会提出这些常见的错误，这样你就可以识别和防范它们，并且学会如何改正错误。我们详细阐述唯一标识符属性(id) - ，并展示它如何使你可以编写极其紧凑的XHTML代码，不论你创建的是混合布局还是纯粹的CSS布局。每个元素都必须结构化吗？正如上一节中我们讲到的那样，每个元素都可以被结构化，CSS可使得一个有序或无序的列表显示为彻头彻尾的导航栏，其中还拥有反转按钮效果。文档的内容可以通过普通的元素进行标记，这些元素通过特定的结构化属性标志来指示出它们在网站设计中所扮演的语义角色。我们在公元2006年创建了W3School的第一个中文测试版，我们在一开始就使用了CSS进行布局，并使用XHTML来结构化文档。每一个其中的元素都是结构化的，从标题到列表，乃至段落。你可以在w3school的每个页面看到具有反转效果的首页按钮和二级菜单按钮。下面是这两个组件的XHTML代码：w3school在线教程iv元素，通过与id、class及role属性配合，提供向文档添加额外结构的通用机制。这个元素不会将表现的风格定义于内容。所以，创作者可以通过将这个元素与样式表、xml:lang、属性等配合使用，使XHTML适应他们自身的需求和口味。div是division的简写。division意为分割、区域、分组。比方说，当你将一系列的链接组合在一起，就形成了文档的一个division。确定结构的通用机制所有编写HTML的人对段落和标题这类常见的元素都很熟悉，但是有些人对div就可能不那么熟悉了。在W3C的描述中我们可以找到理解div元素的关键，“一种添加结构的通用机制。”在本站的首页，我们将教程目录列表封装于一个div之中，这是因为教程目录并不是正文的任何元素的一部分。其中，h2元素标记每个教程的标题，同时ul列表元素标记每个教程的详细列表。但是在更大更具体的意义中，这个教程目录扮演了一个结构化的角色，即二级导航组件。为了强调这个角色，我们使用navsecond这个id标注这个div。HTML教程HTMLXHTMLCSSTCP/IPXML教程XMLXSL... ...... ...你可以使用任何命名。"Gladys"和"orangebox"都完全符号XHTML的命名规则。但是语义的(semantic)或者元结构化(meta-structural)的命名是最好的（即能够解释其中元素所执行功能的命名）。当客户决定使用蓝色时，你会觉得将站点某部分命名为orangebox（橙色框）会非常地傻。下面的这种情况中，你会觉得自己更傻，当距离最后交付只有六个月时，你开始调校样式表，却怎么也想不起来"Gladys"（格拉迪斯，女子名）到底代表导航区、侧栏还是搜索框。因此，将id标注为"menu"、"content"或者"searchform"会帮助你回忆。进一步讲，标记不等同于设计，结构良好的的页面可以被格式化为你希望的任何样子。这样做的结果是，无论你使用纯粹CSS布局或者混合布局，你都会彻底改掉使用表现标记进行思考和创作的习惯。id Vs. classid属性对于XHTML并不新鲜；class属性或者div元素也一样。它们都可以回溯到HTML时代。id属性为一个元素分配一个唯一的名字。每个名字只能在被赋予的页面使用一次。（例如，假如你的页面包含id为content的div，那么另外一个div或者其他别的元素都不能使用这个名字。相反地，class属性可以被一遍有一遍地使用在页面中（例如，页面中的五个段落都可以使用名为"small"或者"footnote"的class名称）。下面的标记将有助于阐明id和class的差异：Search form components go here. Thissection of the page is unique. Today's blog post Blog content goes here. Here is another paragraph of blog content. Just as there can be many paragraphs on a page, so too there may be many entries in a blog. A blog page could use multiple instances of the class "blogentry" (or any other class). Yesterday's blog post In fact here we are inside another div of class "blogentry." They reproduce like rabbits. If there are ten blog posts on this page, there might be ten divs of class "blogentry" as well.在这个例子中，名为searchform的div被用来封装包含搜索表单的页面区域，而div class="blogentry"则用来封装blog中的每个文章入口。在页面中只有一个搜索表单，所以我们选择id标注这个唯一的组件。但是blog则拥有许多的（文章）入口，所以class属性被应用于这种情况。同样地，新闻站点通常拥有多个div，这些div的class可以命名为"newsitem"或者别的什么。然而不是所有的站点都需要div。blog站点可以仅仅使用h1, H2, 和h3标题和段落，新闻站点也一样。我们在这里展示class为blogentry的div，并不是鼓励你在站点中塞满div，而仅仅是为了向你展示这个原则：在同一个HTML文档中，使用多次class，但只能使用一次id。粘性贴纸理论把id属性比作粘性贴纸来进行思考应该是有帮助的。我会在冰箱上拍一张贴纸来提醒自己去买牛奶，电话上面也会贴一张，提醒我给一位逾期缴纳的客户打电话。还有一个，被贴在账本夹上面，来提醒我这个月15号之前必须缴纳的账单。id同样会标注文档中的特殊区域，以便提醒你哪个区域需要特殊的处理，在这点上，id属性与粘性贴纸是相似的。为了实现所谓的特殊处理，你需要使用这个特殊的id在样式表中编写若干规则，或者在JavaScript文件中添加几行代码。比方说，你的CSS文件中有一些特定的规则，这些规则只应用于id名为searchform的div内的元素。当某一id属性作为一个有磁性的东西（磁铁）被用于一系列特定的CSS规则时，它被称为CSS选择器。有许多创建选择器的方法，不过id是很容易使用的，并且有多的用途。id的力量id属性不可思议地强有力。它具有以下的能力：作为样式表选择器，使我们有能力创作紧凑的最小化的XHTML。 作为超文本的目标锚，取代过时的name属性。 作为从基于DOM的脚本来定位特定元素的方法。 作为对象元素的名称。 作为一种综合用途处理(general purpose processing)的工具（在W3C的例子中，“当把数据从HTML页面中提取到数据库，或将HTML文档转换为其他格式等情况下，作为域识别工具来使用。”）。 id的规则id值必须以字母或者下划线开始；不能以数字开始。虽然W3C验证不会捕获这个错误，但是XML解析器会的。同时，如果你将id与JavaScript在表单中配合使用，那么id名称和值必须是合法的JavaScript变量。空格和连字号，特别是连字号，是不被允许的。不仅如此，将下划线用于class或者id名都不是个好主意，这是由于在CSS2.0（以及某些浏览器）中的限制。语义标记和可用性现在，我们已经讨论过了用途广泛的XHTML元素（特别是div和id），让我们在看看关于本站首页的例子。首先让我们回顾一下这个位于报头位置的菜单：信息，同时会轻松地吃掉三倍的带宽。请注意这些标记没有包含img标签，所有不会牵扯到width、height、background或者border等等属性。同时它没有使用表格单元格，也不会涉及相关的一系列属性。它非常地干净小巧，同时提供了所有可供理解它的信息。通过与CSS配合使用，这些标记向网站访问者提供了可靠的可快速加载的布局。同时也提供了为访问者创造更灵活多样的外观的可能性。并且在无CSS的环境中，我们的结构良好的标记依然可以毫不混乱地提供所有的内容。目光敏锐的读者也许已经发现，a元素中包含的文本并没有被浏览器显示出来，这也要归功于结构化标记与CSS的完美配合，使我们可以通过几行CSS规则来定义一个触发机制，当用户使用图形浏览器时，他们会看到漂亮的导航按钮，而当用户使用纯文本的阅读器时，他们也可以得到全部的文本，这样，对所有的用户来说，内容都是一样的。并且，由于标记没有包含图像和表格单元，这个导航栏组件可以在不改变结构的情况下被站点内的任何页面所引用，同时赋予它不同的视觉效果。简而言之，通过对代码进行模块化，我们提高了代码的复用性。