XHTML基础教程(一)

2022-02-27
来源/作者：不详 / 佚名
7 次浏览

什么是HTML?

简单点说：HTML是用来做网页的。它很简单，在接下来的1~2分钟之内你就会跟着我用HTML做一个简单的网页。

复杂点说：HTML（HyperTextMarkupLanguage的缩写），即超文本链接标记语言。它是在互联网发布超文本文件(通常所说的网页)的通用语言。

什么是XHTML?更先进难懂的技术？

简单点说：X是吓唬人的，其实XHTML就是严谨而准确的HTML。如果说HTML是汉语，那么XHTML就是标准普通话。对于现在才刚刚开始学习网页设计的朋友，直接学习XHTML是最佳的选择。

复杂点说：XHTML是HTML的“升级”产品。事实上它也属于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吧。

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

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

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

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

关于大小写

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

XHTML标签的作用（元素）

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

　　这是我的第一个网页。

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

标签的属性

我们可以为XHTML标签设置一些属性。请你注意上面的水平线，原本它的代码是：<hr />。在XHTML中<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 />。这也正是我们添加空格的原因。（我至今没有遇到不兼容的浏览器）

上一页 [1] [2] [3] [4] [5] [6] 下一页

常用标签

就像一篇文章一样，我们的网页也要段落分明，也需要重要程度不同的标题。本节就将介绍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>。”去掉，输入以下内容：

<h1>服务公告</h1>
<hr />
<h2>本人现面对全国的小学生及家长同志提供如下服务：</h2>
<h3>针对学生的服务</h3>
<p>
代写寒暑假作业（数学不保证没有错题，语文不保证没有错字，英语作业你找别人吧）
<br />帮忙欺负四年级以下同学，特体须加收费用。
<br />家长会帮忙冒充家长。
</p>
<h3>VIP服务</h3>
<p>凡购买所有三项服务者即自动升级为VIP。我们将免费为您制作个人主页，完全符合W3C的XHTML标准和ISO2009~。</p>

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

上一页 [1] [2] [3] [4] [5] [6] 下一页

文字格式与特殊字符

本节介绍文字格式和特殊字符在XHTML中的实现方法。

文字格式标签

在之前的教程中我们曾经用过一次<b>标签，他使得包含在它之中的内容变成粗体显示。例如“<b>菜鸟吧</b>”将显示为菜鸟吧。我们把这种定义文字显示方式的标签叫做文字格式标签（文字样式标签……）。与粗体标签<b>类似的还有斜体标签<i>和强调标签 <em>等。我们推荐您使用CSS定义网页的样式，而不是类似<b>的XHTML标签，这里介绍这些标签的目的是让您在阅读别人网页的源代码时不至于糊涂。

特殊字符(字符实体)

在XHTML中“<”和“>”是比较特殊的字符，因为它们被用于识别标签，而且在标签中的"<"和“>”并不会出现在页面上。那么如果我们想让浏览器显示这些特殊字符时该怎么做呢？这时我们就可以使用字符实体，例如小于号“<”在XHTML代码中写做“& lt;”。当然，在网页设计软件中，这项工作不需要我们手写代码来完成。因此我们只要了解这些特殊字符的显示原理即可，而不需要记住每一个特殊字符的书写代码。

练习实例

用记事本打开之前创建的"index.html"文件。对源文件做如下修改(红字提示)，保存后看看之前之后有什么不同，请确认您的网页与这个页面相同。

代写寒暑假作业（数学<b>不</b>保证没有错题，语文不保证没有错字，英语作业你找别人吧）
<br />帮忙欺负<b>四年级</b>以下同学，<b>特体须加收费用</b>。
<br />家长会帮忙<i>冒充家长</i>。
</p>

下面再来练习一下使用字符实体。打开之前保存的“index.html”，在</body>标签前输入如下代码：

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

关于标签的顺序

学完了文字格式标签你也许会想，如果我希望一个字同时以粗体和斜体显示该怎么做呢？是不是简单的为它加上双层标签<b>和<i>呢？没错。请看下面的例子：

<b><i>我被两个标签包围啦！</i></b>

将在浏览器中显示为我被两个标签包围啦！

这里你唯一需要注意的是标签的顺序。如果你将上面的标签顺序写成<b><i>我被两个标签包围啦！</b></i>，一般的浏览器将不产生任何错误。但是这是不符合XHTML标准的写法。请你一定要按顺序关闭标签。

上一页 [1] [2] [3] [4] [5] [6] 下一页

XHTML超级链接<A>

超级链接<a>标签

毫不夸张的说，是超级链接把整个互联网连接了起来。超级链接几乎可以指向互联网上的任何资源，例如另外一个网页、一张图片、一首MP3歌曲等等。而利用XHTML建立超级链接的语法却非常简单，只需要一对<a></a>标签即可：

<a href="这个超级链接将要指向的网址">页面上将要显示的文字或者图片等</a>

例如：

将会在浏览器中显示为一个超级链接，点击它就将进入设计之家（http://www.sj33.cn/）。效果如下：

设计之家

其中<a>标签中的href属性就是这个超级链接所要指向的地址，她可以是一般的网址也可以是邮件的地址，在稍后的练习实例中我们将创建一个指向邮件地址的超级链接。<a>和</a>之间的内容（元素）将被作为超级链接显示在网页上。注意href属性值为一般网址（绝对路径）时，其"http://"是不可以省略的，否则浏览器将把它作为相对路径来识别。绝对路径与相对路径的区别不在本XHTML教程的讨论范围之内，如果你不了解可以到百度搜索相关的资料。

页内跳转超级链接(锚记)

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

回到标题

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

<h1>XHTML入门学习教程――XHTML超级链接<a id="biaoti"></a></h1>

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

页面内的跳转在您的页面内有大量的内容时，可以让你的用户很快的找到所需要的信息。通常情况下都是在一些说明性的网页内做目录使用。

链接练习

下面练习在之前的"index.html"中添加超级链接。打开”index.html“，对代码做如下修改：

保存之后浏览一下自己的网页，请确认您的网页与该页面相同。点击一下新创建的链接，如果你安装了Outlook之类的邮件管理软件，就会打开一个给自己发送邮件的界面了。

上一页 [1] [2] [3] [4] [5] [6] 下一页

列表标签的使用

列表用于罗列出来一系列相似或者相关的项目.

无序列表（项目列表）

无序列表的标签是<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>

保存后浏览网页，请确认您页面的效果与这个页面相同。我们可以看到无序列表与有序列表的不同就是项目每个项目前面是小圆点还是数字。

上一页 [1] [2] [3] [4] [5] [6]