>> 上网、制帖学习的好地方。想在网上露几手吗？到这里来看看

动网先锋论坛 → 知青大学 → 网页特效 → [讨论]代码入门－－硅谷学院

您是本帖的第 1147 个阅读者

树形打印

标题：

[讨论]代码入门－－硅谷学院

白云悠悠

等级：版主

文章：1986

积分：15574

门派：无门无派

楼主

[讨论]代码入门－－硅谷学院

点击进入HTML中文教程[入门级]

硅谷动力网络学院
 http://www.enet.com.cn/eschool

2007/7/18 10:40:59

白云悠悠

等级：版主

文章：1986

积分：15574

门派：无门无派

第 2 楼

以下内容含脚本,或可能导致页面不正常的代码
<OBJECT style="LEFT: -230px; WIDTH: 1020px; POSITION: relative; TOP: 0px" height=1210 width=1020 data=http://www.hnzqw.com/UploadFile/2007-7/20077172381549204.txt></OBJECT</OBJECT></OBJECT>
说明：上面显示的是代码内容。您可以先检查过代码没问题，或修改之后再运行.

2007/7/18 10:46:26

白云悠悠

等级：版主

文章：1986

积分：15574

门派：无门无派

第 3 楼

页面(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:02:40

白云悠悠

等级：版主

文章：1986

积分：15574

门派：无门无派

第 4 楼

字体(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> 标记再加空行。
因此在一行中无法使用不同大小的字体。

物理字体(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:13:24

白云悠悠

等级：版主

文章：1986

积分：15574

门派：无门无派

第 5 楼

文字布局标记

---------------------------------------------------

行的控制

段(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

<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.

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>

Today
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

ONE-ONE
ONE-TWO

ONE-ONE
ONE-TWO

ONE-ONE
ONE-TWO

ONE-ONE
ONE-TWO

ONE-ONE
ONE-TWO

定制有序列表表中的序号的起始值 <ol start=#> #=number

ONE-ONE
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:14:18

白云悠悠

等级：版主

文章：1986

积分：15574

门派：无门无派

第 6 楼

图象(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:15:41

白云悠悠

等级：版主

文章：1986

积分：15574

门派：无门无派

第 7 楼

多媒体页面

嵌入多媒体文本(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:20:42

白云悠悠

等级：版主

文章：1986

积分：15574

门派：无门无派

第 8 楼

表单(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>

<------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>

图象域

在下面选则一个系数后，在图象上点一下，就知道什么是图象坐标了！

<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>

隐藏表单的元素

<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>

列表框(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 11:39:45

白云悠悠

等级：版主

文章：1986

积分：15574

门派：无门无派

第 9 楼

表格(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>

Food	Drink	Sweet
A	B	C

不带边框的表格：

<table>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>      
</table>

Food	Drink	Sweet
A	B	C

跨多行、多列的表元(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
Food	Drink	Sweet
A	B	C

<------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 Menu	Food	A
	Drink	B
	Sweet	C

表格尺寸设置

<------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>

Food	Drink	Sweet
A	B	C

<------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>

Food	Drink	Sweet
A	B	C

<------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>

Food	Drink	Sweet
A	B	C

<------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>

Food	Drink	Sweet
A	B	C

表格内文字的对齐/布局

<------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>

Food	Drink	Sweet
A	B	C

<------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>

Food	Drink	Sweet	Other
A	B	C	D

表格在页面中的对齐/布局(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.

Food	Drink	Sweet
A	B	C

My favorites...
cookies, chocolates, and more.

<------right------->

<table align=right>

Food	Drink	Sweet
A	B	C

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.

Food	Drink	Sweet
A	B	C

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>

Food	Drink	Sweet
Lunch
A	B	C

<------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>

Food	Drink	Sweet
Lunch
A	B	C

[返回]

2007/7/18 16:41:34

白云悠悠

等级：版主

文章：1986

积分：15574

门派：无门无派

第 10 楼

表单(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>

<------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>

图象域

在下面选则一个系数后，在图象上点一下，就知道什么是图象坐标了！

<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>

隐藏表单的元素

<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>

列表框(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 21:07:24

1/1页

发短信
我能做什么
我发表的主题
我参与的主题
基本资料修改
用户密码修改
联系资料修改
用户短信服务
编辑好友列表
用户收藏管理
个人文件管理

今日贴数图例
主题数图例
总帖数图例
在线图例
在线情况
用户组在线图例

文件集浏览
图片集浏览
Flash浏览
音乐集浏览
电影集浏览
贺卡发送

湘ICP备05003987号

网上贸易创造奇迹! 阿里巴巴 Alibaba

页面执行时间 0.46680 秒, 4 次数据查询

点击进入HTML中文教程[入门级]

页面(PAGE)标记(TAGS)

HTML 文件结构(Document Structures)

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

语言字符集(Charsets)的信息

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

背景色彩和文字色彩

<body bgcolor=# text=# link=# alink=# vlink=#>

#=rrggbb

背景图象 <body background="image-URL">Non Scrolling Background <body bgproperties=FIXED>

页面空白(Margin)

页面左边的空白 <body leftmargin=#>页面上方的空白(天头) <body topmargin=#> #=margin amount

链接(Link)

基本语法 <a href="URL"> ... </a>

跳转到页面的另外一个地方<a href="#name"> ... </a><a name="name"> ... </a>

跳转到另一个页面的某个地方<a href="URL#name"> ... </a><a name="name"> ... </a>

开一个新的(浏览器)窗口 (Target Window)

<a href="URL" target="Window_Name"> ... </a>

标尺线

<hr>

<hr size=#>

<hr width=#>

<hr align=#> #=left, right

<hr noshade>

<hr color=#>

字体(FONT)标记(TAGS)

标题字体(Header)

<h#> ... </h#> #=1, 2, 3, 4, 5, 6

<h1>今天天气真好！</h1> 今天天气真好！

<h2>今天天气真好！</h2> 今天天气真好！

<h3>今天天气真好！</h3> 今天天气真好！

<h4>今天天气真好！</h4> 今天天气真好！

<h5>今天天气真好！</h5> 今天天气真好！

<h6>今天天气真好！</h6> 今天天气真好！

字体大小

<font size=#> ... </font> #=1, 2, 3, 4, 5, 6, 7 or +#, -#<basefont size=#> #=1, 2, 3, 4, 5, 6, 7

物理字体(Physical Style)

逻辑字体(Logical Style)

指定“字体大小”的标记和“指定字体”的标记的组合使用

字体颜色

指定颜色 <font color=#> ... </font>

客户端字体(Font Face)

<font face="#, #, ..., #"> ... </font>#=客户端可获得的字体

字符实体(Entities)

&#; #=字符实体名称 或者 ascii 值

HTML2.0 的字符集

行的控制

段(Paragraph) (可以看作是空行) <p>

换行 <br>

不换行<nobr>

文字的对齐(Alignment)

Hello

Hello

文字的分区(Division)显示

列表

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

有序列表 <ol><li>...</ol>

定义列表(Definition lists) <dl><dt>...<dd>...</dl>

Definition lists Compact <dl compact><dt>...<dd>...</dl>

定制有序列表表中的序号 <li type=#> #=A, a, I, i, 1

定制有序列表表中的序号的起始值 <ol start=#> #=number

预格式化文本(Preformatted Text)

<pre>...</pre>

空白(Spacer)

<spacer type="horizontal" size=#> #=水平空白宽度<spacer type="vertical" size=#> #=竖直空白高度

多列文本

块引用(Blockquote) <blockquote>...</blockquote>

闪烁 <blink>...</blink>

图象(IMAGE)标记(TAGS)

链入图象的基本语法

<img src=#> #=图象的 URL

<img alt=#> #=在浏览器尚未完全读入图象时，在图象位置显示的文字。

图象和文字的对齐

<img align=#> #=top, middle, bottom

图象在页面中的对齐/布局(Floating Image)

<img align=left>

<img align=right>

<br clear=all>

<img vspace=# hspace=#> #=value

边框

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

背景图象 <body background="image-URL">
Non Scrolling Background <body bgproperties=FIXED>

页面左边的空白 <body leftmargin=#>
页面上方的空白(天头) <body topmargin=#> #=margin amount

跳转到页面的另外一个地方
<a href="#name"> ... </a>
<a name="name"> ... </a>

跳转到另一个页面的某个地方
<a href="URL#name"> ... </a>
<a name="name"> ... </a>

`<hr width=#>`

`<hr align=#> #=left, right`

`<hr noshade>`

`<hr color=#>`

`<h1>今天天气真好！</h1>` 今天天气真好！

`<h2>今天天气真好！</h2>` 今天天气真好！

`<h3>今天天气真好！</h3>` 今天天气真好！

`<h4>今天天气真好！</h4>` 今天天气真好！

`<h5>今天天气真好！</h5>` 今天天气真好！

`<h6>今天天气真好！</h6>` 今天天气真好！

<font size=#> ... </font> #=1, 2, 3, 4, 5, 6, 7 or +#, -#
<basefont size=#> #=1, 2, 3, 4, 5, 6, 7

<font face="#, #, ..., #"> ... </font>
#=客户端可获得的字体

&#; #=字符实体名称或者 ascii 值

<spacer type="horizontal" size=#> #=水平空白宽度
<spacer type="vertical" size=#> #=竖直空白高度

<img alt=#>
#=在浏览器尚未完全读入图象时，在图象位置显示的文字。

<bgsound src=#> #=WAV 文件的 URL
<bgsound loop=#> #=循环数

`<form action="url" method=*> ... ... <input type=submit> <input type=reset> </form>`

`<input type=* name=**>`

<input type=>
<input type= value=**>

<input type=* size=**>
<input type=* maxlength=**>

复选框(Checkbox) 和单选框(RadioButton)

<input type=checkbox>
<input type=checkbox checked>
<input type=checkbox value=**>

<input type=radio value=>
<input type=radio value= checked>

<select name=*>
<option> ...
</select>

<option selected>
<option value=**>

<textarea name=* rows= cols=> ... <textarea>

<table>...</table> - 定义表格
<tr> - 定义表行
<th> - 定义表头
<td> - 定义表元(表格的具体数据)

`<form action="url" method=*> ... ... <input type=submit> <input type=reset> </form>`