html教程

noTme

基本语法 <a href="URL"> ... </a>
这是一个
<a href="samp/link.html">链接的例子</a>。
点一下带下划线的文字!

　

跳转到页面的另外一个地方
<a href="<a name="name"> ... </a>
<a href="<a name="jump-test">下一个链接点</a>
下一个链接点

　

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

指定颜色 <font color=
<font color=ffffff>White</font> &
<font color=white>White</font>

客户端字体(Font Face)


<font face="
<font face="Arial, Helvetica"> Hellow World!</font>

Hellow World!

客户端字体(Font Face)示例
　

&
HTML2.0 的字符集
&           &
<            <
>            >
"          "

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

很好。

　

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

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

　
<hn align=<p align=
<h3 align=center>Hello<\h3>
<h3 align=right>Hello<\h3>
Hello
Hello

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

　
<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>
Today
Tommorow
定义列表(Definition lists) <dl><dt>...<dd>...</dl>
<dl>
<dt>Today
<dd>Today is yesterday.
<dt>Tomorrow
<dd>Tomorrow is today.
</dl>
Today
Today will be yesterday.
Tomorrow
Tomorrow will be today.
Definition lists Compact <dl compact><dt>..<dd>..</dl>
Today
Today will be yesterday.
Next
Tomorrow will be today.  <dl compact>
<dt>Today
<dd>Today is yesterday.
<dt>Tomorrow
<dd>Tomorrow is today.
</dl>

　
定制表中的标记 <li type=
<ul>
<li type=disc>ONE
<li type=circle>TWO
<li type=square>THREE
</ul>
ONE
TWO
THREE
定制有序列表表中的序号 <li type=
<ol><li type=A>ONE-ONE
<li>ONE-TWO</ol>
ONE-ONE
ONE-TWO
<ol><li type=a>ONE-ONE
<li>ONE-TWO</ol>
ONE-ONE
ONE-TWO
<ol><li type=I>ONE-ONE
<li>ONE-TWO</ol>
ONE-ONE
ONE-TWO
<ol><li type=i>ONE-ONE
<li>ONE-TWO</ol>
ONE-ONE
ONE-TWO
<ol><li type=1>ONE-ONE
<li>ONE-TWO</ol>
ONE-ONE
ONE-TWO
定制有序列表表中的序号的起始值 <ol start=
<ol start=5>
<li type=A>ONE-ONE
<li>ONE-TWO
        <ol start=10>
        <li>TWO-ONE
        <li type=i>TWO-TWO
</ol></ol>




ONE-ONE
ONE-TWO
TWO-ONE
TWO-TWO
　
<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 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=
<spacer type="block" width=150 height=50 align=left>
YESTERDAY<br> TODAY<br> TOMORROW
YESTERDAY
TODAY
TOMORROW

　
<multicol cols=
<multicol cols=2> text text text... </multicol>
例子

<multicol gutter=
<multicol cols=2 gutter=100> text text text... </multicol>
例子
<multicol width=
<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>
闪烁！闪烁！
链入图象的基本语法

<img src=

<img alt=
<img src="f.gif" alt="MY FACE :-)">
<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>
My Face!
It is always
smiling.
Hahaha....



　

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

　

　

<img vspace=
<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....

<img border=
<a href="URL">
<img src=URL border=15>
</a>
表单的基本语法
<form action="url" method=*>
...
...
<input type=submit> <input type=reset>
</form>
*=GET, POST

　

表单中提供给用户的输入形式
<input type=* name=**>
*=text, password, checkbox, radio, image, hidden, submit, reset

**=Symbolic Name for CGI script

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


　

您的姓名:
您的主页的网址:
密码:


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


　





　

<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

表格的基本语法
<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

　
跨多列的表元 <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

跨多行的表元 <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

　
<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


<table border width=表格尺寸设置：
<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


<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


<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

　

<tr align=
<th align=
<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

<tr valign=
<th valign=
<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

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


　
<table align=right>
Food Drink Sweet
A B C
My favorites...
cookies, chocolates, and more.


　
<table vspace=
<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=
<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
Food Drink Sweet
A B C


<caption valign=
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>



　
<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



　
基本语法
<select name=*>
<option> ...
</select>
<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>


　

BananaAppleOrange


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


　

BananaAppleOrangePeach


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

　

BananaAppleOrangePeach


　

对于很长的行是否进行换行的设置(Word Wrapping)
<textarea wrap=off> ... </textarea>
不换行，是缺省设置。

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

　





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

modeng

谢谢!学习中，谢谢

3566401

怎么样进行鼠标的设置那