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(严格)标准。当然了,实际工作中情况可能不总是如此,在实际的网页设计过程中,总会有各种原因造成我们写出不规范的代码。这时效验器就会给出错误报告,我们只需要按照提示修改代码即可。