龙亿

------ 细细口味人生中的每一杯苦咖啡.

导航

XHTML教程——标签

Posted on 2008-11-18 23:52  龙亿  阅读(240)  评论(0编辑  收藏  举报

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教程——常用标签

标题标签<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>

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