华东理工大学动态网页设计第1章.doc

第1章 网页制作基础第1章 网页制作基础使用浏览器上网时，你看到的一幅幅精彩画面，一般都是由服务器发送给浏览器，并由浏览器解释的HTML文档。那么，HTML文档中有哪些内容，它们的格式是怎么样的，这是本章要向读者介绍的内容，它也是学习以后各章内容的基础。本章内容主要包括：l Internet及Web的概念l 超文本标记语言l 常用的主页制作工具通过这一章的学习，要求读者：了解Internet及Web的概念；熟悉HTML文档格式和常用标签；了解常用的主页制作工具。1.1 Internet信息服务1.1.1 Internet简介 Internet(因特网)是一个通过网络设备把世界各国的计算机相互连接在一起的计算机网络，在Internet上，人们可以利用任何两台支持TCP/IP网络协议的计算机进行通信。所谓协议是指计算机通信所使用的语言和规则。Internet还支持多种流行的程序，包括World Wide Web。 World Wide Web(万维网)是在因特网上运行的全球性分布式信息系统，它是一个抽象的信息场所，在这个场所中，包含了几十乃至几百万台通过超文本传输协议（HTTP）提供信息服务的Web服务器，当用户使用浏览器向这些服务器发出请求时，服务器将把响应信息发送给浏览器，最后由浏览器解释并显示。你正在使用的计算机可能是一台Web服务器，也可能是一台安装有浏览器的普通计算机，这取决于这台计算机中安装了什么程序，以及这台计算机接入到Internet的接入方式，如果你的计算机不能让其它人访问，那么就不能成为真正的Web服务器。即使这样，你还是可以在计算机上安装一个称为个人Web服务器的程序来运行本教材中的所有实例。FTP(File Transfer Protocol文件传输协议)，用于将文本、二进制文件和图形从一台计算机传输到另一台计算机，有了它，你可以将编写好的网页传送到能被其它用户访问的Web服务器上。HTTP(HyperText Transmission Protocol超文本传输协议)用于定义在Web浏览器和Web服务器之间如何传送数据。在服务器向客户机传送文档之前，客户机和服务器间需要建立TCP连接，之后才发送HTTP请求信息，服务器接收到请求之后就给Web浏览器回送一个HTTP响应信息，最后服务器断开TCP连接。HTTP协议主要用于定义信息的格式。1.1.2 Web出版把一些文字、图片、声音等内容组织成一个或多个Web文档，放置在Web服务器上，供用户在能与该服务器相连的机器上访问，这一过程称为Web出版。 Web出版的方式主要有两种，一种是建立一个独立的Web服务器，这需要较高的代价，另一种是在其它服务器上开辟一个空间，通过链接的形式来访问你的Web页。幸运的是，现在有许多站点（像网易、首都在线等）提供免费空间供大家建立网页。1.2 超文本标记语言当用户阅读一般文本文件时，一旦遇到不是很清楚的内容，就需要另外打开其它文件，或翻转到本文件的其它位置查看，查看完成后可能已经忘记应该回到哪里继续阅读了，这样给阅读带来很大的不便。为此，我们很希望有一种方法能在需要时自动转到相关内容，并方便地返回。超文本就是为此而设计的。一般把通过在文本中插入链接把相关文本组织在一起而形成的文档称为超文本(hypertext)。通常超文本使用超文本标记语言来描述。超文本标记语言(HyperText Makeup Language，简称HTML)是一种用来创作万维网页面的描述语言，它使用HTML标签来定义文档的格式、组成和链接关系，供浏览器解释执行。所谓HTML标签，由3部分组成：左尖括号“”，“标签名称”，和右尖括号“”。标签通常是成对出现的，分别称为“开始标签”和“结束标签”，结束标签的左尖括号后加一个斜杠符号“/”。在各种HTML标签中，常常还可以定义一些属性，这些属性用于指出文档元素的一些特性，如背景颜色、字体大小、对齐方式等，指定文档元素属性的附加信息一般放在相应的“开始标签”中。由于HTML文档是一种没有格式的文档，也称为ASCII文件。因此，HTML文档可以使用任何一种文本编辑器来编写，如记事本、写字板和WORD等。1.2.1 第一个HTML文档让我们先来看一个例子。【例1-1】一个简单Web页我的第一个WEB页 正文内容写在这里.将上述代码用文本编辑器或其他专门的主页制作软件输入并保存为一个扩展名为htm或html的文件后，在文件夹窗口双击该文件图标，就可看到如图1-1所示的结果。图1-1 一个简单的Web页从例出可以看出，一个HTML文档的一般结构如下： 1.一般形式 头部 主体部分 2.说明：开始和结束标签头部信息，可以包含标题(TITLE)，媒体环境(META)等说明信息,客户端脚本也可放在这一部分。网页主体部分。它也有一些属性，形式为：其中： BGCOLOR背景颜色text 非链接文字的颜色link 链接文字的颜色alink正被点击的链接文字的颜色vlink 已经点击(访问)过的链接文字的颜色如果要使用背景图像，语法为： 在HTML文档中，不区分英文字母的大小写，对于标签中的属性值，一般可以不加引号，只有当属性值中包含空格或一些其它符号时，引号才是必须的。 3.调试HTML代码总有一些时候会忘了输入某些代码或敲错某些代码，这时Web页可能会变得非常滑稽。通过反复的浏览，比较出现的效果与预想效果的不同点，从中发现存在的错误，这一过程称为调试。对于web页的调试没有多少技巧可言。但要强调的一点是，应该仔细地观察显示的结果或系统给出的错误信息，从中判断出可能错在哪里，再去检查文件的内容，而不是在没有看清出了什么错误前就急着查文件内容，这样往往很难快速找到错误的位置。常见的错误有标签名称书写错误、标签的属性书写错误、结束标签遗忘或书写错误等。如例1-1第3行中若结束位置的遗忘了或写成，则其后的内容将显示在窗口的标题栏。只要仔细观察显示结果，不难发现其中的错误。1.2.2 文字修饰与布局 1.修饰方法(1) 标题文字(Header)有时，希望将某些文字显示成像文章中的标题一样，这时，可使用H标签，形式如下： 作为标题的文字其中n为1到6的数字，根据n的大小不同，将显示出不同大小的黑体字。H1最大，H6最小。标题文字独立占一行，不受段落标记的影响。(2) 文字大小(FONT SIZE)形式：需显示成n号大小的文字其中：n=1,2,37。SIZE的默认大小为3，在此基础上，可以用-2，-1，0，+1，+2，+3或+4代替n。另外，可以用指出缺省字符大小，用或来指出字符相对于周围字符的大小。(3) 文字颜色(FONT COLOR)形式：需显示成指定颜色的文字其中：rrggbb为16进制值，表示组成颜色的RGB三原色的对比关系，对常用的颜色，可以使用名称来代替式中的“#rrggbb”，对应关系为：Black(000000),Olive(008080),Red(ff0000),Blue(0000FF),Maroon(800000),Navy(000080),Gray(808080),Lime(00ff00),Fuchsiz(ff00ff),White(ffffff),Green(008000),Purple(800080),Silver(C0C0C0),Yellow(ffff00),Aqua(00ffff)。(4) 定义字体(FONT FACE)：形式：需显示成指定字体的文字其中：字体为Arial、Times、Ms seriers、宋体、楷体等。值得注意的是，在浏览器上是否能显示所设置的字体取决于浏览器所在的机器中是否安装了相应的字体。以上三种文字的修饰方法有一个共同点就是都使用相同的标签把要修饰的文字括起来，再用该标签的SIZE属性设置文字大小，用COLOR属性设置文字的颜色，用FACE属性设置文字的字体。当需要同时设置文字大小和颜色时，应把它放在同一个标签中，例如，要用6号大小红色显示“动态网页”这几个字时，应使用如下形式： 动态网页(5) 标记文字：对于文字还有一些常用的修饰，即加粗、斜体和加下划线。对此，HTML中设计了独立的标签，使用形式如下： 需要加粗的文字 需要显示成斜体的文字 需要添加下划线的文字以上三个标签可重叠作用。如：动态网页制作，将使“动态”两字加粗显示，“网页”两字加粗并加下划线，“制作”两字显示成斜体并加下划线。另外还有一些标签如：、和等，但这些标签不一定被所有浏览器所支持。【例1-2】文字的修饰文字的修饰这是标题字体H1这是标题字体H6这是大小为5的楷体字本教材讨论的是：动态网页制作这是红色的文字本例中的代码，浏览时显示结果如图1-2所示。图1-2 文字修饰 2.文字布局(1) 段落段落是文档的基本单位，在HTML中可以使用标签来指定文档中具有独立意义的段落，通过设置段落标签的某些属性可以控制段落的对齐方式。浏览器在显示时，一个段落的前后将留有较大的空隙，也可以说相当于有一个空行。(2) 换行一个段落中可以包含多个行，可以使用标签来强制文字换行。一般情况行与行之间的间隔比段与段之间的间隔要小。注意：如果不使用段落标签指出从哪里开始新的一段或一行，那么显示时文本就会连成一整块，而不管你在文本中输入了多少个回车符。一般情况根据浏览器窗口的宽度，当一行太长时，会自动换行。(3) 文字对齐可以以段落为单位设置文字的对齐方式，形式如下： 需要按照给定方式对齐的文字其中：对齐方式有left、center和right，分别表示左对齐、居中对齐和右对齐。默认为left表示左对齐。标题文字也有相应的属性，使用形式为： 需要按照给定方式对齐的标题文字如果需要将文字或其它对象居中对齐，也可以使用标签，形式如下： 要居中的文字或对象注意：标题不能作为段落的一部分，也不受段落标记的影响。(4) 预格式化文本当需要按照输入时的格式来控制换行时，可以使用预格式化文本标签，使用形式如下： 这里是多行文本 注意：用这一标识符标识的文本不能随浏览器窗口的宽度大小而自动换行，这在低分辨率显示器上使用是很不方便的。1.2.3 加入其它网页元素网页中除了一般的文字外，通常还有一些其它对象，如线条、图片、表格等。要在HTML中插入各种对象，通常需要指出三个内容：即标签名称、标签属性及提示信息。其中标签名称，用于指出插入的是什么对象；标签属性，用于指出该对象的显示格式及行为特点；提示信息主要指出屏幕显示的文字内容。 1.插入水平线有时为了较明显地划分上下各部分的内容，在文档中间加入一些水平线，使用形式如下： 其中：HR为标签名称，它指出插入的元素为一个线条。WIDTH、ALIGN和SIZE都是线条的属性，其右侧为该属性对应的值。式中的宽度可以是百分比，表示占屏幕宽度的百分比，如“90%”,也可以是屏幕的象数点个数，如“222”。对齐方式可以是左对齐，中间对齐及右对齐。高度为点数。请看例1-3。【例1-3】水平线水平线这里是标题以下是正文内容本例代码浏览时显示结果如图1-3所示。图1-3 使用水平线 2.加入超级链接使用超文本标记语言来编写网页的主要原因是网页的内容中常常需要使用超链接，通过超链接，用户可以简单地用点击某些文字来转向到其它网页或本网页的其它位置。根据需要转向的位置不同，超级链接的形式有所不同。1) 链接到其它地址形式：提示文字2) 链接到本页的其它地方形式：提示文字其中：位置是命名的一个地方，命名形式为：内容3) 链接到其它地址的某一地方形式：提示文字4) 在新窗口打开链接形式：【例1-4】超级链接超级链接友情链接：雅虎中文网易 我家的生活-喜 怒 哀 乐全都有有人说：生活像一条长长的路，崎岖蜿蜒。有人说：生活像一束鲜花，带来了希望和成功。有人说：生活像一个多彩的梦，是由红、橙、黄、绿编织而成。可是我说：生活不是梦，不是画，它有苦也有乐.喜有一年放暑假前夕，我去学校领小学生手册。我刚拿到手册时，提心吊胆的，担心成绩不理想，就急忙把它翻开来看。语文九十八分，数学九十七分。太好了!我激动得喊了出来。于是.妈妈看着我点了点头，满意地笑了。我望着妈妈满意的笑容，心中不由想起几个月之前的一件事来。怒那是一个狂风怒吼的阴天。任浩数学七十六分!老师紧皱着眉头，来到我身边，说：这次你是怎么考数学的?好好查查原因!天才知道我是怎样回到家的。一进门，妈妈便笑眯眯地走出来迎接我，可她看了我的成绩单.妈妈和我谈了两个小时。我心里才轻松了些。哀今天，我们家接到了老家来的电报，说家里发洪水，要求我们立即支援。我们得到消息后，充满阳光的生活变得灰蒙蒙的，全家都为这突然发生的事感到哀愁，不愉快。爸爸妈妈商量后便寄去了几百块钱和姐姐小时候的衣服给叔伯们。同时爸爸还准备回家去看看。谁知.全家看完了电报，都十分高兴，家中的一丝阴云，又飞散了。乐夫人，请-爸爸调皮地向妈妈做了一个邀请动作。哈哈-我们都笑了起来。妈妈白了爸爸一眼，从容地站了起来。奇怪，那步子既准确又合拍，把我们都看呆了。.欢笑声和歌声交织在一起，随着微风传出窗外.本例浏览时，首先显示图1-4所示结果，单击“怒”字显示图1-5所示结果。图1-4 插入超级链接例的初始显示 图1-5 页内的链接单击“雅虎中文”将转到雅虎中文网站，显示如图1-6所示结果。图1-6 链接到其它网站 3.加入图像图片是网页的一个重要组成部分，显示在网页上的任何东西都可以用图像来实现，如特殊字体的文字、线条分隔符等。图片可以使页面更直观、更漂亮。但由于图片文件有较多的字节，在网络上传送需要较长的时间。要在网页的某个位置放置一个图像，使用标签，形式为： 其中：SRC属性指出显示的图片的文件名。常用的图像文件格式为GIF和JPEG格式。WIDTH和HEIGHT分别指出图片显示的宽度和高度，以像素点为单位。ALT属性后面的“提示文字”指出当图片文件不存在时，或当鼠标移动到该图片上方时系统给出的提示内容。使用BORDER属性可为图像加边框。【例1-5】加入图片图片的例子本例浏览时显示结果如图1-7所示。当把例1-5中的代码输入，保存在一个扩展名为htm或html的文件后，可以通过双击该文件图标来观看结果。这时，你可能看不到任何图片显示，这是因为在同网页文件相同的目录中没有名字为nju.jpg的文件，如果你准备的图片文件已经放在另外一个目录中，应该在SRC属性中写上它的目录路径。如果你看到的图片严重变形，则应该调整代码中WIDTH属性和HEIGHT属性的值。使用IMG标签的ALIGN属性，可指出图像的对齐方式。形式为： IMG ALGIN=“对齐方式”其中：对齐方式有top、middle、bottom、left和right等几种。分别表示顶端、中间、底部、左边和右边对齐。图1-7 插入图片【例1-6】图像和文字的对齐图像和文字的对齐默认对齐方式top对齐方式middle对齐方式bottom对齐方式left对齐方式right对齐方式图1-8 图像与文字的对齐验证本例时，首先要找到一个图片文件，改名为tu.jpg放入网页文件目录，再双击该网页文件，显示结果如图1-8所示。在超链接的显示文本区放入图像，可让用户通过点击图像实现超链接。形式如例1-7中所示：【例1-7】用图像建立链接用图像建立链接也许你找不到名为yahoo.gif的图片文件而得不到图1-9的浏览结果，如果能上网的话，你可以通过浏览网站“”，并另存它的标题图片。图1-9 用图像建立链接 4.插入表格要在网页中插入一个表格，需要用到一组标签，分别表示整个表格的属性、表格中一行的属性和表格中一列的属性。定义表格的有关标签如下：TABLE：定义表格：定义表行：定义表头：定义表元(表格的具体数据)让我们先看一个例子【例1-8】表格示例表格示例星期一星期二星期三MONTUEWED由于在表格中，下一行的开始就意味着上一行的结束，所以例中的行结束标签都可以省略。同样标签也可以省略。浏览结果如图1-10所示。图1-10 使用表格以下对照例子说明表格定义中使用的常用属性。(1) 设定表格边框标识TABLE的border属性用于设置表格边框的宽定，范围为1到4，设为0时或无此项时表格没有边框。在IE浏览器中，这一属性值的大小影响到外边框的阴影宽度，取值不限，如图1-11所示。(2) 设定表格和表项的大小形式：其中：宽和高可以是数值，表示像素点个数，也可以用百分比，表示占窗口大小的比例。对于td和th也有WIDTH和HEIGHT两属性，其设置相同，如例中表格占窗口宽度的50%，第1列占表格宽度的50%，第二行占表格高度的50%。(3) 设定表元间隙形式：TABLE CELLSPACING=n其中：n为像素点个数，在IE浏览器中，反映了实际的表格线宽度，例中设为10点，它的颜色和表格背景颜色相同，即为红色(RED)。(4) 设定表元内部空白形式： 该属性用于设定单元格中的文字离开表格线的距离，例中设为20点，当单元格宽度不足以容纳文字时，会自动换行，如例中的第2和第3列。(5) 设定表格和表项的对齐方式形式：TABLE ALIGN=“对齐方式”其中：对齐方式可以是left、center和right。这一属性指出宽度不是100%的表格在窗口中的位置。例中设置为center，即表格离窗口两边的距离相等。另外：也有ALIGN属性。它反映表格中的内容的对齐方式，th的对齐方式缺省为center，tr的对齐方式缺省为left，即左对齐，td的对齐方式缺省值为本行的tr的设置值，若没有设置时，缺省值为左对齐。其设置形式同上，例中把“星期二”设为左对齐，而把“TUE”设为居中。(6) 在表格中加入图像用BGCOLOR可以设置整个表格的背景颜色或某一行或某一列的背景颜色。例中把整个表格的背景颜色设为红色(RED)。用BACKGROUND属性可指定一幅图像作为表格或单元格的背景图片，如例中把“tu.jpg”设为第2行第1列的背景图片。为了说明表格的其它一些属性，让我们再看另外一例【例1-9】表格的其它属性课 程 表时间星期一星期二星期三上午1-2节数学语文英语3-4节语文上网数学本例浏览结果如图1-11所示。图1-11 表格的其它属性(7) 表格的标题紧接着标签的第一行，可以设置表格的标题，形式如下： 标题内容其中：ALIGN属性指出标题相对于表格的位置，可以取top或bottom分别表示标题在表格的上方或下方，缺省值为上方，例中设为下方。(8) 多列合并和多行合并可以让一个单元格占用表格的几列，形式如下：单元格内容或单元格内容其中：th标签表示标题行，n为列数。如例中所示。同样可以让一个单元格占用表格的几行，形式如下：单元格内容或单元格内容(9) 垂直方向的对齐对于、和标签，都有一个指出垂直方向对齐方式的属性VALIGN，其取值为TOP、BOTTOM和MIDDLE，分别表示顶端对齐，底端对齐和中间对齐。如例中所示。(10) 单元格中使用超链接在和所界定的单元格内容中，可以使用超链接，如例中：上网同样，单元格中可以放入图片等其它网页元素。另外，单元格的内容可以是另外一个表格，这时就构成表格的嵌套。表格的嵌套在实际的网页中经常出现，如需要在网页中显示左右两个表格时，就需要设计成表格嵌套形式，外层的表格一般不设置边框线。表格还常常用于排列页面中的内容，嵌套的表格更能灵活地用于进行页面的布置。如果在表格中不使用边框，可以使页面看上去象正常文本一样，或者是文本与图像的组合。由于篇幅限制，更进一步的内容请参考有关网页设计的教材。1.2.4 框架使用框架可以将一个浏览器窗口分成几个部分，而每个部分可独立地装入一个网页文件，我们可以将分成的每个部分称为窗格。这样，可以在一个窗格中显示目录列表，而在另一个窗格中显示选中的文档内容，较好地体现出文档的层次结构。 1、一个简单的框架【例1-10】一个简单的框架网页文件一（设文件名为L1_10.html）一个简单的框架网页文件二（设文件名为L1_10a.html）这是页面A网页文件三（设文件名为L1_10b.html）这是页面B在本例中，共有3个网页文件，其中一个文件主要用于说明框架的组成形式，各部分的大小比较及显示的文档名称。而另外两个网页文件是实际显示在框架的窗格里的内容。先看网页文件一，它包含一个标题说明，其后的一行： 规定了将整个窗口分成两列，每列占50%的宽度，它由COLS=“50%，50%”来指定，高度占窗口的100%，它由ROWS=“100%”来指定，它是缺省值，若此处改为80%，则窗口下方将留下一个空白条。若指定列宽的两个值的总和不是100%，则窗格按比例扩大或缩小到占满整个窗口。若指定列宽的各个值中有一个是“*”，表示使用剩余值，即将100%减去其它指定值后的值， 如COLS=“*，20%”，相当于COLS=“80%，20%”。若需要将窗口分成上下两个部分，可改用如下形式： 它把窗口分成上下两个部分，上面占40%的高度，下面占60%的高度，COLS=“100%”可以缺省。即使这里改为“50%”，显示效果相同。不能同时进行垂直划分和水平划分，即如果写成如下形式： 则相当于：标签显示在窗格中的文档名称及窗格的名称。一般形式如下：注意：在网页文件一中，不应该使用标签。另外，网页文件二、网页文件三的文件名应和网页文件一中的内容（第6、7行）保持一致。本例浏览结果如图1-12所示。图1-12 使用框架 2、框架使用形式从上例可以看出，为使用框架，需要用到以下标签： FRAMESET：指出各框架的大小分配 ：指出框架中的文档，及框架的名称 ：当浏览器不支持框架时的显示信息。 3、框架间的尺寸设置可以使用以下形式将一个窗口分成左右排列的多个窗格： 三个窗格分别占30%、20%和50%的宽度。也可以将整个窗口分成上下排列的多个窗格，形式如下： 使用框架的嵌套可以将整个窗口先进行上下划分，再对其中的某些部分左右划分。或进行相反顺序的处理。请看下例1-11。【例1-11】纵横排列多个窗口纵横排列多个窗口 例中，首先将窗口上下分成20%和80%的高度，在上面窗格中显示网页文件L1_11a.html的内容，再将下方的窗格分成左右两部分，左边显示网页文件L1_11b.html的内容，右边显示网页文件L1_11c.html的内容。作为简单例子，请读者参照上例中的网页文件二和网页文件三写出本例中各网页文件的内容。本例浏览结果如图1-13所示。图1-13 纵横排列多个窗 4、各窗口间相互操作通过对窗口的命名，结合超链接，可以实现窗口间的相互操作。如下例所示：【例1-12】各窗口间相互操作网页文件一各窗口间相互操作 网页文件二（根据网页文件一的内容，本文件名应为L1_12a.html）各窗口间相互操作第一章第二章第三章第四章网页文件三（根据网页文件一和网页文件二的内容，本页的文件名应为L1_12b.html） 这里是第一章内容 验证本例中的代码时，首先要建立以上各文件内容，放在同一目录中，另外，像网页文件三那样写出另外三个文件作为第二章、第三章和第四章内容对应文档。再双击网页文件一所对应的文件图标，显示结果如图1-14所示。此时，单击窗口左侧的“第二章”，显示如图1-15所示结果。图1-14 多个窗口间相互操作 图1-15 单击“第二章”时的显示1.2.5 使用表单表单为Web页的设计者提供了一种在Web中实现双向通信的方法。通过表单可以获得用户提交的信息。如下形式的网页在浏览时会出现一个可供用户输入信息的输入框。但要真正通过表单向服务器提交信息，还需要遵循一定的格式。表单使用的一般形式为： form action=“url” method=GET(或POST) 表单域的定义 用标签括起来的整个内容称为表单，在form标签中可设置的几个常用属性含义如下：action属性，指出当表单提交时由哪个网页或程序接收表单域中的信息。但由于HTML网页不能接收表单的输入信息，所以，使用本章所学内容，无法知道当用户提交表单时，浏览器发送了什么。如果你的网络是畅通的，为了检查表单发送了什么，可以将表单的信息发送到邮箱中，形式如下： action=“mailto:”其中：是作者的邮箱地址，在你写的网页中应该写上你的邮箱地址。否则，建议读者暂时省去action这一项，即不发送信息，等学完了第7章后，就可以方便地使用ASP网页文件来接收表单信息了。Method属性，指出表单信息的发送方式，其值有GET和POST两种，关于两种方式的不同点，将在第7章中进行深入的讨论。Name属性，指出表单的名称。可供客户端脚本中使用和接收表单信息的程序中使用。例如： 表单中出现的一些供用户输入信息的地方称为表单域，简称为域。根据表单域输入信息类型的不同，表单域的形式也有所不同，最常见的是用标签引导的表单域，其一般形式为： 其中：类型属性(type)说明表单域的具体类型，它的值可以是text、password、checkbox、radio、hidden、submit、reset等，分别表示文本框、密码框、复选框、单选框、隐藏对象，提交按钮和复位按钮。名称属性(name)说明表单域的名称，当表单被提交时，表单域的名称和值一起发送到服务器，接收程序通过名称来得到相应表单域中输入的值，所以，真正用于输入信息的表单域需要有一个名称，若表单中只有一个提交按钮，可以不设置名称。名称属性之后可以放入一些用脚本语言编写的事件程序。对此将在以后各章中介绍。以下分别讨论各种不同类型表单域的使用形式。 1、文本框和密码框文本框和密码框都用标签指出，文本框类型用text指定，密码框类型用password指定，除了都有名称(name)属性外，文本框和密码框都有value、size、maxlength等属性，分别用于指出它的初始值、显示的长度和允许输入的最大字符数，Maxlength属性缺省时，表示不限制用户输入字符的个数。文本框和密码框的不同点在于密码框中输入字符时显示成“”。【例1-13】文本框、密码框你的姓名：你所在部门：密码：本例浏览时显示如图1-16所示结果。图1-16 表单中的文本框和密码框例中没有为表单指明信息发送到哪里，因为目前还没有讨论如何接收表单信息，把它指定到任何地方都可能产生一个不必要的错误提示。指定使用GET方式来发送信息，当提交时可以在地址栏中发现其中的变化。例中放置了一个用于让用户输入姓名的文本框，它的名称为“姓名”，使用中文名称并不一定是好的做法，在这里只是为了便于阅读，建议读者使用英文字符串作为表单域的名称。例中指定姓名框显示成8个字符宽度，但可以输入任意多个字符。例中设置了一个用于输入部门名称的文本框，文本框的名称为“部门”，考虑到输入的最大可能是“计算机系”，对该文本框中设置了它的初始值为“计算机系”。例中设置的密码框限制输入的最大长度为10个字符，对于密码框一般情况不允许输入汉字。例中还放置了一个提交按钮和一个复位按钮，他们都没有设置名称属性。 2、复选框和单选框复选框和单选框也是用标签来指定，复选框的类型用checkbox表示，单选框类型用radio表示，复选框和单选框都可以用checked标识设置初始状态(选中还是没有选中)，另外可以用value属性设置当选中时发送的值，若value缺省时，将用“on”作为值发送。多个复选框可以有相同的名称，这时，其值将形成一个数组。一组单选框应该具有相同的名称。【例1-14】复选框和单选框白菜鱼蛋糕牛奶咖啡雪碧例中设置了三个复选框，它们名称各不相同，当选中时，前两个发送“on”作为值，第3个选中时，将发送“蛋糕”两个汉字作为其值。例中还设置了三个单选框，它们名称均为“饮料”，初始状态“咖啡”为选中状态，当浏览时，若选中的是“牛奶”或“咖啡”，发送的值都是“on”，若选中的是“雪碧”，发送的值将是“雪碧”，可以看出对于单选框，为了便于区分用户选中了哪一个，应设置其不同的value属性值。本例浏览结果如图1-17所示。图1-17 表单中的复选框和单选框 3、下拉列表框和滚动列表框下拉列表框和滚动列表框都用标签指出，它们都有名称属性(name)，对于滚动列表框用SIZE属性指出同时列出的选项个数，用multiple标识说明该列表框中是否可以同时选择多项。列表框中列出的每一个选项用option标签来指出，例中给出了三种常见的形式。【例1-15】下拉式列表框请选择部门：计算机专业网络与通讯专业多媒体专业请选择现有职位：主任主任秘书组长例中选择部门用了一个下拉的列表框，名称了bm，它有