发信人: hujiyang()
整理人: microant(1999-08-02 12:13:17), 站内信件
|
HTML入门手册
第八讲：讲解List和Form
作者：飞翔鸟软体驿站 Mars
随着我们学习的深入，HTML的讲座也进入的中后期，记住本文绝非讲解所有HTML
标记的使用方法，重点是对整个文档结构的一个介绍，让大家明白HTML是怎样工
作的，因此在讲解上一定会存在很多简化的地方，如果你有兴趣了解所有的HTML
4.0标记的话，我建议你还是去买一本这样的手册，而本文仅介绍最基础、最实用
的HTML方法。从这次开始每篇文章包含的内容也要增加一些，你可要做好准备哦
！
今天我首先要给大家讲的是在网页中的列表方法。在网页制作中，也经常要碰到
这种事情，譬如对于一组数据进行编写时，列表项就是最好的选择，而列表可能
也是HTML中比较混乱的一部分，它有很多可以互为替代的部分，我只在这里讲解
OL、UL和DL三个标记，别着急，这三部分的使用方法都大致相同，只是在浏览器
中的表示形式略有不同罢了。
标记
用来表示数字的列表，它其中包含而个子项：<LH>表示列表的标题，- 表
示列表项，这两项都是不需要封口的标记。举个列表的最简单的例子：
<LH>飞翔鸟联盟站点
- <a href=”http://joysoft.soim.net”>飞翔鸟软体驿站
- <a href=”http://birds.east.net.cn”>飞翔鸟硬件资讯
- <a href=”http://vbpost.yeah.net”>中国VB联盟
- <a href=”http://gamezone.188.net”>飞翔鸟游戏地带
（图1）
还有几个参数，使它有更大的灵活性，比较主要的是Type属性，具体内容如
下：
Type
值
“A”
以大写字母作为列表排列
“a”
以小写字母作为列表排列
“I”
以大写罗马数字作为列表排列
“i”
以小写罗马数字作为列表排列
“1”
设置数字标号
从以前学到的知识，这些参数对于你应该已经是小菜一碟了，OL还有一个参数是
“Start”，可以赋予它一个值以指定列表项符号的起始值，比如说列表可以不必
从“1”或“A”开始，也可以从“100”或者“C”开始在HTML中都是可以的。
和OL有序排列相对的是UL的无序排列，它将以一些特殊的符号来表示列表项，其
使用方法和OL相似，UL的列表项也使用- 和<LH>为标记，它的Type有三个内置
值：disc、square和circle，分别表示圆饼（为默认值）、方块和圆圈。在列表
标记中，各项是可以互相嵌套的，这样也就可以形成很多的层次：
<LH>太阳系的成员
- 太阳
<UL type=circle>
- 金星
- 木星
- 水星
- 火星
- 土星
- 地球
<UL Type=square>
- 月球
- 冥王星
- 天王星
- 海王星
- 其他小行星和彗星等等
（图2）
<DL>标记叫称定义列表，又称词汇列表，就好象词典里的词条，主要用于比较冗
长的列表项，有两个子标记，<DT>表示词条项，<DD>表示释意项，使用比较容易
，就不再做更多的解释。时时刻刻要记住的是，HTML是一种可以自由组合的标记
语言，你可以把任何学到的标记组合起来使用，列表项也是如此，OL里可以包含
UL，UL里也可以包含DL，因此不要再问我如何定义各种颜色的列表项等问题，这
些都是非常容易就可以实现的。
列表的方法你已经掌握了，下面我将告诉你如何在网页中使用窗体或者说是表单
。如果你学过Windows下的任何一种编程语言那么解释这个问题就轻而易举了，但
是如果你没有接触过编程，那么……还是听我讲吧。什么是表单？你在Windows操
作中一定遇到过很多要填写数据的窗口，填写完成后一按“确认”或“OK”键，
哈！数据输入计算机了。表单的作用也是在网页中建立这种输入机制，使用户可
以向服务器或其他地方的程序提供信息，个人主页中经常要用到的留言板就一定
要使用表单完成。那么表单把数据发向何处呢？对于留言板这些东西，表单的任
务一般是把内容发送到服务器上的CGI（公共网关接口）程序上，这些程序可以从
传递的信息中把它们解析出来，并进行处理，然后以程序指定的程序重新发回到
浏览者的浏览器中输出结果。但是为什么一定要使用CGI呢，HTML中虽然也可以有
脚本程序，但是这些程序的功能都是不完整的，不能对外部文件进行操作，也就
是说在服务器上没有读写能力，这也很容易理解，因为如果Javascript等脚本存
在这种功能，很可能会被用心不良者利用，他就可以轻易的在服务器或客户的机
器上删除或复制文件，造成破坏，而CGI程序有这种读写权限。
那么HTML中的表单是怎样工作的呢？我会为你解释，但是肯定不会是非常详细的
，对于这部分内容你现在了解一二就可以了，具体的如何操作，使用FrontPage或
Dreamweaver就可以完成，还是那句话：学习HTML是为了方便以后使用所见即所得
编辑器。
首先表单的首要标记是<Form>，也是创造表单的第一步，一个页面中可以包含多
个表单，而<Form>就是它们的分界线，<Form>也是表示表单如何工作的重要标记
，它有两个重要参数：Action和Method，Action表示表单要提交到的地点，一般
为一个CGI程序，如：“http://www.somewhere.com/cgi-bin/talk.pl”（CGI程
序可以用各种编程语言编写，如C、VB、Java，这里的.pl为Perl语言），Method
表示表单发送的方法，有两种：Get（默认方法）和Post，它们之间略有区别，主
要是传输的信息量和接收的接口不同，Get有255个字符的限制，而Post没有（另
一个参数是Target，和链接标记的Target用法一样）。
包含在<Form>和</Form>中的内容都是表单的内容，在HTML中设置了一些内部控件
，基本和Windows窗口的形式相同，下面一一进行讲解：
内部控件被分成了三大类：Textarea、Select和Input。Textarea表示可以输入多
行的文本框，有两个参数：Rows表示文本框的行数，Cols表示文本框的列数，如
：
<textarea name=”t1” cols=40 rows=4>Do you see anything</textarea>
表示宽40列、高4行的文本输入框，注意这里还有一个Name属性，可以随意设置，
但是如果要发送给CGI时一定要和它规定接收的参数名一样，而且表单中每个元素
都要有“Name”，如果缺少的话，很可能就无法工作，并且这些内部控件一定要
包含在Form中，在IE中它们可以单独显示，而在Netscape中则不可。
Select元素，可以表示成一个下拉式的选择框，可以对于其中的元素进行选定，
它的参数有Size，如果等于1，则按下拉框显示，如果大于1，则按滚动框显示，
Multiple表示可以多选，它没有值。Select中的选项用Option表示，Option的Va
lue属性表示选项的名称，是给CGI程序看的，而“<option value=o1>……”中“
……”的内容则是给浏览者看的，另一个属性是Selected，它表示表单在初始化
时即有默认选项被选定。比如：
<select name=hobby size=3 multiple>
<option value=music selected>音乐
<option value=sports>运动
<option value=reading>读书
<option value=collection>收藏
<option value=art>艺术
<option value=writing>写作
</select>
好这次的内容已经很多了，留下表单的Input的内容下次再讲，Input也是表单中
变化最多的元素，下次我还会告诉你怎么在网页中使用表格，怎样在一个浏览器
窗口中显示多个页面，很多很多内容，请下次再来吧。
HTML入门手册
第九讲：讲解From和表格
作者：飞翔鸟软体驿站 Mars
上次讲解表单（或者叫“窗体”）的前半段内容，今天我们将继续其最重要元素
“Input”的讲解，这次之后的内容还有很多，因此省去废话若干，大家用心学吧
:)。
Input元素和以往我们接触的元素有所不同，它根据类型（Type）的不同表现为不
同的形态，分别为单行文本框、密码文本框、Check按钮、无线按钮、隐藏域和按
钮，而按钮又分为三种，它们都有什么用处且听我慢慢道来。
单行文本框――Text
刚才说过，Input可以呈现许多形态，它是通过“Type”参数决定的，文本框的“
Type”类型就是“Text”，同时它也是默认的Input类型，也就是说，当Input类
型未设置时，它的形态就是单行文本框，它还有其他几个参数，如Size，表示文
本框的长度，用字符数来表示；Maxlength为最大长度，表示文本框允许的最大字
符数；Value表示文本框内的预设文字，比如你想为浏览者进行一二提示或设置默
认的文字等等，也可以用网页中的脚本程序访问这些值；当然还有Name属性。譬
如下面的例子：
<input type=text name=”mailaddress” size=20 maxlength=18 value=”you
rname@somewhere”>
Input并非容器性的标记，它的值或者说是内容都在Value属性中。
密码文本框――Password和隐藏域――Hidden
大家在网上申请各种服务的时候少不了填写密码吧，密码框的外形和文本框完全
一样，唯一的不同就是其中的文字用“*”代替，为的是不让用心不良者偷窥到你
的隐私；Hidden是一种元素，但不在网页中显示，它本身也并不希望被别人看到
，主要用于一些脚本程序的幕后数据处理，Password和Hidden的属性与Text完全
一样，这里就不再多做解释。
Check按钮――CheckBox
CheckBox就相当于多项选题，你可以从很多个选项中选择1个到若干个选项，它必
备的属性有：Name、Value，还有一个Checked属性，可以使CheckBox在网页装载
的时候就成为默认选项，它不需任何赋值，如：
<p>选择你喜欢的运动：</p>
<input type=checkbox name=”ballgame” value=”球类”>球类<br>
<input type=checkbox name=”bike” value=”自行车”>自行车<br>
<input type=checkbox name=”swimming” value=”游泳”>游泳<br>
<input type=checkbox name=”climbing” value=”登山”>登山
无线钮――Radio
无线钮和Check按钮相反，它代表单选题，多个选项（同一组）中的各项互相排斥
，你只能从中选定一个作为最终选项，它的属性参数和CheckBox完全相同，唯一
的区别是它的选项的Name使用相同的值以确定选项间是否都为同一组，而且如果
有同一组中有两个以上的无线钮都为默认选定状态（Checked），那么浏览器将把
最后一个选项作为默认选项。Radio的具体使用如下：（图1）
<p>选择你最喜欢的运动：（只可选择一项）</p>
<input type=radio name=" sports" value="球类"checked>球类<br>
<input type=radio name=" sports" value="自行车" checked>自行车<br>
<input type=radio name=" sports" value="游泳">游泳<br>
<input type=radio name="sports" value="登山">登山
记住，Checkbox和Radio的Value属性都是不可见的，隐藏有必要在选项外面用文
字表示出来。
按钮
在表单中按钮有三种：普通按钮（type=buttton）、确认按钮（type=submit）和
重置按钮（type=reset），按钮的其他属性有Name和Value，Value将显示在按钮
上，普通按钮的作用没什么可说的，一般是配合脚本程序使用，Submit和Reset相
当于编程中的Default和Cancel属性，听不明白吗？那么这么说吧，当你在表单中
单击回车的话就等同于按下了Submit按钮，同时触发脚本的onsubmit事件，则可
以把表单中的数据发送到<Form>标记中指定的CGI上去；当你按下键盘上的ESC键
时就等同于按下了Reset按钮，这时表单中的数据将被恢复到原始的初始状态。如
果觉得这些按钮太枯燥的话，HTML还允许你使用图形作为按钮的替代，把Type设
置为Image即可，其他属性和插入图形时用到的都一样。
上面我又简要介绍了Input元素的用法，表单的介绍也基本结束了，最后要记住，
IE允许这些表单元素独立存在，而不需要<form>的存在，而在Navigator中，无论
是按钮，还是文本框等等元素都要在表单中，否则浏览器将视它们为无效。
别松劲，让我们继续讲，下面的内容是如何在网页中使用表格。
实际上表格在网页中作用并不是用来填写如财务管理或是其他的数据，它被应用
于网页中最多的还是对网页内容的布局。大家仔细想一想，运用我们前面学到的
所有知识是否能够做到使两列文字分成两栏并排显示？恐怕不能吧，不过运用表
格就容易的多，你把表格分成两栏，分别把内容填写进去不就得了。FrontPage或
Dreamweaver等软件有很好的制表功能，如果使用手动编写对于一个复杂嵌套的表
格来说是很困难的，所以我不赞成大家使用源代码编写表格，不过要了解它是如
何构成的，才能在网页中顺利的使用表格，这里我仅做简单的介绍，并不涉及所
有表格的标记，这样对大家也有好处，实用为主嘛！
表格的打头标记是<table>它表示一个表格的起始和中止，它有一个border属性，
值为象素数值，表示表格边框的宽度，默认为Border=0，即无边框，表格是以行
组成的，要开始新的一行就要使用<tr>标记，而行中间的每一个小格则要使用<t
d>，所以一个最简单的表格就是这样：
<table>
<tr><td>最简单表格</td></tr>
</table>
这三个标记都有“水平对齐属性”（align），分别为：left、right和center，
而<td>标记还有一个“垂直对齐属性”（Valign），分别为：top、bottom和mid
dle，middle为默认值；它们都支持的属性还有bgcolor（背景色）、bordercolo
r和background（背景图象），使用和我们从前讲的Body的背景色和背景图象属性
相同，这样就可以在网页中定义色块以标记不同的内容，增加网页的活泼程度。
<table>和<td>标记还可以通过Width和Height属性制定宽度和高度，数值可以是
象素值也可以是百分比，要记住百分比是相对于父标记的。那么还有一个问题，
怎么实现行或列的跨越呢？<td>还有一个colSpan和rowSpan，它们所等于的数值
就表示它可以占据行或列的位置，比如：<td rowspan=2>那么这个单元格就占据
一行中两个列的位置，如果是colspan=2，那么就表示这个单元格占据一列中两行
的位置，rowspan和colspan也可以并存，相关的依此类推。另外表格中也可以再
嵌套表格，这也是主页制作中一个经常用到的方法，下面我给出一个完整的表格
的例子：（图2）
<table border="1" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="66%" colspan="2">合并两列</td>
<td width="34%" align="center" bordercolor="#FF0000">红色边框，居中对齐
</td>
</tr>
<tr>
<td width="33%" bgcolor="#000080"> </td>
<td width="33%" bgcolor="#000080"> </td>
<td width="34%" rowspan="2">合并两行</td>
</tr>
<tr>
<td width="33%" bgcolor="#000080"> </td>
<td width="33%" bgcolor="#000080">
<div align="center">
<table border="1" cellpadding="0" cellspacing="0" width="50%">
<tr>
<td width="100%">表格2</td>
</tr>
<tr>
<td width="100%"> </td>
</tr>
</table>
</div>
<p> </td>
</tr>
</table>
关于表格的使用，我还是推荐你使用专门的编辑软件，徒手制作实在是太费劲了
，另外还要注意，在制作主页的时候不要把很长的内容都放置在一个表格中，这
样如果下载速度不通畅的话，当浏览器未读到</table>的时候是不会显示结果的
，所以比较好的做法是分成几个并列的表格以加快显示速度。
好这次的内容就到这里，下一次我将结束HTML这个部分，下次的内容还有不少，
比如网页中帧的控制，一些特殊标记的介绍，还有称为IE扩展和Navigator扩展的
东东，有兴趣的话继续看。
HTML入门手册
第十讲：讲解Frame、其他标记、结束语
作者：飞翔鸟软体驿站 Mars
终于，这个教程的HTML部分到了最后一讲，这并非代表我已经把所有HTML的内容
教给了你，而只能说是一小部分，但也是最主要的部分，人说：“他山之石，可
以攻玉”、“举一反三”就是这个意思了吧，你如果掌握了这十讲的所有内容，
那么其他未知的HTML标记对于你来说也并不可怕了，我还是要强调，本文介绍的
是HTML的实质，具体的语法参数无需完全记在心里，到时候再去查阅参考书吧。
闲话少说，还是让我们书归正传。
上次我向你介绍了表单（窗体）和表格的使用，尤其是表格，是网页中很重要的
定位布局方法，大家切记，当然这种布局不是精确的，在HTML中也提供了精确定
位的方法，只不过IE和Navigator又出现了分歧，我会在下文为你做简单的介绍，
现在还是让我们来看看如何在一个浏览器窗口中显示多个页面。
要实现这种效果就要用到一个新的元素frame，也就是“框架”，但大部分的书中
称它为“帧”，为了大家以后阅读书籍不至于产生冲突，我在文章中还是称其为
“帧”，但是大家一定要记住用“框架”来形容它才更贴切，也更容易理解。要
在一个浏览器窗口中显示多个页面，实际上非常简单，要做的就是定义一个框架
文件，这个文件中标明了所包含的其他页面位置、每个页面的大小和相关属性等
等。这个页面和其他的HTML页面有一点区别，就是它没有Body标记，而取代为Fr
ameset和Frame标记。Frame是包含在Frameset中的，Frameset表示一个帧的划分
，而Frame表示这个划分中的单元，这是一个简单的框架文件的内容：
<html>
<head>
<title>Frame演示页面</title>
</head>
<frameset cols=”100,*”>
<frame src=”index1.htm”>
<frame src=”index2.htm”>
</frameset>
</html>
如图一。
呵呵，神奇吗？我这就为你解释。Frameset有两个最基本的参数：Cols和Rows，
它表示帧的划分（列和行），它们可以使用数值（象素值）、百分比或比例表示
，而且两者中至少应该有一个，如果帧为空或为一行一列，那么它也失去了本身
的意义。如<frameset cols=”100,200,500”>表示划分窗口为三列分别为100，
200，500象素宽的部分；或<frameset rows=”25%,50%,25%”>表示把窗口划分为
三行，分别占据窗口高度的25％、50％和25％；或<frameset rows=“*,2*,3*”
>，表示把窗口划分为三行，分别占据窗口高度的1/6、1/3（2/6）和1/2（3/6）
；以上举的是仅有行或者仅有列的情况，如果是这样：<frameset cols=”*,2*”
rows=”40%,60%”>表示把窗口分割成4部分，大小分别为：1/3W、40%H，2/3W、
40%H，1/3W、60%H和2/3W、60%H（W表示窗口的宽，H表示窗口的高）。并且三种
划分的表示方法可交叉使用，如<frameset cols=”100,25%,*”>表示把窗口分为
三列，分别占据窗口宽度的100象素、25%，“*”表示窗口宽度减去100象素和窗
口25%剩下的宽度。如果象制定象素数或百分比时加起来不足或超过窗口宽度或高
度时，不必担心，浏览器将把最后的一个调整为剩下的宽度或高度。看了上面的
话，你是不是感到是在说绕口令呢，其实仔细看，你会发现它其实很简单。把帧
划分完了以后，就该定义各个帧的内容了，也就要用到<frame>，它可不是一个容
器型的标记哦，它的参数“src”的值为一个HTML文件，<frame>排列的顺序是从
左至右，从上到下。另外如果想要完成一个不规则的帧的话，可以在<frameset>
中再嵌套<frameset>，如：
<frameset cols=”*,2*”>
<frame src=”index1.htm”>
<frameset rows=”20%,*”>
<frame src=”index2.htm”>
<frame src=”index3.htm”>
</frameset>
</frameset>
如图2。
这就是帧的全部内容吗，其实还有很多参数呢，接着往下读吧。对于规定帧的外
形，Frameset有一个参数：border，大家可以看到使用了帧的页面有明显的边界
分割线，当漂亮的主页都有一个统一分割的布景，而这种分割线可是大煞风景，
破坏了整个画面，这时你只需把Border设为0，可恶的分割线消失了:)。Frame标
记还有几个参数：Noresize，这个参数不需要赋值，添加后帧的边界固定，不会
再被拖动；scrolling参数表示该帧是否显示滚动条，有三个可选的值：Yes/No/
Auto，分别表示“总是有”、“总是无”和“自动”；Name属性也是帧所必备的
，它和另一个属性Target配合，可以表示页面间的关系，如下的帧：
<frameset cols=”*,3*”>
<frame name=”menu” src=”menu.htm” target=”main”>
<frame name=”main” src=”content.htm”>
</frameset>
这样一个帧，左边为菜单项，也就是我们平时说的导航栏，它一般罗列着主页的
栏目名称，右边是主页的内容的显示区域，我们当然希望单击导航栏中的栏目，
在右边的帧中显示，这就是name和target的作用了，就不用我多解释了吧。还是
这个页面menu和main页面相对于框架页面都是子页面，框架页面也就是它们的父
页面，如果要点击链接使页面代替整个框架，请在标记中加上”target=_par
ent”表示链接代替父页面，这也是我当时在讲链接标记时留下未讲的。
帧的使用也要适度，因为每个帧都相当于一个浏览器窗口，所以过多的帧也是很
耗费系统资源的，严重的时候甚至会使系统崩溃，并且在打开帧的窗口时，几个
页面同时装载，很容易造成短时的系统“忙”，而使浏览器死掉，这在IE4中表现
尤为严重，我建议页面中的帧最多不要超过三个或四个，过多的也会造成正文显
示面积过小，影响浏览，请大家注意。
好，讲到这里，我们的HTML主要部分就应该算是完成了，还有一些重要的标记，
但是依据现在大家的水平和需求是大多用不上的，如<emb>标记表示插件，可以在
浏览器中插入某些特殊的程序，以完善浏览器的功能，如播放音乐等等，再如<o
bject>标记可以向网页中插入对象，包括控件和Java小程序等等，不过Navigato
r是不支持控件（ActiveX）的，还有<script>标记可以向网页中加载Javascript
或vbscript等脚本程序（即未编译的程序），<style>标记可以向网页中插入样式
单（CSS）等。
还有一部分标记是IE或Navigator独有的，它们被称为IE扩展或Netscape扩展，比
较代表性的是IE的跑马灯标记<marquee>和Navigator的<blink>，前者会在屏幕上
出现滚动的字幕，否则会产生闪烁的字符，但是只能在自家的浏览器中才能看到
效果，而在对方的浏览器中将忽略各自不识别的元素。
最后再说一句精确定位的问题，Navigator首先提出了层的概念，并且使用了<la
yer>标记，它可以通过left、top、index和visibility等属性精确的定义层的位
置、Z-index和可见性等等。但Layer标记并没有被认证，而正式的使用方法，也
是被IE支持的方法是使用样式单，至于什么是样式单，如何实现，我会在以后的
课程中讲到，现在就匆匆讲解很可能让你一头雾水，你只需记得网页有精确定位
的功能就可以了。
使用HTML、脚本程序、CSS和Flash，甚至VRML（虚拟现实）你就能缔造出世界上
最绚烂的网页，而你现在只是开始了第一步而已，我们的教程并没有结束，我会
在下次为你展开一个新的话题，请继续关注。（我提议你最好去买一本HTML4的工
具书）
(全文完)
--
※ 来源:．月光软件站 http://www.moon-soft.com．[FROM: 202.102.28.20]
|
|