XHTML详细解说

XHTML详细解说XHTML学前须知什么是HTML?简单点说：HTML是用来做网页的。它很简单，在接下来的12分钟之内你就会跟着我用HTML做一个简单的网页。复杂点说：HTML（HyperTextMarkupLanguage的缩写），即超文本链接标记语言。它是在互联网发布超文本文件(通常所说的网页)的通用语言。什么是XHTML?更先进难懂的技术？简单点说：X是吓唬人的，其实XHTML就是严谨而准确的HTML。如果说HTML是汉语，那么XHTML就是标准普通话。对于现在才刚刚开始学习网页设计的朋友，直接学习XHTML是最佳的选择。复杂点说：XHTML是HTML的“升级规范”产品，其中X是代表可扩展的，是单词extensible的缩写。事实上它也属于HTML家族，对比以前各个版本的HTML，它具有更严格的书写标准、更好的跨平台能力。由于某些需要，XHTML将以前版本的HTML能够实现的一些功能交给了CSS，这意味着你将需要学习两种技术。但是这确实是Web未来发展的潮流。X代表“可以扩展的”。学习XHTML的基础学习XHTML不需要任何基础。相反，XHTML是学习学多其他知识的必要基础。有些人可能听说需要学习完HTML才可以学XHTML，事实并非如此，菜鸟吧()的XHTML教程就是面向没有任何基础的网页设计新手的。如果你已经熟练的掌握了HTML，就不必看我们的入门教程了，我们为已经熟悉了HTML的站长准备了从HTML到XHTML。学习XHTML的方法阅读XHTML教程以及其中的实例当然是学习XHTML的好办法，但是仅仅如此是绝对不够的。在学习的过程中，你可以找一些你以前比较喜欢浏览的站点，看看他们在实际的网站设计过程中是如何使用XHTML的。你只需要点击浏览器工具栏上的“查看”按钮，再选择“查看源文件”，就可以看到该页的代码了。好了，关于XHTML的介绍就说到这里，下面就让我们开始学习XHTML吧。现在就开始在菜鸟吧学习XHTMLXHTML入门教程目录1. XHTML教程学前须知 2. XHTML教程基础知识 3. XHTML教程标签 4. XHTML教程常用标签 5. XHTML教程文字格式与特殊字符 6. XHTML教程超级链接 7. XHTML教程列表 8. XHTML教程图片 9. XHTML教程head和DTD 10. XHTML教程表格 11. XHTML教程框架结构 12. XHTML教程表单 13. XHTML教程总结 14. XHTML教程补充复杂的表格 XHTML教程基础知识 本节通过实例大概了解如何保存网页文件以及HTML的工作方式用一分钟制作自己的第一个网页：下面我们来试着做一个简单的网页，希望您能跟着我们操作，这只会花费您一分钟时间。现在您也许不知道那些尖括号“”和里面的字母究竟是些什么东西，不要担心，我们会在后面的教程中向您介绍。首先请运行记事本，或在任意位置新建一个文本文档，在记事本内输入如下内容：我是这个网页的标题这是我的第一个网页。输入完毕后将文件保存，命名为“index.html”。(点击“文件”“另存为”。在“文件名”一栏填入“index.html”，在“保存类型”一栏选择所有文件，然后点击“保存按钮”)保存之后，双击该文件，浏览器就会自动打开这个网页了。请确认一下你的网页是否与该页面相同，如果相同，那么你就成功地完成了自己的第一个比较简陋的网页。请注意，这只是一个简单的页面，虽然它在语法上符合XHTML的标准，但是如果要作为一个完整的、符合W3C标准的XHTML网页，它还缺少一些内容。相关内容将在后面的教程中介绍。这个网页仅仅是用来讲解一些基础的XHTML知识。基础知识讲解我们刚刚制作的网页以开头，以结尾，它们分别代表网页文件的开始和结束。英文中head是头的意思，body是身体的意思。网页的和两部分就分别代表了网页的“头”和“身子”。也许你注意到了，我们网页的“头”里面“有一个。title一词是标题的意思，网页的标题(title)将会显示在浏览器上方的标题栏中。而网页的身子，也就是与标签中间的内容将作为正文被显示在浏览器中。这个网页很单薄，head和body中都没有什么内容。我们会在以后的教程中逐渐丰富网页的内容。但是现在请您记住一个概念：网页的头(head)是为浏览器(还有搜索引擎等软件)写的，它将不会显示在页面上，而身子(body)是为网站的用户写的，是浏览器将要显示的内容。菜鸟恶搞XHTML之错误示例打开下面这两个错误示例看看。它们的代码都存在十分严重的错误，但是浏览器却会准确无误地显示这两个网页。示例1身子长在脑袋里 我是这个网页的标题 这是我的第一个网页。 看看上面这个网页，和之间的内容正常的显示在页面上了。但是这是滑稽的错误，把身子放在脑袋里了。示例二脑袋长在脖子下 我是这个网页的标题 这是我的第一个网页。 浏览器的适应能力实在是令人佩服，即使你将脑袋放在身子里它也认得出来。看看标题栏，标题完全正常显示。好了，在实际应用的时候请不要犯上面这种低级错误。这会造成严重的后果：搜索引擎可能无法正常收录你的网站；使用手机或者其他移动设备浏览你网站的朋友可能遇到未知错误。下面就赶快让我们来进入XHTML的核心内容吧。进入下一节：XHTML教程标签XHTML教程标签本节介绍XHTML的重要知识标标签、元素和标签的属性以及空标签XHTML标签简介也许你在上一节就注意到了，XHTML文件与普通的纯文本文件的最大不同在于一些用“”包含的东西，例如。我们把他们叫做标签。通常情况下XHTML标签都是成对出现的，例如。可以看到它们只相差一个“/”，我们把类似的没有“/”的标签叫做起始标签，而它对应的有“/”的则叫终止标签，终止标签与起始标签只相差一个/符号。当然了，XHTML也有一些标签并不成对出现，它们没有终止标签，我们把这样的标签叫做“空标签”。空标签的内容在稍后的教程中将会提到。关于大小写以前各个版本HTML标签并不区分大小写，例如标签和标签是等效的。而在XHTML中，所有标签均使用小写。为了使自己的网站能够符合XHTML标准，您应该养成良好的习惯，在制作网页的过程中所有标签一律使用小写。XHTML标签的作用（元素）打开上一节教程中保存的html文件。将第六行的“这是我的第一个网页。”改为“这是我的第一个网页。”，然后保存修改后再次浏览网页。你会发现网页两个字变成了粗体显示，效果如下：这是我的第一个网页。 区别很明显，网页两个字由于被“包”在了标签中而变成了粗体。标签的意思就是粗体显示，而它只会影响到被它包含的内容。这就是XHTML标签的作用方式。我们把被标签以及它“包住”的内容叫做元素(element)。本例中“网页”两个字和标签就是网页中的一个元素。标签的属性我们可以为XHTML标签设置一些属性。请你注意上面的水平线标签，原本它的代码是：。在HTML中标签就是一条水平分割线，我们可以为这条分割线添加一个属性“size”（即分割线的大小），他的属性值为1。那么它的完整代码就是：类似的，为其他XHTML标签添加属性的方法也是在标签的起始标签中加入：属性“属性值”。需要注意的是，属性值必须使用引号“括”起来。单引号或者双引号都可以，但是双引号比较常用。添加属性的格式：实例注意：普通的XHTML文件有两个等级标准(不算框架标准)过渡标准和严格标准，其中过渡标准主要针对那些习惯于使用HTML开发网站的站长。上面的代码在过渡标准中是合法的，可是在严格标准中，size属性将被视为非法属性。XHTML不仅是更加标准更加严格的HTML，他还推崇一种构建网站的思路。那就是把网页的内容与样式分开，这在XHTML中是通过CSS来实现的。因此我们推荐您使用严格标准的XHTML，把定义样式的任务完全交给CSS。(关于XHTML标准的问题将在后面的教程中介绍)空标签也许你已经注意到了，这里我们没有把分割线标签写成对称的，而是写成。其实这正是我们在前面教程中提到的不成对出现的标签，他只有起始标签却没有终止标签。由于它没有“包住”任何内容，所以我们把这样的标签叫做空标签。那么我们为什么要写成而不是简简单单地写成呢？这样的书写格式是为了满足XHTML中任何标签都需要“关闭”的规则。我们把在起始标签的最后添加/的方法叫做标签的自闭（或者自关闭、自终止等等，你喜欢怎么叫都行）。所有空标签的使用方法的自闭方法都是一致的，就是在起始标签的“”符号前加上一个空格和一个反斜杠“/”。空格不是必须的，但是个别的浏览器却无法识别，只能识别。这也正是我们添加空格的原因。（现在几乎不会遇到不兼容的浏览器了）关于标签的补充我们已经了解了标签的概念，我们是从这个示例标签开始的。不过我希望大家以后都不要使用这个标签，而是使用strong来替代它。即：这是我的第一个网页我们会在后面解释为什么用strong，而不使用b。XHTML教程常用标签就像一篇文章一样，我们的网页也要段落分明，也需要重要程度不同的标题。本节就将介绍XHTML中实现标题、段落等功能的常用签标题标签到定义标题，我们可以使用从到这几个标签，它们对应的终止标签分别为到，其中到字号顺序减小，重要性也逐渐降低。通常浏览器将在标题的上面和下面自动各空出一行距离。段落标签定义段落使用和，在和之间的内容会被识别为一个段落，它就类似我们通常所说的一个“自然段”。与标题类似，浏览器也会在段落的开始之前和结束之后各加一行空白。换行标签()当我们在想另起一行书写文字却又不希望另起一个自然段的时候，我们就可以应用标签了。标签也是一个空标签，需要加上一个/以符合XHTML的要求。水平分割线标签()实现水平分割线的标签是。和标签一样，也是一个空标签，为了遵守XHTML的规则，需要加上一个/。(下面就是一条分割线)注释合理利用上面介绍的四个标签可以使浏览你网页的用户觉得网页的层次清晰，而注释则可以使你在阅读自己的网页源代码时感觉层次清晰，不至于摸不着头脑。在之间的东西就是注释的内容，它们将不会在网页上显示。看看我们如何在下面的练习实例中插入注释。练习实例现在打开我们在上一节保存的网页，练习一下本节学习的几个重要标签。将中的“这是我的第一个网页。”去掉，输入以下内容：我是这个网页的标题服务公告本人现面对全国的小学生及家长同志提供如下服务：针对学生的服务代写寒暑假作业（数学不保证没有错题，语文不保证没有错字，英语作业你找别人吧）帮忙欺负四年级以下同学，特体须加收费用。家长会帮忙冒充家长。VIP服务凡购买所有三项服务者即自动升级为VIP。我们将免费为您制作个人主页，完全符合W3C的XHTML标准和ISO2009。!-这里网页虽然层次还算比较分明，可是你是不是觉得界面实在是很难看和简陋呢？比如说行与行之间没有空隙，一号标题太大了。关于定义网页外观的方法将在稍后的CSS教程中介绍。忘了说主要内容了，注释不会出现在网页上，所以我们可以在这里打许多废话- 保存修改后浏览网页，确认一下你的网页和这个页面相同，完工。XHTML教程文字格式与特殊字符 本节介绍文字格式和特殊字符在XHTML中的实现方法。文字格式标签在之前的教程中我们曾经用过一次标签，他使得包含在它之中的内容变成粗体显示。例如“菜鸟吧”将显示为菜鸟吧。我们把这种定义文字显示方式的标签叫做文字格式标签（文字样式标签）。与粗体标签类似的还有斜体标签。我们已经说过，不推荐使用b，而推荐使用strong；同样，我们不推荐使用i，而推荐使用em。特殊字符(字符实体)在XHTML中“”是比较特殊的字符，因为它们被用于识别标签，而且在标签中的”并不会出现在页面上。那么如果我们想让浏览器显示这些特殊字符时该怎么做呢？这时我们就可以使用字符实体，例如小于号“”在XHTML代码中写做“<”。当然，在网页设计软件中，这项工作不需要我们手写代码来完成。因此我们只要了解这些特殊字符的显示原理即可，而不需要记住每一个特殊字符的书写代码。练习实例用记事本打开之前创建的index.html文件。对源文件做如下修改(红字提示)，保存后看看之前之后有什么不同，请确认您的网页与这个页面相同。代写代写寒暑假作业（数学不保证没有错题，语文不保证没有错字，英语作业你找别人吧帮忙欺负四年级以下同学，特体须加收费用。家长会帮忙冒充家长。下面再来练习一下使用字符实体。打开之前保存的“index.html”，在标签前输入如下代码：Copyright©2005-2006版权没有 保存修改并重新浏览网页就可以看到如下的内容了：“Copyright2005-2006XXX版权没有”。我们注意到源代码中的“©”在浏览器中显示为“”。请再次确认您的网页与这个页面相同，完工。关于标签的顺序学完了文字格式标签你也许会想，如果我希望一个字同时以粗体和斜体显示该怎么做呢？是不是简单的为它加上双层标签和呢？没错。请看下面的例子：我被两个标签包围啦！我被两个标签包围啦！这里你唯一需要注意的是标签的顺序。如果你将上面的标签顺序写成我被两个标签包围啦！，一般的浏览器将不产生任何错误。但是这是不符合XHTML标准的写法。请你一定要按顺序关闭标签。XHTML教程超级链接 超级链接是构成网站的重要部分，也是XHTML乃至互联网的精华所在超级链接标签毫不夸张的说，是超级链接把整个互联网连接了起来。超级链接几乎可以指向互联网上的任何资源，例如另外一个网页、一张图片、一首MP3歌曲、一段视频等等。而利用XHTML建立超级链接的语法却非常简单，只需要一对标签即可：页面上将要显示的文字或者图片等例如：菜鸟吧 将会在浏览器中显示为一个超级链接，点击它就将进入菜鸟吧（/）。效果如下：菜鸟吧其中标签中的href属性就是这个超级链接所要指向的地址，它可以是一般的网址也可以是邮件的地址，在稍后的练习实例中我们将创建一个指向邮件地址的超级链接。和之间的内容（元素）将被作为超级链接显示在网页上。注意href属性值为一般网址（绝对路径）时，其http:/是不可以省略的，否则浏览器将把它作为相对路径来识别。绝对路径与相对路径的区别不在本XHTML教程的讨论范围之内。如果你不了解这个概念，可以到百度搜索相关的资料。页内跳转超级链接(锚记)您在浏览其他网站的时候可能注意到了，有一些超级链接可以让您回到页面的顶端或者是当前网页内任何一个位置。就像下面这个链接：回到标题它的实现方法如下，首先在标题处加上如下代码：XHTML教程超级链接而超级链接本身的代码为：回到标题页面内的跳转在您的页面内有大量的内容时，可以让你的用户很快的找到所需要的信息。通常情况下都是在一些说明性的网页内做目录使用。链接练习下面练习在之前的index.html中添加超级链接。打开index.html，对代码做如下修改： 中间代码省略 联系我 Copyright©2005-2006XXX版权没有 保存之后浏览一下自己的网页，请确认您的网页与该页面相同。点击一下新创建的链接，如果你安装了Outlook之类的邮件管理软件，就会打开一个给自己发送邮件的界面了。XHTML教程列表 列表用于罗列出来一系列相似或者相关的项目无序列表（项目列表）无序列表的标签是，而每一个列表项目则用标签表示。下面我们就用无序列表来改写我们的index.html，打开之前保存的文件后，将针对学生提供的服务一段的代码修改为如下的无序列表代码：针对学生的服务 代写寒暑假作业（数学不保证没有错题，语文不保证没有错字， 英语作业你找别人吧） 帮忙欺负四年级以下同学，特体须加收费用。 家长会帮忙冒充家长。 保存后浏览网页，请确认您的网页和这个页面相同。有序列表有序列表的标签是，列表项目仍然是。我们再用有序列表来改写index.html的”针对家长一段“，将刚刚修改的那段代码中的改为： 代写寒暑假作业（数学不保证没有错题，语文不保证没有错字，英语作业你找别人吧！）。 帮忙欺负四年级以下同学，特体须加收费用。 家长会帮忙冒充家长。 保存后浏览网页，请确认您页面的效果与这个页面相同。我们可以看到无序列表与有序列表在外观上的不同就是项目每个项目前面是小圆点还是数字。而在含义上，ul表示的是并列关系，ol则表示有先后顺序关系。XHTML教程图片 合理的添加图片可以使一个网页更加的美观图片标签标签用于在网页里插入图片。标签有一个必需的属性src，它的属性值就是图片的地址。下面我们就在我们的index.html里插入一个图片。打开”index.html“文件，在前加上如下代码：保存后浏览网，请确认您的网页与该页面相同。我们注意到也是一个空标签，需要在结尾加上一个/以符合XHTML的要求。这里的例子除src外还有一个属性alt，我们把它叫做做替换属性，当图片由于某种原因而无法显示的时候，alt的属性值就会代替图片出现；而当图片正常显示时，通常只要把鼠标停在图片上就会看到alt属性的属性值。用图片作为链接我们在之前的教程中曾经学习过创建超级链接，下面我们打开“index.html”并且将刚插入的代码改为下面这段：保存后浏览网页，请再次确认您的网页与这个网页相同。看看图片是不是变成了超级链接，点击一下图片就会进入菜鸟吧的主页了。关于XHTML的效验从本节开始我们就不再修改index.html这个网页的外观了，现在将我们制作的网页送交权威机构检验一下。首先进入：/，该页面就是一个XHTML效验工具，它用来检验我们制作的网页是否符合XHTML的标准。您可以选择用网址效验，也可以上传文件效验。您可以选择文件上传效验，方法如下：在”Validate by File Upload“有“Local File”一栏，点击浏览，找到并选中之前保存的index.html，然后点击“check”按钮。您的结果应该与我们通过网址效验的结果一样。返回类似下面的错误信息：Sorry, I am unable to validate this document because on line 3, 6-9, 12-14, 16-22 it contained one or more bytes that I cannot interpret as utf-8 (in other words, the bytes found are not valid values in the specified Character Encoding). Please check both the content of the file and the character encoding indication. 难道我们的网页不符合XHTML标准吗？请继续看下一节的内容。XHTML教程head和DTD head和DTD尽管不会显示在页面上，但是却是网页的重要元素。为什么会出错？在上一节中我们我们在效验我们的网页时得到了一段出错信息，但是我们在整个网页的制作过程中都是按照XHTML标准写的啊。其实问题出在了网页的“头部”，下面我们就来解决这个问题。部分在之前的教程中除了标签之外我们修改的都是之间的内容，也就是显示在页面里的内容。那么XHTML中的部分是做什么的呢？其实在部分我么可以加入许多浏览器等软件可以“看得见”的信息。下面我们就介绍一些head部分常用的标签。注意：本节的标签与属性大多数难于记忆，事实上在我们在使用网页制作软件创建网页的时候它们会自动生成。本节的目的是能够了解这些标签的含义，以在必要的时候可以做一些手工的修改。现在就打开我们的“index.html”，在中间插入如下代码：1.这段代码告诉浏览器我们的网页使用的是gb2312中文字符编码，没有该段信息正是上一次效验时出现问题的原因之一。2.这段代码是为搜索引擎写的，content的内容就是index.html的关键词。请注意，标签也是一个空标签，别忘记加上/。标签的作用还远不只这些，不过在缺少实际应用的情况下，很难了解标签的实际用处。如果想了解更多标签的知识，可以到百度搜索相关知识。关于标签的说明正如之前所说的，部分的内容并不是为浏览者写的，而是为浏览器和搜索引擎写的。因此部分不应该含有任何在页面中可视的的内容。DTD如果现在再次效验我们的网页，仍然会得到出错信息，提示找不到DTD文件，那么什么是DTD文件呢？简单的说它就是在任何人（多数情况下是类似浏览器的软件）想要读取我们的文件之前告诉他我们文件是遵照哪一套规则来写的。以效验过程为例子，如果我们使用HTML4.01的DTD呢，效验器就会认为我们是使用的HTML4.01的规则编写的网页，然后按照相应的规则来一行一行的效验我们的代码，最终返回效验结果。我们制作的网页是使用XHTML的规则，当然要使用XHTML的DTD。不过正如我们前面提到的，XHTML的DTD也分为相对松散的过渡期DTD和要求相当严格的严格DTD。本教程中我们将要在网页中声明严格的DTD，如果您想了解更多关于DTD的内容需要学习XML，本教程中不做过多讨论。下面我们就为我们的网页声明DTD。打开之前保存的index.html，在第一行（标签之前）输入如下代码： 并且在标签里添加如下属性：xmlns=/1999/xhtml。这个叫做命名空间属性，属于XML范畴，我们这里仍然不做过多的讨论。这段代码的作用就是声明我们的网页是使用的xhtml1-strict.dtd。现在再将这个页面提交给W3的效验器，这次将返回一个“This Page Is Valid XHTML1.0 Strict!”的信息。这表示我们的代码中没有任何错误，完全符合XHTML1的strict(严格)标准。当然了，实际工作中情况可能不总是如此，在实际的网页设计过程中，总会有各种原因造成我们写出不规范的代码。这时效验器就会给出错误报告，我们只需要按照提示修改代码即可。XHTML教程表格 表格是XHTML中处境尴尬的一个标签。我们需要了解，表格应该被用来展示数据，而不是用于网页布局。关于表格在CSS流行之前，table被广泛应用于定位。在XHTML中，table不被推荐用来定位，W3C希望CSS可以取代在定位方面的地位。不过事实上由于利用CSS布局常常需要大量的手写代码工作(常用的网页设计软件如Dreamweaver并不能完美支持div的显示)，仍被许多网站用语首页布局，例如Google的More products页面就利用了table来定位。 不过我个人推荐您开始使用CSS来定位网页，因为这是Web发展的方向。表格标签在XHTML中，创建表格的标签是，书写代码时，我们要先用标签将表格分成一行一行，再用标签把每行分成一格一格。完全手写代码创建table是十分困难和低效的，而在网页制作软件中制作表格就如同Word一样简单，只需要选择行列之类的简单属性即可。但是我们可能会遇到自动做出的表格不符合要求，而需要在代码模式调整的可能，因此我们还是要大概了解XHTML表格标签的具体写法。表格的边框（border）属性标签可以有border属性。如果不设置border属性的值，在默认情况下，浏览器将不显示表格的边框。表格练习我们来建立一个四行两列的标签，代码如下： 一个格子 一个格子 一个格子 一个格子 一个格子 一个格子 一个格子 一个格子 显示结果如下：注意上面的代码，一共有4对，对应着下面的4个行。而没个（行）又有两个单元格。于是就成了一个4行2列的表格。 一个格子一个格子一个格子一个格子一个格子一个格子一个格子一个格子这样的表格用来列出数据之类的信息足够了，但是用来定位的表格通常要复杂一些。再次强调我们不推荐用table来定位，所以这里仅仅简单地介绍了。如果要使用表格显示很多数据，可能还需要加入caption(标题)，thead、tbody等等，这里也不做介绍了，有兴趣可以看一看XHTML教程补充复杂的表格。XHTML教程框架结构 框架结构可以让几个网页同时显示在浏览器的一个页面内。我们不推荐您使用它来设计网站。框架结构标签框架允许你在一个浏览器窗口内打开两个乃至多个页面。你可以这样理解，其实就是一个大，只不过整个页面是的主体，而每一个单元格的内容都是一个独立的网页。给框架结构分栏(”cols“和”rows“属性)既然我们说框架结构可以被理解为一网页为单元格的表格，那么就一定要分栏了。其中cols属性将页面分为几列，而rows属性则将页面分为几行。下面来看一个例子。 其中rows=25%,75%表示该页面共分为两行，因为它有两个属性值，而他们的大小则分别为页面高度的25%和75%。点击这里查看以上代码的显示效果。框架标签上面的实例中已经用到了标签，它的src属性就是这个框架里将要显示的内容。在本实例中的两个框架是可以通过拖拽开改变大小比例的，如果你希望它们大小固定可以使用noresize=noresize属性。注意：标签是空标签，需要加上一个/以符合XHTML的要求。关于标签该标签只有当浏览器不支持框架结构时才会起到作用，由于现在几乎所有网民的浏览器都支持框架结构，所以我们在这里就不介绍这个标签了。框架结构和DTD框架页面的DTD与一般网页不同。声明方法如下： XHTML教程表单 表单是用户提交信息的重要