。为什么会出错?
在上一节中我们我们在检验我们的网页时得到了一段出错信息,但是我们在整个网页的制作过程中都是按照XHTML标准写的啊。
其实问题出在了网页的“头部”,下面我们就来解决这个问题。
部分在之前的教程中除了
标签之外我们修改的都是之间的内容,也就是显示在页面里的内容。那么XHTML中的
部分是做什么的呢?其实在
部分我么可以加入许多浏览器可以“看得见”的信息。下面我们就介绍一些head部分常用的标签。
注意:
本节的标签与属性大多数难于记忆,事实上在我们在使用网页制作软件创建网页的时候它们会自动生成。
本节的目的是能够了解这些标签的含义,以在必要的时候可以做一些手工的修改。
现在就打开我们的“index.html”,在
中间插入如下代码:1.
这段代码告诉浏览器我们的网页使用的是gb2312中文字符编码,没有该段信息正是上一次检验时出现问题的原因之一。
2.
这段代码是为搜索引擎写的,content的内容就是index.html的关键词。
请注意,标签也是一个空标签,别忘记加上/。
标签的作用还远不只这些,不过在缺少实际应用的情况下,很难了解标签的实际用处。
如果想了解更多标签的知识,可以到XX搜索相关知识。
关于
标签的说明正如之前所说的,
部分的内容并不是为浏览者写的,而是为浏览器和搜索引擎写的。因此
部分不应该含有任何在页面中可视的的内容。DTD
如果现在再次检验我们的网页,仍然会得到出错信息,提示找不到DTD文件,那么什么是DTD文件呢?
简单的说它就是在任何人(多数情况下是类似浏览器的软件)想要读取我们的文件之前告诉他我们文件是遵照哪一套规则来写的。
以检验过程为例子,如果我们使用HTML4.01的DTD呢,效验器就会认为我们是使用的HTML4.01的规则编写的网页,然后按照相应的规则来一行一行的检验我们的代码,最终返回检验结果。
我们制作的网页是使用XHTML的规则,当然要使用XHTML的DTD。
不过正如我们前面提到的,XHTML的DTD也分为相对松散的过渡期DTD和要求相当严格的严格DTD。
本教程中我们将要在网页中声明严格的DTD,如果您想了解更多关于DTD的内容需要学习XML,本教程中不做过多讨论。
下面我们就为我们的网页声明DTD。
打开之前保存的"index.html",在第一行(标签之前)输入如下代码:
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
并且在标签里添加如下属性:
xmlns="http:
//www.w3.org/1999/xhtml"。
这个叫做命名空间属性,属于XML范畴,我们这里仍然不做过多的讨论。
这段代码的作用就是声明我们的网页是使用的xhtml1-strict.dtd。
现在再将这个页面提交给W3的效验器,这次将返回一个“ThisPageIsValidXHTML1.0Strict!
”的信息。
这表示我们的代码中没有任何错误,完全符合XHTML1的strict(严格)标准。
当然了,实际工作中情况可能不总是如此,在实际的网页设计过程中,总会有各种原因造成我们写出不规范的代码。
这时效验器就会给出错误报告,我们只需要按照提示修改代码即可。
合理的添加图片可以使一个网页更加的美观。
图片标签
标签用于在网页里插入图片。
标签有一个重要的属性"src",它的属性值就是图片的地址。
下面我们就在我们的index.html里插入一个图片。
打开”index.html“文件,在前加上如下代码:
保存后浏览网,请确认您的网页与该页面相同。
我们注意到是一个空标签,需要在结尾加上一个"/"以符合XHTML的要求。
这里的例子除src外还有一个属性alt,我们把它叫做做替换属性,当图片由于某种原因而无法显示的时候,alt的属性值就会代替图片出现;而当图片正常显示时,只要把鼠标停在图片上就会看到alt属性的属性值。
用图片作为链接
我们在之前的教程中曾经学习过创建超级链接,下面我们打开“index.html”并且将刚插入的代码改为下面这段:
保存后浏览网页,请再次确认您的网页与这个网页相同。
看看图片是不是变成了超级链接,点击一下图片就会进入菜鸟吧的主页了。
关于XHTML的效验
从本节开始我们就不再修改"index.html"这个网页的外观了,现在将我们制作的网页送交权威机构检验一下。
首先进入:
http:
//validator.w3.org/,该页面就是一个XHTML效验工具,它用来检验我们制作的网页是否符合XHTML的标准。
您可以选择用网址效验,也可以上传文件效验。
您可以选择文件上传效验,方法如下:
在”ValidatebyFileUpload“有“LocalFile”一栏,点击浏览,找到并选中之前保存的"index.html",然后点击“check”按钮。
您的结果应该与我们通过网址效验的结果一样。
返回如下错误信息:
Sorry,Iamunabletovalidatethisdocumentbecauseonline3,6-9,12-14,16-22itcontainedoneormorebytesthatIcannotinterpretasutf-8(inotherwords,thebytesfoundarenotvalidvaluesinthespecifiedCharacterEncoding).Pleasecheckboththecontentofthefileandthecharacterencodingindication.
列表用于罗列出来一系列相似或者相关的项目.
无序列表(项目列表)
无序列表的标签是
,而每一个列表项目则用标签。
下面我们就用无序列表来改写我们的"index.html",打开之前保存的文件后,将"针对学生提供的服务"一段的代码修改为如下的无序列表代码:
针对学生的服务
- 代写寒暑假作业(数学不保证没有错题,语文不保证没有错字,英语作业你找别人吧)
- 帮忙欺负四年级以下同学,特体须加收费用。
- 家长会帮忙冒充家长。
保存后浏览网页,请确认您的网页和这个页面相同。
。
有序列表
有序列表的标签是
,列表项目仍然是。我们再用有序列表来改写"index.html"的”针对家长一段“,将刚刚修改的那段代码中的
改为
:- 代写寒暑假作业(数学不保证没有错题,语文不保证没有错字,英语作业你找别人吧!
)。
- 帮忙欺负四年级以下同学,特体须加收费用。
- 家长会帮忙冒充家长。
超级链接标签
毫不夸张的说,是超级链接把整个互联网连接了起来。
超级链接几乎可以指向互联网上的任何资源,例如另外一个网页、一张图片、一首MP3歌曲等等。
而利用XHTML建立超级链接的语法却非常简单,只需要一对标签即可:
页面上将要显示的文字或者图片等
例如:
将会在浏览器中显示为一个超级链接,点击它就将进入网页教学网(
网页教学网
其中标签中的href属性就是这个超级链接所要指向的地址,她可以是一般的网址也可以是邮件的地址,在稍后的练习实例中我们将创建一个指向邮件地址的超级链接。
和之间的内容(元素)将被作为超级链接显示在网页上。
注意href属性值为一般网址(绝对路径)时,其"http:
//"是不可以省略的,否则浏览器将把它作为相对路径来识别。
绝对路径与相对路径的区别不在本XHTML教程的讨论范围之内,如果你不了解可以到XX搜索相关的资料。
页内跳转超级链接(锚记)
您在浏览其他网站的时候可能注意到了,有一些超级链接可以让您回到页面的顶端或者是当前网页内任何一个位置。
就像下面这个链接:
回到标题
它的实现方法如下,首先在标题处加上如下代码。
:
XHTML入门学习教程——XHTML超级链接
而超级链接本身的代码为:
回到标题
页面内的跳转在您的页面内有大量的内容时,可以让你的用户很快的找到所需要的信息。
通常情况下都是在一些说明性的网页内做目录使用。
链接练习
下面练习在之前的"index.html"中添加超级链接。
打开”index.html“,对代码做如下修改:
中间代码省略……
xxx@">联系我
--注意要把邮箱地址改为你自己的-->
Copyright©2005-2006XXX版权没有
保存之后浏览一下自己的网页,请确认您的网页与该页面相同。
点击一下新创建的链接,如果你安装了Outlook之类的邮件管理软件,就会打开一个给自己发送邮件的界面了。
本节介绍文字格式和特殊字符在XHTML中的实现方法。
文字格式标签
在之前的教程中我们曾经用过一次标签,他使得包含在它之中的内容变成粗体显示。
例如“菜鸟吧”将显示为菜鸟吧。
我们把这种定义文字显示方式的标签叫做文字格式标签(文字样式标签……)。
与粗体标签类似的还有斜体标签和强调标签等。
我们推荐您使用CSS定义网页的样式,而不是类似的XHTML标签,这里介绍这些标签的目的是让您在阅读别人网页的源代码时不至于糊涂。
特殊字符(字符实体)
在XHTML中“<”和“>”是比较特殊的字符,因为它们被用于识别标签,而且在标签中的"<"和“>”并不会出现在页面上。
那么如果我们想让浏览器显示这些特殊字符时该怎么做呢?
这时我们就可以使用字符实体,例如小于号“<”在XHTML代码中写做“<”。
当然,在网页设计软件中,这项工作不需要我们手写代码来完成。
因此我们只要了解这些特殊字符的显示原理即可,而不需要记住每一个特殊字符的书写代码。
练习实例
用记事本打开之前创建的"index.html"文件。
对源文件做如下修改(红字提示),保存后看看之前之后有什么不同,请确认您的网页与这个页面相同。
代写寒暑假作业(数学不保证没有错题,语文不保证没有错字,英语作业你找别人吧)
帮忙欺负四年级以下同学,特体须加收费用。
家长会帮忙冒充家长。
--上面的内容是一个段落-->
下面再来练习一下使用字符实体。
打开之前保存的“index.html”,在标签前输入如下代码:
Copyright©2005-版权没有
保存修改并重新浏览网页就可以看到如下的内容了:
“Copyright©2005-2006XXX版权没有”。
我们注意到源代码中的“©”在浏览器中显示为“@”。
请再次确认您的网页与这个页面相同,完工。
关于标签的顺序
学完了文字格式标签你也许会想,如果我希望一个字同时以粗体和斜体显示该怎么做呢?
是不是简单的为它加上双层标签和呢?
没错。
请看下面的例子:
我被两个标签包围啦!
将在浏览器中显示为我被两个标签包围啦!
这里你唯一需要注意的是标签的顺序。
如果你将上面的标签顺序写成我被两个标签包围啦!
,一般的浏览器将不产生任何错误。
但是这是不符合XHTML标准的写法。
请你一定要按顺序关闭标签。
就像一篇文章一样,我们的网页也要段落分明,也需要重要程度不同的标题。
本节就将介绍XHTML中实现标题、段落等功能的常用签..
标题标签
到
定义标题,我们可以使用从
到这几个标签,它们对应的终止标签分别为
到,其中到字号顺序减小,重要性也逐渐降低。
浏览器将在标题的上面和下面自动各空出一行。
段落标签
定义段落使用
和
,在和
之间的内容会被识别为一个段落,它就类似我们通常所说的一个“自然段”。与标题类似,浏览器也会在段落的开始之前和结束之后各加一行空白。
换行标签
(
)
当我们在想另起一行书写文字却又不希望另起一个自然段的时候,我们就可以应用
标签了。
标签也是一个空标签,需要加上一个"/"以符合XHTML的要求。
水平分割线标签
(
)实现水平分割线的标签是
。和
标签一样,
也是一个空标签,为了遵守XHTML的规则,需要加上一个"/"。(下面就是一条分割线)
注释
-- -->
合理利用上面介绍的四个标签可以使浏览你网页的用户觉得网页的层次清晰,而注释则可以使你在阅读自己的网页源代码时感觉层次清晰,不至于摸不着头脑。
在
--和-->之间的东西就是注释的内容,它们将不会在网页上显示。
看看我们如何在下面的练习实例中插入注释。
练习实例
现在打开我们在上一节保存的网页,练习一下本节学习的几个重要标签。
将
中的“这是我的第一个网页。”去掉,输入以下内容:
服务公告
--练习标题的使用,看看字号是不是变大了?
-->
--水平分割线,别忘了那个"/"-->
本人现面对全国的小学生及家长同志提供如下服务:
--2号标题,看看字号是不是比1号标题小-->
针对学生的服务
代写寒暑假作业(数学不保证没有错题,语文不保证没有错字,英语作业你找别人吧)
帮忙欺负四年级以下同学,特体须加收费用。
家长会帮忙冒充家长。
--上面的内容是一个段落-->
VIP服务
凡购买所有三项服务者即自动升级为VIP。
我们将免费为您制作个人主页,完全符合W3C的XHTML标准和ISO2009~。
--这里网页虽然层次还算比较分明,可是你是不是觉得界面实在是很难看和简陋呢?
比如说行与行之间没有空隙,一号标题
太大了。
关于定义网页外观的方法将在稍后的CSS教程中介绍。
忘了说主要内容了,注释不会出现在网页上,所以
我们可以在这里打许多废话。
不过在以后网页设计的过程中尽量写一些有提示作用的注释。
-->
保存修改后浏览网页,确认一下你的网页和这个页面相同,完工。
XHTML标签简介
也许你在上一节就注意到了,XHTML文件与普通的纯文本文件的最大不同在于一些用“<>”包含的东西,例如
。我们把他们叫做标签。
通常情况下XHTML标签都是成对出现的,例如。
可以看到它们只相差一个“/”,我们把类似的没有“/”的标签叫做起始标签,而它对应的有“/”的则叫终止标签,终止标签与起始标签只相差一个"/"符号。
当然了,XHTML也有一些标签并不成对出现,它们没有终止标签,我们把这样的标签叫做“空标签”。
空标签的内容在稍后的教程中将会提到。
关于大小写
以前各个版本HTML标签并不区分大小写,例如标签和标签是等效的。
而在XHTML中,所有标签均使用小写。
为了使自己的网站能够符合XHTML标准,您应该养成良好的习惯,在制作网页的过程中所有标签一律使用小写。
XHTML标签的作用(元素)
打开上一节教程中保存的html文件。
将第六行的“这是我的第一个网页。
”改为“这是我的第一个网页。
”,然后保存修改后再次浏览网页。
你会发现网页两个字变成了粗体显示,效果如下:
这是我的第一个网页。
区别很明显,网页两个字由于被“包”在了标签中而变成了粗体。
标签的意思就是粗体显示,而它只会影响到被它包含的内容。
这就是XHTML标签的作用方式。
我们把被标签“包住”的内容叫做元素。
本例中“网页”两个字就
展开阅读全文
相关搜索