使用XHTML按标准重构网站

    同时，避免使用已被废弃的HTML元素比如<font>，或者无语义的元素比如<br />，来模拟其实不存在的逻辑结构。

    比如，不要像这样做：

    <font size="7">我的主题</font><br />
    介绍性文字<br /><br />
    <font size="6">补充性的观点</font><br />
    相关文字<br />

    根据它们的意义使用元素，而不是根据它们的外观
    我们中一些人已经陷在了一个坏习惯中，当我们仅仅需要一个大号字的文本时使用h1，或者在我们需要在前面加一个圆点符号时使用li。就像我们在前面的章节讨论过的，浏览器一直都习惯于将设计属性强加于HTML元素之上。我们都一直习惯于认为，h1意味着大号字，而li意味着圆点，或者 blockquote意味着文本缩进。我们中的大多数人还在使用结构化元素模拟表现效果的方式来胡乱地写作HTML。

    同样地，假如设计师希望所有的标题使用相同的字号，她会将所有的标题设置为h1，即使这么做毫无结构化语义可言。

    <h1>这是主标题，在我将文本按照提纲格式组织的情况下。</h1>
    <h1>这不是主标题，但是我希望它与上面的标题使用一样的字体，但是我不知该如何使用CSS。</h1>
    <h1>这根本不是一个标题。但是我非常希望页面中的文字使用相同的字体，以达到我希望的，
    如果我了解CSS，就可以在不打乱文档结构的情况下达到这个设计。</h1>
    我们必须把我们的小把戏放到一边，然后开始根据元素的语义来使用它们，而不是根据它们看上去的样子。实际上，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争论者这样使用标签来插入列表：

    项目一<br />
    项目二<br />
    项目三<br />
    考虑一下使用有序或者无序列表取而代之：

    <ul>
    <li>项目一</li>
    <li>项目二</li>
    <li>项目三</li>
    </ul>
    "但是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代码：

    <div id="header"><h1><a href="/">w3school在线教程</a></h1></div>
    <div id="navfirst">
    <ul id="menu">
    <li id="h"><a href="/h.asp" title="html教程">html教程</a></li>
    <li id="x"><a href="/x.asp" title="XML教程">XML教程</a></li>
    <li id="b"><a href="/b.asp" title="站长资讯">站长资讯</a></li>
    <li id="s"><a href="/s.asp" title="服务器脚本">服务器脚本</a></li>
    <li id="d"><a href="/d.asp" title="dot net教程">dot net教程</a></li>
    <li id="m"><a href="/m.asp" title="chinahtml">chinahtml</a></li>
    <li id="w"><a href="/w.asp" title="建站手册">建站手册</a></li>
    </ul>
    </div>
    div、id和其他帮手
    如果被正确地使用，div可以成为结构化标记的好帮手，而id则是一种令人惊讶的小工具，它使你有能力编写极其紧凑的XTHML，以及巧妙地利用CSS，并通过标准文档对象模型(DOM)向站点添加复杂精巧的行为。

    W3C在其最新的XHTML2草案的XHTML结构模型中这样定义div：

    div元素，通过与id、class及role属性配合，提供向文档添加额外结构的通用机制。这个元素不会将表现的风格定义于内容。所以，创作者可以通过将这个元素与样式表、xml:lang、属性等配合使用，使XHTML适应他们自身的需求和口味。

    div是division的简写。division意为分割、区域、分组。比方说，当你将一系列的链接组合在一起，就形成了文档的一个division。