跟我学超文本编程 胡咸 1997-01-01 #1　　★入门篇★ 　　超文本这个词已经有一些历史了，但它却是这两年才同ＷＥＢ这个词一同为人们所熟知的。通过ＩＮＴＥＲＮＥＴ访问ＷＷＷ就是在超文本的海洋里遨游。当你看腻了别人的主页，一定也会跃跃欲试地想把自己的主页呈现在世界人民面前，这就不可避免的要用到超文本编程，不可避免的你需要学习超文本编程。 　　严格说来，对超文本页面的设计并不能算作是编程，因为它首先不是一种语言，谈不上编程，其次它同其它真正的语言比起来，实在是太过简单了。不过我们在这里的目的不是讨论超文本的编辑到底算不算编程，我们的目的是──跟我学，做自己的主页。 #2　　一、超文本中的标签 　　超文本使用标签来分割和标记文本中的各个元素，例如标题、表格、段落和列表。在超文本中以符号　＇＜＇　表示一个标签的开始，紧跟其后的是标签名和该标签的各种属性值，最后用符号　＇＞＇　表示这个标签的结束。例如：＜　Ａ　ＨＲＥＦ＝"xlhｈｔｔｐ：／／ｗｗｗ．ｘａｎｅｔ．ｅｄｕ．ｃｎ"xlh　＞就是一个典型的标签。首先用符号　＇＜＇　表示这个标签的开始；字母＇Ａ＇是这个标签的标签名，在这里，＇Ａ＇表明这个标签是用来标记一个连接的；‘ＨＲＥＦ’是这个标签的属性，表示这个连接的地址；‘ｈｔｔｐ：／／ｗｗｗ．ｘａｎｅｔ．ｅｄｕ．ｃｎ’是‘ＨＲＥＦ’这个属性的具体值。标签一般都是成对出现的，并且用符号‘／’表示标签之间的响应，例如＜ＨＥＡＤ＞＜／ＨＥＡＤ＞就是一对相互照应的标签。每一对标签的作用范围在两个标签之间，同时标签允许嵌套，例如： 　　１：＜ＢＯＤＹ＞ 　　２：Ｔｈｅ　ＢＯＤＹ＇ｓ　ｃｏｎｔｒｏｌ　ｂｅｇｉｎ　ｆｒｏｍ　ｈｅｒｅ． 　　３：＜Ａ　ＨＲＥＦ　＝　"xlhｈｔｔｐ：／／ｗｗｗ．ｘａｎｅｔ．ｅｄｕ．ｃｎ"xlh＞Ｈｅｒｅ　ｉｓ　ａ　ｌｉｎｋ＜／Ａ＞ 　　４：Ｔｈｅ　ＢＯＤＹ＇ｓ　ｃｏｎｔｒｏｌ　ｅｎｄ　ｈｅｒｅ． 　　５：＜／ＢＯＤＹ＞ 　　在这个例子中，标签＜ＢＯＤＹ＞的作用范围从第２行到第４行，而＜Ａ＞的作用范围只是Ｈｅｒｅ　ｉｓ　ａ　ｌｉｎｋ这一句话。 　　在标签中，无论是标签名还是标签的各种属性都对字母的大小写不敏感，也就是说，标签＜　ＴＩＴＬＥ　＞、＜　ｔｉｔｌｅ　＞和＜　ＴｉＴｌｅ　＞是等价的。不过在习惯上通常是使用全部大写来表示标签名和各种属性，用小写表示属性的具体值。但是对于标签的大小写不敏感性来说，也有一些例外需要注意。首先要说明的是符号　＇＜＇　、　＇＞＇　和　＇＆＇　在标签中有其特殊的含义，所以需用特殊的表示方法。符号　＇＜＇　和　＇＞＇　分别表示一个标签的开始和结束，符号　＇＆＇　是转意符，它表示其后跟随的是命令或有特殊含义的字符。以上的这三个特殊符号的表示方法分别如下： 　　＆ｌｔ　　　＇＜＇ 　　＆ｒｔ　　　＇＞＇ 　　＆ａｍｐ　　＇＆＇ 　　例如，若要显示 　　ｉｆ（ａ＞ｂ＆＆ｃ＜ｄ） 　　则超文本标记为 　　ｉｆ（ａ＆ｒｔｂ＆ａｍｐ＆ａｍｐｃ＆ｌｔｄ） 　　另外，除了这三个符号外还有一些特殊符号需要用转意符才能表示，例如（图１）： 　　＆ｏｕｍｌ　表示显示一个具有变音符号的小写字母＇ｏ＇ 　　＆ｎｔｉｌｄｅ　表示显示一个具有颚化符号的小写字母＇ｎ＇ 　　＆Ｅｇｒａｖｅ　表示显示一个具有抑音符号的大写字母＇Ｅ＇ 　　类似的各种特殊符号还有很多，完全的列表可以从ｈｔｔｐ：／／ｗｗｗ．ｗ３．ｏｒｇ／ｈｙｐｅｒｔｅｘｔ／ＷＷＷ／ＭａｒｋＵｐ／ｈｔｍｌ－ｓｐｅｃ／ｈｔｍｌ－ｓｐｅｃ１３．ｈｔｍｌ＃ＳＥＣ１０６这个地址获得。 　　需要注意的是，以上的这些需要转意符表示的各种符号，对字母的大小写是敏感的。也就是说，不能使用＆ＬＴ来代替＆ｌｔ。 #2　　二、超文本的基本结构 　　超文本文档分文档头和文档体两部分。在文档头里，对这个文档进行了一些必要的定义，在文档体中才是具体要显示的的各种文档信息，例如段落、列表、表格等。下面是一个最基本的超文本文档的源代码： 　　＜ＨＴＭＬ＞ 　　＜ＨＥＡＤ＞ 　　＜ＴＩＴＬＥ＞Ａ　Ｓｉｍｐｌｅ　ＨＴＭＬ　Ｅｘａｍｐｌｅ＜／ＴＩＴＬＥ＞ 　　＜／ＨＥＡＤ＞ 　　＜ＢＯＤＹ＞ 　　＜Ｈ１＞ＨＴＭＬ　ｉｓ　Ｅａｓｙ　Ｔｏ　Ｌｅａｒｎ＜／Ｈ１＞ 　　＜Ｐ＞Ｗｅｌｃｏｍｅ　ｔｏ　ｔｈｅ　ｗｏｒｌｄ　ｏｆ　ＨＴＭＬ．Ｔｈｉｓ　ｉｓ　ｔｈｅ　ｆｉｒｓｔ　ｐａｒａｇｒａｐｈ．　Ｗｈｉｌｅ　ｓｈｏｒｔ　ｉｔ　ｉｓ　sｔｉｌｌ　ａ　ｐａｒａｇｒａｐｈ！＜／Ｐ＞ 　　＜Ｐ＞Ａｎｄ　ｔｈｉｓ　ｉｓ　ｔｈｅ　ｓｅｃｏｎｄ　ｐａｒａｇｒａｐｈ．＜／Ｐ＞ 　　＜／ＢＯＤＹ＞ 　　＜／ＨＴＭＬ＞ 　　在这段代码中，＜ＨＴＭＬ＞、＜ＨＥＡＤ＞、＜ＴＩＴＬＥ＞、＜ＢＯＤＹ＞等都是必须的，浏览器需要它们来做一些初始化和建立模板的工作，如果缺少，可能会引起不可预知的后果。 #2　　三、超文本中常用标签的含义和用法 　　ＨＴＭＬ：＜ＨＴＭＬ＞＜／ＨＴＭＬ＞ 　　这个标签向浏览器表明这个文档中包含超文本文档的成分，同时，文件名的后缀．ｈｔｍｌ 也表明这是个超文本文档（在８．３形式的文件名中后缀为．ｈｔｍ）。 　　ＨＥＡＤ：＜ＨＥＡＤ＞＜／ＨＥＡＤ＞ 　　这个标签包含的部分属于超文本文档的文档头。它包含的信息类似于编程时的初始化， 很多对这个文档的定义、说明和描述都在这一部分完成。例如ＪＡＶＡＳＣＲＩＰＴ程序、ＴＩＴＬＥ信息、ＭＥＴＡ信息等。 　　ＴＩＴＬＥ：＜ＴＩＴＬＥ＞＜／ＴＩＴＬＥ＞ 　　这个标签包含的部分并不在实际的浏览器显示中出现，它一般标识在浏览器窗口的标题上（如图２）。另外，它也用在热门节点列表和书签中，以及在ＷＡＩＳ中表示一个主页或一个服务器。 　　ＢＯＤＹ：＜ＢＯＤＹ＞＜／ＢＯＤＹ＞ 　　这个标签包含的部分是超文本文档中的两个基本部分的后一部分。页面里具体实现的内容都将在这里完成。 　　Ｈｅａｄｉｎｇｓ：＜Ｈｙ＞＜／Ｈｙ＞ 　　这个标签标识了超文本的标题。所谓标题，其实只是用较大和／或加黑的字体显示各种字符。超文本的标题共分六级，第一级最大，标签＜Ｈｙ＞中的ｙ就表示标题从１～６的各个级别。在使用中，第一个标题应从＜Ｈ１＞开始，并且以后不要跳级使用标签。六级标签的实际大小效果如图３所示。 　　Ｐａｒａｇｒａｐｈｓ：＜Ｐ＞＜／Ｐ＞ 　　超文本同其他文档格式不同的一点是它不支持自动换行。也就是说在超文本文档源代码中的任何回车都会被忽略。当一行的长度不满屏幕的宽时，下一行会自动接在后面显示，并且当一行或者几行的长度达到屏幕宽时，浏览器自动新起一行进行显示。因为超文本浏览器会忽略大多数回车，所以经常会要求程序员主动使用这个标签进行换行操作。 　　用＜Ｐ＞＜／Ｐ＞括起来的内容作为单独的一段，但在实际使用中，一般只用这对标签的前半部分＜Ｐ＞，因为当浏览器遇到＜Ｐ＞时就会理解该另换一行显示。 　　＜Ｐ＞这个标签还有一个属性ＡＬＩＧＮ，它用来指明字符显示时的对齐方式，一般其值有ＣＥＮＴＥＲ、ＬＥＦＴ、ＲＩＧＨＴ几种。下面，我们用一个例子来从感性上认识一下这个标签的用法（图４）。 　　１：＜ＢＯＤＹ＞ 　　２：Ｔｈｉｓ　ｌｉｎｅ　ｄｏｅｓ　ｎｏｔ　ｔｏｕｃｈ　ｔｈｅ　ｌｉｍｉｔ　ｏｆ　ｔｈｅ　ｓｃｒｅｅｎ．　１１１１１１１１１１１１１１ 　　３：Ｔｈｉｓ　ｌｉｎｅ　ｗｉｌｌ　ｆｏｌｌｏｗ　ｔｈｅ　ｌａｓｔ　ｌｉｎｅ　ａｎｄ　ｒｅｔｕｒｎ　ａｕｔｏｍａｔｉｃａｌｌｙ．　２２２２２２２２＜Ｐ＞ 　　４：４４４４４４４４４４４４４４４４４４４４４ 　　５：＜Ｐ＞Ａ　ｎｅｗ　ｐａｒａｇｒａｐｈ（ｌｉｎｅ）　ｂｅｇｉｎｓ　ｈｅｒｅ． 　　６：Ｔｈｉｓ　ｌｉｎｅ　ｗｉｌｌ　ｆｏｌｌｏｗ　ｔｈｅ　ｌａｓｔ　ｌｉｎｅ． 　　７：Ｔｈｉｓ　ｐａｒａｇｒａｐｈ　ｅｎｄｓ　ｈｅｒｅ．＜／Ｐ＞ 　　８：＜Ｐ　ＡＬＩＧＮ　＝　ＣＥＮＴＥＲ＞Ｔｈｉｓ　ｌｉｎｅ　ｗｉｌｌ　ｄｉｓｐｌａｙ　ｉｎ　ｔｈｅ　ｍｉｄｄｌｅ　ｏｆ　ｔｈｅ　ｓｃｒｅｅｎ．＜／Ｐ＞ 　　９：＜Ｐ　ＡＬＩＧＮ　＝　ＬＥＦＴ＞Ｔｈｉｓ　ｌｉｎｅ　ｗｉｌｌ　ｄｉｓｐｌａｙ　ｂｙ　ｔｈｅ　ｌｅｆｔ　ｏｆ　ｔｈｅ　ｓｃｒｅｅｎ．＜／Ｐ＞ 　　１０：＜Ｐ　ＡＬＩＧＮ　＝　ＲＩＧＨＴ＞Ｔｈｉｓ　ｌｉｎｅ　ｗｉｌｌ　ｄｉｓｐｌａｙｂｙ　ｔｈｅ　ｒｉｇｈｔ　ｏｆ　ｔｈｅ　ｓｃｒｅｅｎ．＜／Ｐ＞ 　　１１：＜／ＢＯＤＹ＞ 　　Ｕｎｎｕｍｂｅｒｅｄ　Ｌｉｓｔｓ：＜ＵＬ＞＜／ＵＬ＞ 　　在超文本中的列表有三种，无序号列表、序号列表和定义性列表。首先介绍无序号列表，它使用的一对标签是＜ＵＬ＞＜／ＵＬ＞。在这对标签作用的范围内，每个列表项前使用标签＜ＬＩ＞表示，且无须＜／ＬＩ＞标签作为照应。下面例子的实际效果见图５。 　　Ｔｈｅｒｅ　ｉｓ　ａ　ｕｎｎｕｍｂｅｒｅｄ　ｌｉｓｔ　ｂｅｌｏｗ． 　　＜ＵＬ＞ 　　＜ＬＩ＞　ａｐｐｌｅｓ 　　＜ＬＩ＞　ｂａｎａｎａｓ 　　＜ＬＩ＞　ｇｒａｐｅｆｒｕｉｔ 　　＜／ＵＬ＞ 　　Ｎｕｍｂｅｒｅｄ　Ｌｉｓｔ：＜ＯＬ＞＜／ＯＬ＞ 　　序号列表和无序号列表的用法基本相同，只是把＜ＵＬ＞＜／ＵＬ＞换成＜ＯＬ＞＜／ＯＬ＞就可以了。其它的列表项前也同样使用＜ＬＩ＞。下面例子的实际效果见图６。 　　Ｔｈｅｒｅ　ｉｓ　ａ　ｎｕｍｂｅｒｅｄ　ｌｉｓｔ　ｂｅｌｏｗ． 　　＜ＯＬ＞ 　　＜ＬＩ＞　ｏｒａｎｇｅｓ 　　＜ＬＩ＞　ｐｅａｃｈｅｓ 　　＜ＬＩ＞　ｇｒａｐｅｓ 　　＜／ＯＬ＞ 　　Ｄｅｆｉｎｉｔｉｏｎ　Ｌｉｓｔｓ：＜ＤＬ＞＜／ＤＬ＞ 　　定义性列表可以用来给每一个列表项再加上一段说明性文字，说明文字独立于列表项另起一行显示。在应用中，列表项使用标签＜ＤＴ＞标明，说明性文字使用＜ＤＤ＞表示。在定义性列表中还有一个属性是ＣＯＭＰＡＣＴ，使用这个属性后，说明文字和列表项将显示在同一行。下面的例子分别展示了这两种用法的异同（图７）。 　　＜ＤＬ＞ 　　＜ＤＴ＞　ＮＣＳＡ 　　＜ＤＤ＞　ＮＣＳＡ，　ｔｈｅ　Ｎａｔｉｏｎａｌ　Ｃｅｎｔｅｒ　ｆｏｒ　Ｓｕｐｅｒｃｏｍｐｕｔｉｎｇ　Ａｐｐｌｉｃａｔｉｏｎｓ，　ｉｓ　ｌｏｃａｔｅｄ　ｏ ｎ　ｔｈｅ　ｃａｍｐｕｓ　ｏｆ　ｔｈｅ　Ｕｎｉｖｅｒｓｉｔｙ　ｏｆ　Ｉｌｌｉｎｏｉｓ　ａｔ　Ｕｒｂａｎａ－Ｃｈａｍｐａｉｇｎ． 　　　＜ＤＴ＞　Ｃｏｒｎｅｌｌ　Ｔｈｅｏｒｙ　Ｃｅｎｔｅｒ 　　＜ＤＤ＞　ＣＴＣ　ｉｓ　ｌｏｃａｔｅｄ　ｏｎ　ｔｈｅ　ｃａｍｐｕｓ　ｏｆ　Ｃｏｒｎｅｌｌ　Ｕｎｉｖｅｒｓｉｔｙ　ｉｎ　Ｉｔｈａｃａ，　Ｎｅｗ　Ｙｏｒｋ． 　　＜／ＤＬ＞ 　　＜ＤＬ　ＣＯＭＰＡＣＴ＞ 　　＜ＤＴ＞　－ｉ 　　＜ＤＤ＞ｉｎｖｏｋｅｓ　ＮＣＳＡ　Ｍｏｓａｉｃ　ｆｏｒ　Ｍｉｃｒｏｓｏｆｔ　Ｗｉｎｄｏｗｓ　ｕｓｉｎｇ　ｔｈｅ　ｉｎｉｔｉａｌｉｚａｔｉｏｎ　ｆｉｌｅ　 ｄｅｆｉｎｅｄ　ｉｎ　ｔｈｅ　ｐａｔｈ 　　＜ＤＴ＞　－ｋ 　　＜ＤＤ＞ｉｎｖｏｋｅｓ　ＮＣＳＡ　Ｍｏｓａｉｃ　ｆｏｒ　Ｍｉｃｒｏｓｏｆｔ　Ｗｉｎｄｏｗｓ　ｉｎ　ｋｉｏｓｋ　ｍｏｄｅ 　　＜／ＤＬ＞ 　　在各种列表的使用中，还有两点需要说明。其一是在列表项和说明文字中都可以使用＜Ｐ＞进行分段操作；其二是各种列表都可以嵌套使用。嵌套使用的例子如下（图８）： 　　＜ＵＬ＞ 　　＜ＬＩ＞　Ａ　ｆｅｗ　Ｎｅｗ　Ｅｎｇｌａｎｄ　ｓｔａｔｅｓ： 　　＜ＵＬ＞ 　　＜ＬＩ＞　Ｖｅｒｍｏｎｔ 　　＜ＬＩ＞　Ｎｅｗ　Ｈａｍｐｓｈｉｒｅ 　　＜ＬＩ＞　Ｍａｉｎｅ 　　＜／ＵＬ＞ 　　＜ＬＩ＞　Ｔｗｏ　Ｍｉｄｗｅｓｔｅｒｎ　ｓｔａｔｅｓ： 　　＜ＵＬ＞ 　　＜ＬＩ＞　Ｍｉｃｈｉｇａｎ 　　＜ＬＩ＞　Ｉｎｄｉａｎａ 　　＜／ＵＬ＞ 　　＜／ＵＬ＞ 　　Ｐｒｅｆｏｒｍａｔｔｅｄ　Ｔｅｘｔ：＜ＰＲＥ＞＜／ＰＲＥ＞ 　　前面我们提到过，超文本不支持自动换行，文档中的所有回车都将被忽略。但是，这对标签可以在其作用范围内改变这种状况。也就是说在这对标签包含的范围内，所有包括空格、换行以及Ｔａｂｓ空格对于浏览器来说都是敏感的。在介绍＜Ｐ＞＜／Ｐ＞时我们所给出的例子，如果包含在＜ＰＲＥ＞＜／ＰＲＥ＞这对标签中，其实际显示如图９ 　　这对标签的意义和用途并不在于我们编辑超文本文档时能少写几个＜Ｐ＞，它们的主要用途在于当我们在超文本文档中加入ＪＡＶＡ或ＪＡＶＡＳＣＲＩＰＴ程序时，可以方便地允许通过程序对屏幕显示自如地进行控制。 　　Ｅｘｔｅｎｄｅｄ　Ｑｕｏｔａｔｉｏｎ：＜ＢＬＯＣＫＱＵＯＴＥ＞＜／ＢＬＯＣＫＱＵＯＴＥ＞ 　　这对标签可以说纯粹是为了美观而设立的，它的作用是在这个页面的四周留出一些空白的边缘。 　　Ｈｏｒｉｚｏｎｔａｌ　Ｒｕｌｅｓ：＜ＨＲ＞ 　　这个标签没有与之相对应的尾标签。这个标签可以在屏幕中间显示一条水平线，用以分割页面中的不同部分。例如许多作者喜欢在标题下画一水平线，把标题和页面正文分割开。这个标签有三个属性：ＳＩＺＥ、ＷＩＤＴＨ和ＡＬＩＧＮ，它们分别用于控制水平线的宽和长以及水平线的对齐方式。水平线的宽用多少点来表示，长用占屏幕宽度的百分比来表示，对齐方式有ＬＥＦＴ、ＲＩＧＴＨ、ＣＥＮＴＥＲ三种。例如： 　　＜ＨＲ　ＳＩＺＥ＝３　ＷＩＤＴＨ＝７５％　ＡＬＩＧＮ＝ＣＥＮＴＥＲ＞ 　　Ｃｈａｒａｃｔｅｒ　Ｆｏｒｍａｔｔｉｎｇ： 　　字体控制除正常体外共有三种，黑体、斜体和印刷体，这三种字体还可以任意进行组合使用。三种字体的标签和实际显示见图１０ #2　　四、超文本的连接 　　超文本中的连接是其最重要的特性之一，它使得读者可以从一个页面直接跳转到其他的页面、图象或者服务器。一个连接的构成通常有以下四部分： 　　１．符号＇＜＇和标签名＇Ａ＇，表示这是一个连接； 　　２．属性＇ＨＲＥＦ＇及其值，定义了这个连接所指的地方； 　　３．在超文本中作为连接的文字； 　　４．尾标签＜／Ａ＞表示这个连接定义结束。 　　下面是一个包含所有这四部分的实际例子： 　　＜Ａ　ＨＲＥＦ　＝　"xlhｈｔｔｐ：／／ｗｗｗ．ｘａｎｅｔ．ｅｄｕ．ｃｎ"xlh＞ＣＥＲＮＥＴ　ＮｏｒｔｈＷｅｓｔ　Ｃｅｎｔｅｒ＜／Ａ＞ 　　连接分为三种：本地连接、ＵＲＬ连接和目录连接。 　　对同一台机器上的不同文件进行的连接称为本地连接，它使用Ｕｎｉｘ或Ｄｏｓ系统中文件路径的表示方法，采用绝对路径或相对路径来指示一个文件。例如，某文件有如下绝对路径： 　　ｃ：＼Ｐｒｏｇｒａｍ　Ｆｉｌｅ＼Ｎｅｔｓｃａｐｅ＼Ｎａｖｉｇａｔｏｒ＼ｐｒｏｇｒａｍ＼ｈｏｍｅｐａｇｅ．ｈｔｍｌ 　　当前路径是（当前页面所在路径为当前路径）： 　　ｃ：＼Ｐｒｏｇｒａｍ　Ｆｉｌｅ＼Ｎｅｔｓｃａｐｅ＼Ｎａｖｉｇａｔｏｒ＼ 　　则对其的连接可以是： 　　＜Ａ　ＨＲＥＦ　＝　"xlhｐｒｏｇｒａｍ＼ｈｏｍｅｐａｇｅ．ｈｔｍｌ"xlh＞Ｍｙ　ＨｏｍｅＰａｇｅ＜／Ａ＞ 　　或 　　＜Ａ　ＨＲＥＦ　＝　"xlh／ｃ：＼Ｐｒｏｇｒａｍ　Ｆｉｌｅ＼Ｎｅｔｓｃａｐｅ＼Ｎａｖｉｇａｔｏｒ＼ｐｒｏｇｒａｍ＼ｈｏｍｅｐａｇｅ．ｈｔｍｌ 　　应注意使用绝对路径时，最前面的＇／＇不能少，它表示这是绝对路径，若缺少了，浏览器将解释它为： 　　ｃ：＼Ｐｒｏｇｒａｍ　Ｆｉｌｅ＼Ｎｅｔｓｃａｐｅ＼Ｎａｖｉｇａｔｏｒ＼ｃ：＼Ｐｒｏｇｒａｍ　Ｆｉｌｅ＼Ｎｅｔｓｃａｐｅ＼Ｎａｖｉｇａｔｏｒ＼ｐｒｏｇｒａｍ＼ｈｏｍｅｐａｇｅ．ｈｔｍｌ 　　这就完全错了。 　　ＵＲＬ连接是使用了包括协议名在内的ＵＲＬ地址作为连接对象。其形式为： 　　协议名：／／主机．域名［：端口号］／路径／文件名 　　其中协议包括： 　　ｆｉｌｅ　本地系统文件 　　ｆｔｐ　　匿名ＦＴＰ服务器 　　ｈｔｔｐ　ＷＷＷ服务器 　　ｎｅｗｓ　Ｕｓｅｎｅｔ新闻组 　　ｇｏｐｈｅｒ　ＧＯＰＨＥＲ服务器 　　ｗａｉｓ　ＷＡＩＳ服务器 　　ｔｅｌｎｅｔ　基于ＴＥＬＮＥＴ服务的协议 　　ｍａｉｌｔｏ　电子邮件 　　主机．域名部分，可以使用ＩＰ地址，也可以使用ｄｏｍａｉｎ地址，使用ＩＰ地址进行连接比使用ｄｏｍａｉｎ的速度快一些。 　　端口号一般都可以省略，因为服务器和客户端的浏览器都有一个默认的缺省值。除非你知道服务器的端口号不是缺省值，才需设置端口号。 　　目录连接的目的地不是一个文档，而是一个文档中的某一部分。它可以是当前文档的一部分，也可以是其它文档的某一部分。之所以称之为目录连接，是因为这种连接多用在一个大文档的开头部分，当作目录或索引使用，连接到同一个文档的各个部分，以方便读者索引查找。下面是一个这种连接的例子： 　　＜Ａ　ＨＲＥＦ　＝　"xlhｈｏｍｅｐａｇｅ．ｈｔｍｌ＃Ｊｏｙ"xlh＞Ｊｏｙ＜／Ａ＞ 　　若是同一个文档中的不同部分，则文件名可以省略。上例中，＇＃Ｊｏｙ＇标明了文档中具有标识名＇Ｊｏｙ＇的部分。＇Ｊｏｙ＇部分的标识名定义为： 　　＜Ａ　ＮＡＭＥ　＝　"xlhＪｏｙ"xlh　＞＜／Ａ＞ 　　这样两部分相互照应，达到了用连接引导页面的不同部分的目的。 #2　　内连图象 　　超文本之所以在很短的时间内如此广泛的受到人们的青睐，很重要的一个原因是它能够支持多媒体的特性。下面，我们先来看一看如何在一个页面中插入图象。 　　超文本支持的图象格式一般有Ｘ　Ｂｉｔｍａｐ（ＸＢＭ）、ＧＩＦ、ＪＰＥＧ三种，当然，有些浏览器也支持其他一些格式的图象文件，如Ｐｏｒｔａｂｌｅ　Ｎｅｔｗｏｒｋ　Ｇｒａｐｈｉｃ（ＰＮＧ）等，还有的浏览器支持ｐｌｕｓ－ｉｎ，它的一些附加程序也支持其他不同种类的图象文件格式。但说到底，ＸＢＭ、ＧＩＦ、ＪＰＥＧ是三种最基本的格式，在制作页面的时候应首选这三种格式之一使用，以免因客户方浏览器不支持特殊的图象文件格式而造成不必要的麻烦。 　　插入图象的标签是＜ＩＭＧ＞，它有三个必不可少的属性：ＳＲＣ、ＨＥＩＧＨＴ、ＷＩＤＴＨ。第一个属性指明了所要连接的图象文件，后两个指明了在实际显示中图象的高和宽。下面是一个例子： 　　＜ＩＭＧ　ＳＲＣ　＝　"xlhｂｕｉｌｄｉｎｇ．ｇｉｆ"xlh　ＨＥＩＧＨＴ　＝　６０　ＷＩＤＴＨ　＝　４０＞ 　　图象的高和宽这两个属性的值，建议使用图象本身的大小。图象本身的大小可以通过一些图象工具软件来获得。虽然在理论上，这两个属性规定了图象实际显示时的大小，也就是说，我们可以简单的通过设置这两个属性值来达到图象放缩的目的，但我们不建议大家这样做。紧挨着图象的文字将显示在图象的旁边，缺省方式下文字和图象的下边缘对齐，但也可通过对属性ＡＬＩＧＮ的设置来改变这种对齐方式。具体情况如下： 　　＜ＩＭＧ　ＳＲＣ　＝　"xlhｂｕｉｌｄｉｎｇ．ｇｉｆ"xlh　ＨＥＩＧＨＴ　＝　６０　ＷＩＤＴＨ　＝　４０　ＡＬＩＧＮ　＝　ＴＯＰ＞ 　　＜ＩＭＧ　ＳＲＣ　＝　"xlhｂｕｉｌｄｉｎｇ．ｇｉｆ"xlh　ＨＥＩＧＨＴ　＝　６０　ＷＩＤＴＨ　＝　４０　ＡＬＩＧＮ　＝　ＣＥＮＴＥＲ＞ 　　这两种设置分别规定了文字沿图象的上边缘和文字的中间显示。应注意的一点是，无论是缺省方式还是其他两种方式，文字都只能显示一行，从第二行开始文字就将在图象的下面显示。三种对齐方式的显示效果如图１１所示。 　　如果不希望文字在图象的旁边显示，则应将图象用＜Ｐ＞＜／Ｐ＞这一对标签将它单独规定成为一段。如下例所示： 　　＜Ｐ　ＡＬＩＧＮ　＝　ＣＥＮＴＥＲ＞ 　　＜ＩＭＧ　ＳＲＣ　＝　"xlhｂｕｉｌｄｉｎｇ．ｇｉｆ"xlh　ＨＥＩＧＨＴ　＝　６０　ＷＩＤＴＨ　＝　４０＞ 　　＜／Ｐ＞ 　　显示结果如图１２所示。 #2　　六、图象的说明文字 　　对于一些Ｗｅｂ的用户来说，有可能看不到图象，例如用户使用的是字符型终端，或虽然用户可以看图象，但为了加快传输速度，主动将图象显示关闭等，为了不因用户看不到图象而影响信息获取和理解页面，有必要在用户看不到图象时对原图象以文字方式作一些解释。这个目的可以通过给出ＡＬＴ属性值来达到。 　　＜ＩＭＧ　ＳＲＣ　＝　"xlh"xlh　ＨＥＩＧＨＴ　＝　ＷＩＤＴＨ　＝　ＡＬＴ　＝　＞ #2　　七、背景色和背景图象 　　在超文本中可以给页面加上背景色，它用以下方式表达： 　　＜ＢＯＤＹ　ＢＧＣＯＬＯＲ＝"xlh＃００００００"xlh　ＴＥＸＴ＝"xlh＃ＦＦＦＦＦＦ"xlh　ＬＩＮＫ＝"xlh＃９６９０ＣＣ"xlh＞ 　　属性ＢＧＣＯＬＯＲ指明了页面的背景色，ＴＥＸＴ指明了页面的文字的颜色，ＬＩＮＫ指明了页面中的连接的颜色。颜色的具体表达采用ＲＧＢ标准，六位十六进制数，每两位表示一种颜色，其值的范围从００～ＦＦ，分别代表红色（ｒｅｄ）、绿色（ｇｒｅｅｎ）和兰色（ｂｌｕｅ）。例如００００００表示黑色，ＦＦＦＦＦＦ表示白色，ＦＦ００００表示红色，００ＦＦＦＦ表示黄色等。 　　以上介绍的内容都属于超文本编程最基本的也是最常用的部分，仅使用这一部分，就足以编制出一个象模象样的主页来。不过，如果你能耐下心来继续学完超文本编程的提高篇的话，你就会发现入门篇的内容实在是太小儿科了。 #1　　★提高篇★ 　　在这一部分，将主要介绍超文本的表格、框架和超文本的交互性。其实，表格也属于超文本的基本特性，但其编程相对较为复杂，所以放在这一部分介绍。 #2　　八、超文本的表格 　　表格可以使得大量的信息井井有条。在信息设计过程中，表格正好可以和相关菜单一起来组织数据。图１３显示了一个不错的表格。现在绝大多数的浏览器都支持表格，所以制作和使用表格的兼容性较好。但如果万一不能或不想使用表格时，可以不妨采用列表、画有表格的图象或使用预格式化的文本替代。 　　一个表格通常有以下几个概念：标题（Ｃａｐｔｉｏｎ）、表头（Ｔａｂｌｅ　ｈｅａｄｉｎｇ）、表格数据（Ｄａｔａ）和表元（Ｃｅｌｌ），这些概念在图１３中有所说明。 #3　　表格的生成 　　标签＜ＴＡＢＬＥ＞＜／ＴＡＢＬＥ＞包含的范围是一个单独的表格。这对标签有好几个属性都可以通过设置改变，比较常用的一个是ＢＯＲＤＥＲ，这个属性表示表格有一个漂亮的边框（图１３中的表格及是如此）。在一些超文本的扩展特性里，还可以通过这个标签设置边框的宽度。 　　表格中的表元共有三种标签定义行和列。 　　＜ＴＲ＞ 　　＜ＴＨ＞Ｈｅａｄｉｎｇ＜／ＴＨ＞ 　　＜ＴＤ＞Ｄａｔａ１＜／ＴＤ＞ 　　＜ＴＤ＞Ｄａｔａ２＜／ＴＤ＞ 　　＜ＴＤ＞Ｄａｔａ３＜／ＴＤ＞ 　　＜／ＴＲ＞ 　　这个例子中，＜ＴＲ＞＜／ＴＲ＞定义了一行表格；＜ＴＨ＞＜／ＴＨ＞定义了一个表元，并且这个表元的内容是一个表头；＜ＴＤ＞＜／ＴＤ＞定义了一个表元。＜ＴＨ＞＜／ＴＨ＞和＜ＴＤ＞＜／ＴＤ＞中间包含的文字就是表元数据，在超文本中，表元的大小是根据表元数据的多少以及毗邻表元的大小自动调整的。下面是一个简单表格的例子及其实际显示效果（　图１４）： 　　＜ＨＴＭＬ＞ 　　＜ＨＥＡＤ＞ 　　＜ＴＩＴＬＥ＞ＴＡＢＬＥ＜／ＴＩＴＬＥ＞ 　　＜／ＨＥＡＤ＞ 　　＜ＢＯＤＹ＞ 　　＜ＴＡＢＬＥ　ＢＯＲＤＥＲ＝１　＞ 　　＜ＣＡＰＴＩＯＮ＞Ｓｏｕｐ　ｏｆ　ｔｈｅ　Ｄａｙ＜／ＣＡＰＴＩＯＮ＞ 　　＜ＴＲ＞ 　　＜ＴＨ＞Ｍｏｎｄａｙ＜／ＴＨ＞ 　　＜ＴＨ＞Ｔｕｅｓｄａｙ＜／ＴＨ＞ 　　＜ＴＨ＞Ｗｅｄｎｅｓｄａｙ＜／ＴＨ＞ 　　＜ＴＨ＞Ｔｈｕｒｓｄａｙ＜／ＴＨ＞ 　　＜ＴＨ＞Ｆｒｉｄａｙ＜／ＴＨ＞ 　　＜／ＴＲ＞ 　　＜ＴＲ＞ 　　＜ＴＤ＞Ｓｐｌｉｔ　Ｐｅａ＜／ＴＤ＞ 　　＜ＴＤ＞ＮｅｗＥｎｇｌａｎｄ＜ＢＲ＞Ｃｌａｍ　Ｃｈｏｗｄｅｒ＜／ＴＤ＞ 　　＜ＴＤ＞Ｍｉｎｅｓｔｒｏｎｅ＜／ＴＤ＞ 　　＜ＴＤ＞Ｃｒｅａｍ　ｏｆ＜ＢＲ＞Ｂｒｏｃｃｏｌｉ＜／ＴＤ＞ 　　＜ＴＤ＞Ｃｈｏｗｄｅｒ＜／ＴＤ＞ 　　＜／ＴＲ＞ 　　＜／ＴＡＢＬＥ＞ 　　＜／ＢＯＤＹ＞ 　　＜／ＨＴＭＬ＞ 　　当排列好行和表元时，就可以考虑如何定位数据元素在表元中的位置使这个表格具有良好的效果。ＨＴＭＬ表格让你在水平和垂直方向放置数据时有许多选择。 　　水平定位属性ＣＡＬＩＧＮ决定数据置于表元边框的左边（ＬＥＦＴ）、右边（ＲＩＧＨＴ）、中间（ＣＥＮＴＥＲ）。 　　垂直定位属性（ＶＡＬＩＧＮ）决定数据置于表元数据边框的上沿（ＴＯＰ）、下沿（ＢＯＴＴＯＭ）或者中间（ＣＥＮＴＥＲ）。ＮＥＴＳＣＡＰＥ还支持ＶＡＬＩＧＮ＝ＢＡＳＥＬＩＮＥ，它相当于ＶＡＬＩＧＮ＝ＴＯＰ，除了第一行中每个表元中的定位与表元内容有关。数据表元定位的缺省值在水平上是左对齐，在垂直方向上是居中。如果希望表格的一整行都具有相同的对齐属性，可以在＜ＴＲ＞中定义ＣＡＬＩＧＮ和ＶＡＬＩＧＮ。下面的例子中，表格数据是一个图象，其用法不难理解，它们显示了各种对齐方式的组合形式（图１５）。 　　＜ＴＡＢＬＥ　ＢＯＲＤＥＲ＝３　＞ 　　＜ＴＲ＞ 　　＜ＴＤ＞＜／ＴＤ＞ 　　＜ＴＨ＞Ｌｅｆｔ＜／ＴＨ＞ 　　＜ＴＨ＞Ｃｅｎｔｅｒｅｄ＜／ＴＨ＞ 　　＜ＴＨ＞Ｒｉｇｈｔ＜／ＴＨ＞ 　　＜／ＴＲ＞ 　　＜ＴＲ＞ 　　＜ＴＨ＞＜Ｐ＞Ｔｏｐ＜／Ｐ＞＜／ＴＨ＞ 　　＜ＴＤ　ＡＬＩＧＮ＝ＬＥＦＴ　ＶＡＬＩＧＮ＝ＴＯＰ＞＜ＩＭＧ　ＳＲＣ＝"xlhｇ＿ｂｌｕｅ．ｇｉｆ"xlh　ＨＥＩＧＨＴ＝１２　ＷＩＤＴＨ＝１２＞＜／ＴＤ＞ 　　＜ＴＤ　ＡＬＩＧＮ＝ＣＥＮＴＥＲ　ＶＡＬＩＧＮ＝ＴＯＰ＞＜ＩＭＧ　ＳＲＣ＝"xlhｇ＿ｂｌｕｅ．ｇｉｆ"xlh　ＨＥＩＧＨＴ＝１２　ＷＩＤＴＨ＝１２＞＜／ＴＤ＞ 　　＜ＴＤ　ＡＬＩＧＮ＝ＲＩＧＨＴ　ＶＡＬＩＧＮ＝ＴＯＰ＞＜ＩＭＧ　ＳＲＣ＝"xlhｇ＿ｂｌｕｅ．ｇｉｆ"xlh　ＨＥＩＧＨＴ＝１２　ＷＩＤＴＨ＝１２＞＜／ＴＤ＞ 　　＜／ＴＲ＞ 　　＜ＴＲ＞ 　　＜ＴＨ＞＜Ｐ＞Ｃｅｎｔｅｒｅｄ＜／Ｐ＞＜／ＴＨ＞ 　　＜ＴＤ　ＡＬＩＧＮ＝ＬＥＦＴ　ＶＡＬＩＧＮ＝ＣＥＮＴＥＲ＞＜ＩＭＧ　ＳＲＣ＝"xlhｇ＿ｂｌｕｅ．ｇｉｆ"xlh　ＨＥＩＧＨＴ＝１２　ＷＩＤＴＨ＝１２＞＜／ＴＤ＞ 　　＜ＴＤ　ＡＬＩＧＮ＝ＣＥＮＴＥＲ　ＶＡＬＩＧＮ＝ＣＥＮＴＥＲ＞＜ＩＭＧ　ＳＲＣ＝"xlhｇ＿ｂｌｕｅ．ｇｉｆ"xlh　ＨＥＩＧＨＴ＝１２　ＷＩＤＴＨ＝１２＞＜／ＴＤ＞ 　　＜ＴＤ　ＡＬＩＧＮ＝ＲＩＧＨＴ　ＶＡＬＩＧＮ＝ＣＥＮＴＥＲ＞＜ＩＭＧ　ＳＲＣ＝"xlhｇ＿ｂｌｕｅ．ｇｉｆ"xlh　ＨＥＩＧＨＴ＝１２　ＷＩＤＴＨ＝１２＞＜／ＴＤ＞ 　　＜／ＴＲ＞ 　　＜ＴＲ＞ 　　＜ＴＨ＞＜Ｐ＞Ｂｏｔｔｏｍ＜／Ｐ＞＜／ＴＨ＞ 　　＜ＴＤ　ＡＬＩＧＮ＝ＬＥＦＴ　ＶＡＬＩＧＮ＝ＢＯＴＴＯＭ＞＜ＩＭＧ　ＳＲＣ＝"xlhｇ＿ｂｌｕｅ．ｇｉｆ"xlh　ＨＥＩＧＨＴ＝１２　ＷＩＤＴＨ＝１２＞＜／ＴＤ＞ 　　＜ＴＤ　ＡＬＩＧＮ＝ＣＥＮＴＥＲ　ＶＡＬＩＧＮ＝ＢＯＴＴＯＭ＞＜ＩＭＧ　ＳＲＣ＝"xlhｇ＿ｂｌｕｅ．ｇｉｆ"xlh　ＨＥＩＧＨＴ＝１２　ＷＩＤＴＨ＝１２＞＜／ＴＤ＞ 　　＜ＴＤ　ＡＬＩＧＮ＝ＲＩＧＨＴ　ＶＡＬＩＧＮ＝ＢＯＴＴＯＭ＞＜ＩＭＧ　ＳＲＣ＝"xlhｇ＿ｂｌｕｅ．ｇｉｆ"xlh　ＨＥＩＧＨＴ＝１２　ＷＩＤＴＨ＝１２＞＜／ＴＤ＞ 　　＜／ＴＲ＞ 　　＜／ＴＡＢＬＥ＞ 　　图１３的例子向大家展示了一个较为复杂的表格，其中用到了跨越多行和多列的表元。图１６是图１５的改进，加入了跨越多行和多列的表元。 　　对于一个实用的表格来说，跨越多行或多列的表格是不可避免的，要创建跨越多行多列的表元，只需在＜ＴＨ＞或＜ＴＤ＞中加入ＲＯＷＳＰＡＮ或ＣＯＬＳＰＡＮ属性，这两个属性的值，表明了表元要跨越的行或列的个数。图１６的源程序如下： 　　＜ＢＯＤＹ＞ 　　＜ＴＡＢＬＥ　ＢＯＲＤＥＲ＝３　＞ 　　＜ＴＲ＞ 　　＜ＴＤ＞＜／ＴＤ＞ 　　＜ＴＤ＞＜／ＴＤ＞ 　　＜ＴＨ　ＣＯＬＳＰＡＮ＝"xlh３"xlh＞ＣＡＬＩＧＮ＆ｎｂｓｐ；＆ｎｂｓｐ；＆ｎｂｓｐ；＆ｎｂｓｐ；＆ｎｂｓｐ；＆ｎｂｓｐ；＆ｎｂｓｐ；＆ｎｂｓｐ；＜／ＴＨ＞＜／ＴＲ＞ 　　＜ＴＲ＞ 　　＜ＴＤ＞＜／ＴＤ＞ 　　＜ＴＤ＞＜／ＴＤ＞ 　　＜ＴＨ＞ＬＥＦＴ＜／ＴＨ＞ 　　＜ＴＨ＞ＣＥＮＴＥＲＥＤ＜／ＴＨ＞ 　　＜ＴＨ＞ＲＩＧＨＴ＜／ＴＨ＞ 　　＜／ＴＲ＞ 　　＜ＴＲ＞ 　　＜ＴＨ　ＲＯＷＳＰＡＮ＝"xlh３"xlh＞ 　　＜Ｐ＞Ｔｏｐ＜／Ｐ＞ 　　＜／ＴＨ＞ 　　＜ＴＨ＞ＴＯＰ＜／ＴＨ＞ 　　＜ＴＤ　ＡＬＩＧＮ＝ＬＥＦＴ　ＶＡＬＩＧＮ＝ＴＯＰ＞＜ＩＭＧ　ＳＲＣ＝"xlhｇ＿ｂｌｕｅ．ｇｉｆ"xlh　ＨＥＩＧＨＴ＝１２　ＷＩＤＴＨ＝１２＞＜／ＴＤ＞ 　　＜ＴＤ　ＡＬＩＧＮ＝ＣＥＮＴＥＲ　ＶＡＬＩＧＮ＝ＴＯＰ＞＜ＩＭＧ　ＳＲＣ＝"xlhｇ＿ｂｌｕｅ．ｇｉｆ"xlh　ＨＥＩＧＨＴ＝１２　ＷＩＤＴＨ＝１２＞＜／ＴＤ＞ 　　＜ＴＤ　ＡＬＩＧＮ＝ＲＩＧＨＴ　ＶＡＬＩＧＮ＝ＴＯＰ＞＜ＩＭＧ　ＳＲＣ＝"xlhｇ＿ｂｌｕｅ．ｇｉｆ"xlh　ＨＥＩＧＨＴ＝１２　ＷＩＤＴＨ＝１２＞＜／ＴＤ＞ 　　＜／ＴＲ＞ 　　＜ＴＲ＞ 　　＜ＴＨ　ＡＬＩＧＮ＝ＬＥＦＴ　ＶＡＬＩＧＮ＝ＣＥＮＴＥＲ＞Ｃｅｎｔｅｒｅｄ＜／ＴＨ＞ 　　＜ＴＤ　ＡＬＩＧＮ＝ＬＥＦＴ　ＶＡＬＩＧＮ＝ＣＥＮＴＥＲ＞＜ＩＭＧ　ＳＲＣ＝"xlhｇ＿ｂｌｕｅ．ｇｉｆ"xlh　ＨＥＩＧＨＴ＝１２　ＷＩＤＴＨ＝１２＞＜／ＴＤ＞ 　　＜ＴＤ　ＡＬＩＧＮ＝ＣＥＮＴＥＲ　ＶＡＬＩＧＮ＝ＣＥＮＴＥＲ＞＜ＩＭＧ　ＳＲＣ＝"xlhｇ＿ｂｌｕｅ．ｇｉｆ"xlh　ＨＥＩＧＨＴ＝１２　ＷＩＤＴＨ＝１２＞＜／ＴＤ＞ 　　＜ＴＤ　ＡＬＩＧＮ＝ＲＩＧＨＴ　ＶＡＬＩＧＮ＝ＣＥＮＴＥＲ＞＜ＩＭＧ　ＳＲＣ＝"xlhｇ＿ｂｌｕｅ．ｇｉｆ"xlh　ＨＥＩＧＨＴ＝１２　ＷＩＤＴＨ＝１２＞＜／ＴＤ＞ 　　＜／ＴＲ＞ 　　＜ＴＲ＞ 　　＜ＴＨ＞Ｂｏｔｔｏｍ＜／ＴＨ＞ 　　＜ＴＤ　ＡＬＩＧＮ＝ＬＥＦＴ　ＶＡＬＩＧＮ＝ＢＯＴＴＯＭ＞＜ＩＭＧ　ＳＲＣ＝"xlhｇ＿ｂｌｕｅ．ｇｉｆ"xlh　ＨＥＩＧＨＴ＝１２　ＷＩＤＴＨ＝１２＞＜／ＴＤ＞ 　　＜ＴＤ　ＡＬＩＧＮ＝ＣＥＮＴＥＲ　ＶＡＬＩＧＮ＝ＢＯＴＴＯＭ＞＜ＩＭＧ　ＳＲＣ＝"xlhｇ＿ｂｌｕｅ．ｇｉｆ"xlh　ＨＥＩＧＨＴ＝１２　ＷＩＤＴＨ＝１２＞＜／ＴＤ＞ 　　＜ＴＤ　ＡＬＩＧＮ＝ＲＩＧＨＴ　ＶＡＬＩＧＮ＝ＢＯＴＴＯＭ＞＜ＩＭＧ　ＳＲＣ＝"xlhｇ＿ｂｌｕｅ．ｇｉｆ"xlh　ＨＥＩＧＨＴ＝１２　ＷＩＤＴＨ＝１２＞＜／ＴＤ＞ 　　＜／ＴＲ＞ 　　＜／ＴＡＢＬＥ＞ 　　＜／ＢＯＤＹ＞ #3　　表格的Ｎｅｔｓｃａｐｅ扩展 　　下面的补充，是Ｎｅｔｓｃａｐｅ对ＨＴＭＬ３表格定义的一些扩展，这些标记和属性将只在Ｎｅｔｓｃａｐｅ的表格版本中起作用，它们在其他的浏览器中可能不能正常工作。因此，在使用这些标记和属性时应加倍注意。 　　表格宽度 　　ＨＴＭＬ３建议为＜ＴＡＢＬＥ＞标记定义一个ＷＩＤＴＨ（宽度）属性，这样能使你指定表格的确切宽度，宽度由ＵＮＩＴＳ属性定义。 　　Ｎｅｔｓｃａｐｅ用了一种稍不同的方法使用ＷＩＤＴＨ属性。ＷＩＤＴＨ的值既可是表的实际宽度（用像素表示），也可是当前屏宽的百分比率（如３０％、５０％），并且可以随窗口的大小改变而改变。当ＷＩＤＴＨ被指定了，表格内栏宽可根据要求压缩或扩展。例如，图１７所示，如不加任何处理，它可能相当的窄，但当用了ＷＩＤＴＨ属性时，这张表可扩展到整屏，这就使得Ｎｅｔｓｃａｐｅ能把所有得栏拉伸到全屏幕。 　　ＷＩＤＴＨ属性还可以用来指定某个表元（＜ＴＨ＞或＜ＴＤ＞）的宽度。ＷＩＤＴＨ指可以使用的像素数或全屏幕的百分比。 　　当你希望几列有同样的宽，而不考虑它们的内容时，使用列宽特性时很有用的。图１８是图１７的变形，第一列占表宽的１０％，其他三列各占３０％的宽度，同时Ｎｅｔｓｃａｐｅ根据各个比率将整个表格调整到全屏幕。 　　Ｎｅｔｓｃａｐｅ轻微的改变了＜ＴＡＢＬＥ＞标记的ＢＯＲＤＥＲ属性。ＢＯＲＤＥＲ同上一章一样是用来画边界的。在Ｎｅｔｓｃａｐｅ中，如果ＢＯＲＤＥＲ有一数字表示的值，表周围的边界将用这个数值宽度的像素画出来。缺省值是ＢＯＲＤＥＲ＝１，ＢＯＲＤＥＲ＝０则将去除边界。图１９给出了边界宽为１０的表格。 　　表元间间隙与表元内填充空间相似，只是影响表之间的距离──分开表元的阴影线的宽度。＜ＴＡＢＬＥ＞标记的ＣＥＬＳＰＡＣＩＮＧ属性影响表元间的间隙。其缺省值为２。 　　表元间间隙也包括表边框，这边框刚好在表的边界内（由ＢＯＲＤＥＲ属性设置）。亲自试一试，你就会发现区别。例如图２０所示为一表元间间隙８、边界宽度４的一个表格。 　　表元内空间指表元边缘与表元内容间的空间，Ｎｅｔｓｃａｐｅ中的表元填空空间（Ｃｅｌｌ　Ｐａｄｄｉｎｇ）的缺省值为１。你可以通过给＜ＴＡＢＬＥ＞标记加上ＣＥＬＬＰＡＤＤＩＮＧ属性，加上你所希望的填空空间。图２１为一填空空间值为１０像素的表。 　　用只有一个表元和一个很宽的边界的表格可以创造出一个有立体感的标题，它可以用在一个主页的开头，当然，表元中的内容可以是大的漂亮的字或是一幅有意义的图。图２２就是这样的一个例子。 　　最后，我们给出例１的全部源程序，供大家参考。 　　＜ＨＴＭＬ＞ 　　＜ＨＥＡＤ＞ 　　＜ＴＩＴＬＥ＞Ｔｈｉｓ　ｉｓ　ｍｙ　ｈｏｍｅｐａｇｅ＜／ＴＩＴＬＥ＞ 　　＜／ＨＥＡＤ＞ 　　＜ＢＯＤＹ＞ 　　＜ＴＡＢＬＥ　ＢＯＲＤＥＲ＝５　ＷＩＤＴＨ＝"xlh１００％"xlh　＞ 　　＜ＴＲ　ＡＬＩＧＮ＝ＣＥＮＴＥＲ　ＶＡＬＩＧＮ＝ＣＥＮＴＥＲ＞ 　　＜ＴＤ　ＣＯＬＳＰＡＮ＝"xlh２"xlh　ＲＯＷＳＰＡＮ＝"xlh２"xlh　ＷＩＤＴＨ＝"xlh１０％"xlh＞＜／ＴＤ＞ 　　＜ＴＨ　ＣＯＬＳＰＡＮ＝"xlh２"xlh　ＷＩＤＴＨ＝"xlh６０％"xlh＞异同点＜／ＴＨ＞ 　　＜ＴＤ　ＲＯＷＳＰＡＮ＝"xlh２"xlh　ＷＩＤＴＨ＝"xlh３０％"xlh＞适用对象＜／ＴＤ＞ 　　＜／ＴＲ＞ 　　＜ＴＲ　ＡＬＩＧＮ＝ＣＥＮＴＥＲ　ＶＡＬＩＧＮ＝ＣＥＮＴＥＲ＞ 　　＜ＴＤ　ＷＩＤＴＨ＝"xlh３０％"xlh＞相同点＜／ＴＤ＞ 　　＜ＴＤ＞不同点＜／ＴＤ＞ 　　＜／ＴＲ＞ 　　＜ＴＲ　ＡＬＩＧＮ＝ＣＥＮＴＥＲ　ＶＡＬＩＧＮ＝ＣＥＮＴＥＲ＞ 　　＜ＴＤ　ＲＯＷＳＰＡＮ＝"xlh２"xlh＞语言＜／ＴＤ＞ 　　＜ＴＤ＞ＪＡＶＡＳＣＲＩＰＴ＜／ＴＤ＞ 　　＜ＴＤ　ＲＯＷＳＰＡＮ＝"xlh２"xlh＞面向对象＜／ＴＤ＞ 　　＜ＴＤ＞以超文本为基础的简易编程语言＜／ＴＤ＞ 　　＜ＴＤ＞初学者＜／ＴＤ＞ 　　＜／ＴＲ＞ 　　＜ＴＲ　ＡＬＩＧＮ＝ＣＥＮＴＥＲ　ＶＡＬＩＧＮ＝ＣＥＮＴＥＲ＞ 　　＜ＴＤ＞ＪＡＶＡ＜／ＴＤ＞ 　　＜ＴＤ＞功能强大的独立编程语言＜／ＴＤ＞ 　　＜ＴＤ＞需要在页面中实现复杂功能的专业人员＜／ＴＤ＞ 　　＜／ＴＲ＞ 　　＜ＴＲ　ＡＬＩＧＮ＝ＣＥＮＴＥＲ　ＶＡＬＩＧＮ＝ＣＥＮＴＥＲ＞ 　　＜ＴＤ　ＣＯＬＳＰＡＮ＝"xlh２"xlh＞备注＜／ＴＤ＞ 　　＜ＴＤ＞ＪＡＶＡＳＣＲＩＰＴ并非完全的面向对象＜／ＴＤ＞ 　　＜ＴＤ＞＜ＢＲ＞＜／ＴＤ＞ 　　＜ＴＤ＞＜ＢＲ＞＜／ＴＤ＞ 　　＜／ＴＲ＞ 　　＜／ＴＡＢＬＥ＞ 　　＜／ＢＯＤＹ＞ 　　＜／ＨＴＭＬ＞ #2　　九、框架 　　所谓框架是指在浏览器的一个窗口中划分出若干区域，以便同时显示多个ＨＴＭＬ文件，并且各个文档之间还可以有一定的联系，这也是一个极其常用的技巧。虽然有可能由于某些区域太小，破坏这个文档的可用性，但是它的好处也是显而易见的可以大大的增加一个窗口的信息量。你可以用一个窗口放参考性的连接目录，用一个窗口放一些控制，用另一个大的窗口放主页内容。 　　ＨＴＭＬ代码中有两部分来创造框架，第一部分是在一个新的ＨＴＭＬ文件中用来确定如何在一个窗口中加载框架，第二部分需要指出在各个文档中哪些是要包含在框架中的，也就是要决定每一个连接所指的文档要装入哪个框中。这是一个好的设计所必备的。 　　框架的标签是＜ＦＲＡＭＥＳＥＴ＞＜／ＦＲＡＭＥＳＥＴ＞以及表示框架的每一部分的＜ＦＲＡＭＥ＞及其属性ＳＲＣ。＜ＦＲＡＭＥＳＥＴ＞用属性ＣＯＬＳ或ＲＯＷＳ分别表示将整个文档划分的方式，是纵向划分还是横向划分。ＣＯＬＳ和ＲＯＷＳ的参数定义了各个框架的大小。他们可以用像素个数表示，也可以用占屏幕的百分比表示。下面的两个例子分别得到图２３和图２４的效果： 　　＜ＦＲＡＭＥＳＥＴ　ＣＯＬＳ＝"xlh５０％，５０％"xlh＞ 　　＜ＦＲＡＭＥ　ＳＲＣ＝"xlhａ．ｈｔｍｌ"xlh＞ 　　＜ＦＲＡＭＥ　ＳＲＣ＝"xlhｂ．ｈｔｍｌ"xlh＞ 　　＜／ＦＲＡＭＥＳＥＴ＞ 　　＜ＦＲＡＭＥＳＥＴ　ＲＯＷＳ＝"xlh５０％，５０％"xlh＞ 　　＜ＦＲＡＭＥ　ＳＲＣ＝"xlhａ．ｈｔｍｌ"xlh＞ 　　＜ＦＲＡＭＥ　ＳＲＣ＝"xlhｂ．ｈｔｍｌ"xlh＞ 　　＜／ＦＲＡＭＥＳＥＴ＞ 　　除了用像素和百分比来表示一个框架的大小外，还可以用＇＊＇默认的表示一个框架的大小。例如＜ＦＲＡＭＥＳＥＴ　ＣＯＬＳ＝"xlh２０％，＊，＊"xlh＞所定义的三个框架中，第一个占屏幕的２０％，剩下的共占８０％，并且被缺省的平分为４０％和４０％。 　　框架还可以嵌套使用，例如下面的例子（图２５）： 　　＜ＦＲＡＭＥＳＥＴ　ＲＯＷＳ＝"xlh３０％，＊，＊"xlh＞ 　　＜ＦＲＡＭＥ　ＳＲＣ＝"xlhａ．ｈｔｍｌ"xlh＞ 　　＜ＦＲＡＭＥＳＥＴ　ＣＯＬＳ＝"xlh５０％，５０％"xlh＞ 　　＜ＦＲＡＭＥ　ＳＲＣ＝"xlhｂ．ｈｔｍｌ"xlh＞ 　　＜ＦＲＡＭＥ　ＳＲＣ＝"xlhｄ．ｈｔｍｌ"xlh＞ 　　＜／ＦＲＡＭＥＳＥＴ＞ 　　＜ＦＲＡＭＥ　ＳＲＣ＝"xlhｃ．ｈｔｍｌ"xlh＞ 　　＜／ＦＲＡＭＥＳＥＴ＞ 　　标签＜ＦＲＡＭＥ＞在＜ＦＲＡＭＥＳＥＴ＞＜／ＦＲＡＭＥＳＥＴ＞之内，用以控制如何在框架中显示一个文档，＜ＦＲＡＭＥ＞有如下属性： 　　ＳＲＣ＝"xlhｘｘｘ．ｈｔｍｌ"xlh：指定文档路径 　　ＮＡＭＥ＝"xlhｘｘｘ"xlh：给框架起个名字 　　ＭＡＲＧＩＮＷＩＤＴＨ，ＭＡＲＧＩＮＨＥＩＧＨＴ：用来指定边线的宽窄 　　ＳＣＲＯＬＬＩＮＧ：指明是否需要在框架上加上滚动条，其值为ｎｏ，ｙｅｓ，ａｕｔｏ 　　ＴＡＲＧＥＴ＝"xlhｘｘｘ"xlh：这是使用框架时最重要的部分之一，用来确定把一个框架 中的文档置于何处（自己所在的框架、其它框架、新窗口或者是整个浏览器）。 　　标签＜ＢＡＳＥ＞一般在文档的开头，当它跟属性ＴＡＲＧＥＴ时，用来规定一个默认值，使文档中的每个连接都被载入特定的区域。 　　对于由＜ＢＡＳＥ　ＴＡＲＧＥＴ＝"xlhｘｘｘ"xlh＞规定的默认值，如果在文档中有例外，可以在连接的标签中加入ＴＡＲＧＥＴ属性，如下： 　　＜Ａ　ＨＲＥＦ＝"xlhｘｘｘｘｘｘ"xlh　ＴＡＲＧＥＴ＝"xlhｘｘｘｘｘ"xlh＞ｘｘｘｘｘｘ＜／Ａ＞ 　　ＴＡＲＧＥＴ除了可以指向有ＮＡＭＥ命名的框架外，还可以有以下一些值： 　　ＴＡＲＧＥＴ＝"xlh＿ｂｌａｎｋ"xlh　　　载入一个新框 　　ＴＡＲＧＥＴ＝"xlh＿ｓｅｌｆ"xlh　　　　载入调用者所在框 　　ＴＡＲＧＥＴ＝"xlh＿ｐａｒｅｎｔ"xlh　　载入调用者的母框 　　ＴＡＲＧＥＴ＝"xlh＿ｔｏｐ"xlh　　　　　载入整个窗口，退出框架模式 　　使用框架时，必须小心设定ＴＡＲＧＥＴ，以免在使用时造成混乱，这是框架设计的关键。 　　与框架有关的标签还有一对：＜ＮＯＦＲＡＭＥ＞＜／ＮＯＦＲＡＭＥ＞。这对标签用来在浏览器不显示框架时显示的内容，对于显示框架的浏览器，将忽略这对标签内所包含的内容。 　　由于框架中的各个文档之间有一定的联系，为了更清楚的理解框架的构造，我们给出一个完整框架的所有三个源程序，图２６是这个框架的实际效果。 　　文件ｅｘｐｅｒｉｅｎｃｅ．ｈｔｍｌ 　　＜ＨＴＭＬ＞ 　　＜ＨＥＡＤ＞ 　　＜ＴＩＴＬＥ＞Ｅｘｐｅｒｉｅｍｅｎｔ＜／ＴＩＴＬＥ＞ 　　＜／ＨＥＡＤ＞ 　　＜ＦＲＡＭＥＳＥＴ　ＣＯＬＳ　＝　"xlh２００，＊"xlh＞ 　　＜ＦＲＡＭＥ　ＳＲＣ　＝　"xlhｅｘｐｅｒｉｅｎｃｅ＼ｅｘｐ＿ｃａｔａｌｏｇ．ｈｔｍｌ"xlh＞ 　　＜ＦＲＡＭＥ　ＳＲＣ　＝　"xlhｅｘｐｅｒｉｅｎｃｅ＼ｗａｒｎｉｎｇ．ｈｔｍｌ"xlh　ＮＡＭＥ　＝　"xlhｍａｉｎ"xlh＞ 　　＜／ＦＲＡＭＥＳＥＴ＞ 　　＜ＮＯＦＲＡＭＥ＞ 　　＜ＢＯＤＹ＞ 　　＜ＵＬ＞ 　　＜ＬＩ＞＜Ａ　ＨＲＥＦ＝"xlh＃ＨＴＭＬ＿Ｂｅｇｉｎｉｎｇ"xlh＞超文本编程＜／Ａ＞＜／ＬＩ＞ 　　＜ＵＬ＞ 　　＜ＬＩ＞＜Ａ　ＨＲＥＦ＝"xlhｅｘｐｅｒｉｅｎｃｅ．ｈｔｍ＃ＨＴＭＬ＿ｐｒｅｆａｃｅ"xlh＞超文本简介＜／Ａ＞＜／ＬＩ＞ 　　＜ＬＩ＞＜Ａ　ＨＲＥＦ＝"xlh＃ＨＴＭＬ＿Ｔａｇｓ"xlh＞超文本基础编程＜／Ａ＞＜／ＬＩ＞ 　　＜ＬＩ＞超文本高级编程＜／ＬＩ＞ 　　＜／ＵＬ＞ 　　＜ＬＩ＞ＪＡＶＡＳＣＲＩＰＴ编程基础＜／ＬＩ＞ 　　＜ＵＬ＞ 　　＜ＬＩ＞ＪＡＶＡＳＣＲＩＰＴ语言简介＜／ＬＩ＞ 　　＜ＬＩ＞ＪＡＶＡＳＣＲＩＰＴ基础＜／ＬＩ＞ 　　＜ＬＩ＞ＪＡＶＡＳＣＲＩＰＴ基础编程＜／ＬＩ＞ 　　＜／ＵＬ＞ 　　＜ＬＩ＞ＪＡＶＡ简介＜／ＬＩ＞ 　　＜ＬＩ＞超文本中动画实现的三种途径＜／ＬＩ＞ 　　＜ＵＬ＞ 　　＜ＬＩ＞服务器驱动的超文本动画＜／ＬＩ＞ 　　＜ＬＩ＞ＪＡＶＡ／ＪＡＶＡＳＣＲＩＰＴ编程驱动的超文本动画＜／ＬＩ＞ 　　＜ＬＩ＞ＧＩＦ８９Ａ动画＜／ＬＩ＞ 　　＜／ＵＬ＞ 　　＜ＬＩ＞ＷＥＢ服务器的组建方法及工具＜／ＬＩ＞ 　　＜ＬＩ＞ＦＴＰ服务器的组建方法及工具＜／ＬＩ＞ 　　＜／ＵＬ＞ 　　＜ＵＬ＞＜／ＵＬ＞ 　　＜／ＢＯＤＹ＞ 　　＜／ＮＯＦＲＡＭＥ＞ 　　＜／ＨＴＭＬ＞ 　　文件ｅｘｐ＿ｃａｔａｌｏｇ．ｈｔｍｌ 　　＜ＨＴＭＬ＞ 　　＜ＨＥＡＤ＞ 　　＜ＴＩＴＬＥ＞＜／ＴＩＴＬＥ＞ 　　＜／ＨＥＡＤ＞ 　　＜ＢＯＤＹ　ＴＥＸＴ＝"xlh＃００００００"xlh　ＢＧＣＯＬＯＲ＝"xlh＃００ＦＦＦＦ"xlh　ＬＩＮＫ＝"xlh＃００００ＥＥ"xlh　ＶＬＩＮＫ＝"xlh＃５５１Ａ８Ｂ"xlh　ＡＬＩＮＫ＝"xlh＃ＦＦ００００"xlh＞ 　　＜Ｐ＞＜ＮＯＢＲ＞＜／Ｐ＞ 　　＜Ｐ＞＜ＢＡＳＥ　ＴＡＲＧＥＴ　＝　"xlhｍａｉｎ"xlh＞＜／Ｐ＞ 　　＜Ｐ＞＜ＩＭＧ　ＳＲＣ＝"xlh．．／ｉｍａｇｅ／ｇ＿ｂｌｕｅ＿ａｎｉｍ．ｇｉｆ"xlh　ＨＥＩＧＨＴ＝１２　ＷＩＤＴＨ＝１２＞＜ＦＯＮＴ　ＳＩＺＥ＝－１＞超文本编程＜／ＦＯＮＴ＞＜／Ｐ＞ 　　＜ＵＬ＞ 　　＜ＬＩ＞＜ＦＯＮＴ　ＳＩＺＥ＝－１＞＜Ａ　ＨＲＥＦ＝"xlhＨＴＭＬＰｒｅｆａｃｅ．ｈｔｍ"xlh＞超文本简介＜／Ａ＞＜／ＦＯＮＴ＞＜／ＬＩ＞ 　　＜ＬＩ＞＜ＦＯＮＴ　ＳＩＺＥ＝－１＞＜Ａ　ＨＲＥＦ＝"xlhＨＴＭＬ＿Ｂａｓｅ＿Ｐｒｏ．ｈｔｍ"xlh＞超文本基础编程＜／Ａ＞＜／ＦＯＮＴ＞＜／ＬＩ＞ 　　＜ＬＩ＞＜ＦＯＮＴ　ＳＩＺＥ＝－１＞超文本高级编程＜／ＦＯＮＴ＞＜／ＬＩ＞ 　　＜／ＵＬ＞ 　　＜Ｐ＞＜ＩＭＧ　ＳＲＣ＝"xlh．．／ｉｍａｇｅ／ｇ＿ｇｒｅｙ＿ａｎｉｍ．ｇｉｆ"xlh　ＨＥＩＧＨＴ＝１２　ＷＩＤＴＨ＝１２＞＜ＦＯＮＴ　ＳＩＺＥ＝－１＞ＪＡＶＡＳＣＲＩＰＴ编程基础＜／ＦＯＮＴ＞＜／Ｐ＞ 　　＜ＵＬ＞ 　　＜ＬＩ＞＜ＦＯＮＴ　ＳＩＺＥ＝－１＞ＪＡＶＡＳＣＲＩＰＴ语言简介＜／ＦＯＮＴ＞＜／ＬＩ＞ 　　＜ＬＩ＞＜ＦＯＮＴ　ＳＩＺＥ＝－１＞ＪＡＶＡＳＣＲＩＰＴ基础＜／ＦＯＮＴ＞＜／ＬＩ＞ 　　＜ＬＩ＞＜ＦＯＮＴ　ＳＩＺＥ＝－１＞ＪＡＶＡＳＣＲＩＰＴ基础编程＜／ＦＯＮＴ＞＜／ＬＩ＞ 　　＜／ＵＬ＞ 　　＜Ｐ＞＜ＩＭＧ　ＳＲＣ＝"xlh．．／ｉｍａｇｅ／ｇ＿ｒｅｄ＿ａｎｉｍ．ｇｉｆ"xlh　ＨＥＩＧＨＴ＝１２　ＷＩＤＴＨ＝１２＞＜ＦＯＮＴ　ＳＩＺＥ＝－１＞ＪＡＶＡ简介＜／ＦＯＮＴ＞＜／Ｐ＞ 　　＜Ｐ＞＜ＩＭＧ　ＳＲＣ＝"xlh．．／ｉｍａｇｅ／ｇ＿ｙｅｌｌｏｗ＿ａｎｉｍ．ｇｉｆ"xlh　ＨＥＩＧＨＴ＝１２　ＷＩＤＴＨ＝１２＞＜ＦＯＮＴ　ＳＩＺＥ＝－１＞超文本中动画实现的三种途径＜／ＦＯＮＴ＞＜／Ｐ＞ 　　＜ＵＬ＞ 　　＜ＬＩ＞＜ＦＯＮＴ　ＳＩＺＥ＝－１＞服务器驱动的超文本动画＜／ＦＯＮＴ＞＜／ＬＩ＞ 　　＜ＬＩ＞＜ＦＯＮＴ　ＳＩＺＥ＝－１＞ＪＡＶＡ／ＪＡＶＡＳＣＲＩＰＴ编程驱动的超文本动画＜／ＦＯＮＴ＞＜／ＬＩ＞ 　　＜ＬＩ＞＜ＦＯＮＴ　ＳＩＺＥ＝－１＞ＧＩＦ８９Ａ动画＜／ＦＯＮＴ＞＜／ＬＩ＞ 　　＜／ＵＬ＞ 　　＜Ｐ＞＜ＩＭＧ　ＳＲＣ＝"xlh．．／ｉｍａｇｅ／ｇ＿ｂｌｕｅ＿ａｎｉｍ．ｇｉｆ"xlh　ＨＥＩＧＨＴ＝１２　ＷＩＤＴＨ＝１２＞＜ＦＯＮＴ　ＳＩＺＥ＝－１＞ＷＥＢ服务器的组建方法及工具＜／ＦＯＮＴ＞＜／Ｐ＞ 　　＜Ｐ＞＜ＩＭＧ　ＳＲＣ＝"xlh．．／ｉｍａｇｅ／ｇ＿ｇｒｅｅｎ＿ａｎｉｍ．ｇｉｆ"xlh　ＨＥＩＧＨＴ＝１２　ＷＩＤＴＨ＝１２＞＜ＦＯＮＴ　ＳＩＺＥ＝－１＞ＦＴＰ服务器的组建方法及工具＜／ＦＯＮＴ＞＜／Ｐ＞ 　　＜／ＢＯＤＹ＞ 　　＜／ＨＴＭＬ＞ 　　文件ｗａｒｎｉｎｇ．ｈｔｍｌ 　　＜ＨＴＭＬ＞ 　　＜ＨＥＡＤ＞ 　　＜ＴＩＴＬＥ＞Ｗａｒｎｉｎｇ＜／ＴＩＴＬＥ＞ 　　＜／ＨＥＡＤ＞ 　　＜ＢＯＤＹ＞ 　　＜Ｈ１　ＡＬＩＧＮ＝ＣＥＮＴＥＲ＞声明＜／Ｈ１＞ 　　＜Ｐ＞＜Ｂ＞以下文字，包括了制作主页和建立ＷＥＢ及ＦＴＰ服务器的一些基本知识以及本人在制作发布个人主页的过程中的一些得失之谈。本人欢迎参考引用以下内容，但同时保留著作权。因本人水平有限，才识薄浅，文中难免错误与不妥之处，欢迎各位网友来信批评指正。谢谢。＜／Ｂ＞＜／Ｐ＞ 　　＜／ＢＯＤＹ＞ 　　＜／ＨＴＭＬ＞ #2　　十、超文本中的用户交互性构件 　　为了与用户进行交互式的联系，必须为用户提供一个给服务器反馈信息的方法，这就要用到超文本中的交互性构件。这里的交互性构件在ＷＩＮＤＯＷＳ操作系统中也都是为人所熟知的几种，其中包括：文字输入、密码输入、单选框、收音机按钮、图象、提交按钮、清除按钮、隐藏区、下拉式选择、大量文字输入区等。下面将就分别介绍这些构件的用法。 　　交互性构件在超文本中一般都是集中在超文本页面的一部分，他们通常被定义为一个ＦＯＲＭ，其具体形式如下：＜ＦＯＲＭ　ＮＡＭＥ＝“”　ＡＣＴＩＯＮ＝"xlhＵＲＬ"xlh　ＭＥＴＨＯＤ＝ＧＥＴ｜ＰＯＳＴ＞＜　／ＦＯＲＭ＞在这对表签之中，包含有以上列举的各种构件。图１５是一些交互性构件的例子。属性ＮＡＭＥ是给这组构件起的一个名字，用来区别其他构件组，同时在进行编程时也有一些用处。ＡＣＴＩＯＮ。ＭＥＴＨＯＤ说明的用户输入的信息以什么方式传回服务器，ＧＥＴ和ＰＯＳＴ的区别，我们不在这里深究。 　　文字输入：＜ＩＮＰＵＴ　ＴＹＰＥ＝"xlhＴＥＸＴ"xlh＞ 　　密码输入：＜ＩＮＰＵＴ　ＴＹＰＥ＝"xlhＰＡＳＳＷＯＲＤ"xlh＞ 　　与ＴＥＸＴ不同的仅在于在其中输入的文字都用＇＊＇代替。 　　单选框：＜ＩＮＰＵＴ　ＴＹＰＥ＝"xlhＣＨＥＣＫＢＯＸ"xlh＞ 　　收音机按钮：＜ＩＮＰＵＴ　ＴＹＰＥ＝"xlhＲＡＤＩＯ"xlh＞ 　　这类选择是在一组选项中互斥的进行的，因此也需为这组选项起个名字，以共识别互斥在那些选项之中进行。起名字的方法是使用属性ＮＡＭＥ进行定义。 　　图象：＜ＩＮＰＵＴ　ＴＹＰＥ＝"xlhＩＭＡＧＥ"xlh＞ 　　下拉菜单选择：＜ＳＥＬＥＣＴ＞＜／ＳＥＬＥＣＴ＞ 　　菜单中的各个选项前用标签＜ＯＰＴＩＯＮ＞表示。＜ＯＰＴＩＯＮ＞没有对应的尾标签。 　　多项选择：＜ＳＥＬＥＣＴ　ＭＵＬＴＩＰＬＥ＞＜／ＳＥＬＥＣＴ＞ 　　给下拉菜单选择中加入属性ＭＵＬＴＩＰＬＥ就构成了多项选择框。选项前也使用＜ＯＰＴＩＯＮ＞标签表示。 　　大量文字输入：＜ＴＥＸＴＡＲＥＡ　ＣＯＬＳ＝　　ＲＯＷＳ＝　　＞＜／ＴＥＸＴＡＲＥＡ＞ 　　此对标签显示一个编辑区，在其中可以输入编辑一些文字。ＲＯＷＳ、ＣＯＬＳ分别定义了编辑区的大小，其值用行数和列数表示。 　　提交按钮：＜ＩＮＰＵＴ　ＴＹＰＥ＝"xlhＳＵＢＭＩＴ"xlh＞ 　　这个按钮的点选，将把这组构件包含的信息传送回服务器。 　　清除按钮：＜ＩＮＰＵＴ　ＴＹＰＥ＝"xlhＲＥＳＥＴ"xlh＞ 　　这个按钮的点选，将清除这组构件中所有已经输入的信息。 　　隐藏区：＜ＩＮＰＵＴ　ＴＹＰＥ＝"xlhＨＩＤＤＥＮ"xlh＞ 　　下面的例子，用到了几乎所有的交互性构件，可以从感性上认识一下这些构件。图２７是这个例子的运行结果。 　　Ｔｏｐ　ｏｆ　Ｆｏｒｍ　１ 　　＜ＨＴＭＬ＞ 　　＜ＨＥＡＤ＞ 　　＜ＴＩＴＬＥ＞Ａｌｔｅｒｎａｔｉｏｎ　Ｄｅｍｏ＜／ＴＩＴＬＥ＞ 　　＜／ＨＥＡＤ＞ 　　＜ＢＯＤＹ＞ 　　＜ＦＯＲＭ　ＮＡＭＥ＝"xlhｄｅｍｏ"xlh　ＭＥＴＨＯＤ＝ＰＯＳＴ＞ 　　注册名： 　　＜ＩＮＰＵＴ　ＴＹＰＥ＝"xlhＴＥＸＴ"xlh　ＳＩＺＥ＝２０　ＶＡＬＵＥ＝"xlh"xlh＞ 　　＜Ｐ＞ 　　口令： 　　＜ＩＮＰＵＴ　ＴＹＰＥ＝"xlhＰＡＳＳＷＯＲＤ"xlh　ＳＩＺＥ＝１０　ＶＡＬＵＥ＝"xlh"xlh　ＭＡＸＬＥＧＴＨ＝８＞ 　　＜Ｐ＞ 　　性别： 　　＜ＩＮＰＵＴ　ＴＹＰＥ＝"xlhＲＡＤＩＯ"xlh　ＮＡＭＥ＝"xlhｓｅｘ"xlh　ＶＡＬＵＥ＝"xlh男"xlh　ＣＨＥＣＫＥＤ＞ 　　男 　　＜ＩＮＰＵＴ　ＴＹＰＥ＝"xlhＲＡＤＩＯ"xlh　ＮＡＭＥ＝"xlhｓｅｘ"xlh　ＶＡＬＵＥ＝"xlh女"xlh＞ 　　女＜Ｐ＞ 　　你使用的软件： 　　＜ＩＮＰＵＴ　ＴＹＰＥ＝"xlhＣＨＥＣＫＢＯＸ"xlh　ＮＡＭＥ＝"xlh３ｄｓ"xlh＞３ＤＳ 　　＜ＩＮＰＵＴ　ＴＹＰＥ＝"xlhＣＨＥＣＫＢＯＸ"xlh　ＮＡＭＥ＝"xlhａｒｊ"xlh＞ＡＲＪ 　　＜ＩＮＰＵＴ　ＴＹＰＥ＝"xlhＣＨＥＣＫＢＯＸ"xlh　ＮＡＭＥ＝"xlhｕｃｄｏｓ"xlh＞ＵＣＤＯＳ 　　＜ＩＮＰＵＴ　ＴＹＰＥ＝"xlhＣＨＥＣＫＢＯＸ"xlh　ＮＡＭＥ＝"xlhｖｃ"xlh＞ＶＣ＋＋ 　　＜Ｐ＞ 　　你安装的多媒体硬件： 　　＜ＳＥＬＥＣＴ　ＭＵＬＴＩＰＬＥ＞ 　　＜ＯＰＴＩＯＮ＞ＣＤ－ＲＯＭ 　　＜ＯＰＴＩＯＮ＞ＳＯＵＮＤ　ＢＬＡＳＴＥＲ 　　＜ＯＰＴＩＯＮ＞ＶＩＤＩＯ　ＢＬＡＳＴＥＲ 　　＜ＯＰＴＩＯＮ＞ＴＶ　ＣＡＲＤ 　　＜／ＳＥＬＥＣＴ＞ 　　＜Ｐ＞ 　　你使用的操作系统： 　　＜ＳＥＬＥＣＴ＞ 　　＜ＯＰＴＩＯＮ＞ＵＮＩＸ 　　＜ＯＰＴＩＯＮ＞ＷＩＮＤＯＷＳ９５ 　　＜ＯＰＴＩＯＮ＞ＤＯＳ 　　＜／ＳＥＬＥＣＴ＞ 　　＜Ｐ＞ 　　留言： 　　＜ＴＥＸＴＡＲＥＡ　ＣＯＬＳ＝４０　ＲＯＷＳ＝５　ＮＡＭＥ＝"xlhｌｅｆｔ"xlh＞ 　　＜／ＴＥＸＴＡＲＥＡ＞ 　　＜Ｐ＞ 　　＜ＩＮＰＵＴ　ＴＹＰＥ＝"xlhＳＵＢＭＩＴ"xlh　ＮＡＭＥ＝"xlhｓｅｎｄ"xlh　ＶＡＬＵＥ＝"xlh发送"xlh＞ 　　＜ＩＮＰＵＴ　ＴＹＰＥ＝"xlhＲＥＳＥＴ"xlh　ＮＡＭＥ＝"xlhｃｌｅａｒ"xlh　ＶＡＬＵＥ＝"xlh清除"xlh＞＜／ＦＯＲＭ＞＜／ＢＯＤＹ＞＜／ＨＴＭＬ＞ #2　　十一、ＪＡＶＡ 　　无论是使用还是开发ＩＮＴＥＲＮＥＴ的人，对于ＪＡＶＡ这个词都不会感到陌生，它是当今网络编程，特别是ＩＮＴＥＲＮＥＴ编程被炒的最热的一个话题，众多浏览器厂商纷纷开发出支持ＪＡＶＡ的浏览器，计算机业界的各个大腕也都开发出各种ＪＡＶＡ编译器或在其原有产品上增加对ＪＡＶＡ编译的支持。ＪＡＶＡ语言的编程，并不是本文所讨论的范围，有兴趣的读者可参考专门介绍ＪＡＶＡ编程的书籍。下面我们就来看看超文本文档是如何支持ＪＡＶＡ的。 　　ＪＡＶＡ在超文本中是以被称为Ａｐｐｌｅｔ的形式出现的，Ａｐｐｌｅｔ在许多文献中被称为小应用程序，当然，所谓小应用程序，在实际的应用中并不一定就比单独执行的ＪＡＶＡ程序小多少，它往往要担任起包括动画、视频和声音等多媒体特性在内的各种功能的重任，所以，一个好的具有复杂和完善功能的Ａｐｐｌｅｔ往往也是相当复杂的。 　　编制好一个Ａｐｐｌｅｔ后，经编译生成＊．ｃｌａｓｓ文件，在超文本中用以下方式定义调用： 　　＜ＡＰＰＬＥＴ＞＜／ＡＰＰＬＥＴ＞ 　　它包含的各种参数，对ＡＰＰＬＥＴ的各种特性进行了说明： 　　ＣＯＤＥ：编译好的＊．ｃｌａｓｓ文件的名称 　　ＮＡＭＥ：这个ＡＰＰＬＥＴ的名字，以别于本页中的其他ＡＰＰＬＥＴ 　　ＣＯＤＥＢＡＳＥ：这个ＡＰＰＬＥＴ的基本网址（ＵＲＬ） 　　ＡＬＴ：当浏览器不支持ＪＡＶＡ　ＡＰＰＬＥＴ时所显示的内容 　　ＡＬＩＧＮ：ＡＰＰＬＥＴ的位置，也就是ＡＰＰＬＥＴ相对整个浏览器屏幕的对齐方式 　　ＷＩＤＴＨ：ＡＰＰＬＥＴ尺寸的高（以ｐｉｘｅｌｓ为单位） 　　ＷＥＩＧＨＴ：ＡＰＰＬＥＴ尺寸的宽（以ｐｉｘｅｌｓ为单位） 　　ＨＳＰＡＣＥ：ＡＰＰＬＥＴ左右留边（以ｐｉｘｅｌｓ为单位） 　　ＶＳＰＡＣＥ：ＡＰＰＬＥＴ上下留边（以ｐｉｘｅｌｓ为单位） 　　下面例子中调用的ＡＰＰＬＥＴ显示了一个动画，动画所表现的是一串旋转的字符。 　　超文本编程的提高篇到此为止，如果你掌握了所有这些内容，那你应该已经成为一个超文本编程的高手了。由于各个浏览器厂商的产品在其对超文本的支持上不尽相同，而且各自还都对其进行了一些扩展，在这些扩展当中，有一些是比较有用也很有趣的，还有一些也似乎在逐渐成为各个浏览器厂商都支持的标准。