中国教程网《Photoshop专家讲堂》光盘热售参与论坛活动,快速赚取金币精品素材,中英文字体
发新话题
打印

【转载】XHTML教程

【转载】XHTML教程


大家好!小弟第一次发帖,我是将论坛中的一个教程转载过来的,希望方便大家学习,没有剽窃的意思!

XHTML教程——学前须知
XHTML教程——基础知识
XHTML教程——标签
XHTML教程——常用标签
XHTML教程——文字格式与特殊字符
XHTML教程——超级链接
XHTML教程——列表
XHTML教程——图片
XHTML教程——head和DTD
XHTML教程——表格
XHTML教程——框架结构
XHTML教程——表单
XHTML教程——总结

XHTML学前须知

什么是HTML?

简单点说:HTML是用来做网页的。它很简单,在接下来的1~2分钟之内你就会跟着我用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,事实并非如此,菜鸟吧(cainiao8.com)的XHTML教程就是面向没有任何基础的网页设计新手的。如果你已经熟练的掌握了HTML,就不必看我们的入门教程了,我们为已经熟悉了HTML的站长准备了从HTML到XHTML

学习XHTML的方法

阅读XHTML教程以及其中的实例当然是学习XHTML的好办法,但是仅仅如此是绝对不够的。在学习的过程中,你可以找一些你以前比较喜欢浏览的站点,看看他们在实际的网站设计过程中是如何使用XHTML的。你只需要点击浏览器工具栏上的“查看”按钮,再选择“查看源文件”,就可以看到该页的代码了。

好了,关于XHTML的介绍就说到这里,下面就让我们开始学习XHTML吧。

XHTML教程——基础知识

用一分钟制作自己的第一个网页:

下面我们来试着做一个简单的网页,希望您能跟着我们操作,这只会花费您一分钟时间。现在您也许不知道那些尖括号“<>”和里面的字母究竟是些什么东西,不要担心,我们会在后面的教程中向您介绍。

首先请运行记事本,或在任意位置新建一个文本文档,在记事本内输入如下内容:

<html>

<head>

<title>我是这个网页的标题</title>

</head>

<body>

<p>这是我的第一个网页。</p>

</body>

</html>


输入完毕后将文件保存,命名为“index.html”。(点击“文件”—>“另存为”。在“文件名”一栏填入“index.html,在“保存类型”一栏选择"所有文件",然后点击“保存按钮”)

保存之后,双击该文件,浏览器就会自动打开这个网页了。请确认一下你的网页是否与该页面相同,如果相同,那么你就成功地完成了自己的第一个比较简陋的网页。

请注意,这只是一个简单的页面,虽然它在语法上符合XHTML的标准,但是如果要作为一个完整的、符合W3C标准的XHTML网页,它还缺少一些内容。相关内容将在后面的教程中介绍。这个网页仅仅是用来讲解一些基础的XHTML知识。

基础知识讲解

我们刚刚制作的网页以<html>开头,以</html>结尾,它们分别代表网页文件的开始和结束。

英文中head是头的意思,body是身体的意思。网页的<head></head>和<body></body>两部分就分别代表了网页的“头”和“身子”。也许你注意到了,我们网页的“头”里面“有一个<title></title>。title一词是标题的意思,网页的标题(title)将会显示在浏览器上方的标题栏中。而网页的身子,也就是<body>与</body>标签中间的内容将作为正文被显示在浏览器中。

这个网页很单薄,head和body中都没有什么内容。我们会在以后的教程中逐渐丰富网页的内容。但是现在请您记住一个概念:网页的头(head)是为浏览器(还有搜索引擎等软件)写的,它将不会显示在页面上,而身子(body)是为网站的用户写的,是浏览器将要显示的内容。

菜鸟恶搞XHTML之错误示例

打开下面这两个错误示例看看。它们的代码都存在十分严重的错误,但是浏览器却会准确无误地显示这两个网页。

示例1——身子长在脑袋里

<html>


<head>


<title>
我是这个网页的标题</title>


<p>
这是我的第一个网页。</p>


</head>


<body>


</body>


</html>


看看上面这个网页,<head>和</head>之间的内容正常的显示在页面上了。但是这是滑稽的错误,把身子放在脑袋里了。

示例二——脑袋长在脖子下

<html>


<head>


</head>


<body>


<title>
我是这个网页的标题</title>


<p>
这是我的第一个网页。</p>


</body>

</html>


浏览器的适应能力实在是令人佩服,即使你将脑袋放在身子里它也认得出来。看看标题栏,标题完全正常显示。

好了,在实际应用的时候请不要犯上面这种低级错误。这会造成严重的后果:搜索引擎可能无法正常收录你的网站;使用手机或者其他移动设备浏览你网站的朋友可能遇到未知错误。下面就赶快让我们来进入XHTML的核心内容吧。

XHTML教程——标签

本教程前后联系比较紧密,建议您从第一节读起。

XHTML标签简介

也许你在上一节就注意到了,XHTML文件与普通的纯文本文件的最大不同在于一些用“<>”包含的东西,例如<body>。我们把他们叫做标签。通常情况下XHTML标签都是成对出现的,例如<html></html>。可以看到它们只相差一个“/”,我们把类似<html>的没有“/”的标签叫做起始标签,而它对应的有“/”的</html>则叫终止标签,终止标签与起始标签只相差一个"/"符号。当然了,XHTML也有一些标签并不成对出现,它们没有终止标签,我们把这样的标签叫做“空标签”。空标签的内容在稍后的教程中将会提到。

关于大小写

以前各个版本HTML标签并不区分大小写,例如标签<HTML>和标签<html>是等效的。而在XHTML中,所有标签均使用小写。为了使自己的网站能够符合XHTML标准,您应该养成良好的习惯,在制作网页的过程中所有标签一律使用小写。

XHTML标签的作用(元素)

打开上一节教程中保存的html文件。将第六行的“这是我的第一个网页。”改为“这是我的第一个<b>网页</b>。”,然后保存修改后再次浏览网页。你会发现网页两个字变成了粗体显示,效果如下:

  这是我的第一个网页

区别很明显,网页两个字由于被“包”在了标签<b></b>中而变成了粗体。<b>标签的意思就是粗体显示,而它只会影响到被它包含的内容。这就是XHTML标签的作用方式。我们把被标签以及它“包住”的内容叫做元素(element)。本例中“网页”两个字和<b>标签就是网页中的一个元素。

标签的属性

<hr
/>


我们可以为XHTML标签设置一些属性。请你注意上面的水平线标签,原本它的代码是:<hr />。在HTML中<hr>标签就是一条水平分割线,我们可以为这条分割线添加一个属性“size”(即分割线的大小),他的属性值为1。那么它的完整代码就是:

<hr size="1" />


类似的,为其他XHTML标签添加属性的方法也是在标签的起始标签中加入:属性=“属性值”。需要注意的是,属性值必须使用引号“括”起来。单引号或者双引号都可以,但是双引号比较常用。

添加属性的格式: <起始标签 属性="属性值">  实例->  <table border="none">

注意:普通的XHTML文件有两个等级标准(不算框架标准)——过渡标准和严格标准,其中过渡标准主要针对那些习惯于使用HTML开发网站的站长。上面的代码在过渡标准中是合法的,可是在严格标准中,size属性将被视为非法属性。XHTML不仅是更加标准更加严格的HTML,他还推崇一种构建网站的思路。那就是把网页的内容与样式分开,这在XHTML中是通过CSS来实现的。因此我们推荐您使用严格标准的XHTML,把定义样式的任务完全交给CSS。(关于XHTML标准的问题将在后面的教程中介绍)

空标签

也许你已经注意到了,这里我们没有把分割线标签写成对称的<hr></hr>,而是写成<hr />。其实这正是我们在前面教程中提到的不成对出现的标签,他只有起始标签<hr>却没有终止标签</hr>。由于它没有“包住”任何内容,所以我们把这样的标签叫做空标签。那么我们为什么要写成<hr />而不是简简单单地写成<hr>呢?这样的书写格式是为了满足XHTML中任何标签都需要“关闭”的规则。我们把在起始标签的最后添加"/"的方法叫做标签的自闭(或者自关闭、自终止等等,你喜欢怎么叫都行)。

所有空标签的使用方法的自闭方法都是一致的,就是在起始标签的“>”符号前加上一个空格和一个反斜杠“/”。空格不是必须的,但是个别的浏览器却无法识别<hr/>,只能识别<hr />。这也正是我们添加空格的原因。(现在几乎不会遇到不兼容的浏览器了)

关于标签的补充

我们已经了解了标签的概念,我们是从<b>这个示例标签开始的。不过我希望大家以后都不要使用这个标签,而是使用strong来替代它。即:

这是我的第一个<strong>网页</strong>


我们会在后面解释为什么用strong,而不使用b。

XHTML教程——常用标签

就像一篇文章一样,我们的网页也要段落分明,也需要重要程度不同的标题。本节就将介绍XHTML中实现标题、段落等功能的常用签


本教程前后联系比较紧密,建议您从第一节读起。

标题标签<h1><h6>

定义标题,我们可以使用从<h1>到<h6>这几个标签,它们对应的终止标签分别为</h1>到</h6>,其中<h1>到<h6>字号顺序减小,重要性也逐渐降低。通常浏览器将在标题的上面和下面自动各空出一行距离。

段落标签<p>

定义段落使用<p>和</p>,在<p>和</p>之间的内容会被识别为一个段落,它就类似我们通常所说的一个“自然段”。与标题类似,浏览器也会在段落的开始之前和结束之后各加一行空白。

换行标签<br />(<br>)

当我们在想另起一行书写文字却又不希望另起一个自然段的时候,我们就可以应用<br />标签了。<br />标签也是一个空标签,需要加上一个"/"以符合XHTML的要求。

水平分割线标签<hr />(<hr>)

实现水平分割线的标签是<hr />。和<br />标签一样,<hr>也是一个空标签,为了遵守XHTML的规则,需要加上一个"/"。(下面就是一条分割线)

注释<!-- -->

合理利用上面介绍的四个标签可以使浏览你网页的用户觉得网页的层次清晰,而注释则可以使你在阅读自己的网页源代码时感觉层次清晰,不至于摸不着头脑。在<!--和-->之间的东西就是注释的内容,它们将不会在网页上显示。看看我们如何在下面的练习实例中插入注释。

练习实例

现在打开我们在上一节保存的网页,练习一下本节学习的几个重要标签。将<body></body>中的“这是我的第一个<b>网页</b>。”去掉,输入以下内容:

<html>
<head>
<title>
我是这个网页的标题</title>
</head>
<body>
<h1>服务公告</h1><!--练习标题的使用,看看字号是不是变大了? -->
<hr /><!--水平分割线,别忘了那个"/" -->
<h2>本人现面对全国的小学生及家长同志提供如下服务:</h2>
<!--2号标题,看看字号是不是比1号标题小 -->
<h3>针对学生的服务</h3>
<p>
代写寒暑假作业(数学不保证没有错题,语文不保证没有错字,英语作业你找别人吧)
<br />帮忙欺负四年级以下同学,特体须加收费用。
<br />家长会帮忙冒充家长。
</p><!--上面的内容是一个段落 -->
<h3>VIP服务</h3>
<p>凡购买所有三项服务者即自动升级为VIP。我们将免费为您制作个人主页,<br />
完全符合W3C的XHTML标准和ISO2009~。</p>
<!--这里网页虽然层次还算比较分明,
可是你是不是觉得界面实在是很难看和简陋呢?<br />
比如说行与行之间没有空隙,一号标题太大了。
关于定义网页外观的方法将在稍后的CSS教程中介绍。<br />
忘了说主要内容了,注释不会出现在网页上,所以我们可以在这里打许多废话-->
</body>
</html>




保存修改后浏览网页,确认一下你的网页和这个页面相同,完工。

TOP

接上文


XHTML教程——文字格式与特殊字符
本节介绍文字格式和特殊字符在XHTML中的实现方法。
本教程前后联系比较紧密,建议您从第一节读起。
文字格式标签
在之前的教程中我们曾经用过一次<b>标签,他使得包含在它之中的内容变成粗体显示。例如“<b>菜鸟吧</b>”将显示为菜鸟吧。我们把这种定义文字显示方式的标签叫做文字格式标签(文字样式标签……)。与粗体标签<b>类似的还有斜体标签<i>。我们已经说过,不推荐使用b,而推荐使用strong;同样,我们不推荐使用i,而推荐使用em。
特殊字符(字符实体)
在XHTML中“<”和“>”是比较特殊的字符,因为它们被用于识别标签,而且在标签中的"<"和“>”并不会出现在页面上。那么如果我们想让浏览器显示这些特殊字符时该怎么做呢?这时我们就可以使用字符实体,例如小于号“<”在XHTML代码中写做“&lt;”。当然,在网页设计软件中,这项工作不需要我们手写代码来完成。因此我们只要了解这些特殊字符的显示原理即可,而不需要记住每一个特殊字符的书写代码。
练习实例
用记事本打开之前创建的"index.html"文件。对源文件做如下修改(红字提示),保存后看看之前之后有什么不同,请确认您的网页与这个页面相同。
<p>代写代写寒暑假作业(数学<strong>不</strong>保证没有错题,
语文不保证没有错字,英语作业你找别人吧<br />
帮忙欺负<strong>四年级</strong>以下同学,
<strong>特体须加收费用</strong>。<br />
家长会帮忙<em>冒充家长</em>。
</p><!--上面的内容是一个段落 -->
下面再来练习一下使用字符实体。打开之前保存的“index.html”,在</body>标签前输入如下代码:
<p>Copyright©2005-2006cainiao8.com版权没有</p>           
保存修改并重新浏览网页就可以看到如下的内容了:
“Copyright©2005-2006XXX版权没有”。我们注意到源代码中的“&copy”在浏览器中显示为“@”。请再次确认您的网页与这个页面相同,完工。
关于标签的顺序
学完了文字格式标签你也许会想,如果我希望一个字同时以粗体和斜体显示该怎么做呢?是不是简单的为它加上双层标签<strong>和<em>呢?没错。请看下面的例子:
<strong><em>我被两个标签包围啦!</em></strong>
我被两个标签包围啦!
这里你唯一需要注意的是标签的顺序。如果你将上面的标签顺序写成<b><i>我被两个标签包围啦!</b></i>,一般的浏览器将不产生任何错误。但是这是不符合XHTML标准的写法。请你一定要按顺序关闭标签。

XHTML教程——超级链接
超级链接是构成网站的重要部分,也是XHTML乃至互联网的精华所在
本教程前后联系比较紧密,建议您从第一节读起。
超级链接<a>标签
毫不夸张的说,是超级链接把整个互联网连接了起来。超级链接几乎可以指向互联网上的任何资源,例如另外一个网页、一张图片、一首MP3歌曲、一段视频等等。而利用XHTML建立超级链接的语法却非常简单,只需要一对<a></a>标签即可:
<a href="这个超级链接将要指向的网址">页面上将要显示的文字或者图片等</a>
例如:
<a href="http://www.cainiao8.com/">菜鸟吧</a>            
将会在浏览器中显示为一个超级链接,点击它就将进入菜鸟吧(http://www.cainiao8.com/)。效果如下:
菜鸟吧
其中<a>标签中的href属性就是这个超级链接所要指向的地址,它可以是一般的网址也可以是邮件的地址,在稍后的练习实例中我们将创建一个指向邮件地址的超级链接。<a>和</a>之间的内容(元素)将被作为超级链接显示在网页上。注意href属性值为一般网址(绝对路径)时,其"http://"是不可以省略的,否则浏览器将把它作为相对路径来识别。绝对路径与相对路径的区别不在本XHTML教程的讨论范围之内。如果你不了解这个概念,可以到百度搜索相关的资料。
页内跳转超级链接(锚记)
您在浏览其他网站的时候可能注意到了,有一些超级链接可以让您回到页面的顶端或者是当前网页内任何一个位置。就像下面这个链接:
回到标题
它的实现方法如下,首先在标题处加上如下代码:
<h1>XHTML教程——超级链接<a id="biaoti"></a></h1>
而超级链接本身的代码为:
<a href="#biaoti">回到标题</a>
页面内的跳转在您的页面内有大量的内容时,可以让你的用户很快的找到所需要的信息。通常情况下都是在一些说明性的网页内做目录使用。
链接练习
下面练习在之前的"index.html"中添加超级链接。打开"index.html",对代码做如下修改:
<html>
  中间代码省略……
<p><a href="mailto:xxx@xxx.com">联系我</a></p>
<!-- 注意要把邮箱地址改为你自己的 -->
<p>Copyright©2005-2006XXX版权没有</p>
</body>
</html>
保存之后浏览一下自己的网页,请确认您的网页与该页面相同。点击一下新创建的链接,如果你安装了Outlook之类的邮件管理软件,就会打开一个给自己发送邮件的界面了。

XHTML教程——列表
列表用于罗列出来一系列相似或者相关的项目
本教程前后联系比较紧密,建议您从第一节读起。
无序列表(项目列表)
无序列表的标签是<ul></ul>,而每一个列表项目则用<li>标签表示。下面我们就用无序列表来改写我们的"index.html",打开之前保存的文件后,将"针对学生提供的服务"一段的代码修改为如下的无序列表代码:
<h3>针对学生的服务</h3>
<ul>
<li>代写寒暑假作业(数学<b>不</b>保证没有错题,语文不保证没有错字,
英语作业你找别人吧)</li>
<li>帮忙欺负<b>四年级</b>以下同学,<b>特体须加收费用</b>。</li>
<li> 家长会帮忙<i>冒充家长</i>。 </li>
</ul>           
保存后浏览网页,请确认您的网页和这个页面相同。。
有序列表
有序列表的标签是<ol></ol>,列表项目仍然是<li>。我们再用有序列表来改写"index.html"的”针对家长一段“,将刚刚修改的那段代码中的<ul></ul>改为<ol></ol>:
<ol>
<li>代写寒暑假作业(数学<em>不</em>保证没有错题,语文<em>不</em>保证没有错字,
        <b>英语作业你找别人吧!</b>)。</li>
<li>帮忙欺负<strong>四年级以下</strong>同学,
        <strong>特体</strong>须加收费用。
</li>
<li>家长会帮忙<i>冒充家长</i>。</li>
   </ol>   
保存后浏览网页,请确认您页面的效果与这个页面相同。我们可以看到无序列表与有序列表在外观上的不同就是项目每个项目前面是小圆点还是数字。而在含义上,ul表示的是并列关系,ol则表示有先后顺序关系。

XHTML教程——图片
合理的添加图片可以使一个网页更加的美观
本教程前后联系比较紧密,建议您从第一节读起。
图片标签<img>
<img>标签用于在网页里插入图片。<img>标签有一个必需的属性"src",它的属性值就是图片的地址。下面我们就在我们的index.html里插入一个图片。打开”index.html“文件,在</body>前加上如下代码:
<p><img src="http://www.cainiao8.com/images/logo.gif"
alt="技术支持"/></p>
保存后浏览网,请确认您的网页与该页面相同。
我们注意到<img>也是一个空标签,需要在结尾加上一个"/"以符合XHTML的要求。这里的例子除src外还有一个属性alt,我们把它叫做做替换属性,当图片由于某种原因而无法显示的时候,alt的属性值就会代替图片出现;而当图片正常显示时,通常只要把鼠标停在图片上就会看到alt属性的属性值。
用图片作为链接
我们在之前的教程中曾经学习过创建超级链接,下面我们打开“index.html”并且将刚插入的代码改为下面这段:
<p><a href="http://www.cainiao8.com/">
<img src="http://www.cainiao8.com/images/logo.gif"
alt="技术支持"/></a></p>
保存后浏览网页,请再次确认您的网页与这个网页相同。看看图片是不是变成了超级链接,点击一下图片就会进入菜鸟吧的主页了。
关于XHTML的效验
从本节开始我们就不再修改"index.html"这个网页的外观了,现在将我们制作的网页送交权威机构检验一下。首先进入:http://validator.w3.org/,该页面就是一个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标准写的啊。其实问题出在了网页的“头部”,下面我们就来解决这个问题。
<head>部分
在之前的教程中除了<title>标签之外我们修改的都是<body>之间的内容,也就是显示在页面里的内容。那么XHTML中的<head>部分是做什么的呢?其实在<head>部分我么可以加入许多浏览器等软件可以“看得见”的信息。下面我们就介绍一些head部分常用的标签。
注意:本节的标签与属性大多数难于记忆,事实上在我们在使用网页制作软件创建网页的时候它们会自动生成。本节的目的是能够了解这些标签的含义,以在必要的时候可以做一些手工的修改。现在就打开我们的“index.html”,在<head></head>中间插入如下代码:
1.<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
这段代码告诉浏览器我们的网页使用的是gb2312中文字符编码,没有该段<meta>信息正是上一次效验时出现问题的原因之一。
2.<meta name="keywords" content="小学生,欺负同学,寒暑假作业,家长" />
这段代码是为搜索引擎写的,content的内容就是index.html的关键词。
请注意,<meta>标签也是一个空标签,别忘记加上/。<meta>标签的作用还远不只这些,不过在缺少实际应用的情况下,很难了解<meta>标签的实际用处。如果想了解更多<meta>标签的知识,可以到百度搜索相关知识。
关于<head>标签的说明
正如之前所说的,<head>部分的内容并不是为浏览者写的,而是为浏览器和搜索引擎写的。因此<head>部分不应该含有任何在页面中可视的的内容。
DTD
如果现在再次效验我们的网页,仍然会得到出错信息,提示找不到DTD文件,那么什么是DTD文件呢?简单的说它就是在任何人(多数情况下是类似浏览器的软件)想要读取我们的文件之前告诉他我们文件是遵照哪一套规则来写的。以效验过程为例子,如果我们使用HTML4.01的DTD呢,效验器就会认为我们是使用的HTML4.01的规则编写的网页,然后按照相应的规则来一行一行的效验我们的代码,最终返回效验结果。
我们制作的网页是使用XHTML的规则,当然要使用XHTML的DTD。不过正如我们前面提到的,XHTML的DTD也分为相对松散的过渡期DTD和要求相当严格的严格DTD。本教程中我们将要在网页中声明严格的DTD,如果您想了解更多关于DTD的内容需要学习XML,本教程中不做过多讨论。
下面我们就为我们的网页声明DTD。打开之前保存的"index.html",在第一行(<html>标签之前)输入如下代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">      
并且在<html>标签里添加如下属性:xmlns="http://www.w3.org/1999/xhtml"。这个叫做命名空间属性,属于XML范畴,我们这里仍然不做过多的讨论。
这段代码的作用就是声明我们的网页是使用的xhtml1-strict.dtd。现在再将这个页面提交给W3的效验器,这次将返回一个“This Page Is Valid XHTML1.0 Strict!”的信息。这表示我们的代码中没有任何错误,完全符合XHTML1的strict(严格)标准。当然了,实际工作中情况可能不总是如此,在实际的网页设计过程中,总会有各种原因造成我们写出不规范的代码。这时效验器就会给出错误报告,我们只需要按照提示修改代码即可。

XHTML教程——表格
表格是XHTML中处境尴尬的一个标签。我们需要了解,表格应该被用来展示数据,而不是用于网页布局。
本教程前后联系比较紧密,建议您从第一节读起。
关于表格
在CSS流行之前,table被广泛应用于定位。在XHTML中,table不被推荐用来定位,W3C希望CSS可以取代<table>在定位方面的地位。不过事实上由于利用CSS布局常常需要大量的手写代码工作(常用的网页设计软件如Dreamweaver并不能完美支持div的显示),<table>仍被许多网站用语首页布局,例如Google的More products页面就利用了table来定位。 不过我个人推荐您开始使用CSS来定位网页,因为这是Web发展的方向。
表格标签<table>
在XHTML中,创建表格的标签是<table>,书写代码时,我们要先用<tr>标签将表格分成一行一行,再用<td>标签把每行分成一格一格。完全手写代码创建table是十分困难和低效的,而在网页制作软件中制作表格就如同Word一样简单,只需要选择行列之类的简单属性即可。但是我们可能会遇到自动做出的表格不符合要求,而需要在代码模式调整的可能,因此我们还是要大概了解XHTML表格标签的具体写法。
表格的边框(border)属性
<table>标签可以有border属性。如果不设置border属性的值,在默认情况下,浏览器将不显示表格的边框。
表格练习
我们来建立一个四行两列的标签,代码如下:
<table border="1">
<tr>
<td>一个格子</td>
<td>一个格子</td>
</tr>
<tr>
<td>一个格子</td>
<td>一个格子</td>
</tr>
<tr>
<td>一个格子</td>
<td>一个格子</td>
</tr>
<tr>
<td>一个格子</td>
<td>一个格子</td>
</tr>
</table>
显示结果如下:注意上面的代码,一共有4对<tr>,对应着下面的4个行。而没个<tr>(行)又有两个<td>单元格。于是就成了一个4行2列的表格。
一个格子        一个格子
一个格子        一个格子
一个格子        一个格子
一个格子        一个格子
这样的表格用来列出数据之类的信息足够了,但是用来定位的表格通常要复杂一些。再次强调我们不推荐用table来定位,所以这里仅仅简单地介绍了<table>。
如果要使用表格显示很多数据,可能还需要加入caption(标题),thead、tbody等等,这里也不做介绍了。
XHTML教程——框架结构
框架结构可以让几个网页同时显示在浏览器的一个页面内。我们不推荐您使用它来设计网站。
本教程前后联系比较紧密,建议您从第一节读起。
框架结构标签<frameset></frameset>
框架允许你在一个浏览器窗口内打开两个乃至多个页面。你可以这样理解,<frameset>其实就是一个大<table>,只不过整个页面是<table>的主体,而每一个单元格的内容都是一个独立的网页。
给框架结构分栏(”cols“和”rows“属性)
既然我们说框架结构可以被理解为一网页为单元格的表格,那么就一定要分栏了。其中cols属性将页面分为几列,而rows属性则将页面分为几行。下面来看一个例子。
<html>
<frameset rows="25%,75%">
<frame src="1.html"/>
<frame src="3.html"/>
</frameset>
</html>
其中"rows="25%,75%"表示该页面共分为两行,因为它有两个属性值,而他们的大小则分别为页面高度的25%和75%。点击这里查看以上代码的显示效果。框架标签<frame>
上面的实例中已经用到了<frame>标签,它的src属性就是这个框架里将要显示的内容。在本实例中的两个框架是可以通过拖拽开改变大小比例的,如果你希望它们大小固定可以使用noresize="noresize"属性。
注意:<frame>标签是空标签,需要加上一个"/"以符合XHTML的要求。
关于<noframe>标签
该标签只有当浏览器不支持框架结构时才会起到作用,由于现在几乎所有网民的浏览器都支持框架结构,所以我们在这里就不介绍这个标签了。
框架结构和DTD
框架页面的DTD与一般网页不同。声明方法如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML教程——表单
表单是用户提交信息的重要渠道。本节就将介绍表单的基础知识。
本教程前后联系比较紧密,建议您从第一节读起。
表单标签<form>
表单以一个<form>标签开始。用户注册网站会员,投票等等都需要表单来实现。当然了,仅仅依靠XHTML是无法处理这些表单的,如果你想处理这些表但你需要使用一些类似PHP和ASP的网页后台技术。(顺便说一下,小菜鸟自己的后台技术目前还很菜。)
表单内的<input>
下面我们来介绍两个常见的表单组成元素:
1.文本框
<form>姓名:<input type="text"name="user"/><br/></form>            
姓名:  
2.密码框
<form>姓名:<input type="password"name="pass"/><br/></form>           
密码:  
可以看到,这两个表单元素都用到了<input>标签,但是密码框里填写的内容却是不可见的。决定了他们类型不同的是<input>标签的属性“type”的属性值。例如text就是文本框,而password则是密码。你应该注意到了,<imput>标签也是一个空标签。他没有终止标签。我们一定要记得在后面加上一个"/"以符合XHTML的要求。
常用的表单元素还有很多,比如单选和复选矿,不过既然我们现在无法处理表单,也就无法理解表单的含义。所以这里就不介绍了,大家以后如果继续学习后台技术的话,自然就会理解form在建站中所起到的作用了。

学习完XHTML了?XHTML总结
恭喜!您已经学完了XHMTL的基础教程了。
学习完了XHTML了,那下一步做什么呢?
其实XHTML不只是教程里介绍的这些,我们只介绍了HTML/XHTML中最常用的知识,而不是所有的标签。事实上也没有必要一下就把所有的HTML标签都记住。以我的个人经验,最好在以后制作网页的过程中,逐渐的掌握每一个标签的用法。当然了,在实践的过程中手边有一些齐全的资料肯定是最好的。我们已经为你找好了关于HTML/XHTML的参考资料,希望对您有用。
发新话题