html中横线的一些用法

一、作系列横单线

　　这是系列横单线试验，效果还好吧？ 
　　在这个例子中，用到了表格主标题标记<caption>，它的语法如下：
<caption
align=left|center|right
valign=top|bottom>
　　align和valign分别用于设定标题的水平位置和垂直位置。align的默认值是center；valign的默认值是top。利用<caption>标记可以方便地在紧靠边表格的顶部或底部写上文字，且居中，若用其它办法要麻烦得多。另外在本例中能使表格产生单线效果是设置了<table>标记的rules和frame参数，rules参数是对表格的内部边框作显示控制。
rules="none"：表示不加内部边框；
rules="rows"：表示只显示水平方向的边框； 
rules="cols：表示只显示垂直方向上的边框；
rules="all"：则是显示所有方向上的边框，这也是默认值；
frame="void"：表示不加外边框；
frame="above"：表示显示上边的外边框；
frame="below"：表示显示下边的外边框；
frame="lhs" ：表示显示左边的外边框；
frame="rls" ：表示显示右边的外边框；
frame="hsides"：表示显示上下外边框；
frame="vsides"：表示显示左右外边框；
frame="box" 则表示显示所有外边框。
　　明白了参数值的含义，制作本例的效果就简单了，本例完成后的源代码如下：
<table width="60%" border="1" cellspacing="0" cellpadding="0" rules="rows" frame="hsides">
<caption>这是系列横单线试验</caption>
<tr> 
<td> 这是系列横单线试验，效果还好吧？</td>
</tr>
<tr> 
<td> </td>
</tr>
<tr> 
<td> </td>
</tr>
</table> 
　　用这种方法画系列单线，即快又整齐，且所用代码也很少。

　　二、作系列竖单线

　　本例这种效果看起来是不是有点特色，其实在制作方法上与上例没有多少区别，只是改变了rules和frame的参数值，使表格只显示垂直方向的内外边框，其它与上例相同，本例完成后的源代码是：
<table border="1" cellspacing="1" cellpadding="8" rules="clos" frame="vsides" height="115" align="left" hspace="10" width="180">
<tr>
<td>更上一 层 楼 </td>
<td>欲穷千 里 目 </td>
<td>黄河 入 海 流 </td>
<td>白日依 山 尽 </td>
<td><p><br>登 黄 鹤 楼 </p></td>
</tr>
</table>

　　三、系列双横线

　　这是在例一的基础上再增加设定了cellspacing参数所产生的效果。
　　本例采用与例一相同的方法，通过设定rules和frame参数，使表格只显示水平方向的内外边框线，并增加了设定cellspacing参数使其产生双线效果，但是<table>标记默认的双线颜色不一样（因它的本意是用两种颜色来产生立体效果的），所以又通过设定bordercolorlight和bordercolordark 参数来改变双线的颜色，以达到双线颜色一致的目的。另外为了使表格内的文字内容上下留空，又设定了cellpadding参数，当然也可以通过设定单元格高度来达到这个目的，但那样要增加许多代码。下面介绍这几个参数的含义：
cellspacing="n"：单元格间距，也就是内外边框线的间距；
cellpadding="n"：单元格边距，即单元格内内容与内边框的距离；
bordercolorlight="#n"：设定立体边框线中较浅部分的颜色，用颜色名称或十六进制数表示。
bordercolordark="#n"：设定立体边框线中较深部分的颜色，用颜色名称或十六进制数表示。 
　　用本例的方法制作双横线，比用其它方法方便、快捷，所用代码也较少，当横线的数量越多，效果越明显。本例完成后的代码为：
<table width="60%" border="1" cellspacing="6" cellpadding="3" bordercolorlight="#006633" bordercolordark="#006633" rules="rows" frame="hsides">
<tr><td> 这是在例一的基础上再增加设定了cellspacing参数所产</td></tr>
<tr><td>生的效果。</td></tr>
<tr><td> </td></tr>
</table>

　　同样，在例二的基础上再加上例三的方法就可以方便地制作出双竖线效果，你可以试试。当然表格在网页制作中的作用远远不止这些，通过这三个例子可以看出，灵活应用表格的参数设定，可以产生一些特殊效果。

HTML表单设计基础　

表单在HTML页面中起着重要作用，它是与用户交互信息的主要手段。一个表单至少应该包括说明性文字、用户填写的表格、提交和重填按钮等内容。用户填写了所需的资料之后，按下“提交资料”按钮，这样所填资料就会通专门的CGI接口传到Web服务器上。网页的设计者随后就能在Web服务器上看到用户填写的资料，从而完成了从用户到作者之间的反馈和交流。对于免费个人网站，往往服务器不提供CGI功能，也可以电子邮件来接收用户的反馈信息。
　　表单中主要包括下列元素：
button——普通按钮
radio ——单选按钮
checkbox——复选框
select ——下拉式菜单
text ——单行文本框
textarea——多行文本框
submit——提交按钮
reset—— 重填按钮
　　用HTML设计表单常用的标记是：<form>、< input>、<Option>、<Select>、<textarea>和<isindex>等标记。

1、<form>表单标记
　　该标记的主要作用是设定表单的起止位置，并指定处理表单数据程序的url地址。其基本语法结构如下：
<form
action＝url
method=get|post
name＝value
onreset=function
onsubmit＝function
target=window>
</form>
　　其中action：用于设定处理表单数据程序url的地址。这样的程序通常是CGI应用程序，采用电子邮件方式时，用action="mailto:[e-mail]"。
method：指定数据传送到服务器的方式。有两种主要的方式，当method=get时，将输入数据加在action指定的地址后面传送到服务器；当method=post时则将输入数据按照HTTP传输协议中的post传输方式传送到服务器，用电子邮件接收用户信息采用这种方式。
name：用于设定表单的名称。onrest和onsubmit是主要针对“reset”按钮和“submit”按钮来说的，分别设定了在按下相应的按钮之后要执行的子程序。
target：指定输入数据结果显示在那个窗口，这需要与<frame>标记配合使用。

2、<input>表单输入标记
　　此标记在表单中使用频繁，大部分表单内容需要用到此标记。其语法如下：
<inPut
aligh=left|righ|top|middle|bottom
name=value
type=text|textarea|password|checkbox|radio|submit|reset|file|hidden|image|button
value=value
src=url
checked
maxlength=n
size=n
onclick=function
onselect=function>
align：是用于设定表单的位置是靠左（left）、靠右（right）、居中（middle）、靠上 top）还是靠底（bottom）。
name：设定当前变量名称。 
type：决定了输入数据的类型。其选项较多，各项的意义是： 
type=text：表示输入单行文本； 
typet=textarea：表示输入多行文本；
type=password:表示输入数据为密码，用星号表示；
type－checkbox：表示复选框；
type－radio：表示单选框；
type一submit：表示提交按钮，数据将被送到服务器； 
tyPe－reset：表示清除表单数据，以便重新输入；
type－file：表示插入一个文件；
type－hidden：表示隐藏按钮；
type＝image：表示插入一个图像；
type一button：表示普通按钮；
value：用于设定输入默认值，即如果用户不输入的话，就采用此默认值；
src：是针对type=image的情况来说的，设定图像文件的地址；
checked：表示选择框中，此项被默认选中；
maxlength：表示在输入单行文本的时候，最大输入字符个数；
size：用于设定在输入多行文本时的最大输入字符数，采用width，height方式；
onclick：表示在按下输入时调用指定的子程序；
onselect：表示当前项被选择时调用指定的子程序。 

3、<select>下拉菜单标记
　　用<select>标记可以在表间中插入一个下拉菜单，它需与<option>标记联用，因为下拉菜单中的每个选项要用<option>标记来定义。<select>标记的语法如下：
<select
name=nametext
size=n
multiple>
　　其中name：设定下拉式菜单的名称；
size：设定菜单框的高度，也就是一次显示几个菜单项，一般取默认值（size="1"）；
multiple：设定为可以进行多选。

4、<option>选项标记
　　该标记为下拉菜单中一个选项，语法很简单：
<option
selected
value=value>
其中selected：表示当前项被默认选中；
value：表示该项对应的值，在该项被中之后，该项的值就会被送到服务器进行处理。

5、<textarea>多行文本输入标记
　　这是一个建立多行文本输入框的专用标记，其语法如下：
<textarea
name=name
cols=n
rows=n
wrap=off|hard|soft>
　　各参数含义：name：文本框名称；clos：宽度；rows：高度（行数）；wrap：换行控制，off：不自动换行；hard：自动硬回车换行，换行标记一同被传送到服务器中去；soft：自动软回车换行，换行标记不会传送到服务器中去。 
　　表单所涉及的标记较多，参数也较复杂，而实际制作表单时就是这些标记的组合应用，但一般的表单不可能涉及所有参数，我们还是那个原则，能用默认值的尽量用默认值，绝不设定一个不用的参数。我在后面的文章中将通过实例介绍一些常用参数的应用技巧。

用好HTML表单的文本框

表单的文本框分为单行文本框和多行文本框，故名思义，单行文本框用于输入一些简短的信息，如：姓名、E_mail地址、口令等等；多行文本框用于输入内容较长的信息，如：用户意见、评论、留言等。只要你理解了表单的文本框参数的含义，制作接收信息的文本框是不难的，请看下面的例子。