XHTML基础教程(二)

2022-03-12
来源/作者：不详 / 佚名
4 次浏览

XHTML网页图片应用

合理的添加图片可以使一个网页更加的美观。

图片标签<img>

<img>标签用于在网页里插入图片。<img>标签有一个重要的属性"src"，它的属性值就是图片的地址。下面我们就在我们的index.html里插入一个图片。打开”index.html“文件，在</body>前加上如下代码：

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

我们注意到<img>是一个空标签，需要在结尾加上一个"/"以符合XHTML的要求。这里的例子除src外还有一个属性alt，我们把它叫做做替换属性，当图片由于某种原因而无法显示的时候，alt的属性值就会代替图片出现；而当图片正常显示时，只要把鼠标停在图片上就会看到alt属性的属性值。

用图片作为链接

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

保存后浏览网页，请再次确认您的网页与这个网页相同。看看图片是不是变成了超级链接，点击一下图片就会进入菜鸟吧的主页了。

关于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标准吗？请继续看下一节的内容。

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

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

表格标签的应用

表格是XHTML中处境尴尬的一个标签，本节只做了解即可.

关于表格

在CSS流行之前，table被广泛应用于定位。在XHTML中，table不被推荐用来定位，W3C希望CSS可以取代< table>在定位方面的地位。不过事实上由于利用CSS布局常常需要大量的手写代码工作(常用的网页设计软件如Dreamweaver并不能完美支持div的显示)，<table>仍被许多网站用语首页布局，例如Google的More products页面就利用了table来定位。不过我个人推荐您开始使用CSS来定位网页，因为这是Web发展的方向。当然了，在初期用CSS取代table可能使您遇上很多的麻烦。

表格标签<table>

在XHTML中，创建表格的标签是<table>，书写代码时，我们要先用<tr>标签将表格分成一行一行，再用< td>标签把每行分成一格一格。完全手写代码创建table是十分困难和低效的，而在网页制作软件中制作表格就如同Word一样简单，只需要选择行列之类的简单属性即可。但是我们可能会遇到自动做出的表格不符合要求，而需要在代码模式调整的可能，因此我们还是要大概了解XHTML表格标签的具体写法。

表格的边框（border）属性

<table>标签可以有border属性。如果不设置border属性的值，在默认情况下，浏览器将不显示表格的边框。

表格练习

我们来建立一个四行两列的标签，代码如下：

显示结果如下：注意上面的代码，一共有4对<tr>，对应着下面的4个行。而没个<tr>（行）又有两个<td>单元格。于是就成了一个4行2列的表格。

一个格子	一个格子
一个格子	一个格子
一个格子	一个格子
一个格子	一个格子

这样的表格用来列出数据之类的信息足够了，但是用来定位的表格通常要复杂一些。再次强调我们不推荐用table来定位，所以这里仅仅简单地介绍了<table>。

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

框架标签使用

框架结构可以让几个网页同时显示在浏览器的一个页面内。我们不推荐您使用它来设计网站。

框架结构标签<frameset></frameset>

框架允许你在一个浏览器窗口内打开两个乃至多个页面。你可以这样理解，<frameset>其实就是一个大<table>，只不过整个页面是<table>的主体，而每一个单元格的内容都是一个独立的网页。

给框架结构分栏(”cols“和”rows“属性)

既然我们说框架结构可以被理解为一网页为单元格的表格，那么就一定要分栏了。其中cols属性将页面分为几列，而rows属性则将页面分为几行。下面来看一个例子。

其中"rows="25%,75%"表示该页面共分为两行，因为它有两个属性值，而他们的大小则分别为页面高度的25%和75%。点击这里查看以上代码的显示效果。框架标签<frame>

上面的实例中已经用到了<frame>标签，它的src属性就是这个框架里将要显示的内容。在本实例中的两个框架是可以通过拖拽开改变大小比例的，如果你希望它们大小固定可以使用noresize="noresize"属性。

注意：<frame>标签是空标签，需要加上一个"/"以符合XHTML的要求。

关于<noframe>标签

该标签只有当浏览器不支持框架结构时才会起到作用，由于现在几乎所有网民的浏览器都支持框架结构，所以我们在这里就不介绍这个标签了。如果你想了解相关内容，可以查阅网络上的HTML手册。

框架结构和DTD

框架页面的DTD与一般网页不同。声明方法如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

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

表单标签

表单是用户提交信息的重要渠道。本节就将介绍表单的基础知识。

表单标签<form>

表单以一个<form>标签开始。用户注册网站会员，投票等等都需要表单来实现。当然了，仅仅依靠XHTML是无法处理这些表单的，如果你想处理这些表但你需要使用一些类似PHP和ASP的网页后台技术。（顺便说一下，小菜鸟自己的后台目前还很菜。）

表单内的<input>

下面我们来介绍两个常见的表单组成元素：

1.文本框

姓名:

2.密码框

密码:

可以看到，这两个表单元素都用到了<input>标签，但是密码框里填写的内容却是不可见的。决定了他们类型不同的是< input>标签的属性“type”的属性值。例如text就是文本框，而password则是密码。你应该注意到了，<imput> 标签也是一个空标签。他没有终止标签。我们一定要记得在后面加上一个"/"以符合XHTML的要求。

常用的表单元素还有很多，比如单选和复选矿，不过既然我们现在无法处理表单，也就无法理解表单的含义。所以这里就不介绍了，大家以后如果继续学习后台技术的话，自然就会理解form在建站中所起到的作用了。

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