以文本方式查看主题

-  动网先锋论坛  (http://2007.hnzqw.com/index.asp)
--  网页特效  (http://2007.hnzqw.com/list.asp?boardid=59)
----  [讨论]代码入门－－硅谷学院  (http://2007.hnzqw.com/dispbbs.asp?boardid=59&id=33341)
--  作者：白云悠悠
--  发布时间：2007/7/18 10:40:59

--  [讨论]代码入门－－硅谷学院
--  作者：白云悠悠
--  发布时间：2007/7/18 10:46:26

--  
以下内容含脚本,或可能导致页面不正常的代码
说明：上面显示的是代码内容。您可以先检查过代码没问题，或修改之后再运行.
--  作者：白云悠悠
--  发布时间：2007/7/18 11:02:40

--  

页面(PAGE)标记(TAGS)

HTML 文件结构(Document Structures)

<html>...</html>
<head>...</head>
<body>...</body>

<HTML>
<HEAD>
     <title>, <base>, <link>, <isindex>, <meta>
</HEAD>
<BODY>
    HTML 文件的正文写在这里... ... 
</BODY>
</HTML>

语言字符集(Charsets)的信息

<meta http-equiv="Content-Type" content="text/html;charset=#">

#=
us-ascii, iso-8859-1, x-mac-roman, iso-8859-2, x-mac-ce,
iso-2022-jp, x-sjis, x-euc-jp,
euc-kr, iso-2022-kr,
gb2312, gb_2312-80,
x-euc-tw, x-cns11643-1, x-cns11643-2, big5

可在 HTML 文件中设置 MIME 字符集信息。
您在浏览主页时，最好自己在浏览器的选项菜单内选择相应的语言(language encoding)。
但是如果 HTML 文件里写明了设置，浏览器就会自动设置语言选项。
尤其是主页里用到了字符实体(entities)，则该主页就应该写明字符集信息。
否则，您在浏览该主页时，若未正确设置语言选项，显示将可能混乱。

 背景色彩和文字色彩
<body bgcolor=# text=# link=# alink=# vlink=#>
bgcolor --- 背景色彩 
text --- 非可链接文字的色彩 
link --- 可链接文字的色彩 
alink --- 正被点击的可链接文字的色彩 
vlink --- 已经点击(访问)过的可链接文字的色彩 
#=rrggbb
色彩是用 16 进制的 红－绿－蓝(red-green-blue, RGB) 值来表示。
16 进制的数码有: 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f. 
　 
背景图象 <body background="image-URL">
Non Scrolling Background <body bgproperties=FIXED> 
 页面空白(Margin) 
<------Margin------->
页面左边的空白 <body leftmargin=#>
页面上方的空白(天头) <body topmargin=#> #=margin amount
 链接(Link)
<------link basic------->
基本语法 <a href="URL"> ... </a>
这是一个
<a href="samp/link.html">链接的例子</a>。 
点一下带下划线的文字!
这是一个链接的例子。点一下带下划线的文字!
<------link name------->
跳转到页面的另外一个地方
<a href="#name"> ... </a>
<a name="name"> ... </a> 
<a href="#jump-test">跳转到下一个"链接点"</a><P>
<a name="jump-test">下一个链接点</a> 
跳转到下一个"链接点"
下一个链接点
<------link name 2------->
跳转到另一个页面的某个地方
<a href="URL#name"> ... </a>
<a name="name"> ... </a> 
跳转到另一个页面的<a href="samp/link.html#jump-test">某个地方</a>。
跳转到另一个页面的某个地方。
 开一个新的(浏览器)窗口 (Target Window) 
<------Target Windows------->
<a href="URL" target="Window_Name"> ... </a>
<a href="samp/window.html" target="window_name">
开一个新窗口!
</a> 
开一个新窗口! 
 标尺线
<hr>
<hr> 
<hr size=#>
<hr size=10> 
<hr width=#>
<hr width=50>
<hr width=50%> 
<hr align=#> #=left, right
<hr width=50% align=left>
<hr width=50% align=right> 
<hr noshade>
<hr noshade> 
<hr color=#> 
#=rrggbb 16 进制 RGB 数码，或者是下列预定义色彩：
Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, 
Fuchsia, White, Green, Purple, Silver, Yellow, Aqua 
[返回]


        

      		
    

    

      --  作者：白云悠悠

        --  发布时间：2007/7/18 11:13:24

        

        --  

        
字体(FONT)标记(TAGS)



 标题字体(Header)
<h#> ... </h#> #=1, 2, 3, 4, 5, 6
<h1>今天天气真好！</h1> 今天天气真好！
<h2>今天天气真好！</h2> 今天天气真好！
<h3>今天天气真好！</h3> 今天天气真好！
<h4>今天天气真好！</h4> 今天天气真好！
<h5>今天天气真好！</h5> 今天天气真好！
<h6>今天天气真好！</h6> 今天天气真好！
  • <hn>---</hn> 这些标记显示黑体字。 
  • <hn>---</hn> 这些标记自动插入一个空行，不必用 <p> 标记再加空行。
    因此在一行中无法使用不同大小的字体。 
 字体大小
<font size=#> ... </font> #=1, 2, 3, 4, 5, 6, 7 or +#, -#
<basefont size=#> #=1, 2, 3, 4, 5, 6, 7
<font size=7>今天天气真好！</font> 今天天气真好！
<font size=6>今天天气真好！</font> 今天天气真好！
<font size=5>今天天气真好！</font> 今天天气真好！
<font size=4>今天天气真好！</font> 今天天气真好！
<font size=3>今天天气真好！</font> 今天天气真好！
<font size=2>今天天气真好！</font> 今天天气真好！
<font size=1>今天天气真好！</font> 今天天气真好！
 物理字体(Physical Style)
<b>今天天气真好！</b> 今天天气真好！
<i>今天天气真好！</i> 今天天气真好！
<u>今天天气真好！</u> 今天天气真好！
<tt>今天天气真好！</tt> 今天天气真好！
<sup>今天天气真好！</sup> 今天天气真好！
<sub>今天天气真好！</sub> 今天天气真好！
<s>今天天气真好！</s> 今天天气真好！
<strike>今天天气真好！</strike> 今天天气真好！
 逻辑字体(Logical Style) 
<em>今天天气真好！</em> 今天天气真好！
<strong>今天天气真好！</strong> 今天天气真好！
<code>今天天气真好！</code> 今天天气真好！
<samp>今天天气真好！</samp> 今天天气真好！
<kbd>今天天气真好！</kbd> 今天天气真好！
<var>今天天气真好！</var> 今天天气真好！
<dfn>今天天气真好！</dfn> 今天天气真好！
<cite>今天天气真好！</cite> 今天天气真好！
<small>今天天气真好！</small> 今天天气真好！
<big>今天天气真好！</big> 今天天气真好！
 指定“字体大小”的标记和“指定字体”的标记的组合使用
<i><font size=5>
        <b>今天</b> 天气<font size=6> 真好！</font>
</font></i>
今天 天气 真好！ 
 字体颜色 
指定颜色 <font color=#> ... </font>
#=rrggbb 16 进制数码，或者是下列预定义色彩：
Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, 
Fuchsia, White, Green, Purple, Silver, Yellow, Aqua 
<font color=ffffff>White</font> & 
<font color=white>White</font> & White 
 客户端字体(Font Face) 
<font face="#, #, ..., #"> ... </font>
#=客户端可获得的字体
<font face="Arial, Helvetica"> Hellow World!</font> 
Hellow World! 
客户端字体(Font Face)示例 
 字符实体(Entities) 
<------ &keyword;------->
&#; #=字符实体名称 或者 ascii 值
HTML2.0 的字符集
&amp;           &
&lt;            <
&gt;            >
&quot;          "


        

      		
    

    

      --  作者：白云悠悠

        --  发布时间：2007/7/18 11:14:18

        

        --  

        
文字布局标记 
---------------------------------------------------

 行的控制 
段(Paragraph) (可以看作是空行) <p> 
你好吗？<p>很好。 

你好吗？
很好。

换行 <br>

你好吗？<br>很好。 
你好吗？
很好。
不换行<nobr>

<nobr> 
请改变您浏览器窗口的宽度， 使之小于这一行的宽度， 看看这个标记的作用！
</nobr> 
请改变您浏览器窗口的宽度，使之小于这一行的宽度，看看这个标记的作用！ 

 文字的对齐(Alignment) 
<hn align=#>...</hn> 
<p align=#>...</p> #=left, center, right
<h3 align=center>Hello<\\h3>
<h3 align=right>Hello<\\h3> 

Hello
Hello
<center>...</center> 
<center>Hello</center> 

Hello 

 文字的分区(Division)显示 
<div align=left> ... </div>
<div align=left>
Can you feel happiness without unpleasant? <br>
Please show me your smile.
</div> 
　 
Can you feel happiness without unpleasant?
Please show me your smile. 
<div align=center> ... </div>
Can you feel happiness without unpleasant?
Please show me your smile. 
<div align=right> ... </div>

Can you feel happiness without unpleasant?
Please show me your smile. 

 列表 
无序列表 <ul><li>...</ul>

<ul>
<li>Today
<li>Tommorow
</ul>
  • Today 
  • Tommorow 
有序列表 <ol><li>...</ol>

<ol>
<li>Today
<li>Tommorow
</ol> 
  1. Today 
  2. Tommorow 
定义列表(Definition lists) <dl><dt>...<dd>...</dl>

<dl>
<dt>Today
<dd>Today is yesterday.
<dt>Tomorrow
<dd>Tomorrow is today.
</dl> 
Today 
Today is yesterday. 
Tomorrow 
Tomorrow is today. 
  
Definition lists Compact <dl compact><dt>...<dd>...</dl>

Today Today will be yesterday. 
Next Tomorrow will be today.
Today 
Today is yesterday. 
Tomorrow 
Tomorrow is today. 
  
 定制列表元素 
定制表中的标记 <li type=#> #=disk, circle, square
<ul>
<li type=disc>ONE
<li type=circle>TWO
<li type=square>THREE
</ul> 
  • ONE 
  • TWO 
  • THREE 
  
定制有序列表表中的序号 <li type=#> #=A, a, I, i, 1

<ol><li type=A>ONE-ONE
<li>ONE-TWO</ol> 
  1. ONE-ONE 
  2. ONE-TWO 

<ol><li type=a>ONE-ONE
<li>ONE-TWO</ol> 

  1. ONE-ONE 
  2. ONE-TWO 

<ol><li type=I>ONE-ONE
<li>ONE-TWO</ol> 

  1. ONE-ONE 
  2. ONE-TWO 

<ol><li type=i>ONE-ONE
<li>ONE-TWO</ol>

  1. ONE-ONE 
  2. ONE-TWO 

<ol><li type=1>ONE-ONE
<li>ONE-TWO</ol> 

  1. ONE-ONE 
  2. ONE-TWO 
定制有序列表表中的序号的起始值 <ol start=#> #=number

<ol start=5>
<li type=A>ONE-ONE
<li>ONE-TWO
<ol start=10>
<li>TWO-ONE
<li type=i>TWO-TWO
</ol></ol>
  1. ONE-ONE 
  2. ONE-TWO 
    1. TWO-ONE 
    2. TWO-TWO 
 预格式化文本(Preformatted Text) 
<pre>...</pre>

<pre>
Please use your card.
VISA Master
<b>Here is an order form.</b>
<ul><li>Fax
<li>Air Mail</ul>
</pre> 
Please use your card
VISA Master
Here is an order form. 
Fax 
Air Mail 
<listing>...</listing>
<listing>
Please use your card.
VISA Master
<b>Here is an order form.</b>
<ul><li>Fax
<li>Air Mail</ul>
</listing> 
Please use your card.
VISA Master
Here is order form.
  • Fax 
  • Air Mail 
<xmp>...</xmp>
<xmp>
Please use your card.
VISA Master
<b>Here is an order form.</b>
<ul><li>Fax
<li>Air Mail</ul>
</xmp> 
Please use your card.
VISA Master
<b>Here is order form.</b>
<ul><li>Fax
<li>Air Mail</ul>
 空白(Spacer) 
<spacer type="horizontal" size=#> #=水平空白宽度
<spacer type="vertical" size=#> #=竖直空白高度

YESTERDAY <spacer type="horizontal" size=50> TODAY
<spacer type="vertical" size=50> TOMORROW 
YESTERDAY TODAY TOMORROW 
<spacer type="block" width=# height=# align=##>
#=空白的尺寸
##=top, middle, bottom, left, right
<spacer type="block" width=150 height=50 align=left>
YESTERDAY<br> TODAY<br> TOMORROW 
YESTERDAY
TODAY
TOMORROW 

多列文本 
<multicol cols=#> ... </multicol> #=列的数目
<multicol cols=2> text text text... </multicol> 
例子 
<multicol gutter=#> ... </multicol> #=列间的空白
<multicol cols=2 gutter=100> text text text... </multicol> 
例子 
<multicol width=#> ... </multicol> #=列的宽度
<multicol cols=2 width=400> text text text... </multicol> 
例子 
其它 
块引用(Blockquote) <blockquote>...</blockquote>

Her Song:
<blockquote>
When I was young, I listened to the radio 
waiting for my favorite songs....
</blockquote> 

Her Song: 
When I was young, I listened to the radio waiting for my favorite songs.... 
闪烁 <blink>...</blink>

<BLINK> 闪烁！闪烁！ </BLINK> 

闪烁！闪烁！

        

      		
    

    

      --  作者：白云悠悠

        --  发布时间：2007/7/18 11:15:41

        

        --  

        
图象(IMAGE)标记(TAGS)
 链入图象的基本语法
<------img source------->
<img src=#> #=图象的 URL
<------img description------->
<img alt=#> 
#=在浏览器尚未完全读入图象时，在图象位置显示的文字。
<img src="f.gif" alt="MY FACE :-)"> 
 
 图象和文字的对齐
<img align=#> #=top, middle, bottom
<img src=URL align=top> My face! 
 My Face! 
<img src=URL align=middle> My face! 
 My Face! 
<img src=URL align=bottom> My face! 
 My Face! 
  • 只有一行文字才可以放在图象的两边。（不知道翻译的对不对？) 
  • Only one text line can be flown into the both side of Image. 
 图象在页面中的对齐/布局(Floating Image) 
<------img align=left------->
<img align=left>
<img src=URL align=left>My Face!<br>
It is always<br>
smiling.<br>
Hahaha....<br>
My Face!
It is always
smiling.
Hahaha....

<------img align=right------->
<img align=right>
My Face!
It is always
smiling.
Hahaha....

<------br clear------->
<br clear=all>
<img src=URL align=left>My Face!<br>
It is always
<br clear=all>
smiling.<br>
Hahaha....<br>
My Face!
It is always

smiling.
Hahaha....
<------vspace hspace------->
<img vspace=# hspace=#> #=value
<img src=URL align=left vspace=10 hspace=20>My Face!<br>
It is always<br>
smiling.<br>
Hahaha....<br>
My Face!
It is always
smiling.
Hahaha....

 边框
<------border------->
<img border=#> #=value
<a href="URL">
<img src=URL border=15>
</a> 
 
 客户端图象映射图(Client Side Image Map) 


        

      		
    

    

      --  作者：白云悠悠

        --  发布时间：2007/7/18 11:20:42

        

        --  

        
多媒体页面
 嵌入多媒体文本(EMBED) 
<------Embed------->
基本语法 <embed src=#> #=URL
本标记可以用来在主页中嵌入多媒体文本，如：
电影(movie), 声音(sound), 虚拟现实语言(vrml)... ... 
体会 <embed> 标记，您需要把 plugin 安装完备。
请注意：embed attributes are different between each plugins. 
 背景音乐 
<------bgsound------->
<bgsound src=#> #=WAV 文件的 URL
<bgsound loop=#> #=循环数
<bgsound src="sound.wav" loop=3>
示例 
插入视频剪辑 
<------Basic------->
<img src="url.gif" dynsrc="url.avi">
用 url.avi 这一 AVI(Video for MS－WINDOWS) 文件来播放视频；
用 url.gif 这一 GIF 图象作为视频的封面，即：在浏览器
尚未完全读入 AVI 文件时，先在 AVI 播放区域显示该图象。
<img src="sample-s.gif" dynsrc="/SAMPLE-S.AVI">
 
<------start------->
何时开始播放 AVI <img start=#> #=fileopen, mouseover
缺省值是 #=fileopen，即在链接到含本标记的页面(如本页)时开始播放 AVI。
mouseover 是指您把鼠标移到 AVI 播放区域之上时才开始播放 AVI。
也可以两者同时设置：<img start=fileopen,mouseover>
另外，用鼠标在 AVI 播放区域点击一下，也将令浏览器开始播放该 AVI。
<img src="SAMPLE-S.GIF" dynsrc="SAMPLE-S.AVI" start=mouseover>
 
<------Control------->
控制条 <img controls>
用来在视频窗口下附加 MS－WINDOWS 的 AVI 播放控制条。 
<img src="SAMPLE-S.GIF" dynsrc="SAMPLE-S.AVI" controls>
 
<------loop------->
循环播放 <img loop=#>
<loop=infinite> 将循环播放不止。
<img src="SAMPLE-S.GIF" dynsrc="SAMPLE-S.AVI" loop=3>
 
<------Delay------->
延时 <img loopdelay=#> #=毫秒数
<img src="SAMPLE-S.GIF" dynsrc="SAMPLE-S.AVI" 
 loop=3 loopdelay=250>
 



        

      		
    

    

      --  作者：白云悠悠

        --  发布时间：2007/7/18 11:39:45

        

        --  

        
表单(FORM)标记(TAGS)
 基本语法
<------Form Basic------->
表单的基本语法
<form action="url" method=*>
... 
... 
<input type=submit> <input type=reset>
</form> 
*=GET, POST 
<------Input Basic------->
表单中提供给用户的输入形式
<input type=* name=**>
*=text, password, checkbox, radio, image, hidden, submit, reset
**=Symbolic Name for CGI script 
 文字输入和密码输入
<------Text & Password------->*=text, password 
<input type=*>
<input type=* value=**>
<form action=/cgi-bin/post-query method=POST>
您的姓名: 
<input type=text name=姓名><br>
您的主页的网址: 
<input type=text name=网址 value=http://><br>
密码: 
<input type=password name=密码><br>
<input type=submit value="发送"><input type=reset value="重设">
</form>

您的姓名: 
您的主页的网址: 
密码: 
<------Text & Password -- Size, Max ------->
<input type=* size=**>
<input type=* maxlength=**>
<form action=/cgi-bin/post-query method=POST>
<input type=text name=a01 size=40><br>
<input type=text name=a02 maxlength=5><br>
<input type=submit><input type=reset>
</form>



 复选框(Checkbox) 和 单选框(RadioButton) 
<------Checkbox------->
<input type=checkbox>
<input type=checkbox checked>
<input type=checkbox value=**>
<form action=/cgi-bin/post-query method=POST>
<input type=checkbox name=水果1>
        Banana<p>
<input type=checkbox name=水果2 checked>
        Apple<p>
<input type=checkbox name=水果3 value=橘子>
        Orange<p>
<input type=submit><input type=reset>
</form>

Banana
Apple
Orange
<------Checkbox------->
<input type=radio value=**>
<input type=radio value=** checked>
<form action=/cgi-bin/post-query method=POST>
<input type=radio name=水果>
        Banana<p>
<input type=radio name=水果 checked>
        Apple<p>
<input type=radio name=水果 value=橘子>
        Orange<p>
<input type=submit><input type=reset>
</form>

Banana
Apple
Orange
 图象域
在下面选则一个系数后，在图象上点一下，就知道什么是图象坐标了！ 
<input type=image src=url>
<form action=/cgi-bin/post-query method=POST>
<input type=image name=face src=f.gif><p>
<input type=radio name=zoom value=2 checked>x2
<input type=radio name=zoom value=4>x4
<input type=radio name=zoom value=6>x6<p>
<input type=reset>
</form>

 
x2 x4 x6
 隐藏表单的元素 
<input type=hidden value=*>
<form action=/cgi-bin/post-query method=POST>
<input type=hidden name=add value=hoge@hoge.jp>
Here is a hidden element. <p>
<input type=submit><input type=reset>
</form>

 
Here is a hidden element. 
 列表框(Selectable Menu) 
<------Basic------->
基本语法
<select name=*>
<option> ...
</select> 
<------select & option------->
<option selected>
<option value=**>
<form action=/cgi-bin/post-query method=POST>
<select name=fruits>
        <option>Banana
        <option selected>Apple
        <option value=My_Favorite>Orange
</select><p>
<input type=submit><input type=reset>
</form>

<------size & multiple------->
<select size=**>
<form action=/cgi-bin/post-query method=POST>
<select name=fruits size=3>
        <option>Banana
        <option selected>Apple
        <option value=My_Favorite>Orange
        <option>Peach
</select><p>
<input type=submit><input type=reset>
</form>

<------multiple------->
<select size=** multiple>
注意，是用 Ctrl 键配合鼠标实现多选。
(和 MS-WINDOWS 的 File Manager 一样) 
<form action=/cgi-bin/post-query method=POST>
<select name=fruits size=3 multiple>
        <option selected>Banana
        <option selected>Apple
        <option value=My_Favorite>Orange
        <option selected>Peach
</select><p>
<input type=submit><input type=reset>
</form>
 文本区域
<textarea name=* rows=** cols=**> ... <textarea>
<form action=/cgi-bin/post-query method=POST>
<textarea name=comment rows=5 cols=60>
</textarea>
<P>
<input type=submit><input type=reset>
</form>

<------Word Wrapping Off------->
对于很长的行是否进行换行的设置(Word Wrapping) 
<textarea wrap=off> ... </textarea>
不换行，是缺省设置。 
<------Word Wrapping Soft------->
<textarea wrap=soft> ... </textarea>
“软换行”，好象 MS－WORD 里的“软回车”。 
<form action=/cgi-bin/post-query method=POST>
<textarea wrap=soft name=comment rows=5 cols=25> </textarea><P>
<input type=submit><input type=reset>
</form>
<------Word Wrapping Hard------->
<textarea wrap=hard> ... </textarea>
“硬换行”，好象 MS－WORD 里的“硬回车”。 
<form action=/cgi-bin/post-query method=POST>
<textarea wrap=hard name=comment rows=5 cols=25> </textarea><P>
<input type=submit><input type=reset>
</form>


        

      		
    

    

      --  作者：白云悠悠

        --  发布时间：2007/7/18 16:41:34

        

        --  

        
表格(TABLE)标记(TAGS)
 表格的基本语法
<table>...</table> - 定义表格
<tr> - 定义表行
<th> - 定义表头
<td> - 定义表元(表格的具体数据)
带边框的表格： 
<table border>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>      
</table>

FoodDrinkSweet
ABC

不带边框的表格： 
<table>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>      
</table>

FoodDrinkSweet
ABC
 跨多行、多列的表元(Table Span)
<------Colspan------->
跨多列的表元 <th colspan=#>
<table border>
<tr><th colspan=3> Morning Menu</th>
<tr><th>Food</th>       <th>Drink</th>  <th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>

Morning Menu
FoodDrinkSweet
ABC
<------Rowspan------->
跨多行的表元 <th rowspan=#>
<table border>
<tr><th rowspan=3> Morning Menu</th>
        <th>Food</th> <td>A</td></tr>
<tr><th>Drink</th> <td>B</td></tr>
<tr><th>Sweet</th> <td>C</td></tr>
</table>

Morning MenuFoodA
DrinkB
SweetC
 表格尺寸设置
<------Border------->
<table border=#>
边框尺寸设置： 
<table border=10>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>      
</table>

FoodDrinkSweet
ABC
<------Length------->
<table border width=# height=#>
表格尺寸设置： 
<table border width=170 height=100>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>      
</table>

FoodDrinkSweet
ABC
<------CellSpacing------->
<table border cellspacing=#>
表元间隙设置： 
<table border cellspacing=10>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>      
</table>

FoodDrinkSweet
ABC
<------CellPadding------->
<table border cellpadding=#>
表元内部空白设置： 
<table border cellpadding=10>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>      
</table>

FoodDrinkSweet
ABC
 表格内文字的对齐/布局
<------ALIGN------->
<tr align=#> 
<th align=#> #=left, center, right
<td align=#> 
<table border width=160>
<tr>
                <th>Food</th><th>Drink</th><th>Sweet</th>
<tr>
                <td align=left>A</td>
                <td align=center>B</td>
                <td align=right>C</td>  
</table>

FoodDrinkSweet
ABC
<------VALIGN------->
<tr valign=#> 
<th valign=#> #=top, middle, bottom, baseline
<td valign=#> 
<table border height=100>
<tr>
                <th>Food</th><th>Drink</th>
                <th>Sweet</th><th>Other</th>
<tr>
                <td valign=top>A</td>
                <td valign=middle>B</td>
                <td valign=bottom>C</td>
                <td valign=baseline>D</td>
</table>

FoodDrinkSweetOther
ABCD
 表格在页面中的对齐/布局(Floating Table)
<------left------->
<table align=left> 
<table align="left" border>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>
My favorites...<br>
cookies, chocolates, and more.
FoodDrinkSweet
ABC
My favorites...
cookies, chocolates, and more. 
<------right------->
<table align=right> 
FoodDrinkSweet
ABC
My favorites...
cookies, chocolates, and more. 
<table vspace=# hspace=#> #=space value  
<table align="left" border vspace=20 hspace=30>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>
My favorites...<br>
cookies, chocolates, and more.
FoodDrinkSweet
ABC
My favorites...
cookies, chocolates, and more. 
 表格的标题 
<------Caption align------->
<caption align=#> ... </caption> #=left, center, right
<table border>
<caption align=center>Lunch</caption>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>      
</table>
Lunch
FoodDrinkSweet
ABC
<------Caption Valign------->
<caption valign=#> ... </caption> #=top, bottom
  • valign=top is default. 
<table border>
<caption valign=bottom>Lunch</caption>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>      
</table>
Lunch
FoodDrinkSweet
ABC
[返回]



        

      		
    

    

      --  作者：白云悠悠

        --  发布时间：2007/7/18 21:07:24

        

        --  

        
表单(FORM)标记(TAGS)
 基本语法
<------Form Basic------->
表单的基本语法
<form action="url" method=*>
... 
... 
<input type=submit> <input type=reset>
</form> 
*=GET, POST 
<------Input Basic------->
表单中提供给用户的输入形式
<input type=* name=**>
*=text, password, checkbox, radio, image, hidden, submit, reset
**=Symbolic Name for CGI script 
 文字输入和密码输入
<------Text & Password------->*=text, password 
<input type=*>
<input type=* value=**>
<form action=/cgi-bin/post-query method=POST>
您的姓名: 
<input type=text name=姓名><br>
您的主页的网址: 
<input type=text name=网址 value=http://><br>
密码: 
<input type=password name=密码><br>
<input type=submit value="发送"><input type=reset value="重设">
</form>

您的姓名: 
您的主页的网址: 
密码: 
<------Text & Password -- Size, Max ------->
<input type=* size=**>
<input type=* maxlength=**>
<form action=/cgi-bin/post-query method=POST>
<input type=text name=a01 size=40><br>
<input type=text name=a02 maxlength=5><br>
<input type=submit><input type=reset>
</form>



 复选框(Checkbox) 和 单选框(RadioButton) 
<------Checkbox------->
<input type=checkbox>
<input type=checkbox checked>
<input type=checkbox value=**>
<form action=/cgi-bin/post-query method=POST>
<input type=checkbox name=水果1>
        Banana<p>
<input type=checkbox name=水果2 checked>
        Apple<p>
<input type=checkbox name=水果3 value=橘子>
        Orange<p>
<input type=submit><input type=reset>
</form>

Banana
Apple
Orange
<------Checkbox------->
<input type=radio value=**>
<input type=radio value=** checked>
<form action=/cgi-bin/post-query method=POST>
<input type=radio name=水果>
        Banana<p>
<input type=radio name=水果 checked>
        Apple<p>
<input type=radio name=水果 value=橘子>
        Orange<p>
<input type=submit><input type=reset>
</form>

Banana
Apple
Orange
 图象域
在下面选则一个系数后，在图象上点一下，就知道什么是图象坐标了！ 
<input type=image src=url>
<form action=/cgi-bin/post-query method=POST>
<input type=image name=face src=f.gif><p>
<input type=radio name=zoom value=2 checked>x2
<input type=radio name=zoom value=4>x4
<input type=radio name=zoom value=6>x6<p>
<input type=reset>
</form>

 
x2 x4 x6
 隐藏表单的元素 
<input type=hidden value=*>
<form action=/cgi-bin/post-query method=POST>
<input type=hidden name=add value=hoge@hoge.jp>
Here is a hidden element. <p>
<input type=submit><input type=reset>
</form>

 
Here is a hidden element. 
 列表框(Selectable Menu) 
<------Basic------->
基本语法
<select name=*>
<option> ...
</select> 
<------select & option------->
<option selected>
<option value=**>
<form action=/cgi-bin/post-query method=POST>
<select name=fruits>
        <option>Banana
        <option selected>Apple
        <option value=My_Favorite>Orange
</select><p>
<input type=submit><input type=reset>
</form>

<------size & multiple------->
<select size=**>
<form action=/cgi-bin/post-query method=POST>
<select name=fruits size=3>
        <option>Banana
        <option selected>Apple
        <option value=My_Favorite>Orange
        <option>Peach
</select><p>
<input type=submit><input type=reset>
</form>

<------multiple------->
<select size=** multiple>
注意，是用 Ctrl 键配合鼠标实现多选。
(和 MS-WINDOWS 的 File Manager 一样) 
<form action=/cgi-bin/post-query method=POST>
<select name=fruits size=3 multiple>
        <option selected>Banana
        <option selected>Apple
        <option value=My_Favorite>Orange
        <option selected>Peach
</select><p>
<input type=submit><input type=reset>
</form>
 文本区域
<textarea name=* rows=** cols=**> ... <textarea>
<form action=/cgi-bin/post-query method=POST>
<textarea name=comment rows=5 cols=60>
</textarea>
<P>
<input type=submit><input type=reset>
</form>

<------Word Wrapping Off------->
对于很长的行是否进行换行的设置(Word Wrapping) 
<textarea wrap=off> ... </textarea>
不换行，是缺省设置。 
<------Word Wrapping Soft------->
<textarea wrap=soft> ... </textarea>
“软换行”，好象 MS－WORD 里的“软回车”。 
<form action=/cgi-bin/post-query method=POST>
<textarea wrap=soft name=comment rows=5 cols=25> </textarea><P>
<input type=submit><input type=reset>
</form>
<------Word Wrapping Hard------->
<textarea wrap=hard> ... </textarea>
“硬换行”，好象 MS－WORD 里的“硬回车”。 
<form action=/cgi-bin/post-query method=POST>
<textarea wrap=hard name=comment rows=5 cols=25> </textarea><P>
<input type=submit><input type=reset>
</form>
[返回]