您的位置：首页 > Web前端 > HTML

XHTML 教程（摘录自 W3C School）

2012-04-13 03:04 483 查看

XHTML是什么？

XHTML指可扩展超文本标签语言（EXtensibleHyperTextMarkupLanguage）。XHTML的目标是取代HTML。XHTML与HTML4.01几乎是相同的。XHTML是更严格更纯净的HTML版本。XHTML是作为一种XML应用被重新定义的HTML。XHTML是一个W3C标准。

为什么要使用XHTML？

XHTML是HTML与XML（扩展标记语言）的结合物，XHTML包含了所有与XML语法结合的HTML4.01元素。

我们认为万维网上的许多页面都包含着糟糕的HTML代码。下面的HTML代码仍然可以工作得很好，即使它没有遵守HTML规则：

XML是一种标记化语言，其中所有的东西都要被正确的标记，以产生形式良好的文档。XML用来描述数据，而HTML则用来显示数据。今天的市场中存在着不同的浏览器技术，某些浏览器运行在计算机中，某些浏览器则运行在移动电话和手持设备上。而后者没有能力和手段来解释糟糕的标记语言。因此，通过把HTML和XML各自的长处加以结合，我们得到了在现在和未来都能派上用场的标记语言-XHTML。XHTML可以被所有的支持XML的设备读取，同时在其余的浏览器升级至支持XML之前，XHTML使我们有能力编写出拥有良好结构的文档，这些文档可以很好地工作于所有的浏览器，并且可以向后兼容。

XHTML与HTML之间的差异

XHTML元素必须被正确地嵌套。XHTML元素必须被关闭。标签名必须用小写字母。XHTML文档必须拥有根元素。
元素必须被正确地嵌套这是错误的：<b><i>Thistextisboldanditalic

</b>

</i>

这是正确的：<b><i>Thistextisboldanditalic</i>

</b>

XHTML元素必须被关闭这是错误的：

<p>

Thisisaparagraph
这是正确的：

<p>

Thisisaparagraph

</p>

空标签也必须被关闭这是错误的：Abreak:<br>
这是正确的：Abreak:<br

/>

XHTML元素必须小写（XHTML规范定义：标签名和属性对大小写敏感）

这是错误的：

<BODY>

<P>

Thisisaparagraph

</P>

</BODY>

这是正确的：

<body>

<p>

Thisisaparagraph

</p>

</body>

XHTML文档必须拥有一个根元素所有的XHTML元素必须被嵌套于<html>根元素中。其余所有的元素均可有子元素。子元素必须是成对的且被嵌套在其父元素之中。基本的文档结构如下：

<html>

</html>

XHTML语法

属性名称必须小写
属性值必须加引号
属性不能简写
用Id属性代替name属性
XHTMLDTD定义了强制使用的HTML元素

属性名称必须小写
这是错误的：<table

WIDTH

="100%">

这是正确的：<table

width

="100%">

属性值必须加引号
这是错误的：<tablewidth=

100%

>

这是正确的：<tablewidth=

"100%"

>

属性不能简写
这是错误的：<inputchecked>
这是正确的：<inputchecked="checked"/>

下面是一个HTML的简写属性列表，以及在XHTML中的改写：

用id属性代替name属性（在XHTML中不鼓励使用name属性，应该使用id取而代之）

这是错误的：<imgsrc="picture.gif"

name

="picture1"/>

这是正确的：<imgsrc="picture.gif"

id

="picture1"/>

重要的兼容性提示：你应该在"/"符号前添加一个额外的空格，以使你的XHTML与当今的浏览器相兼容。

语言属性（lang）
lang属性应用于几乎所有的XHTML元素。它定义元素内部的内容的所用语言的类型。

如果在某元素中使用lang属性，就必须添加额外的xml:lang，像这样：<div

lang="no"xml:lang="no"

>HeiaNorge!</div>

强制使用的XHTML元素
所有XHTML文档必须进行文件类型声明（DOCTYPEdeclaration）。在XHTML文档中必须存在html、head、body元素，而title元素必须位于在head元素中。

下面是一个最小化的XHTML文件模板：

提示：文件类型声明并非XHTML文档自身的组成部分。它并不是XHTML元素，也没有关闭标签。

提示：在XHTML中，<html>标签内的xmlns属性是必需的。然而，即使当XHTML文档中没有这个属性时，w3.org的验证工具也不会提示错误。这是因为，"xmlns=http://www.w3.org/1999/xhtml"是一个固定的值，即使你没有把它包含在代码中，这个值也会被添加到<html>标签中。

XHTMLDTD（XHTML定义了三种文件类型声明，使用最普遍的是XHTMLTransitional）

3种文档类型声明

DTD规定了使用通用标记语言(SGML)的网页的语法。
诸如HTML这样的通用标记语言应该使用DTD来规定应用于某种特定文档中的标签的规则，这些规则包括一系列的元素和实体的声明。
在通用标记语言(SGML)的文档类型声明或DTD中，XHTML被详细地进行了描述。
XHTMLDTD使用精确的可被计算机读取的语言来描述合法的XHTML标记的语法和句法。

存在三种XHTML文档类型：

STRICT（严格类型）
TRANSITIONAL（过渡类型）
FRAMESET（框架类型）

XHTML1.0Strict（需要干净的标记，避免表现上的混乱，与层叠样式表配合使用）

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML1.0Transitional（需要利用HTML在表现上的特性时，并且当需要为那些不支持层叠样式表的浏览器编写XHTML时）

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML1.0Frameset（需要使用HTML框架将浏览器窗口分割为两部分或更多框架时）

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Frameset//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[code]"

>[/code]

如何升级至XHTML？

1.添加文件类型声明
将下面的文件类型声明添加至每页的首行：

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

关于文件类型声明的一点提示：

如果你希望将页面验证为正确的XHTML，那么页面中必须含有文件类型声明。需要注意的是，根据不同的文件类型声明，新式的浏览器（比如InternetExplorer6）对文档的处理方式也是不同的。如果浏览器读到一个文件类型声明，那么它会按照“恰当”的方式来处理文档。如果没有DOCTYPE，文档也许会以截然不同的方式显示出来。

2.小写的标签和属性名
由于XHTML对大小写敏感，同时也由于XHTML仅接受小写HTML标签和属性名，因此你可以执行一个简单的搜索和替换命令将所有的大写标签改为小写。对属性名也要做同样的处理。我们一直在自己的网站使用小写字母，因此基本上，替换功能没有太多地排上用场。

3.给所有属性加上引号
由于W3CXHTML1.0标准中要求所有的属性值都必须加引号，所以，如果以前没有注意到这个细节，你需要逐页地对网站进行检查。这是一项费时的工作，所以绝不要再忘记为属性值加引号了。

4.空标签：<hr>,<br>和<img>
在XHTML中是不允许使用空标签（Emptytags）的。<hr>和<br>标签应该被替换为<hr/>和<br/>。这样做又产生了一个新问题，Netscape会误读<br/>标签。我们不清楚原因所在，不过将之改为<br/>后就没有问题了。认识到这一点后，你需要再一次通过搜索和替换功能对标签进行更改。其他一些标签（比如<img>标签）也会碰到上述同样的问题。不要使用闭合标签来关闭<img>，而是要在标签的末端添加/>。

5.验证站点
做完所有这一切以后，使用下面的链接根据官方的W3CDTD对所有修改过的页面进行验证：XHTMLValidator。接下来，可能还会有少数的错误被发现，逐一对这些错误进行（手工地）修正。

我们应该使用转换工具吗（比方说TIDY）？对，我们本可以使用TIDY。

DaveRaggett的HTMLTIDY是用来清理HTML代码的免费工具。在处理那些由专门的HTML代码编辑器和转换工具生成的难以阅读的HTML代码方面，TIDY还是做得很棒的。同时，它可以帮助你发现站点中哪些地方需要投入更多精力，使得对于残疾人士，网页具有更强的易用性。

XHTML验证

通过DTD验证XHTML
XHTML文档是根据文档类型声明（DTD）进行验证的。只有将正确的DTD添加到文件的首行，XHTML文件才会被正确地验证。

严格DTD包含没有被反对使用的或不出现在框架结构中的元素和属性。
过渡DTD包含严格DTD中的一切，外加那些不赞成使用的元素和属性。
框架DTD包含过渡DTD中的一切，外加框架。

XHTML模块

XHTML模块化的原因
XHTML是简单而庞大的语言。XHTML包含了网站开发者需要的大多数功能。对于某些特殊的用途，XHTML太大且太复杂，而对于其他的用途，它又太简单了。

通过将XHTML分为若干模块，W3C已经创造出数套小巧且定义良好的XHTML元素，这些元素既可被独立应用于简易设备，又可以与其他XML标准并入大型且更复杂的应用程序。

通过使用模块化的XHTML，产品和软件设计者可以：

选择被某种设备所支持的元素。
在不打破XHTML标准的情况下，使用XML对XHTML进行扩展。
针对小型设备，对XHTML进行简化。
通过添加新的XML功能（比如MathML,SVG,语音和多媒体），针对复杂的应用对XHTML进行扩展。
定义XHTML框架，比如XHTMLBASIC（针对移动设备的XHTML子集）。

W3C已将XHTML的定义分为28种模型：

XHTML事件属性

HTML4.0的新特性之一是使HTML事件触发浏览器中的行为，比方说当用户点击一个HTML元素时启动一段JavaScript。以下就是可被插入HTML标签以定义事件行为的一系列属性。

窗口事件(WindowEvents)【仅在body和frameset元素中有效】

表单元素事件(FormElementEvents)【仅在表单元素中有效】

键盘事件(KeyboardEvents)
在下列元素中无效：base,bdo,br,frame,frameset,head,html,iframe,meta,param,script,style,以及title元素。

鼠标事件(KeyboardEvents)
在下列元素中无效：base,bdo,br,frame,frameset,head,html,iframe,meta,param,script,style,title元素。

XHTML结构化之一：使用XHTML重构网站

XHTML规则概要
将传统的HTML转换为XHTML1.0是快捷且无痛的，只要你遵守一些简单的规则和容易的方针。不管是否使用过HTML，都不会妨碍你使用XHTML。

使用恰当的文档类型声明和命名空间。
使用meta元素声明你的内容类型。
使用小写字母书写所有的元素和属性。
为所有的属性值加引号。
为所有的属性分配值。
关闭所有的标签。
使用空格和斜线关闭空标签。
不要在注释中写双下划线。
确保小于号及和号为<和&

Unicode和其他字符集
XML、XHTML、和HTML4.0文档的默认字符集是Unicode，一个由Unicode联盟定义的标准。Unicode是一套全面的字符集，它为每个字符提供了一个特定的唯一的数字，不论平台、程序和语言。Unicode也是我们拥有的最接近通用字母表的事物，尽管它并不是一个字母表，而是一套数字映射方案。

尽管Unicode是web文档默认的字符集，开发人员依然可以自由地选择更适合他们的其他字符集。比方说，美国和西欧的网站常常使用ISO-8859-1(Latin-1)编码，而中华人民共和国的国家标准是gb2312。

为表达语义而标记文档，而不是为了样式
记住：请最大限度地使用CSS来进行布局。在web标准的世界里，XHTML标记与表现无关，它只与文档结构有关。

结构良好的文档可以向浏览器传达尽可能多的语义，不论是浏览器位于掌上电脑还是时髦的桌面图形浏览器。结构良好的文档都能向用户传达可视化的语义，即使是在老的浏览器，或是在被用户关闭了CSS的现代浏览器中。

不是每个站点都能立即抛弃HTML表格布局。CSS的发明者，W3C，直到2002年11月才将官方网站转换为CSS布局。然而，即使是顽固的唯标准主义者也不总是将表现从结构中完全分离处理，至少在XHTML1中是做不到的。但是现在，我们可以向这个理想迈出重大的一步，通过将表现从结构中分离（或者说将数据从设计中分离），即使是混合的传统的布局也可从中受益。

下面有一些提示，可以帮助你通过更结构化的方式进行思维：

提纲内的色彩
在语法学校，我们中的大部分人都被迫使用标准的提纲格式来写文章。现在，我们成为了设计师，可以多么自由地摆脱提纲的限制，然后大胆地投身于独特的个人表达的自由领域（也许我们的宣传册和商业站点还不是那么独特和个人化）。但是至少我们不会再受到提纲的困扰了。

实际上，依照HTML，我们应该将内容结构化为有组织的层级。在浏览器不支持CSS的时期，我们无法在交付可供销售的布局的同时做到这一点。但是今天，在将我们的设计不折不扣地实现的同时，我们有能力交付内在结构良好的文档。

当你将供网络使用的文本进行标记，或者当你将已有的文本文档转换为网页时，请使用传统提纲的这些条目进行思考。

<h1>我的主题</h1>
<p>介绍性文字</p>
<h2>补充性的观点</h2>
<p>相关文字</p>

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

比如，不要像这样做：

<fontsize="7">我的主题</font><br/>
介绍性文字<br/><br/>
<fontsize="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,"NewCenturySchoolbook",
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代码；这只不过是一种糟糕的东西被另一种代替了而已。

XHTML结构化之二：案例分析：W3school的结构化标记

阅读本章将增进你的技能，为你的网页减肥，并且使你对标记与设计之间的差异有更清晰的认识。本章中的理念是易于学习的，但是却能极大的提高网站的性能，以及设计、制作和更新网站的便利性。
在本节，你将学到如何撰写合乎逻辑的、紧凑的标记，使得你有能力将带宽流量降低50%左右，在减少服务器负担和压力的同时，减少网站的加载时间。通过去除那些表现元素，并改掉那些没有任何好处的坏习惯，我们就可以达到上述的目的。
这些坏习惯折磨着网络中的许多站点，特别是那些将CSS代码与主要基于表格的布局混合在一起的站点。这种做法笨拙且不经济，即使是对于那些在其他领域很有经验的设计师来说。同时，出现这个问题的几率是均等的，不论是那些手写代码的站点，还是利用可见编辑工具，比如Dreamweaver和GoLive，来创建的站点。
本节会提出这些常见的错误，这样你就可以识别和防范它们，并且学会如何改正错误。我们详细阐述唯一标识符属性(id)-，并展示它如何使你可以编写极其紧凑的XHTML代码，不论你创建的是混合布局还是纯粹的CSS布局。

每个元素都必须结构化吗？
正如上一节中我们讲到的那样，每个元素都可以被结构化，CSS可使得一个有序或无序的列表显示为彻头彻尾的导航栏，其中还拥有反转按钮效果。文档的内容可以通过普通的元素进行标记，这些元素通过特定的结构化属性标志来指示出它们在网站设计中所扮演的语义角色。
我们在公元2006年创建了W3School的第一个中文测试版，我们在一开始就使用了CSS进行布局，并使用XHTML来结构化文档。每一个其中的元素都是结构化的，从标题到列表，乃至段落。你可以在w3school的每个页面看到具有反转效果的首页按钮和二级菜单按钮。下面是这两个组件的XHTML代码：

div、id和其他帮手
如果被正确地使用，div可以成为结构化标记的好帮手，而id则是一种令人惊讶的小工具，它使你有能力编写极其紧凑的XHTML，以及巧妙地利用CSS，并通过标准文档对象模型(DOM)向站点添加复杂精巧的行为。
W3C在其最新的XHTML2草案的XHTML结构模型中这样定义div：
div元素，通过与id、class及role属性配合，提供向文档添加额外结构的通用机制。这个元素不会将表现的风格定义于内容。所以，创作者可以通过将这个元素与样式表、xml:lang、属性等配合使用，使XHTML适应他们自身的需求和口味。
div是division的简写。division意为分割、区域、分组。比方说，当你将一系列的链接组合在一起，就形成了文档的一个division。

确定结构的通用机制
所有编写HTML的人对段落和标题这类常见的元素都很熟悉，但是有些人对div就可能不那么熟悉了。在W3C的描述中我们可以找到理解div元素的关键，“一种添加结构的通用机制。”
在本站的首页，我们将教程目录列表封装于一个div之中，这是因为教程目录并不是正文的任何元素的一部分。其中，h2元素标记每个教程的标题，同时ul列表元素标记每个教程的详细列表。但是在更大更具体的意义中，这个教程目录扮演了一个结构化的角色，即二级导航组件。为了强调这个角色，我们使用navsecond这个id标注这个div。

你可以使用任何命名。"Gladys"和"orangebox"都完全符合XHTML的命名规则。但是语义的(semantic)或者元结构化(meta-structural)的命名是最好的（即能够解释其中元素所执行功能的命名）。

当客户决定使用蓝色时，你会觉得将站点某部分命名为orangebox（橙色框）会非常地傻。下面的这种情况中，你会觉得自己更傻，当距离最后交付只有六个月时，你开始调校样式表，却怎么也想不起来"Gladys"（格拉迪斯，女子名）到底代表导航区、侧栏还是搜索框。
因此，将id标注为"menu"、"content"或者"searchform"会帮助你回忆。进一步讲，标记不等同于设计，结构良好的的页面可以被格式化为你希望的任何样子。这样做的结果是，无论你使用纯粹CSS布局或者混合布局，你都会彻底改掉使用表现标记进行思考和创作的习惯。

idVs.class
id属性对于XHTML并不新鲜；class属性或者div元素也一样。它们都可以回溯到HTML时代。id属性为一个元素分配一个唯一的名字。每个名字只能在被赋予的页面使用一次。（例如，假如你的页面包含id为content的div，那么另外一个div或者其他别的元素都不能使用这个名字。相反地，class属性可以被一遍又一遍地使用在页面中（例如，页面中的五个段落都可以使用名为"small"或者"footnote"的class名称）。下面的标记将有助于阐明id和class的差异：

在这个例子中，名为searchform的div被用来封装包含搜索表单的页面区域，而divclass="blogentry"则用来封装blog中的每个文章入口。在页面中只有一个搜索表单，所以我们选择id标注这个唯一的组件。但是blog则拥有许多的（文章）入口，所以class属性被应用于这种情况。同样地，新闻站点通常拥有多个div，这些div的class可以命名为"newsitem"或者别的什么。
然而不是所有的站点都需要div。blog站点可以仅仅使用h1,H2,和h2标题和<p>段落，新闻站点也一样。我们在这里展示class为blogentry的div，并不是鼓励你在站点中塞满div，而仅仅是为了向你展示这个原则：在同一个HTML文档中，使用多次class，但只能使用一次id。

粘性贴纸理论
把id属性比作粘性贴纸来进行思考应该是有帮助的。我会在冰箱上拍一张贴纸来提醒自己去买牛奶，电话上面也会贴一张，提醒我给一位逾期缴纳的客户打电话。还有一个，被贴在账本夹上面，来提醒我这个月15号之前必须缴纳的账单。
id同样会标注文档中的特殊区域，以便提醒你哪个区域需要特殊的处理，在这点上，id属性与粘性贴纸是相似的。为了实现所谓的特殊处理，你需要使用这个特殊的id在样式表中编写若干规则，或者在JavaScript文件中添加几行代码。比方说，你的CSS文件中有一些特定的规则，这些规则只应用于id名为searchform的div内的元素。

id的力量
id属性不可思议地强有力。它具有以下的能力：

作为样式表选择器，使我们有能力创作紧凑的最小化的XHTML。
作为超文本的目标锚，取代过时的name属性。
作为从基于DOM的脚本来定位特定元素的方法。
作为对象元素的名称。
作为一种综合用途处理(generalpurposeprocessing)的工具（在W3C的例子中，“当把数据从HTML页面中提取到数据库，或将HTML文档转换为其他格式等情况下，作为域识别工具来使用。”）。

id的规则
id值必须以字母或者下划线开始；不能以数字开始。虽然W3C验证不会捕获这个错误，但是XML解析器会的。同时，如果你将id与JavaScript在表单中配合使用，那么id名称和值必须是合法的JavaScript变量。空格和连字号，特别是连字号，是不被允许的。不仅如此，将下划线用于class或者id名都不是个好主意，这是由于在CSS2.0（以及某些浏览器）中的限制。

语义标记和可用性
现在，我们已经讨论过了用途广泛的XHTML元素（特别是div和id），让我们在看看关于本站首页的例子。首先让我们回顾一下这个位于报头位置的菜单：

我们拥有七个链接，每个链接被分配一个id来对应相应的内容：例如名为h的id对应HTML教程，以此类推。同时这些链接被封装于名为menu的列表元素内，名为menu的id标明了这个列表的职能-一个菜单列表，而更外围的名为navfirst的div则用来标注页面中的这个节(section)，将之与诸如主要内容(maincontent)、侧栏(sidebar)和页脚(footer)之类的元素区别开来。
div和ul两个元素提供了真实的结构，即标明了其中内容的职能（导航栏）和它在文档中所属的位置（页面的报头位置）。相反地，传统的表格布局无法提供有关数据的任何语义信息，同时会轻松地吃掉三倍的带宽。
请注意这些标记没有包含img标签，所以不会牵扯到width、height、background或者border等等属性。同时它没有使用表格单元格，也不会涉及相关的一系列属性。它非常地干净小巧，同时提供了所有可供理解它的信息。
通过与CSS配合使用，这些标记向网站访问者提供了可靠的可快速加载的布局。同时也提供了为访问者创造更灵活多样的外观的可能性。并且在无CSS的环境中，我们的结构良好的标记依然可以毫不混乱地提供所有的内容。
目光敏锐的读者也许已经发现，a元素中包含的文本并没有被浏览器显示出来，这也要归功于结构化标记与CSS的完美配合，使我们可以通过几行CSS规则来定义一个触发机制，当用户使用图形浏览器时，他们会看到漂亮的导航按钮，而当用户使用纯文本的阅读器时，他们也可以得到全部的文本，这样，对所有的用户来说，内容都是一样的。
并且，由于标记没有包含图像和表格单元，这个导航栏组件可以在不改变结构的情况下被站点内的任何页面所引用，同时赋予它不同的视觉效果。简而言之，通过对代码进行模块化，我们提高了代码的复用性。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航