6、HTML语言剖析之清单标记

<OL> <LI>
<UL>
<MENU> <DIR>
<DL> <DT> <DD>  
■ <OL> <LI> : 　

<OL>称为顺序清单标记。<LI>则用以标示清单项目。
所谓顺序清单就是在每一项前面加上 1,2,3... 等数目，又称编号清单。
<OL> 的参数设定（常用）：
例如： <ol type="i" start="4"></ol>

type="i"
设定数目款式，其值有五种，请参考 右表，内定为 type="1"。
start="4"
设定开始数目，不论设定了哪一数 目款式，其值只能是 1,2,3.. 等整 数，内定为 start="1"。
Type Numbering style
1 arabic numbers 1, 2, 3, ...
a lower alpha a, b, c, ...
A upper alpha A, B, C, ...
i lower roman i, ii, iii, ...
I upper roman I, II, III, ...



<LI> 的参数设定（常用）：
例如： <li type="square" value="4">

type="square"
只适用于非顺序清单，设定符号款式，其值有三种，如下，内定为 type="disc"：
符号  是当 type="disc" 时的列项符号。
符号  if" width=10 height=10 border=0> 是当 type="circle" 时的列项符号。
符号  是当 type="square" 时的列项符号。
value="4"
只适用于顺序清单，设定该一项的数目，其後各项将以此作为起始数目而递增， 但前面各项则不受影响，其值只能是 1,2,3.. 等整数，没有内定值。
例子： HTML Source Code （原始码） 浏览器显示结果
My best friends:
<ol>
<li>Michelle Wei
<li>Michael Wan
<li>Gloria Lam
</ol>  My best friends:
Michelle Wei
Michael Wan
Gloria Lam



■ <UL> ： 　

<UL>称为无序清单标记。
所谓无序清单就是在每一项前面加上 、、 等符号，故又称符号清单。
<UL> 的参数设定（常用）：
例如： <UL type="square">

type="square"
设定符号款式，其值有三种，如下，内定为 type="disc"：
符号  是当 type="disc" 时的列项符号。
符号  是当 type="circle" 时的列项符号。
符号  是当 type="square" 时的列项符号。
注意：由于 <UL> 及 <LI> 都有 type 这个参数，两者尽可能选用其一。

例子： HTML Source Code （原始码） 浏览器显示结果
My Homepages:
<ul>
<li>Penpals Garden
<li>ICQ Garden
<li>Software City
<li>Creation of Webpage
</ul>  My Homepages:
Penpals Garden
ICQ Garden
Software City
Creation of Webpage



■ <MENU> <DIR> ： 　

这两个标记都不为 W3C 所赞同，希望用者能以 <ul> 及 <ol> 代之。
<MENU> 及 <DIR>，基本上它和 <ul> 是一样的，在一些特别的浏览器可能表现出 <ol> 的 效果，于旧版的 IE 或 NC 标记 <DIR> 不显示符号或数目。两标记的用法与 <ul> 完全一 样。
例子： HTML Source Code （原始码） 浏览器显示结果
My Homepages:
<dir>
<li>Penpals Garden
<li>ICQ Garden
<li>Software City
<li>Creation of Webpage
</dir>  My Homepages:
Penpals Garden
ICQ Garden
Software City
Creation of Webpage



■ <DL> <DT> <DD> : 　

<DL>称为定义清单标记。 <DT> 用以标示定义条目，<DD> 则用以标示定义内容。
所谓定义清单就是一种分二层的项目清单，其不故符号及数目。
三个标记都没有常用的参数。而 <DT> <DD> 可以独立使用，只是一些旧的浏览器并不支 援，如 IE 3.0。常用的如 <DD> 标记可用以制造段落第一个字前面的空白。

例子： 原始码 <dl>
<dt>How to use Definition List
<dd>First, you should not place paragraph tag right after or before a list structure or between the items of a list. In cerntain contexts, use of extra paragraph tags should always be avoided, when you realize this concept, it is quit easy to write a HTML.
<dt>Other things to know
<dd>We usually put only ONE Definition tag following the Definition Term tag, more than one DD tag is not recommanded. Besides, unlike Definition List is a nonempty tag, both Definition Term and Definition Description are empty tags.
</dl>  
显示结果 How to use Definition List
First, you should not place paragraph tag right after or before a list structure or between the items of a list. In cerntain contexts, use of extra paragraph tags should always be avoided, when you realize this concept, it is quit easy to write a HTML.
Other things to know
We usually put only ONE Definition tag following the Definition Term tag, more than one DD tag is not recommanded. Besides, unlike Definition List is a nonempty tag, both Definition Term and Definition Description are empty tags.

7、HTML语言剖析之表格标记


表格标记
<TABLE> <TR> <TD>
<TH>
<CAPTION>  
■ <TABLE> <TR> <TD> ： ▲Top

这三个标记是定义表格的最重要的标记，可以说只学这三个己足够。
<TABLE>是一个容器标记，意思是说它用以声明这是表格而且其他表格标记只能在他的 范围内才适用，属容器标记的还有其他。
<TR>用以标示表格列（row）
<TD>用以标示储存格（cell）
<TABLE> 的参数设定（常用）：
例如： <table width="400" border="1" cellspacing="2" cellpadding="2" align="CENTER" valign="TOP" background="myweb.gif" bgcolor="#0000FF" bordercolor="#FF00FF" bordercolorlight="#00FF00" bordercolordark="#00FFFF" cols="2">


width="400"
表格宽度，接受绝对值（如 80）及相对值（如 80%）。

border="1"
表格边框厚度，不同浏览器有不同的内定值，故请指明。

cellspacing="2"
表格格线厚度，请看例子三，那是加厚到 5 的格线。

cellpadding="2"
文字与格线的距离，请看例子四，那是加至 10 的 padding。

align="CENTER"
表格的摆放位置（水平），可选值为： left, right, center，请看例子五或六，那表格 是放于中间的，为怕一些浏览器不支援，故特加上居中标记<CENTER>，只是多 层保证而己，当然只用<CENTER>亦可。

valign="TOP".
表格内字画等的摆放贴　位置（垂直），可选值为： top, middle, bottom。

background="myweb.gif"
表格　纸，与 bgcolor 不要同用。

bgcolor="#0000FF"
表格底色，与 background 不要同用，请看例子六。

bordercolor="#FF00FF"
表格边框颜色，NC 与 IE 有不同的效果，请看例子六。

bordercolorlight="#00FF00"
表格边框向光部分的颜色，请看例子二。『只适用于 IE』

bordercolordark="#00FFFF"
表格边框背光部分的颜色，请看例子二，使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。『只适用于 IE』

cols="2"
表格栏位数目，只是让浏览器在下载表格是先画出整个表格而己。
<TR> 的参数设定（常用）：
例如：<tr align="RIGHT" valign="MIDDLE" bgcolor="#0000FF" bordercolor="#FF00FF" bordercolorlight="#808080" bordercolordark="#FF0000">

align="RIGHT"
该一列内字画等的摆放贴　位置（水平），可选值为： left, center, right。

valign="MIDDLE"
该一列内字画等的摆放贴　位置（垂直），可选值为： top, middle, bottom。

bgcolor="#0000FF"
该一列底色，请看例子五。

bordercolor="#FF00FF"
该一列边框颜色，请看例子三。『只适用于 IE』

bordercolorlight="#808080"
该一列边框向光部分的颜色，请看例子三。『只适用于 IE』

bordercolordark="#FF0000"
该一列边框背光部分的颜色，请看例子三，使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。『只适用于 IE』
<TD> 的参数设定（常用）：
例如：<td width="48%" height="400" colspan="5" rowspan="4" align="RIGHT" valign="BOTTOM" bgcolor="#FF00FF" bordercolor="#808080" bordercolorlight="#FF0000" bordercolordark="#00FF00" background="myweb.gif">

width="48%"
该一储存格宽度，接受绝对值（如 80）及相对值（如 80%）。

height="400"
该一储存格高度。

colspan="5"
该一储存格向右打通的栏数。请看例子六

rowspan="4"
该一储存格向下打通的列数。请看例子六

align="RIGHT"
该一储存格内字画等的摆放贴　位置（水平），可选值为： left, center, right。

valign="BOTTOM"
该一储存格内字画等的摆放贴　位置（垂直），可选值为： top, middle, bottom。

bgcolor="#FF00FF"
该一储存格底色，请看例子四。

bordercolor="#808080"
该一储存格边框颜色，请看例子三。『只适用于 IE』

bordercolorlight="#FF0000"
该一储存格边框向光部分的颜色，请看例子三。『只适用于 IE』

bordercolordark="#00FF00"
该一储存格边框背光部分的颜色，请看例子三，使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。『只适用于 IE』

background="myweb.gif"
该一储存格　纸，与 bgcolor 任用其一。
例子一： 原始码 <table width="60%" border="1">
<tr><td>只有一个储存格（cell）的表格</td></tr>
</table>  
显示结果   只有一个储存格（cell）的表格




例子二： 原始码 <table width="60%" border="0" bordercolorlight="#FF00FF" bordercolordark="#FF0000">
<tr><td>第一列第一栏</td><td>第一列第二栏</td></tr>
</table>  
显示结果   第一列第一栏 第一列第二栏




例子三： 原始码 <table width="60%" border="0" cellspacing="5">
     <tr bordercolor="#0000FF">
<td>第一列第一栏</td>
<td>第一列第二栏</td>
     </tr>
     <tr bordercolorlight="#FF00FF" bordercolordark="#00FF00">
<td>第二列第一栏</td>
<td>第二列第二栏</td>
     </tr>
</table>  
显示结果   第一列第一栏 第一列第二栏
第二列第一栏 第二列第二栏




例子四： 原始码 <table width="60%" border="0" cellpadding="10">
     <tr>
<td bgcolor="#FFCCE6">第一列第一栏</td>
<td bgcolor="#FFFFC6">第一列第二栏</td>
     </tr>
     <tr>
<td bgcolor="#FFD9FF">第二列第一栏</td>
<td bgcolor="#DAB4B4">第二列第二栏</td>
     </tr>
</table>  
显示结果   第一列第一栏 第一列第二栏
第二列第一栏 第二列第二栏




例子五： 原始码 <center>
<table width="60%" cellspacing="0" cellpadding="2" align="CENTER">
     <tr>
<td bgcolor="#FFD2E9">第一列第一栏</td>
<td bgcolor="#FFDAB5">第一列第二栏</td>
<td bgcolor="#FFFFB5">第一列第三栏</td>
     </tr>
     <tr bgcolor="#C0C0C0">
<td>第二列第一栏</td>
<td>第二列第二栏</td>
<td>第二列第三栏</td>
     </tr>
</table>
</center>  
显示结果   
第一列第一栏 第一列第二栏 第一列第三栏
第二列第一栏 第二列第二栏 第二列第三栏



例子六 原始码 <center>
<table width="350" border="1" cellspacing="0" cellpadding="2" align="CENTER" bgcolor="#FFC4E1" bordercolor="#0000FF">
     <tr>
<td>第一列第一栏</td>
<td colspan="2">第一列 之 第二栏及第三栏</td>
     </tr>
     <tr>
<td rowspan="2">第二列及第三列 之 第一栏</td>
<td>第二列第二栏</td>
<td>第二列第三栏</td>
     </tr>
     <tr>
<td>第三列第二栏</td>
<td>第三列第三栏</td>
     </tr>
</table>
</center>  
显示结果   
第一列第一栏 第一列 之 第二栏及第三栏
第二列及第三列 之 第一栏 第二列第二栏 第二列第三栏
第三列第二栏 第三列第三栏



■ <TH> ： ▲Top

<TH>与<TD>同样是标示一个储存格，唯一不同的是<TH>所标示的储存格中的文字是以粗 体出现，通常用于表格第一列以标示栏目。它的用法是取代<TD>的位置便可以，其参数 设定请参考<TD>。
当然若为<TD>所标示的储存格中的文字加上粗体标记<B>便等如<TH>的效果。
例子： 原始码 <center>
<table width="350" border="1" cellspacing="0" cellpadding="2" align="CENTER">
     <tr align="CENTER">
<th>Month</th><th>% of IE visitor</th><th>% of NC visitor</th>
     </tr>
     <tr align="CENTER">
<td>August</td><td>61%</td><td>39%</td>
     </tr>
     <tr align="CENTER">
<td>July</td><td>54%</td><td>46%</td>
     </tr>
     <tr align="CENTER">
<td>June</td><td>52%</td><td>48%</td>
     </tr>
</table>
</center>  
显示结果   
Month % of IE visitor % of NC visitor
August 61% 39%
July 54% 46%
June 52% 48%



■ <CAPTION> ： ▲Top

<CAPTION> 的作用是为表格标示一个标题列，有如在表格上方加上一没格线的打通列。 当然亦可置于下方，通常用以存放该表格的标题。
<CAPTION> 的参数设定（常用）：
例如：<caption align="TOP" valign="TOP"></caption>

align="TOP"
该表格标题列相对于表格的摆放贴　位置（水平），可选值为： left, center, right, top, middle, bottom，若 align="bottom" 的话标题列便会出现对表格的下方，不管你 的原始码中把 <caption> 放在 <table> 中的头部或尾部。

valign="TOP"
该表格标题列相对于表格的摆放位置（上下），可选值为： top, bottom。和 align="TOP" 或 align="BOTTOM" 是一样的，虽然功能重复了，但如果你要标题列 置于下方及向右或向左贴　，那末两个参数便可一　用了。当只　一个参数时， 请首选 align，因为 valign 是由 HTML 3.0 才开始的参数。
例子： 原始码 <center>
<table width="350" border="1" cellspacing="0" cellpadding="2" align="CENTER">
<caption>网页速成 八月份访客浏览器使用分析</caption>
     <tr align="CENTER">
<th>Month</th>
<th>% of IE visitor</th>
<th>% of NC visitor</th>
     </tr>
     <tr align="CENTER">
<td>August</td>
<td>61%</td>
<td>39%</td>
     </tr>
</table>
</center>  
显示结果   
网页速成 八月份访客浏览器使用分析 Month % of IE visitor % of NC visitor
August 61% 39%

8。1、HTML语言剖析之表单标记 -1

<FORM> <INPUT>
INPUT 的种类： Text, Radio,Checkbox, Password, Submit/Reset, Image, File, Hidden, Button。
<SELECT> <OPTION>
<TEXTAREA>  
■ 引子
表单的用处很多，于网上无处不见，当然是配合 CGI 使用为佳，所以馈下有意使用或学 习 CGI 的话，表单设计见必需的，这一节介绍的标记不多，但其参数变化很多。一份表单的基本架构是：在 <FORM> 标记 的包围下加上一种或以上的表单输入方式及一个或以上的按键。  
■<FORM> <INPUT> ： 　

<FORM>称为表单标记，用以宣告此为表单模式，属于一个容器标记，表示其它表单标记需要在它的包围中才有效，<INPUT>便是其中的一个，用以设定各种输入资料的方法。它 是一个空标记。
<FORM> 的参数设定（常用）：
例如： <form action="http://your.isp.com/cgi-local/example.cgi" method="POST">

action="http://your.isp.com/cgi-local/example.cgi"
表单通常是与 CGI 配合使用的，参数 action 便是用以指明该 CGI 程式的位置，这 样此表单所填的资料才能正确传给 CGI 作处理。若馈下没有 CGI 以进行测试，可 设定此参数为 ACTION="mailto:your@email.com" 那样该表单所填的资料将会寄至 此电邮地址（红色部分）。
method="POST"
传送资料给 CGI 的的方式，可选值为 POST, GET。你只需记住POST容许传送大量资料，但 GET则只接受低于 1K 的资 料，所以你若看过别人的表单原始码的话，你会发现申请表单用的是POST 而搜 找器用的是 GET。
<INPUT> 的参数设定（常用）：
由于其第一个参数 type 己有很多的选择，而不同的选择表示出不同的输入方式，且其它 参数亦因此而异，故以下将独立介绍不同输入方式及其它参数设定。

type="Text"
可选值为 Text, Radio,Checkbox, Password, Submit/Reset, Image, File, Hidden, Button。

--------------------------------------------------------------------------------
输入方式一： Text （单行文字盒）
例如<input type="Text" name="age" value="20" align="MIDDLE" size="2" maxlength="255">

type="Text"
输入方式为 Text，能产生一单行文字盒，上限为 255 字元。
name="age"
此一单行文字盒名称，这是最重要的一个，方便 CGI 辨认由表单传来的资料，虽 说可随便命名，但通常 CGI 程式中都有指定名称，若转用其它名称便需要修改该 CGI 程式了，名称可为没空白没特别符号的英文或数字，有大小写的分别，可以 写成 Your_Age，若有访客于此表单此一文字盒填入 40 的话，那末传给 CGI 的字 串便是 Your_Age=40。
value="20"
此一单行文字盒内定值。若不填写则文字盒是空白的，等待访客亲自键入，若 value="20" 的话， 20 便会出现在文字盒中，当然访客可以修改之。
align="MIDDLE"
可选值：top, middle, bottom, left, right, texttop, baseline, absmiddle. 没太大有处。
size="2"
此一单行文字盒显示的长度，若馈下是采用 Big5 编码的中文网页便要小心，同 size 的文字盒 NC 会显示得比 IE 狻长。
maxlength="255"
此一单行文字盒可输入字元的上限，为方便编排资料或避免错输入等，宜设定上 限，例如输入电话或 ICQ UIN 的可设为 8，年龄为 2 等。
例子： 原始码 <form action="http://your.isp.com/cgi-local/example.cgi" method="POST">
请填入电话号码：<input type="Text" name="phone" value="" size="10" maxlength="8">
</form>  
显示结果 请填入电话号码：   



--------------------------------------------------------------------------------
输入方式二： Radio （单一选择）
例如：<input type="Radio" name="gender" value="female" align="MIDDLE" checked>

type="Radio"
输入方式为 Radio，能产生一单一选择，以供点选。
name="gender"
此一 Radio 名称，参考 Text 部分的说明。
value="female"
内定值。每一个 radio 必须及仅有一个 value，通常有同时采用两个或以上同 name 不同 value 的 Radio 输入方式，可让使用使任选其一。
align="MIDDLE"
可选值：top, middle, bottom, left, right, texttop, baseline, absmiddle。
checked
设该 Radio 为内定被选。同 name 的各个 Radio 中只能有一个使用，或全不使用这 参数。
例子： 原始码 <form action="http://your.isp.com/cgi-local/example.cgi" method="POST">
请选性别：
<input type="Radio" name="gender" value="Female">女性
<input type="Radio" name="gender" value="Male" checked>男性
<br>你喜欢吗：
<input type="Radio" name="like" value="Yes">喜欢
<input type="Radio" name="like" value="No">不喜欢
<input type="Radio" name="like" value="NotSure">不肯定
</form>  
显示结果 请选性别：  女性  男性
你喜欢吗：  喜欢  不喜欢  不肯定  



--------------------------------------------------------------------------------
输入方式三： Checkbox （确认盒）
例如：<input type="Checkbox" name="idol" value="Leon" align="RIGHT" checked>

type="Checkbox"
输入方式为 Checkbox，能产生一确认盒，以供剔选。
name="idol"
此一 Checkbox 名称，参考 Text 部分的说明。
value="Leon"
内定值。每一个 Checkbox 必须及仅有一个 value，当被剔选时这值便会传及 CGI，例如所传字串 idol=Leon 。
align="RIGHT"
可选值：top, middle, bottom, left, right, texttop, baseline, absmiddle。
checked
设该 Checkbox 为内定被选。每个 Checkbox 都是独立的，所以每一个都可使用这 参数，不像 Radio。
例子： 原始码 <form action="http://your.isp.com/cgi-local/example.cgi" method="POST">
你喜欢以下那些明星：
<br><input type="Checkbox" name="idol01" value="Leon">黎明
<input type="Checkbox" name="idol02" value="Noriko_Sagai">酒井法子
<input type="Checkbox" name="idol03" value="Leon">郑秀文
<input type="Checkbox" name="idol04" value="BonJovi" checked>BonJovi
</form>  
显示结果 你喜欢以下那些明星：
黎明  酒井法子  郑秀文  BonJovi  



--------------------------------------------------------------------------------
输入方式四： Password （密码输方盒）
例如：<input type="Password" name="pw" value="999" align="MIDDLE" size="5" maxlength="9">

Password 的其他参数和 Text 是完全相同的，请参考 Text 的介绍。
两者作用不同，Password 所输入的字元全以 * 号表示。
例子： 原始码 <form action="http://your.isp.com/cgi-local/example.cgi" method="POST">
请输入姓名：<input type="Text" name="name">
<br>请输入密码：<input type="Password" name="pw" maxlength="9">
</form>  
显示结果 请输入姓名：  
请输入密码：   



--------------------------------------------------------------------------------
输入方式五： Submit （传送键）及 Reset （清除键）
这是表单上重要的两个按键，两者所附带的参数相同，但用处不大。

例如：<input type="Submit" name="other_funtion" value="确定" align="MIDDLE">
<input type="Reset" value="清除" align="MIDDLE">

type="Submit"
设定输入方式为 Submit 或 Reset。
name="other_funtion"
Submit 的功能随 name 的不同而不同，须和 CGI 配合。若你只需要普通的传送 键，则是其内定，不必用此参数。
value="确定"
这个值不是输给 CGI 的，而是显示在按键上，可以不用，传送键的内定值为 Submit Query，清除键的内定值为 Reset。
align="MIDDLE"
可选值：top, middle, bottom, left, right, texttop, baseline, absmiddle。
例子： 原始码 <form action="http://your.isp.com/cgi-local/example.cgi" method="POST">
<input type="Submit"><input type="Reset">
<br><input type="Submit" value="         确定         "><input type="Reset" value="清除">
</form>  
显示结果

8。2、HTML语言剖析之表单标记 -2


--------------------------------------------------------------------------------
输入方式六： Image （图片按键）
这通常用以取代 Submit 及 Reset 两个按键，因为由程式产生的按键并不漂亮，这 Image 参 数便容许你采用自已制造的按键。

例如：<input type="Image" name="submit" align="BOTTOM" src="ex_icon.gif">

type="Image"
输入方式为 Image。
name="submit"
所要代表的按键，可以是 submit, reset, 或其它。
align="BOTTOM"
可选值：top, middle, bottom, left, right, texttop, baseline, absmiddle。
src="ex_icon.gif"
按键图片来源，若此图片文件不与该 html 文件在同一目录下，请加上相对或绝对途 径。
例子： 原始码 <form action="http://your.isp.com/cgi-local/example.cgi" method="POST">
<input type="Image" name="submit" align="BOTTOM" src="ex_icon.gif">
</form>  
显示结果   



--------------------------------------------------------------------------------
输入方式七： File
例如：<input type="File" name="upload" align="BOTTOM" size="20" maxlength="100" accept="text/html">

input type="File"
输入方式为 Image。通常用以传输文件。
name="upload"
这文件传输的名称，用以识别之用。
align="BOTTOM"
可选值：top, middle, bottom, left, right, texttop, baseline, absmiddle。
size="20"
所显示文字盒的长度。
maxlength="100"
可输入字元的上限。
accept="text/html"
所接受的文件类别，有二十六种选择，但可不设定。
例子： 原始码 <form action="http://your.isp.com/cgi-local/example.cgi" method="POST">
<type="File" name="upload" size="30" maxlength="100" accept="text/html">
</form>  
显示结果   



--------------------------------------------------------------------------------
输入方式八： Hidden
例如：<input type="Hidden" name="ID" value="6618">

type="Hidden"
输入方式为隐藏或内定。它不会显示任何输入介面，而是一个内定值随表单一起 传给 CGI，列如由 CGI 产生的会员号码，或传入可更改的参数以调整 CGI 而避免 修改 CGI 程式码。
name="ID"
这文件传输的名称，用以识别之用。
value="6618"
内定值，会以如 ID=6618 形式传给 CGI。
例子： （"Hidden" 是不被显示的，所以这处多放了一个 "Submit" 键，表示 Hidden 之内定 值会随 submit 键被按而传给 CGI） 原始码 <form action="http://your.isp.com/cgi-local/example.cgi" method="POST">
<input type="Hidden" name="ID" value="6618">
<input type="Submit" value="Submit">
</form>  
显示结果   



--------------------------------------------------------------------------------
输入方式九： Button
例如：<input type="Button" name="useless" value="Back">

type="Button"
输入方式为一般按键。常配合 Java Script 作为其启动按键。
name="useless"
这文件传输的名称，用处不大。
value="Back"
按键显示名称。
例子： 其中 Button" value="回前一页" >
</form>  
显示结果   



■ <SELECT> <OPTION> ： 　

<SELECT>是卷动选单标记，每一选项皆由 <OPTION> 所标示，把它当作围堵标记或空标 记使用都可以。
<SELECT> 的参数设定（常用）：
例如： <select name="where" size="6" multiple>

name="where"
这卷动选单的名称，作识别之用，将会传及 CGI。
size="6"
这卷动选单的列数，即其高度，请自行修改。若使用此参数则不会有 Pop Up 效 果。
multiple
令这卷动选单容许多重选择。
<OPTION> 的参数设定（常用）：
例如： <option value="tw" selected>

value="tw"
这选项的值，将会传及 CGI。请自行修改，但不同选项必须有不同的值。
selected
设该选项为内定被选。一个单选卷动选单只能有一项或零可内定被选。
例子一： （普通 POP UP 卷动选单） 原始码 <form action="http://your.isp.com/cgi-local/example.cgi" method="POST"> Where you com from?
<select name="where">
<option value="hk">Hong Kong</option>
<option value="tw" selected>Taiwan</option>
<option value="cn">China</option>
<option value="us">United States</option>
<option value="ca">Canada</option>
</select>
</form>  
显示结果 Where you com from?
Hong Kong Taiwan China United States Canada  


例子二： （容许多重选择 的卷动选单） 原始码 <form action="http://your.isp.com/cgi-local/example.cgi" method="POST"> Where you com from?
<select name="where" multiple>
<option value="hk">Hong Kong</option>
<option value="tw" selected>Taiwan</option>
<option value="cn">China</option>
<option value="us">United States</option>
<option value="ca">Canada</option>
</select>
</form>  
显示结果 Where you com from?
Hong Kong Taiwan China United States Canada  


例子三：（设定了 Size 的卷动选单） 原始码 <form action="http://your.isp.com/cgi-local/example.cgi" method="POST"> Where you com from?
<select name="where" size="5">
<option value="hk">Hong Kong</option>
<option value="tw" selected>Taiwan</option>
<option value="cn">China</option>
<option value="us">United States</option>
<option value="ca">Canada</option>
</select>
</form>  
显示结果 Where you com from?
Hong Kong Taiwan China United States Canada  



■ <TEXTAREA> ： 　

<TEXTAREA>是表单文字区块标记，常用于 bug report, feedback 等需要填写大量资料的用 途。
<TEXTAREA> 的参数设定（常用）：
例如： <textarea name="comments" cols="40" rows="4" wrap="VIRTUAL">

name="comments"
这文字区块的名称，作识别之用，将会传及 CGI。
cols="40"
这文字区块的宽度，请自行修改。
rows="4"
这文字区块的列数，即其高度，请自行修改。
wrap="VIRTUAL"
设定其折行问题，可选值为： off, physical, virtual。off 表示不使用此属性，physical 时则会强迫刘览器在送资料到 CGI（Web 伺服器端）必须将实№文字中的换行一 并送出，设为 virtual 时则送出连续成串的字（除非使用者按了键盘的 RETURN / ENTER）。
例子： 原始码 <form action="http://your.isp.com/cgi-local/example.cgi" method="POST">
Give comments:
<textarea name="comments" cols="40" rows="4" wrap="VIRTUAL">
这是预设的字句，通常留空的，随你喜欢。</textarea>
</form>  
显示结果 Give comments:
这是预设的字句，通常留空的，随你喜欢。

9、HTML语言剖析之图形标记
　
■ <IMG> ：
<IMG> 称图形标记，主要用以插入图片于网页中，至于其它用处如配合影片文件等的播 放及影像地图（Image Map 或称一图多连结）则于不会在这节提及，请看【影像地图】及 【其他标记】。
<IMG> 的一般参数设定：

例如 <img src="logo.gif" width=100 height=100 hspace=5 vspace=5 border=2 align="top" alt="Logo of PenPals Garden" lowsrc="pre_logo.gif">

src="logo.gif"
图片来源，接受 .gif, .jpg 及 .png 格式，前两者通行己久，后者由 96 年开始发展， 于未来取代前两者。若图片文件与该 html 文件同处一目录则只　写上文件案名称，否则 必须加上正确的途径，相对及绝对皆可。
width=100 height=100
设定图片大小，此宽度、及高度一般采用 pixels 作单位。通常只设为图片的真实 大小以免失真，若　要改变图片大小最好事先使用图像编辑工具。
hspace=5 vspace=5
设定图片边沿空白，以免文字或其它图片过于贴近。hspace 是设定图片左右的空 间，vspace 则是设定图片上下的空间，高度采用 pixels 作单位。
border=2
图片边框厚度。
align="top"
调整图片旁边文字的位置，你可以控制文字出现在图片的偏上方、中间、底端、 左右等，可选值：top, middle, bottom, left, right，内定为 botom。Netscape 还支持 texttop, baseline, absmiddle, absbottom，
texttop 表示图片和文字依顶线对　，
baseline 表示图片对　到目前文字行底线值，
absmiddle 表示图片对　到目前文字行绝对中央，
absbottom 表示图片对　到目前文字行绝对底部，（绝对底部意指它考虑到比方 y 、g、q 等字的下缘）。
alt="Logo of PenPal Garden"
这是用以描述该图形的文字，若用者使用文字浏览器，由于不支持图片，这些文 字更会代替图片而被显示。若于支持图片显示的浏览器，当鼠标移至图片上该些 文字亦会显示。
lowsrc="pre_logo.gif"
设定先显示低解像图片，若所加入的是一张很大的图片，下载　时很长，这张低 解像图片会先被显示以免浏览失却兴趣，通当是原图片灰阶版本。
例子一： 原始码 <img src="girl.gif" width=100 height=112 border=0 alt="beautiful girl"> 普通插入  
显示结果  普通插入  


例子二： 原始码 <img src="girl.gif" width=100 height=112 border=0 alt="beautiful" hspace=10 vspace=20"> 设定上下左右空白位置  
显示结果  设定上下左右空白位置  


例子三： 原始码 <img src="girl.gif" width=100 height=112 border=4 alt="beautiful" hspace=10 vspace=20"> 设定上下左右空白位置  
显示结果  设定字画中间对　，边框厚度为 4。  


例子四： 原始码 <img src="girl.gif" width=100 height=112 alt="beautiful lady" align="right" border=0> 设定图片靠右。  
显示结果  设定图片靠右。  


例子五： 原始码 <img src="girl.gif" width=200 height=220 alt="I'm not beautiful right now" border=0> 放大了的图片  
显示结果  放大了的图片

10、HTML语言剖析之链接标记

<A>
<BASE>  
■ <A> ： ▲Top

<A> 称连结标记，由 <A> 与 </A> 所围的文字、图片等等可以成为一个连结。
<A> 的一般参数设定：

例如 <a href="index.html" name="hello" target="_top">

href="index.html"
这参数不能与另一参数 name 同时使用，使用这参数才能造成可按的连结。
当作为一外部连结时： href 所设定的是该连结所要连到的文件名称，若 该文件与此 html 档不是同在一目录请加上适当的路径，相对绝对皆可。
当作为一内部连结时： href 所设定的是该连结所要连到的同文件内参考 点或指定文件之参考点，且不　要包围任何字画只　加上结束标示 </a>便 可以，例如 <a href="#there"></a> 、 <a href="index.html#there"></a> 及 <a href="http://www.school.net.hk/~chris55/index.html#there"></a> 其中 there 便 是参考点，并　於其前加上符号 # 以作识别，参考点由下一个参数 name 事先於文件中埋下。

name="hello"
这参数是为文件埋下参考点，作为被连结，不会被显示。所以说造成一个内部连 结　要使用两次 <A> 连结标记。一个使用参数 name 事先於文件中埋下一参考 点，另一个使用参数 href 连到这个参考点。

target="_top"
设定连结被按後之结果所要显示的视窗。可选值为： _blank, _parent, _self, _top, 框 窗名称。

target="框窗名称"
这只运用於框架中，若被设定则连结结果将显示於该“框窗名称”之框窗 中，框窗名称是事先由框架标记所命名。
target="_blank" 或 target="new"
将连结的画面内容，开在新的浏览视窗中。
target="_parent"
将连结的画面内容，当成文件的上一个画面。
target="_self"
将连结的画面内容，显示在目前的视窗中。(内定值)
target="_top"
将框架中连结的画面内容，显示在没有框架的视窗中。（即除去了框架)
例子一：（外部连结） 原始码 <a href="../promote/engines.html">四百五十个寻找引擎</a>
<p><a href="http://www.hkseek.com/icq">
<img src="link_image.gif" width=99 height=44 border=1 alt="ICQ Garden"></a>
<p><a href="http://www.hkseek.com/icq">
<img src="link_image.gif" width=99 height=44 border=0 alt="ICQ Garden"></a>  
显示结果 四百五十个寻找引擎






例子二（内部连结）：请到 PenPal Garden 的 FAQ Page 刻体验一下何为内部连结。 原始码 <a name="test"></a>
<a href="#test">本页的内部连结</a>
<br><a href="http://www.school.net.hk/~chi/faq.html#14">跳到 PenPal Garden 的 FAQ 部分</a>  
显示结果 本页的内部连结
跳到 PenPal Garden 的 FAQ 部分  


■ <BASE> ： ▲Top

<BASE> 是一个连结基准标记，用以改变文件中所有连结标记的参数内定值。它只能应用 於文件的开头部分，即标记 <HEAD> 与 </HEAD> 之间。
<BASE> 的一般参数设定：

例如 <base href="http://www.microsoft.com/" target="_top">

href="http://www.microsoft.com/"
设定该页网页中所有 HTTP 文件及图形（包括相对路径连结及 <IMG> 图形标记 等）的内定路径，其他如 ftp:// 及 gopher:// 等则不受影响。这参数只可填入一个相 对或绝对的路径，不必填入档案名称。一般相对路径连结及 <IMG> 图形标记等是 内定以该页网页所在的目录作为起点，若依这例子，该文件中所有连结将会以 http://www.microsoft.com/ 作为起点，若其中有连结如 <a href="index.html">Back to Main Page</a> ，那末它不会连到自已目录下的 index.html，它将会连到 Microsoft 的 首页，这是因为相对路径己给 <BASE> 转成绝对的了。
target="_top"
设定该页网页中所有连结被按後之结果所要显示的视窗，免得分别为所有连结加 上 target 参数，常应用於框架中。其设定与 <A> 连结标记中 target 参数相同。
例子容後再写，你可亲自尝试或到一些以框架制作的网页去体验一下。