您的位置：首页 > 其它

页面(PAGE)标记(TAGS)

2008-02-02 20:34 351 查看

页面(PAGE)标记(TAGS)

[align=center][/align]

HTML文件结构(DocumentStructures)

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

<HTML>

<HEAD>

<title>,<base>,<link>,<isindex>,<meta>

</HEAD>

<BODY>

HTML文件的正文写在这里......

</BODY>

</HTML>

语言字符集(Charsets)的信息

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

背景色彩和文字色彩

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

背景图象<bodybackground="image-URL">
NonScrollingBackground<bodybgproperties=FIXED>

页面空白(Margin)

页面左边的空白<bodyleftmargin=#>
页面上方的空白(天头)<bodytopmargin=#>#=marginamount

链接(Link)

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

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

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

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

下一个链接点

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

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

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

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

<ahref="samp/window.html"target="window_name">
开一个新窗口!
</a>
开一个新窗口!

标尺线

<hr>

<hr>

[align=center][/align]

<hrsize=#>

<hrsize=10>

[align=center][/align]

<hrwidth=#>

<hrwidth=50>
<hrwidth=50%>

[align=center][/align]
[align=center][/align]

<hralign=#>#=left,right

<hrwidth=50%align=left>
<hrwidth=50%align=right>

[align=right][/align]

<hrnoshade>

<hrnoshade>

[align=center][/align]

<hrcolor=#>

#=rrggbb16进制RGB数码，或者是下列预定义色彩：
Black,Olive,Teal,Red,Blue,Maroon,Navy,Gray,Lime,
Fuchsia,White,Green,Purple,Silver,Yellow,Aqua
<hrcolor="red">

[align=center][/align]

字体(FONT)标记(TAGS)

[align=center][/align]

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

字体大小

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

<fontsize=7>今天天气真好！</font>今天天气真好！

<fontsize=6>今天天气真好！</font>今天天气真好！

<fontsize=5>今天天气真好！</font>今天天气真好！

<fontsize=4>今天天气真好！</font>今天天气真好！

<fontsize=3>今天天气真好！</font>今天天气真好！

<fontsize=2>今天天气真好！</font>今天天气真好！

<fontsize=1>今天天气真好！</font>今天天气真好！

物理字体(PhysicalStyle)

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

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

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

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

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

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

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

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

逻辑字体(LogicalStyle)

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

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

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

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

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

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

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

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

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

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

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

<i><fontsize=5>

<b>今天</b>天气<fontsize=6>真好！</font>

</font></i>

今天天气真好！

字体颜色

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

#=rrggbb16进制数码，或者是下列预定义色彩：
Black,Olive,Teal,Red,Blue,Maroon,Navy,Gray,Lime,
Fuchsia,White,Green,Purple,Silver,Yellow,Aqua
<fontcolor=ffffff>White</font>&
<fontcolor=white>White</font>

White&White

客户端字体(FontFace)

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

<fontface="Arial,Helvetica">HellowWorld!</font>

HellowWorld!

客户端字体(FontFace)示例

字符实体(Entities)

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

HTML2.0的字符集

&&

<<

>>

""

HTML2.0字符实体名称列表

HTML3.2字符实体名称列表

ISO字符实体名称列表

文字布局(TEXTSTYLE)标记(TAGS)

[align=center][/align]

行的控制

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

你好吗？<p>很好。
你好吗？

很好。

换行<br>

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

不换行<nobr>

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

文字的对齐(Alignment)

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

<h3align=center>Hello</h3>
<h3align=right>Hello</h3>

Hello

Hello

<center>...</center>

<center>Hello</center>
Hello

文字的分区(Division)显示

<divalign=left>...</div>

<divalign=left>
Canyoufeelhappinesswithoutunpleasant?<br>
Pleaseshowmeyoursmile.
</div>
Canyoufeelhappinesswithoutunpleasant?
Pleaseshowmeyoursmile.

<divalign=center>...</div>

Canyoufeelhappinesswithoutunpleasant?
Pleaseshowmeyoursmile.

<divalign=right>...</div>

Canyoufeelhappinesswithoutunpleasant?
Pleaseshowmeyoursmile.

列表

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

<ul>
<li>Today
<li>Tommorow
</ul>

Today

Tommorow

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

<ol>
<li>Today
<li>Tommorow
</ol>

Today

Tommorow

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

<dl>
<dt>Today
<dd>Todayisyesterday.
<dt>Tomorrow
<dd>Tomorrowistoday.
</dl>
Today
Todaywillbeyesterday.
Tomorrow
Tomorrowwillbetoday.

DefinitionlistsCompact<dlcompact><dt>...<dd>...</dl>

Today
Todaywillbeyesterday.
Next
Tomorrowwillbetoday.
<dlcompact>
<dt>Today
<dd>Todayisyesterday.
<dt>Tomorrow
<dd>Tomorrowistoday.
</dl>

定制列表元素

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

<ul>
<litype=disc>ONE
<litype=circle>TWO
<litype=square>THREE
</ul>

ONE

TWO

THREE

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

<ol><litype=A>ONE-ONE
<li>ONE-TWO</ol>
A.ONE-ONE
B.ONE-TWO
<ol><litype=a>ONE-ONE
<li>ONE-TWO</ol>
a.ONE-ONE
b.ONE-TWO
<ol><litype=I>ONE-ONE
<li>ONE-TWO</ol>
I.ONE-ONE

ONE-TWO

<ol><litype=i>ONE-ONE
<li>ONE-TWO</ol>
i.ONE-ONE

ONE-TWO

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

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

<olstart=5>

<litype=A>ONE-ONE

<li>ONE-TWO

<olstart=10>

<li>TWO-ONE

<litype=i>TWO-TWO

</ol></ol>


ONE-ONE

ONE-TWO

TWO-ONE

TWO-TWO

预格式化文本(PreformattedText)

<pre>...</pre>

<pre>
Pleaseuseyourcard.
VISAMaster
<b>Hereisanorderform.</b>
<ul><li>Fax
<li>AirMail</ul>
</pre>
Pleaseuseyourcard

VISAMaster

Hereisanorderform.


Fax

AirMail

<listing>...</listing>

<listing>
Pleaseuseyourcard.
VISAMaster
<b>Hereisanorderform.</b>
<ul><li>Fax
<li>AirMail</ul>
</listing>
Pleaseuseyourcard.

VISAMaster

Hereisorderform.


Fax

AirMail

<xmp>...</xmp>

<xmp>
Pleaseuseyourcard.
VISAMaster
<b>Hereisanorderform.</b>
<ul><li>Fax
<li>AirMail</ul>
</xmp>
Pleaseuseyourcard.

VISAMaster

<b>Hereisorderform.</b>

<ul><li>Fax

<li>AirMail</ul>




空白(Spacer)
<spacertype="horizontal"size=#>#=水平空白宽度
<spacertype="vertical"size=#>#=竖直空白高度
YESTERDAY<spacertype="horizontal"size=50>TODAY
<spacertype="vertical"size=50>TOMORROW
YESTERDAYTODAYTOMORROW

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

多列文本
<multicolcols=#>...</multicol>#=列的数目
<multicolcols=2>texttexttext...</multicol>
例子
<multicolgutter=#>...</multicol>#=列间的空白
<multicolcols=2gutter=100>texttexttext...</multicol>
例子
<multicolwidth=#>...</multicol>#=列的宽度
<multicolcols=2width=400>texttexttext...</multicol>
例子
其它
块引用(Blockquote)<blockquote>...</blockquote>
HerSong:
<blockquote>
WhenIwasyoung,Ilistenedtotheradio
waitingformyfavoritesongs....
</blockquote>
HerSong:

WhenIwasyoung,Ilistenedtotheradiowaitingformyfavoritesongs....

闪烁<blink>...</blink>
<BLINK>闪烁！闪烁！</BLINK>
闪烁！闪烁！

图象(IMAGE)标记(TAGS)
[align=center][/align]
链入图象的基本语法
<imgsrc=#>#=图象的URL
<imgalt=#>
#=在浏览器尚未完全读入图象时，在图象位置显示的文字。
<imgsrc="f.gif"alt="MYFACE:-)">

图象和文字的对齐
<imgalign=#>#=top,middle,bottom
<imgsrc=URLalign=top>Myface!
MyFace!

<imgsrc=URLalign=middle>Myface!
MyFace!

<imgsrc=URLalign=bottom>Myface!
MyFace!

只有一行文字才可以放在图象的两边。（不知道翻译的对不对？)

OnlyonetextlinecanbeflownintothebothsideofImage.

图象在页面中的对齐/布局(FloatingImage)
<imgalign=left>
<imgsrc=URLalign=left>MyFace!<br>
Itisalways<br>
smiling.<br>
Hahaha....<br>
MyFace!
Itisalways
smiling.
Hahaha....

<imgalign=right>
MyFace!
Itisalways
smiling.
Hahaha....

<brclear=all>
<imgsrc=URLalign=left>MyFace!<br>
Itisalways
<brclear=all>
smiling.<br>
Hahaha....<br>
MyFace!
Itisalways

smiling.
Hahaha....

<imgvspace=#hspace=#>#=value
<imgsrc=URLalign=leftvspace=10hspace=20>MyFace!<br>
Itisalways<br>
smiling.<br>
Hahaha....<br>
MyFace!
Itisalways
smiling.
Hahaha....

边框
<imgborder=#>#=value
<ahref="URL">
<imgsrc=URLborder=15>
</a>


客户端图象映射图(ClientSideImageMap)
表单(FORM)标记(TAGS)
[align=center][/align]
基本语法
表单的基本语法
<formaction="url"method=*>
...
...
<inputtype=submit><inputtype=reset>
</form>
*=GET,POST

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

**=SymbolicNameforCGIscript

文字输入和密码输入
*=text,password

<inputtype=*>
<inputtype=*value=**>
<formaction=/cgi-bin/post-querymethod=POST>

您的姓名:

<inputtype=textname=姓名><br>

您的主页的网址:

<inputtype=textname=网址value=http://><br>

密码:

<inputtype=passwordname=密码><br>

<inputtype=submitvalue="发送"><inputtype=resetvalue="重设">

</form>



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

<inputtype=*size=**>
<inputtype=*maxlength=**>
<formaction=/cgi-bin/post-querymethod=POST>

<inputtype=textname=a01size=40><br>

<inputtype=textname=a02maxlength=5><br>

<inputtype=submit><inputtype=reset>

</form>



复选框(Checkbox)和单选框(RadioButton)
<inputtype=checkbox>
<inputtype=checkboxchecked>
<inputtype=checkboxvalue=**>
<formaction=/cgi-bin/post-querymethod=POST>

<inputtype=checkboxname=水果1>

Banana<p>

<inputtype=checkboxname=水果2checked>

Apple<p>

<inputtype=checkboxname=水果3value=橘子>

Orange<p>

<inputtype=submit><inputtype=reset>

</form>



Banana
Apple

Orange

<inputtype=radiovalue=**>
<inputtype=radiovalue=**checked>
<formaction=/cgi-bin/post-querymethod=POST>

<inputtype=radioname=水果>

Banana<p>

<inputtype=radioname=水果checked>

Apple<p>

<inputtype=radioname=水果value=橘子>

Orange<p>

<inputtype=submit><inputtype=reset>

</form>



Banana
Apple

Orange

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

<inputtype=imagesrc=url>
<formaction=/cgi-bin/post-querymethod=POST>

<inputtype=imagename=facesrc=f.gif><p>

<inputtype=radioname=zoomvalue=2checked>x2

<inputtype=radioname=zoomvalue=4>x4

<inputtype=radioname=zoomvalue=6>x6<p>

<inputtype=reset>

</form>



x2x4x6

隐藏表单的元素
<inputtype=hiddenvalue=*>
<formaction=/cgi-bin/post-querymethod=POST>

<inputtype=hiddenname=addvalue=hoge@hoge.jp>

Hereisahiddenelement.<p>

<inputtype=submit><inputtype=reset>

</form>



Hereisahiddenelement.

列表框(SelectableMenu)
基本语法
<selectname=*>
<option>...
</select>
<optionselected>
<optionvalue=**>
<formaction=/cgi-bin/post-querymethod=POST>

<selectname=fruits>

<option>Banana

<optionselected>Apple

<optionvalue=My_Favorite>Orange

</select><p>

<inputtype=submit><inputtype=reset>

</form>



Banana
Apple
Orange

<selectsize=**>
<formaction=/cgi-bin/post-querymethod=POST>

<selectname=fruitssize=3>

<option>Banana

<optionselected>Apple

<optionvalue=My_Favorite>Orange

<option>Peach

</select><p>

<inputtype=submit><inputtype=reset>

</form>



Banana
Apple
Orange
Peach

<selectsize=**multiple>
注意，是用Ctrl键配合鼠标实现多选。
(和MS-WINDOWS的FileManager一样)
<formaction=/cgi-bin/post-querymethod=POST>

<selectname=fruitssize=3multiple>

<optionselected>Banana

<optionselected>Apple

<optionvalue=My_Favorite>Orange

<optionselected>Peach

</select><p>

<inputtype=submit><inputtype=reset>

</form>


Banana
Apple
Orange
Peach

文本区域
<textareaname=*rows=**cols=**>...<textarea>
<formaction=/cgi-bin/post-querymethod=POST>

<textareaname=commentrows=5cols=60>

</textarea>

<P>

<inputtype=submit><inputtype=reset>

</form>



对于很长的行是否进行换行的设置(WordWrapping)
<textareawrap=off>...</textarea>
不换行，是缺省设置。
<textareawrap=soft>...</textarea>
“软换行”，好象MS－WORD里的“软回车”。
<formaction=/cgi-bin/post-querymethod=POST>
<textareawrap=softname=commentrows=5cols=25></textarea><P>
<inputtype=submit><inputtype=reset>
</form>

<textareawrap=hard>...</textarea>
“硬换行”，好象MS－WORD里的“硬回车”。
<formaction=/cgi-bin/post-querymethod=POST>
<textareawrap=hardname=commentrows=5cols=25></textarea><P>
<inputtype=submit><inputtype=reset>
</form>

表格(TABLE)标记(TAGS)
[align=center][/align]
表格的基本语法
<table>...</table>-定义表格
<tr>-定义表行
<th>-定义表头
<td>-定义表元(表格的具体数据)
带边框的表格：
<tableborder>

<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
跨多行、多列的表元(TableSpan)
跨多列的表元<thcolspan=#>
<tableborder>

<tr><thcolspan=3>MorningMenu</th>

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

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

</table>


MorningMenu
Food
Drink
Sweet
A
B
C
跨多行的表元<throwspan=#>
<tableborder>

<tr><throwspan=3>MorningMenu</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>


MorningMenu
Food
A
Drink
B
Sweet
C
表格尺寸设置
<tableborder=#>
边框尺寸设置：
<tableborder=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
<tableborderwidth=#height=#>
表格尺寸设置：
<tableborderwidth=170height=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
<tablebordercellspacing=#>
表元间隙设置：
<tablebordercellspacing=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
<tablebordercellpadding=#>
表元内部空白设置：
<tablebordercellpadding=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
表格内文字的对齐/布局
<tralign=#>
<thalign=#>#=left,center,right
<tdalign=#>
<tableborderwidth=160>

<tr>

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

<tr>

<tdalign=left>A</td>

<tdalign=center>B</td>

<tdalign=right>C</td>

</table>


Food
Drink
Sweet
A
B
C
<trvalign=#>
<thvalign=#>#=top,middle,bottom,baseline
<tdvalign=#>
<tableborderheight=100>

<tr>

<th>Food</th><th>Drink</th>

<th>Sweet</th><th>Other</th>

<tr>

<tdvalign=top>A</td>

<tdvalign=middle>B</td>

<tdvalign=bottom>C</td>

<tdvalign=baseline>D</td>

</table>


Food
Drink
Sweet
Other
A
B
C
D
表格在页面中的对齐/布局(FloatingTable)
<tablealign=left>
<tablealign="left"border>

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

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

</table>

Myfavorites...<br>

cookies,chocolates,andmore.

Food
Drink
Sweet
A
B
C
Myfavorites...
cookies,chocolates,andmore.

<tablealign=right>
Food
Drink
Sweet
A
B
C
Myfavorites...
cookies,chocolates,andmore.

<tablevspace=#hspace=#>#=spacevalue
<tablealign="left"bordervspace=20hspace=30>

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

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

</table>

Myfavorites...<br>

cookies,chocolates,andmore.

Food
Drink
Sweet
A
B
C
Myfavorites...
cookies,chocolates,andmore.

表格的标题
<captionalign=#>...</caption>#=left,center,right
<tableborder>

<captionalign=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
<captionvalign=#>...</caption>#=top,bottom
valign=topisdefault.

<tableborder>

<captionvalign=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
A
B
C
表格进阶(TABLEADVANCED)
[align=center][/align]
表格的色彩
表元的背景色彩和背景图象
<thbgcolor=#>
<thbackground="URL">
#=rrggbb16进制RGB数码,或者是下列预定义色彩名称：
Black,Olive,Teal,Red,Blue,Maroon,Navy,Gray,Lime,
Fuchsia,White,Green,Purple,Silver,Yellow,Aqua
<tableborder>

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

<thbgcolor=Red>Drink</th>

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

<trbgcolor=white><td>A</td><td>B</td>

</table>

Food
Drink
Sweet
A
B
表格边框的色彩
<tablebordercolor=#>
<tablecellspacing=5border=5bodercolor=#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
A
B
C
表格边框色彩的亮度控制
<tablebordercolorlight=#>
<tablebordercolordark=#>
<tablecellspacing=5border=5

bordercolorlight=Whitebordercolordark=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
A
B
C
表格的分组显示(StructuredTable)
按行分组
<thead>...</thead>-表的题头(Header)
<tbody>...</tbody>-表的正文(Body)
<tfoot>...</tfoot>-表的脚注(Footer)
<tableborder>

<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
A
B
C
D
E
F
按列分组
<colgroupalign=#>#=left,right,center
<tableborderwidth=160>

<colgroupalign=left>

<colgroupalign=center>

<colgroupalign=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
A
B
C
D
E
F
列的属性控制
<colspan=#>#=从左数起，具有指定属性的列的列数
<colalign=#>#=left,right,center
<tableborderwidth=160>

<colgroup>

<colalign=centerspan=2>

<colgroupalign=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
A
B
C
D
E
F
表格中边框的显示
显示所有4个边框<tableframe=box>
<tableborderframe=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
A
B
C
D
E
F
只显示上边框<tableframe=above>
Food
Drink
Sweet
A
B
C
D
E
F
只显示下边框<tableframe=below>
Food
Drink
Sweet
A
B
C
D
E
F
只显示上、下边框<tableframe=hsides>
Food
Drink
Sweet
A
B
C
D
E
F
只显示左、右边框<tableframe=vsides>
Food
Drink
Sweet
A
B
C
D
E
F
只显示左边框<tableframe=lhs>
Food
Drink
Sweet
A
B
C
D
E
F
只显示右边框<tableframe=rhs>
Food
Drink
Sweet
A
B
C
D
E
F
不显示任何边框<tableframe=void>
Food
Drink
Sweet
A
B
C
D
E
F
表格中分隔线(Rules)的显示
显示所有分隔线<tablerules=all>
<tableborderrules=all>

<colgroup><colalign=centerspan=2>

<colgroupalign=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><tdrowspan=3align=right>Total$-00.0</td>

</tbody>

</table>

Food
Drink
Sweet
A
B
C
D
E
F
Total$-00.0
只显示组(Groups)与组之间的分隔线<tablerules=groups>
Food
Drink
Sweet
A
B
C
D
E
F
Total$-00.0
只显示行与行之间的分隔线<tablerules=rows>
Food
Drink
Sweet
A
B
C
D
E
F
Total$-00.0
只显示列与列之间的分隔线<tablerules=cols>
Food
Drink
Sweet
A
B
C
D
E
F
Total$-00.0
不显示任何分隔线<tablerules=none>
Food
Drink
Sweet
A
B
C
D
E
F
Total$-00.0
多窗口页面(Frames)
[align=center][/align]
基本语法
<frameset>...</frameset>
<framesrc="url">
<noframes>...</noframes>
在<noframes>标记后的文字将只出现在不支持FRAMES的浏览器中。

<HTML>

<HEAD>

</HEAD>

<FRAMESET>

<FRAMESRC="url">

<NOFRAMES>...</NOFRAMES>

</FRAMESET>

</HTML>

各窗口的尺寸设置
<framesetcols=#>
纵向排列多个窗口：
<framesetcols=30%,20%,50%>

<framesrc="A.html">

<framesrc="B.html">

<framesrc="C.html">

</frameset>


示例

A
B
C
<framesetrows=#>
横向排列多个窗口：
<framesetrows=25%,25%,50%>

<framesrc="A.html">

<framesrc="B.html">

<framesrc="C.html">

</frameset>


示例

A
B
C
COLS&ROWS
纵横排列多个窗口：
<framesetcols=20%,*>

<framesrc="A.html">

<framesetrows=40%,*>

<framesrc="B.html">

<framesrc="C.html">

</frameset>

</frameset>


示例

A
B
C
不允许各窗口改变大小<framenoresize>
缺省设置是允许各窗口改变大小的。
各窗口间相互操作(FrameTarget)
窗口标识(FrameName)
<framename=#>
<ahref=urltarget=#>
<framesetcols=50%,50%>

<framesrc="A.html">

<framesrc="B.html"name="HELLO">

</frameset>


示例

A
B
特殊的4类操作(很有用喔)
<ahref=urltarget=_blank>新窗口
<ahref=urltarget=_self>本窗口
<ahref=urltarget=_parent>父窗口
<ahref=urltarget=_top>整个浏览器窗口
示例

Frame的外观(Appearance)
各窗口边框的设置<frameframeborder=#>#=yes,no/1,0
<framesetrows=30%,*>

<framesrc="Acol.html"frameborder=1>

<framesetcols=30%,*>

<framesrc="Bcol.html"frameborder=0>

<framesrc="Ccol.html"frameborder=0>

</frameset>

</frameset>


示例

(A有边框，B、C没有)
A
B
C
各窗口间空白区域的设置
<framesetframespacing=#>#=空白区域的大小
<framesetrows=30%,*framespacing=100>

<framesrc="Acol.html">

<framesetcols=30%,*>

<framesrc="Bcol.html">

<framesrc="Ccol.html">

</frameset>

</frameset>


示例

A
B
C
边框色彩<framesetbordercolor=#>
#=rrggbb16进制RGB数码,或者是下列预定义色彩名称：
Black,Olive,Teal,Red,Blue,Maroon,Navy,Gray,Lime,
Fuchsia,White,Green,Purple,Silver,Yellow,Aqua
<framesetrows=30%,*bordercolor=red>

<framesrc="Acol.html">

<framesetcols=30%,*>

<framesrc="Bcol.html">

<framesrc="Ccol.html">

</frameset>

</frameset>


示例

A
B
C
页面空白(Margin)<framemarginwidth=#marginheight=#>
<framesetcols=50%,50%>

<framesrc="A.html">

<framesrc="A.html"

marginwidth=50

marginheight=50>

</frameset>


示例

AAAA
AA
AA
卷滚条设置<framescrolling=#>#=yes,no,auto
#=缺省值是auto。
浮动窗口(FloatingFrame)
<iframesrc=#name=##>...</iframe>
#=初始页面的URL
##=窗口标识(FrameName)(之后可对此标识进行各窗口间相互操作)
...=此处文字将只出现在不支持FRAMES的浏览器中。
<center>

<iframesrc="A.html"name="window">

HereisaFloatingFrame

</iframe>

<br><br>

<ahref="A.html"target="window">LoadA</A><BR>

<ahref="B.html"target="window">LoadB</A><BR>

<ahref="Ccol.html"target="window">LoadC</A><BR>

</center>


示例

DisplayA.html
LoadA
LoadB
LoadC

会移动的文字(Marquee)
[align=center][/align]

基本语法
<marquee>...</marquee>
<marquee>啦啦啦，我会移动耶！</marquee>

文字移动属性的设置
方向<direction=#>#=left,right
<marqueedirection=left>啦啦啦，我从右向左移！</marquee><P>
<marqueedirection=right>啦啦啦，我从左向右移！</marquee>

方式<bihavior=#>#=scroll,slide,alternate
<marqueebehavior=scroll>啦啦啦，我一圈一圈绕着走！</marquee><P>
<marqueebehavior=slide>啦啦啦，我只走一次就歇了！</marquee><P>
<marqueebehavior=alternate>啦啦啦，我来回走耶！</marquee>

循环<loop=#>#=次数；若未指定则循环不止(infinite)
<marqueeloop=3width=50%behavior=scroll>啦啦啦，我只走3趟哟！</marquee><P>
<marqueeloop=3width=50%behavior=slide>啦啦啦，我只走3趟哟！</marquee><P>
<marqueeloop=3width=50%behavior=alternate>啦啦啦，我只走3趟哟！</marquee>

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

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

外观(Layout)设置
对齐方式(Align)<align=#>#=top,middle,bottom
<fontsize=6>
<marqueealign=#width=400>啦啦啦，我会移动耶！</marquee>
</font>
对齐上沿、中间、下沿。
对齐上沿。

对齐中间。

对齐下沿。


底色<bgcolor=#>
#=rrggbb16进制数码，或者是下列预定义色彩：
Black,Olive,Teal,Red,Blue,Maroon,Navy,Gray,Lime,
Fuchsia,White,Green,Purple,Silver,Yellow,Aqua
<marqueebgcolor=aaaaee>啦啦啦，我会移动耶！</marquee>

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

空白(Margins)<hspace=#vspace=#>
********************************************<br>
嗨,
<marqueehspace=20vspace=20width=150bgcolor=ffaaaaalign=middle>啦啦啦，我会移动耶！</marquee>
大家好！<br>
********************************************
********************************************
嗨,大家好！
********************************************

多媒体页面(AlternativeInlineElements)
[align=center][/align]
嵌入多媒体文本(EMBED)
基本语法<embedsrc=#>#=URL
本标记可以用来在主页中嵌入多媒体文本，如：
电影(movie),声音(sound),虚拟现实语言(vrml)......
体会<embed>标记，您需要把plugin安装完备。
请注意：embedattributesaredifferentbetweeneachplugins.

背景音乐
<bgsoundsrc=#>#=WAV文件的URL
<bgsoundloop=#>#=循环数
<bgsoundsrc="sound.wav"loop=3>

示例

插入视频剪辑
<imgsrc="url.gif"dynsrc="url.avi">
用url.avi这一AVI(VideoforMS－WINDOWS)文件来播放视频；
用url.gif这一GIF图象作为视频的封面，即：在浏览器
尚未完全读入AVI文件时，先在AVI播放区域显示该图象。
<imgsrc="SAMPLE-S.GIF"dynsrc="SAMPLE-S.AVI">


何时开始播放AVI<imgstart=#>#=fileopen,mouseover
缺省值是#=fileopen，即在链接到含本标记的页面(如本页)时开始播放AVI。

mouseover是指您把鼠标移到AVI播放区域之上时才开始播放AVI。

也可以两者同时设置：<imgstart=fileopen,mouseover>

另外，用鼠标在AVI播放区域点击一下，也将令浏览器开始播放该AVI。

<imgsrc="SAMPLE-S.GIF"dynsrc="SAMPLE-S.AVI"start=mouseover>


控制条<imgcontrols>
用来在视频窗口下附加MS－WINDOWS的AVI播放控制条。
<imgsrc="SAMPLE-S.GIF"dynsrc="SAMPLE-S.AVI"controls>


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

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


延时<imgloopdelay=#>#=毫秒数
<imgsrc="SAMPLE-S.GIF"dynsrc="SAMPLE-S.AVI"

loop=3loopdelay=250>



                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航