页面(PAGE)标记(TAGS)

来源：互联网发布：windows 行为监控软件编辑：程序博客网时间：2024/05/16 11:04

页面(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)

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

链接(Link)

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

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

这是一个链接的例子。点一下带下划线的文字!

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

<a href="#jump-test">跳转到下一个"链接点"</a><P>
<a name="jump-test">下一个链接点</a>

跳转到下一个"链接点"

下一个链接点

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

跳转到另一个页面的<a href="samp/link.html#jump-test">某个地方</a>。

跳转到另一个页面的某个地方。

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

<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

<hr color="red">

字体(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 & White

客户端字体(Font Face)

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

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

Hellow World!

客户端字体(Font Face)示例

字符实体(Entities)

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

HTML2.0 的字符集

&amp;           &

&lt;            <

&gt;            >

&quot;          "

HTML2.0 字符实体名称列表

HTML3.2 字符实体名称列表

ISO 字符实体名称列表

文字布局(TEXT STYLE)标记(TAGS)

行的控制

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

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

Tomorrow will be today.

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

定制列表元素

定制表中的标记 <li type=#> #=disk, circle, square

<ul>
<li type=disc>ONE
<li type=circle>TWO
<li type=square>THREE
</ul>

THREE

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

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

A. ONE-ONE

B. ONE-TWO

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

a. ONE-ONE

b. ONE-TWO

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

I. ONE-ONE

ONE-TWO

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

i. ONE-ONE

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>

ONE-ONE
ONE-TWO

TWO-ONE

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>

闪烁！闪烁！

图象(IMAGE)标记(TAGS)

链入图象的基本语法

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

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

边框

<img border=#> #=value

<a href="URL">
<img src=URL border=15>
</a>

客户端图象映射图(Client Side Image Map)

表单(FORM)标记(TAGS)

基本语法

表单的基本语法

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

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

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

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

基本语法

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

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

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

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

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

不带边框的表格：

<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

跨多行、多列的表元(Table Span)

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

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

Drink

Sweet

表格尺寸设置

<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

<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

<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

<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

表格内文字的对齐/布局

<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

<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

表格在页面中的对齐/布局(Floating Table)

<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

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

<table align=right>

Food

Drink

Sweet

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

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

表格的标题

<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

Food

Drink

Sweet

<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

Food

Drink

Sweet

表格进阶(TABLE ADVANCED)

表格的色彩

表元的背景色彩和背景图象
<th bgcolor=#>
<th background="URL">

#=rrggbb 16 进制 RGB 数码, 或者是下列预定义色彩名称：
Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,
Fuchsia, White, Green, Purple, Silver, Yellow, Aqua

<table border>

<tr><th bgcolor=ffaa00>Food</th>

    <th bgcolor=Red>Drink</th>

    <th rowspan=2 background="image.gif">Sweet</th>

<tr bgcolor=white><td>A</td><td>B</td>

</table>

Food

Drink

Sweet

表格边框的色彩
<table bordercolor=#>

<table cellspacing=5 border=5 bodercolor=#ffaa00>

<tr><th>Food</th><th>Drink</th><th>Sweet</th>

<tr><td>A</td><td>B</td><td>C</td>

</table>

Food

Drink

Sweet

表格边框色彩的亮度控制
<table bordercolorlight=#>
<table bordercolordark=#>

<table cellspacing=5 border=5

     bordercolorlight=White bordercolordark=Maroon>

<tr><th>Food</th><th>Drink</th><th>Sweet</th>

<tr><td>A</td><td>B</td><td>C</td>

</table>

Food

Drink

Sweet

表格的分组显示(Structured Table)

按行分组
<thead> ... </thead> - 表的题头(Header)
<tbody> ... </tbody> - 表的正文(Body)
<tfoot> ... </tfoot> - 表的脚注(Footer)

<table border>

<thead>

     <tr><th>Food</th><th>Drink</th><th>Sweet</th>

</thead>

<tbody>

     <tr><td>A</td><td>B</td><td>C</td>

     <tr><td>D</td><td>E</td><td>F</td>

</tbody>

</table>

Food

Drink

Sweet

按列分组
<colgroup align=#> #=left, right, center

<table border width=160>

<colgroup align=left>

<colgroup align=center>

<colgroup align=right>

     <thead>

          <tr><th>Food</th><th>Drink</th><th>Sweet</th>

     </thead>

     <tbody>

          <tr><td>A</td><td>B</td><td>C</td>

          <tr><td>D</td><td>E</td><td>F</td>

     </tbody>

</table>

Food

Drink

Sweet

列的属性控制
<col span=#> #=从左数起，具有指定属性的列的列数
<col align=#> #=left, right, center

<table border width=160>

<colgroup>

     <col align=center span=2>

<colgroup align=right>

     <thead>

          <tr><th>Food</th><th>Drink</th><th>Sweet</th>

     </thead>

     <tbody>

          <tr><td>A</td><td>B</td><td>C</td>

          <tr><td>D</td><td>E</td><td>F</td>

     </tbody>

</table>

Food

Drink

Sweet

表格中边框的显示

显示所有 4 个边框 <table frame=box>

<table border frame=box>

<thead>

     <tr><th>Food</th><th>Drink</th><th>Sweet</th>

</thead>

<tbody>

     <tr><td>A</td><td>B</td><td>C</td>

     <tr><td>D</td><td>E</td><td>F</td>

</tbody>

</table>

Food

Drink

Sweet

只显示上边框 <table frame=above>

Food

Drink

Sweet

只显示下边框 <table frame=below>

Food

Drink

Sweet

只显示上、下边框 <table frame=hsides>

Food

Drink

Sweet

只显示左、右边框 <table frame=vsides>

Food

Drink

Sweet

只显示左边框 <table frame=lhs>

Food

Drink

Sweet

只显示右边框 <table frame=rhs>

Food

Drink

Sweet

不显示任何边框 <table frame=void>

Food

Drink

Sweet

表格中分隔线(Rules)的显示

显示所有分隔线 <table rules=all>

<table border rules=all>

<colgroup><col align=center span=2>

<colgroup align=right>

     <thead>

          <tr><th>Food</th><th>Drink</th><th>Sweet</th>

     </thead>

     <tbody>

          <tr><td>A</td><td>B</td><td>C</td>

          <tr><td>D</td><td>E</td><td>F</td>

     </tbody>

     <tbody>

          <tr><td rowspan=3 align=right>Total $-00.0</td>

     </tbody>

</table>

Food

Drink

Sweet

Total $-00.0

只显示组(Groups)与组之间的分隔线 <table rules=groups>

Food

Drink

Sweet

Total $-00.0

只显示行与行之间的分隔线 <table rules=rows>

Food

Drink

Sweet

Total $-00.0

只显示列与列之间的分隔线 <table rules=cols>

Food

Drink

Sweet

Total $-00.0

不显示任何分隔线 <table rules=none>

Food

Drink

Sweet

Total $-00.0

多窗口页面(Frames)

基本语法

<frameset> ... </frameset>
<frame src="url">
<noframes> ... </noframes>

在 <noframes> 标记后的文字将只出现在不支持 FRAMES 的浏览器中。

        <HTML>

        <HEAD>

        </HEAD>

        <FRAMESET>

             <FRAME SRC="url">

             <NOFRAMES> ... </NOFRAMES>

        </FRAMESET>

        </HTML>

各窗口的尺寸设置

<frameset cols=#>

纵向排列多个窗口：

<frameset cols=30%,20%,50%>

<frame src="A.html">

<frame src="B.html">

<frame src="C.html">

</frameset>

示例

<frameset rows=#>

横向排列多个窗口：

<frameset rows=25%,25%,50%>

<frame src="A.html">

<frame src="B.html">

<frame src="C.html">

</frameset>

示例

COLS & ROWS

纵横排列多个窗口：

<frameset cols=20%,*>

<frame src="A.html">

     <frameset rows=40%,*>

     <frame src="B.html">

     <frame src="C.html">

     </frameset>

</frameset>

示例

不允许各窗口改变大小 <frame noresize>

缺省设置是允许各窗口改变大小的。

各窗口间相互操作(Frame Target)

窗口标识(Frame Name)
<frame name=#>
<a href=url target=#>

<frameset cols=50%,50%>

<frame src="A.html">

<frame src="B.html" name="HELLO">

</frameset>

示例

特殊的 4 类操作(很有用喔)

<a href=url target=_blank> 新窗口
<a href=url target=_self> 本窗口
<a href=url target=_parent> 父窗口
<a href=url target=_top> 整个浏览器窗口

示例

Frame 的外观(Appearance)

各窗口边框的设置 <frame frameborder=#> #=yes, no / 1, 0

<frameset rows=30%,*>

<frame src="Acol.html" frameborder=1>

<frameset cols=30%,*>

     <frame src="Bcol.html" frameborder=0>

     <frame src="Ccol.html" frameborder=0>

</frameset>

</frameset>

示例

(A 有边框，B、C 没有)

各窗口间空白区域的设置
<frameset framespacing=#> #=空白区域的大小

<frameset rows=30%,* framespacing=100>

<frame src="Acol.html">

<frameset cols=30%,*>

     <frame src="Bcol.html">

     <frame src="Ccol.html">

</frameset>

</frameset>

示例

边框色彩 <frameset bordercolor=#>

#=rrggbb 16 进制 RGB 数码, 或者是下列预定义色彩名称：
Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,
Fuchsia, White, Green, Purple, Silver, Yellow, Aqua

<frameset rows=30%,* bordercolor=red>

<frame src="Acol.html">

<frameset cols=30%,*>

     <frame src="Bcol.html">

     <frame src="Ccol.html">

</frameset>

</frameset>

示例

页面空白(Margin) <frame marginwidth=# marginheight=#>

<frameset cols=50%,50%>

<frame src="A.html">

<frame src="A.html"

    marginwidth=50

    marginheight=50>

</frameset>

示例

AAAA

AA
AA

卷滚条设置 <frame scrolling=#> #=yes, no, auto

#=缺省值是 auto。

浮动窗口(Floating Frame)

<iframe src=# name=##> ... </iframe>
#=初始页面的 URL
##=窗口标识(Frame Name)(之后可对此标识进行各窗口间相互操作)
... = 此处文字将只出现在不支持 FRAMES 的浏览器中。

<center>

<iframe src="A.html" name="window">

   Here is a Floating Frame

</iframe>

<br><br>

<a href="A.html" target="window">Load A</A><BR>

<a href="B.html" target="window">Load B</A><BR>

<a href="Ccol.html" target="window">Load C</A><BR>

</center>

示例

Display A.html

Load A
Load B
Load C

会移动的文字(Marquee)

基本语法

<marquee> ... </marquee>

<marquee>啦啦啦，我会移动耶！</marquee>

文字移动属性的设置

方向 <direction=#> #=left, right

<marquee direction=left>啦啦啦，我从右向左移！</marquee> <P>
<marquee direction=right>啦啦啦，我从左向右移！</marquee>

方式 <bihavior=#> #=scroll, slide, alternate

<marquee behavior=scroll>啦啦啦，我一圈一圈绕着走！</marquee> <P>
<marquee behavior=slide>啦啦啦，我只走一次就歇了！</marquee> <P>
<marquee behavior=alternate>啦啦啦，我来回走耶！</marquee>

循环 <loop=#> #=次数；若未指定则循环不止(infinite)

<marquee loop=3 width=50% behavior=scroll>啦啦啦，我只走 3 趟哟！</marquee> <P>
<marquee loop=3 width=50% behavior=slide>啦啦啦，我只走 3 趟哟！</marquee> <P>
<marquee loop=3 width=50% behavior=alternate>啦啦啦，我只走 3 趟哟！</marquee>

速度 <scrollamount=#>

<marquee scrollamount=20>啦啦啦，我走得好快哟！</marquee>

延时 <scrolldelay=#>

<marquee scrolldelay=500 scrollamount=100>啦啦啦，我走一步，停一停！</marquee>

外观(Layout)设置

对齐方式(Align) <align=#> #=top, middle, bottom

<font size=6>
<marquee align=# width=400>啦啦啦，我会移动耶！</marquee>
</font>
对齐上沿、中间、下沿。

对齐上沿。

对齐中间。

对齐下沿。

底色 <bgcolor=#>

#=rrggbb 16 进制数码，或者是下列预定义色彩：
Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,
Fuchsia, White, Green, Purple, Silver, Yellow, Aqua

<marquee bgcolor=aaaaee>啦啦啦，我会移动耶！</marquee>

面积 <height=# width=#>

<marquee height=40 width=50% bgcolor=aaeeaa>
啦啦啦，我会移动耶！
</marquee>

空白(Margins)<hspace=# vspace=#>

********************************************<br>
嗨,
<marquee hspace=20 vspace=20 width=150 bgcolor=ffaaaa align=middle>啦啦啦，我会移动耶！</marquee>
大家好！<br>
********************************************

********************************************
嗨, 大家好！
********************************************

多媒体页面(Alternative Inline Elements)

嵌入多媒体文本(EMBED)

基本语法 <embed src=#> #=URL

本标记可以用来在主页中嵌入多媒体文本，如：
电影(movie), 声音(sound), 虚拟现实语言(vrml)... ...
体会 <embed> 标记，您需要把 plugin 安装完备。
请注意：embed attributes are different between each plugins.

背景音乐

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

<bgsound src="sound.wav" loop=3>

示例

插入视频剪辑

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

何时开始播放 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>

控制条 <img controls>

用来在视频窗口下附加 MS－WINDOWS 的 AVI 播放控制条。

<img src="SAMPLE-S.GIF" dynsrc="SAMPLE-S.AVI" controls>

循环播放 <img loop=#>

<loop=infinite> 将循环播放不止。

<img src="SAMPLE-S.GIF" dynsrc="SAMPLE-S.AVI" loop=3>

延时 <img loopdelay=#> #=毫秒数

<img src="SAMPLE-S.GIF" dynsrc="SAMPLE-S.AVI"

 loop=3 loopdelay=250>

页面(PAGE)标记(TAGS)

页面(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 的字符集

HTML2.0 字符实体名称列表

HTML3.2 字符实体名称列表

ISO 字符实体名称列表

文字布局(TEXT STYLE)标记(TAGS)

行的控制

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

换行 <br>

不换行<nobr>

文字的对齐(Alignment)

<hn align=#>...</hn> <p align=#>...</p> #=left, center, right

Hello

Hello

<center>...</center>

文字的分区(Division)显示

<div align=left> ... </div>

<div align=center> ... </div>

<div align=right> ... </div>

列表

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

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

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

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

定制列表元素

定制表中的标记 <li type=#> #=disk, circle, square

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

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

预格式化文本(Preformatted Text)

<pre>...</pre>

<listing>...</listing>

<xmp>...</xmp>

空白(Spacer)

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

<spacer type="block" width=# height=# align=##>#=空白的尺寸##=top, middle, bottom, left, right

多列文本

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

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

<hn align=#>...</hn>
<p align=#>...</p> #=left, center, right

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

<spacer type="block" width=# height=# align=##>
#=空白的尺寸
##=top, middle, bottom, left, right

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

`<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> - 定义表元(表格的具体数据)