XHTML入门教程Word文件下载.docx

资源描述

XHTML入门教程Word文件下载.docx

《XHTML入门教程Word文件下载.docx》由会员分享，可在线阅读，更多相关《XHTML入门教程Word文件下载.docx（16页珍藏版）》请在冰豆网上搜索。

XHTML入门教程Word文件下载.docx

基础知识

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

下面我们来试着做一个简单的网页，希望您能跟着我们操作，这只会花费您一分钟时间。

现在您也许不知道那些尖括号“<

”和里面的字母究竟是些什么东西，不要担心，我们会在后面的教程中向您介绍。

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

html>

head>

title>

我是这个网页的标题<

/title>

/head>

body>

这是我的第一个网页。

/p>

/body>

/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也有一些标签并不成对出现，它们没有终止标签，我们把这样的标签叫做“空标签”。

空标签的内容在稍后的教程中将会提到。

关于大小写

以前各个版本HTML标签并不区分大小写，例如标签<

HTML>

和标签<

是等效的。

而在XHTML中，所有标签均使用小写。

为了使自己的网站能够符合XHTML标准，您应该养成良好的习惯，在制作网页的过程中所有标签一律使用小写。

XHTML标签的作用（元素）

打开上一节教程中保存的html文件。

将第六行的“这是我的第一个网页。

”改为“这是我的第一个<

网页<

/b>

”，然后保存修改后再次浏览网页。

你会发现网页两个字变成了粗体显示，效果如下：

　　这是我的第一个网页。

区别很明显，网页两个字由于被“包”在了标签<

中而变成了粗体。

标签的意思就是粗体显示，而它只会影响到被它包含的内容。

这就是XHTML标签的作用方式。

我们把被标签以及它“包住”的内容叫做元素（element）。

本例中“网页”两个字和<

标签就是网页中的一个元素。

标签的属性

hr/>

我们可以为XHTML标签设置一些属性。

请你注意上面的水平线标签，原本它的代码是：

在HTML中<

hr>

标签就是一条水平分割线，我们可以为这条分割线添加一个属性“size”（即分割线的大小），他的属性值为1。

那么它的完整代码就是：

hrsize="

类似的，为其他XHTML标签添加属性的方法也是在标签的起始标签中加入：

属性＝“属性值”。

需要注意的是，属性值必须使用引号“括”起来。

单引号或者双引号都可以，但是双引号比较常用。

添加属性的格式：

起始标签属性="

属性值"

　　实例－>

tableborder="

none"

注意：

普通的XHTML文件有两个等级标准（不算框架标准）——过渡标准和严格标准，其中过渡标准主要针对那些习惯于使用HTML开发网站的站长。

上面的代码在过渡标准中是合法的，可是在严格标准中，size属性将被视为非法属性。

XHTML不仅是更加标准更加严格的HTML，他还推崇一种构建网站的思路。

那就是把网页的内容与样式分开，这在XHTML中是通过CSS来实现的。

因此我们推荐您使用严格标准的XHTML，把定义样式的任务完全交给CSS。

（关于XHTML标准的问题将在后面的教程中介绍）

空标签

也许你已经注意到了，这里我们没有把分割线标签写成对称的<

/hr>

，而是写成<

其实这正是我们在前面教程中提到的不成对出现的标签，他只有起始标签<

却没有终止标签<

由于它没有“包住”任何内容，所以我们把这样的标签叫做空标签。

那么我们为什么要写成<

而不是简简单单地写成<

呢？

这样的书写格式是为了满足XHTML中任何标签都需要“关闭”的规则。

我们把在起始标签的最后添加"

的方法叫做标签的自闭（或者自关闭、自终止等等，你喜欢怎么叫都行）。

所有空标签的使用方法的自闭方法都是一致的，就是在起始标签的“>

”符号前加上一个空格和一个反斜杠“/”。

空格不是必须的，但是个别的浏览器却无法识别<

hr/>

，只能识别<

这也正是我们添加空格的原因。

（现在几乎不会遇到不兼容的浏览器了）

关于标签的补充

我们已经了解了标签的概念，我们是从<

这个示例标签开始的。

不过我希望大家以后都不要使用这个标签，而是使用strong来替代它。

即：

这是我的第一个<

strong>

/strong>

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

标题标签<

h1>

到<

h6>

定义标题，我们可以使用从<

这几个标签，它们对应的终止标签分别为<

/h1>

/h6>

，其中<

字号顺序减小，重要性也逐渐降低。

通常浏览器将在标题的上面和下面自动各空出一行距离。

段落标签<

定义段落使用<

，在<

之间的内容会被识别为一个段落，它就类似我们通常所说的一个“自然段”。

与标题类似，浏览器也会在段落的开始之前和结束之后各加一行空白。

换行标签<

br/>

（<

br>

）

当我们在想另起一行书写文字却又不希望另起一个自然段的时候，我们就可以应用<

标签了。

标签也是一个空标签，需要加上一个"

以符合XHTML的要求。

水平分割线标签<

实现水平分割线的标签是<

标签一样，<

也是一个空标签，为了遵守XHTML的规则，需要加上一个"

（下面就是一条分割线）

注释<

--　-->

合理利用上面介绍的四个标签可以使浏览你网页的用户觉得网页的层次清晰，而注释则可以使你在阅读自己的网页源代码时感觉层次清晰，不至于摸不着头脑。

在<

--和-->

之间的东西就是注释的内容，它们将不会在网页上显示。

看看我们如何在下面的练习实例中插入注释。

练习实例

现在打开我们在上一节保存的网页，练习一下本节学习的几个重要标签。

将<

中的“这是我的第一个<

”去掉，输入以下内容：

服务公告<

--练习标题的使用，看看字号是不是变大了？

-->

--水平分割线，别忘了那个"

h2>

本人现面对全国的小学生及家长同志提供如下服务：

/h2>

--2号标题，看看字号是不是比1号标题小-->

h3>

针对学生的服务<

/h3>

代写寒暑假作业（数学不保证没有错题，语文不保证没有错字，英语作业你找别人吧）

帮忙欺负四年级以下同学，特体须加收费用。

家长会帮忙冒充家长。

--上面的内容是一个段落-->

VIP服务<

凡购买所有三项服务者即自动升级为VIP。

我们将免费为您制作个人主页，<

完全符合W3C的XHTML标准和ISO2009~。

--这里网页虽然层次还算比较分明，

可是你是不是觉得界面实在是很难看和简陋呢？

比如说行与行之间没有空隙，一号标题太大了。

关于定义网页外观的方法将在稍后的CSS教程中介绍。

忘了说主要内容了，注释不会出现在网页上，所以我们可以在这里打许多废话-->

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

XHTML教程——文字格式与特殊字符

文字格式标签

在之前的教程中我们曾经用过一次<

标签，他使得包含在它之中的内容变成粗体显示。

例如“<

菜鸟吧<

”将显示为菜鸟吧。

我们把这种定义文字显示方式的标签叫做文字格式标签（文字样式标签……）。

与粗体标签<

类似的还有斜体标签<

我们已经说过，不推荐使用b，而推荐使用strong；

同样，我们不推荐使用i，而推荐使用em。

特殊字符（字符实体）

在XHTML中“<

”和“>

”是比较特殊的字符，因为它们被用于识别标签，而且在标签中的"

和“>

”并不会出现在页面上。

那么如果我们想让浏览器显示这些特殊字符时该怎么做呢？

这时我们就可以使用字符实体，例如小于号“<

”在XHTML代码中写做“&

lt;

”。

当然，在网页设计软件中，这项工作不需要我们手写代码来完成。

因此我们只要了解这些特殊字符的显示原理即可，而不需要记住每一个特殊字符的书写代码。

用记事本打开之前创建的"

index.html"

文件。

对源文件做如下修改（红字提示），保存后看看之前之后有什么不同，请确认您的网页与这个页面相同。

代写代写寒暑假作业（数学<

不<

保证没有错题，

语文不保证没有错字，英语作业你找别人吧<

帮忙欺负<

四年级<

以下同学，

特体须加收费用<

家长会帮忙<

em>

冒充家长<

/em>

下面再来练习一下使用字符实体。

打开之前保存的“index.html”，在<

标签前输入如下代码：

copy;

2005-版权没有<

保存修改并重新浏览网页就可以看到如下的内容了：

2005-2006XXX版权没有”。

我们注意到源代码中的“&

copy”在浏览器中显示为“@”。

请再次确认您的网页与这个页面相同，完工。

关于标签的顺序

学完了文字格式标签你也许会想，如果我希望一个字同时以粗体和斜体显示该怎么做呢？

是不是简单的为它加上双层标签<

没错。

请看下面的例子：

我被两个标签包围啦！

这里你唯一需要注意的是标签的顺序。

如果你将上面的标签顺序写成<

/i>

，一般的浏览器将不产生任何错误。

但是这是不符合XHTML标准的写法。

请你一定要按顺序关闭标签。

超级链接<

标签

毫不夸张的说，是超级链接把整个互联网连接了起来。

超级链接几乎可以指向互联网上的任何资源，例如另外一个网页、一张图片、一首MP3歌曲、一段视频等等。

而利用XHTML建立超级链接的语法却非常简单，只需要一对<

/a>

标签即可：

ahref="

这个超级链接将要指向的网址"

页面上将要显示的文字或者图片等<

例如：

将会在浏览器中显示为一个超级链接，点击它就将进入菜鸟吧（

菜鸟吧

其中<

标签中的href属性就是这个超级链接所要指向的地址，它可以是一般的网址也可以是邮件的地址，在稍后的练习实例中我们将创建一个指向邮件地址的超级链接。

之间的内容（元素）将被作为超级链接显示在网页上。

注意href属性值为一般网址（绝对路径）时，其"

http:

//"

是不可以省略的，否则浏览器将把它作为相对路径来识别。

绝对路径与相对路径的区别不在本XHTML教程的讨论范围之内。

如果你不了解这个概念，可以到XX搜索相关的资料。

页内跳转超级链接（锚记）

您在浏览其他网站的时候可能注意到了，有一些超级链接可以让您回到页面的顶端或者是当前网页内任何一个位置。

就像下面这个链接：

回到标题

它的实现方法如下，首先在标题处加上如下代码：

XHTML教程——超级链接<

aid="

biaoti"

而超级链接本身的代码为：

#biaoti"

回到标题<

页面内的跳转在您的页面内有大量的内容时，可以让你的用户很快的找到所需要的信息。

通常情况下都是在一些说明性的网页内做目录使用。

链接练习

下面练习在之前的"

中添加超级链接。

打开"

，对代码做如下修改：

中间代码省略……

mailto:

xxx@"

联系我<

--注意要把邮箱地址改为你自己的-->

2005-2006XXX版权没有<

保存之后浏览一下自己的网页，请确认您的网页与该页面相同。

点击一下新创建的链接，如果你安装了Outlook之类的邮件管理软件，就会打开一个给自己发送邮件的界面了。

无序列表（项目列表）

无序列表的标签是<

ul>

/ul>

，而每一个列表项目则用<

li>

标签表示。

下面我们就用无序列表来改写我们的"

，打开之前保存的文件后，将"

针对学生提供的服务"

一段的代码修改为如下的无序列表代码：

代写寒暑假作业（数学<

保证没有错题，语文不保证没有错字，

英语作业你找别人吧）<

/li>

以下同学，<

家长会帮忙<

保存后浏览网页，请确认您的网页和这个页面相同。

有序列表

有序列表的标签是<

ol>

/ol>

，列表项目仍然是<

我们再用有序列表来改写"

的”针对家长一段“，将刚刚修改的那段代码中的<

改为<

：

保证没有错题，语文<

保证没有错字，

英语作业你找别人吧！

）。

四年级以下<

同学，

特体<

须加收费用。

保存后浏览网页，请确认您页面的效果与这个页面相同。

我们可以看到无序列表与有序列表在外观上的不同就是项目每个项目前面是小圆点还是数字。

而在含义上，ul表示的是并列关系，ol则表示有先后顺序关系。

XHTML教程——图片

图片标签<

img>

标签用于在网页里插入图片。

标签有一个必需的属性"

src"

，它的属性值就是图片的地址。

下面我们就在我们的index.html里插入一个图片。

打开”index.html“文件，在<

前加上如下代码：

imgsrc="

alt="

技术支持"

保存后浏览网，请确认您的网页与该页面相同。

我们注意到<

也是一个空标签，需要在结尾加上一个"

这里的例子除src外还有一个属性alt，我们把它叫做做替换属性，当图片由于某种原因而无法显示的时候，alt的属性值就会代替图片出现；

而当图片正常显示时，通常只要把鼠标停在图片上就会看到alt属性的属性值。

用图片作为链接

我们在之前的教程中曾经学习过创建超级链接，下面我们打开“index.html”并且将刚插入的代码改为下面这段：

保存后浏览网页，请再次确认您的网页与这个网页相同。

看看图片是不是变成了超级链接，点击一下图片就会进入菜鸟吧的主页了。

关于XHTML的效验

从本节开始我们就不再修改"

这个网页的外观了，现在将我们制作的网页送交权威机构检验一下。

首先进入：

//validator.w3.org/，该页面就是一个XHTML效验工具，它用来检验我们制作的网页是否符合XHTML的标准。

您可以选择用网址效验，也可以上传文件效验。

您可以选择文件上传效验，方法如下：

在”ValidatebyFileUpload“有“LocalFile”一栏，点击浏览，找到并选中之前保存的"

，然后点击“check”按钮。

您的结果应该与我们通过网址效验的结果一样。

返回类似下面的错误信息：

Sorry,Iamunabletovalidatethisdocumentbecauseonline3,6-9,12-14,16-22itcontainedoneormorebytesthatIcannotinterpretasutf-8（inotherwords,thebytesfoundarenotvalidvaluesinthespecifiedCharacterEncoding）.Pleasecheckboththecontentofthefileandthecharacterencodingindication.

难道我们的网页不符合XHTML标准吗？

请继续看下一节的内容。

为什么会出错？

在上一节中我们我们在效验我们的网页时得到了一段出错信息，但是我们在整个网页的制作过程中都是按照XHTML标准写的啊。

其实问题出在了网页的“头部”，下面我们就来解决这个问题。

部分

在之前的教程中除了<

标签之外我们修改的都是<

之间的内容，也就是显示在页面里的内容。

那么XHTML中的<

部分是做什么的呢？

其实在<

部分我么可以加入许多浏览器等软件可以“看得见”的信息。

下面我们就介绍一些head部分常用的标签。

注

展开阅读全文