[转帖]HTML语言贴图教程！（完整篇）(页 1) - 论坛帮助

沉默是金 发表于 2005-6-2 12:03

[转帖]HTML语言贴图教程！（完整篇）

论坛开放了HTML标签，这对爱好帖图的人来说不可不为之吸引，看到大家做出有飘亮的背景，一些特效的精美帖子也用不着眼红了，其实那些都是有简单的HTML语法来实现的。
 
一般也不用了解太多HTML代码的意义，但是想要做出漂亮有风格的帖子，一些简单的代码还是要理解的，这里偶就提供一些简单的HTML语法的解释和使用方法，想要了解更多的可以参照有关这方面的相关教程。
 
废话偶就少说点，言归正传。（由于同时做出效果来会出错，所以偶会分帖说明效果的）
一：背景
<div class="quote">
 
<TABLE align=center background="帖子背景图" border=0 cellPadding=0 cellSpacing=0
width="100%" table> 
<TBODY> 
<TR> 
<TD>帖子内容，文字或图片.....
</TD></TR></TBODY></TABLE></CENTER></div>
<TABLE> 的参数设定（常用）： 
<table width="400"
border="1"
cellspacing="2"
cellpadding="2"
align="CENTER"
valign="TOP"
background="myweb.gif"
bgcolor="#0000FF"
bordercolor="#CF0000"
bordercolorlight="#00FF00"
bordercolordark="#00FFFF"
cols="2"> 
注解：
width="400" 
表格宽度，接受绝对值（如 80）及相对值（如 80%）。
border="1" 
表格边框的厚度，不同浏览器有不同的内定值，故请指明。 
cellspacing="2" 
表格格线的厚度
align="CENTER" 
表格的摆放位置（水平），可选值为： left,
right,
center
valign="TOP". 
表格内内容的对齐方式（垂直），可选值为：
top, middle, bottom。　　
background="myweb.gif"
 
表格的背景图片，与 bgcolor 不要同用。 
bgcolor="#0000FF"
 
表格的底色，与 background 不要同用
bordercolor="#CF0000"
 
表格边框颜色
bordercolorlight="#00FF00"
 
表格边框向光部分的颜色
bordercolordark="#00FFFF"
 
表格边框背光部分的颜色，使用
bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。
cols="2" 
表格栏位数目，只是让浏览器在下载表格时先画出整个表格而已。
HTML英语意思是：Hypertext 
Marked Language，即超文本标记语言,是一种用来制作超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台（如UNIX，WINDOWS等）。自1990年以来HTML就一直被用作World 
Wide Web 的信息表示语言，用于描述Homepage的格式设计和它与WWW上其它Homepage 
的连结信息。使用HTML语言描述的文件，需要通过WWW浏览器显示出效果。 
　
接下来，我们就结合几个实例来观看一下HTML的全貌，以便于我们首先对它有一个整体上的认识，并且体会一下超文本与标记究竟是什么意思。
【<a target="_blank" style="text-decoration: none; color: #000000" href="http://www.gggl.gov.cn/fwgc/jiaocheng/html/yball.gif">实例一</a>】　　　【<a target="_blank" style="text-decoration: none; color: #000000" href="http://www.moonyh.com/bbs/dispbbs.asp?boardID=15&ID=718">实例二</a>】　　　【<a target="_blank" style="text-decoration: none; color: #000000" href="http://www.moonyh.com/bbs/dispbbs.asp?boardID=15&ID=545">实例三</a>】

<img onmousewheel="return bbimg(this)" style="CURSOR: pointer" onclick="javascript:window.open(this.src);" src="http://www.gggl.gov.cn/fwgc/jiaocheng/html/yball.gif" onload="javascript:if(this.width>screen.width-500)this.style.width=screen.width-500;">通过HTML可以表现出丰富多彩的设计风格
图片调用：<IMG SRC="文件名"> 
 
　文字格式：
" COLOR="00FFFF">文字

<img onmousewheel="return bbimg(this)" style="CURSOR: pointer" onclick="javascript:window.open(this.src);" src="http://www.gggl.gov.cn/fwgc/jiaocheng/html/yball.gif" onload="javascript:if(this.width>screen.width-500)this.style.width=screen.width-500;">通过HTML可以实现页面之间的跳转
页面跳转：〈A HREF="文件路径/文件名"></A>

<img onmousewheel="return bbimg(this)" style="CURSOR: pointer" onclick="javascript:window.open(this.src);" src="http://www.gggl.gov.cn/fwgc/jiaocheng/html/yball.gif" onload="javascript:if(this.width>screen.width-500)this.style.width=screen.width-500;">通过HTML可以展现多媒体的效果
声频：<EMBED SRC="音乐文件名" 
AUTOSTART=true> 
 
视频：<EMBED SRC="视频文件名" 
AUTOSTART=true>

从以上的例子，我们就可以理解超文本与标记的含义了。所谓超文本，因为它可以加入图片、声音、动画、影视等内容，因为它可以从一个文件跳转到另一个文件，与世界各地主机的文件连接。所谓标记，就是它采用了一系列的指令符号来控制输出的效果，这些指令符号用“<标签名字　属性>”来表示。
<h3>HTML的基本结构</h3>
超文本文档分文档头和文档体两部分，在文档头里，对这个文档进行了一些必要的定义，文档体中才是要显示的各种文档信息。
<hr width="100%">
<HTML>
<HEAD> 
 
头部信息 
 
</HEAD>
<BODY> 
 
文档主体，正文部分 
 
</BODY>
</HTML>
　　其中<HTML>在最外层，表示这对标记间的内容是HTML文档。我们还会看到一些Hompage省略<HTML>标记， 
因为.html 或.htm 文件被Web浏览器默认为是HTML文档。<HEAD>
之间包括文档的头部信息，如文档总标题等，若不需头部信息则可省略此标记。<BODY> 
标记一般不省略，表示正文内容的开始。
<hr width="100%">
下面是一个最基本的超文本文档的源代码：
<img src="http://home4u1.china.com/HOME1/00/10/50/70/08/0000801570/h1.jpg">
超文本中的标签

　　刚刚接触超文本，遇到的最大的障碍就是一些用“<”和“>”括起来的句子，我们称它为标签，是用来分割和标记文本的元素，以形成文本的布局、文字的格式及五彩缤纷的画面。
1. 单标签 
 
某些标记称为“单标签”，因为它只需单独使用就能完整地表达意思，这类标记的语法是： 
　
< 标签名称> 
最常用的单标签是 , 它表示换行。 
2.双标签 
 
　　另一类标记称为“双标签”，它由“始标签”和“尾标签”两部分构成，必须成对使用， 
其中始标签告诉Web浏览器从此处开始执行该标记所表示的功能，而尾标签告诉Web浏览器在这 
里结束该功能。始标签前加一个斜杠（/）即成为尾标记。这类标记的语法是： 
<标签> 内容</ 标签> 
　　其中“内容” 部分就是要被这对标记施加作用的部分。例如你想突出对某段文字的显示，就将此段文字放在一 
标记中：
第一： 
3.标签属性
　　许多单标记和双标记的始标记内可以包含一些属性，其语法是：
　　< 标签名字属性1 属性2 属性3 … > 
    各属性之间无先后次序，属性也可省略（即取默认值），例如单标记<HR>表示在文档当前位置画一条 
 
水平线（horizontal line），一般是从窗口中当前行的最左端一直画到最右端。 
带一些属性： 
<pre><HR SIZE=3 ALIGN=LEFT WIDTH="75%"></pre>
　　其中SIZE属性定义线的粗细，属性值取整数，缺为1；ALIGN属性表示对齐方式，可取LEFT（左对齐， 
缺省值），CENTER（居中），RIGHT（右对齐）；WIDTH 属性定义线的长度，可取相对值，（由一对 " " 
号括起来的百分数，表示相对于充满整个窗口的百分比），也可取绝对值（用整数表示的屏幕像素点的 
个数，如WIDTH=300），缺省值是"100%"。
标题
　　一般文章都有标题、副标题、章和节等结构，HTML中也提供了相应的标题标签<Hn>,其中n为标题的等HTML总共提供六个等级的标题，n越小，标题字号就越大，以下列出所有等级的标题：
<hr width="100%">
〈H1>…</H1>　　　　　第一级标题
〈H2>…</H2>　　　　　第二级标题
〈H3>…</H3>　　　　　第三级标题
〈H4>…</H4>　　　　　第四级标题
〈H5>…</H5>　　　　　第五级标题
〈H6>…</H6>　　　　　第六级标题
<hr width="100%">
请看下面的例子：
<html> 
 
<head> 
 
<title>标题示例</title> 
 
</head>
<body>
这是一行普通文字 
 
〈H1>一级标题</H1> 
 
〈H2>二级标题</H2> 
 
〈H3>三级标题</H3> 
 
〈H4>四级标题</H4> 
 
〈H5>五级标题</H5> 
 
〈H6>六级标题</H6> 
 
</body>
</html>
这是一行普通文字 
 
　


一级标题


<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<hr width="100%">
　　从结果可以看出，每一个标题的字体为黑体字，内容文字前后都插入空行。
换行 
　　在编写HTML文件时，我们不必考虑太细的设置，也不必理会段落过长的部分会被浏览器切掉。因为，在HTML语言规范里，每当浏览器窗口被缩小时，浏览器会自动将右边的文字转折至下一行。所以，编写者对于自己需要断行的地方，应加上 标签。
　　请看下面的例子：
<hr width="100%">
<html> 
 
<head> 
 
<title>无换行示例</title> 
 
</head>
<body> 
 
登鹳雀楼　白日依山尽，黄河入海流。欲穷千里目，更上一层楼。 
 
</body>
</html>
　
 
登鹳雀楼　白日依山尽，黄河入海流。欲穷千里目，更上一层楼。
<hr width="100%">
<html> 
 
<head> 
 
<title>换行示例</title> 
 
</head> 
<body> 
 
登鹳雀楼 白日依山尽， 黄河入海流。 欲穷千里目， 更上一层楼。 
 
</body>
</html>
 
 
登鹳雀楼 
白日依山尽， 
黄河入海流。 
欲穷千里目， 
更上一层楼。

奶茶发表于 2005-6-2 12:06

恶补撒~老大的教程简单实用~置顶吧。。。+FF~~~先划帐哈~:)

沉默是金 发表于 2005-6-2 12:19

<table class="tablebody2" style="TABLE-LAYOUT: fixed; WORD-BREAK: break-all" width="90%" border="0">
<tr>
<td style="font-size: 11pt; line-height: 17pt; font-family: 宋体" width="100%">
段落标签   
为了排列的整齐、清晰，文字段落之间，我们常用来做标记。文件段落的开始由来标记，段落的结束由来标记，是可以省略的，因为下一个的开始就意味着上一个的结束。
　　标签还有一个属性ALING，它用来指名字符显示时的对齐方式，一般值有CENTER、LEFT、RIGHT三种。
　　下面，我们用两个例子来说明这个标签的用法。
<hr width="100%">
<html> 
 
<head> 
 
<title>段落标签</title> 
 
</head>
<body> 
 
 
 
浣溪沙　一曲新词酒一杯，去年天气旧亭台，夕阳西下几时回。无可奈何花落去，似曾相识燕归来。小园香径几徘徊。 
 
</body>
</html>


 
浣溪沙　 
 
　
一曲新词酒一杯，去年天气旧亭台，夕阳西下几时回。 
 
　
无可奈何花落去，似曾相识燕归来。小园香径几徘徊。
　<hr width="100%">
<html> 
 
<head> 
 
<title>段落标签</title> 
 
</head>
<body> 
 
登鹳雀楼白日依山尽， 黄河入海流。 欲穷千里目， 更上一层楼。 
 
</body>
</html


登鹳雀楼 
 
　
白日依山尽， 
黄河入海流。 
欲穷千里目， 
更上一层楼。

水平线段<HR>
 
　　这个标签可以在屏幕上显示一条水平线，用以分割页面中的不同部分。<HR>有三个属性： 
 
　　　size　水平线的宽度 
 
　　　width
水平线的长，用占屏幕宽度的百分比或象素值来表示 
 
　　　align
水平线的对齐方式，有LEFT RIGHT 
CENTER三种 
 
　　　noshade
线段无阴影属性，为实心线段
　　我们可以用几个例子来说明这线段的用法：
<hr width="100%">

<img onmousewheel="return bbimg(this)" style="CURSOR: pointer" onclick="javascript:window.open(this.src);" src="http://www.gggl.gov.cn/fwgc/jiaocheng/html/yball.gif" onload="javascript:if(this.width>screen.width-500)this.style.width=screen.width-500;">线段粗细的设定 
 
<HTML> 
 
<HEAD> 
 
<TITLE>线段粗细的设定</TITLE> 
 
</HEAD> 
 
<BODY> 
 
这是第一条线段，无size设定，取内定值SIZE=1来显示 
<HR> 
这是第二条线段，SIZE=5 
<HR SIZE=5> 
这是第三条线段，SIZE=10 
<HR SIZE=10> 
</BODY> 
</HTML> 
 
这是第一条线段，无size设定，取内定值SIZE=1来显示 
　
<hr>
这是第二条线段，SIZE=5
<hr SIZE="5">
这是第三条线段，SIZE=10
<hr SIZE="10"><hr width="100%">
<h3>
<img onmousewheel="return bbimg(this)" style="CURSOR: pointer" onclick="javascript:window.open(this.src);" src="http://www.gggl.gov.cn/fwgc/jiaocheng/html/yball.gif" onload="javascript:if(this.width>screen.width-500)this.style.width=screen.width-500;">线段长度的设定</h3>
<HTML> 
 
<HEAD> 
 
<TITLE>线段长度的设定</TITLE> 
 
</HEAD> 
<BODY> 
 
这是第一条线段，无WIDTH设定，取WIDTH内定值100%来显示 
 
<HR SIZE=3> 
 
这是第二条线段，WIDTH=50(点数方式) 
 
<HR WIDTH=50 SIZE=5> 
 
这是第三条线段，WIDTH=50%(百分比方式) 
 
<HR WIDTH=50% SIZE=7> 
 
</BODY> 
</HTML> 
 
这是第一条线段，无WIDTH设定，取WIDTH内定值100%来显示 
　
<hr SIZE="3">
这是第二条线段，WIDTH=50(点数方式) 
　
<hr width="50" SIZE="5">
 
　
这是第三条线段，WIDTH=50%(百分比方式) 
　
<hr width="50%" SIZE="7">
 
　
<hr width="100%">

<img onmousewheel="return bbimg(this)" style="CURSOR: pointer" onclick="javascript:window.open(this.src);" src="http://www.gggl.gov.cn/fwgc/jiaocheng/html/yball.gif" onload="javascript:if(this.width>screen.width-500)this.style.width=screen.width-500;">线段排列的设定 
 
<HTML> 
 
<HEAD> 
 
<TITLE>线段排列的设定</TITLE> 
 
</HEAD> 
 
<BODY> 
 
这是第一条线段，无ALIGN设定，(取内定值CENTER显示) 
 
<HR WIDTH=50% SIZE=5> 
 
这是第二条线段，向左对齐BR> 
 
<HR WIDTH=60% SIZE=7 ALIGN=LEFT> 
 
这是第三条线段，向右对齐 
 
<HR WIDTH=70% SIZE=2 ALIGN=RIGHT> 
 
</BODY> 
 
</HTML>
这是第一条线段，无ALIGN设定，(取内定值CENTER显示) 
　
<hr width="50%" SIZE="5">
　
这是第二条线段，向左对齐BR> 
　
<hr align="left" width="60%" SIZE="7">
这是第三条线段，向右对齐 
　
<hr align="right" width="70%" SIZE="2">
　
<hr width="100%">

<img onmousewheel="return bbimg(this)" style="CURSOR: pointer" onclick="javascript:window.open(this.src);" src="http://www.gggl.gov.cn/fwgc/jiaocheng/html/yball.gif" onload="javascript:if(this.width>screen.width-500)this.style.width=screen.width-500;">无阴影的设定 
<HTML> 
 
<HEAD> 
 
<TITLE>无阴影的设定</TITLE> 
 
</HEAD> 
 
<BODY> 
 
这是第一条线段，无NOSHADE设定，取内定值阴影效果来显示 
 
<HR WIDTH=80% SIZE=5> 
 
这是第二条线段，有NOSHADE设定 
 
<HR WIDTH=80% SIZE=7 ALIGN=LEFT NOSHADE> 
 
</BODY> 
 
</HTML> 
 
 
这是第一条线段，无NOSHADE设定，取内定值阴影效果来显示 
　
<hr width="80%" SIZE="5">
 
这是第二条线段，有NOSHADE设定 
　
<hr align="left" width="80%" noShade SIZE="7"><hr width="100%">

文字的大小设置
　　提供设置字号大小的是FONT，FONT有一个属性SIZE，通过指定SIZE属性就能设置字号大小，而SIZE属性的有效值范围为1－7，其中缺省值为3。我们可以SIZE属性值之前加上“＋”、“－”字符，来指定相对于字号初始值的增量或减量。
　　请看示例：
<hr width="100%">
<html> 
 
<head> 
 
<title>字号大小</title> 
 
</head>
<body> 
 
这是size=7的字体 
 
这是size=6的字体 
 
这是size=5的字体 
 
这是size=4的字体 
 
这是size=3的字体 
 
这是size=2的字体 
 
这是size=1的字体 
 
这是size=-1的字体 
 
</body>
</html>
 
 
这是size=7的字体 
　
这是size=6的字体 
　
这是size=5的字体 
　
这是size=4的字体 
　
这是size=3的字体 
　
这是size=2的字体 
　
这是size=1的字体 
　
这是size=-1的字体 

文字的字体与样式

　　HTML4.0提供了定义字体的功能，用FACE属性来完成这个工作。FACE的属性值可以是本机上的任一字体类型，但有一点麻烦的是，只有对方的电脑中装有相同的字体才可以在他的浏览器中出现你预先设计的风格。
　　
请看例子：
<hr width="100%">
<HTML> 
 
<HEAD> 
 
<TITLE>字体</TITLE> 
 
</HEAD> 
 
<BODY> 
 
<CENTER> 
 
欢迎光临 
 
欢迎光临 
 
欢迎光临 
 
 
欢迎光临 
 
Welcom my homepage. 
 
Welcom my homepage. 
 
</CENTER> 
 
</BODY> 
 
</HTML>
　
<center>欢迎光临
 
　欢迎光临 
　
欢迎光临 
　
欢迎光临 
　
Welcom my homepage.
 
　
Welcom my
homepage. 
　
　
</center><hr width="100%">
　　为了让文字富有变化，或者为了着意强调某一部分，HTML提供了一些标签产生这些效果，现将常用的标签列举如下：
　
　
　　　　　　　　　　粗体　　　　　　　　　　　　　　HTML语言
　
　
　　　　　　　　　　斜体　　　　　　　　　　　　　　HTML语言
　
　
　　　　　　　　　　加下划线　　　　　　　　　　　　HTML语言
　
　
<TT>　　　　 <TT>　　　　　打字机字体　　　　　　　　　　　<tt>HTML语言</tt>
　
　
<BIG>　　　　</BIG>　　　　大型字体　　　　　　　　　　　　HTML语言
　
　
　　　　　　小型字体　　　　　　　　　　　　HTML语言
　
　
<BLINK>　　　</BLINK>　　　闪烁效果　　　　　　　　　　　　<blink>HTML语言</blink>
　
　
　　　　 　　　　表示强调，一般为斜体　　　　　　HTML语言
　
　
　　 　　表示特别强调，一般为粗体　　　　HTML语言
　
　
<CITE>　　　 </CITE>　　　用于引证、举例，一般为斜体　　　HTML语言
　
现在我们用一个实例来看看效果： 
　
<hr width="100%">
<html> 
 
<head> 
 
<title>字体样式</title> 
 
</head>
<body> 
 
黑体字 
 
 斜体字 
 
 加下划线 
 
 <BIG>大型字体</BIG> 
 
 小型字体 
 
 <BLINK>闪烁效果</BLINK> 
 
Welcome 
 
Welcome 
 
<CITE>Welcom</CITE> 
 
</body>
</html>
黑体字 
斜体字 
　
加下划线 
　
<big>大型字体</big> 
　
小型字体 
　
<blink>闪烁效果</blink> 
　
　
Welcome 
　
Welcome 
　
<cite>Welcom</cite>
　
<cite>
文字的颜色
 
 
 
　
　
　　文字颜色设置格式如下：
　
　
　　　…
　
　
　　这里的颜色值可以是一个十六进制数(用“#”作为前缀)，也可以是以下16种颜色名称。 
　
<hr width="100%">
　
　
<table cellSpacing="10" cellPadding="0" width="80%">
<tr>
<td width="16" style="font-family: 宋体; font-size: 12px; line-height: 15px">
<img onmousewheel="return bbimg(this)" style="CURSOR: pointer" onclick="javascript:window.open(this.src);" src="http://www.gggl.gov.cn/fwgc/jiaocheng/html/black.gif" onload="javascript:if(this.width>screen.width-500)this.style.width=screen.width-500;"></td>
<caption>　　
</caption>
<td style="font-family: 宋体; font-size: 12px; line-height: 15px">
Black = "#000000"?</td>
<caption>　　
</caption>
<td width="16" style="font-family: 宋体; font-size: 12px; line-height: 15px">
<img onmousewheel="return bbimg(this)" style="CURSOR: pointer" onclick="javascript:window.open(this.src);" src="http://www.gggl.gov.cn/fwgc/jiaocheng/html/green.gif" onload="javascript:if(this.width>screen.width-500)this.style.width=screen.width-500;"></td>
<caption>　　
</caption>
<td style="font-family: 宋体; font-size: 12px; line-height: 15px">
Green = "#008000"</td>
<caption>　</caption>
</tr>
<caption>　　
</caption>
<tr>
<td width="16" style="font-family: 宋体; font-size: 12px; line-height: 15px">
<img onmousewheel="return bbimg(this)" style="CURSOR: pointer" onclick="javascript:window.open(this.src);" src="http://www.gggl.gov.cn/fwgc/jiaocheng/html/silver.gif" onload="javascript:if(this.width>screen.width-500)this.style.width=screen.width-500;"></td>
<caption>　　
</caption>
<td style="font-family: 宋体; font-size: 12px; line-height: 15px">
Silver = "#C0C0C0"?</td>
<caption>　　
</caption>
<td width="16" style="font-family: 宋体; font-size: 12px; line-height: 15px">
<img onmousewheel="return bbimg(this)" style="CURSOR: pointer" onclick="javascript:window.open(this.src);" src="http://www.gggl.gov.cn/fwgc/jiaocheng/html/lime.gif" onload="javascript:if(this.width>screen.width-500)this.style.width=screen.width-500;"></td>
<caption>　　
</caption>
<td style="font-family: 宋体; font-size: 12px; line-height: 15px">Lime =
"#00FF00"</td>
<caption>　</caption>
</tr>
<caption>　　
</caption>
<tr>
<td width="16" style="font-family: 宋体; font-size: 12px; line-height: 15px">
<img onmousewheel="return bbimg(this)" style="CURSOR: pointer" onclick="javascript:window.open(this.src);" src="http://www.gggl.gov.cn/fwgc/jiaocheng/html/gray.gif" onload="javascript:if(this.width>screen.width-500)this.style.width=screen.width-500;"></td>
<caption>　　
</caption>
<td style="font-family: 宋体; font-size: 12px; line-height: 15px">Gray =
"#808080"?</td>
<caption>　　
</caption>
<td width="16" style="font-family: 宋体; font-size: 12px; line-height: 15px">
<img onmousewheel="return bbimg(this)" style="CURSOR: pointer" onclick="javascript:window.open(this.src);" src="http://www.gggl.gov.cn/fwgc/jiaocheng/html/olive.gif" onload="javascript:if(this.width>screen.width-500)this.style.width=screen.width-500;"></td>
<caption>　　
</caption>
<td style="font-family: 宋体; font-size: 12px; line-height: 15px">Olive =
"#808000"</td>
<caption>　</caption>
</tr>
<caption>　　
</caption>
<tr>
<td width="16" style="font-family: 宋体; font-size: 12px; line-height: 15px">
<img onmousewheel="return bbimg(this)" style="CURSOR: pointer" onclick="javascript:window.open(this.src);" src="http://www.gggl.gov.cn/fwgc/jiaocheng/html/white.gif" onload="javascript:if(this.width>screen.width-500)this.style.width=screen.width-500;"></td>
<caption>　　
</caption>
<td style="font-family: 宋体; font-size: 12px; line-height: 15px">White = "#FFFFFF"?</td>
<caption>　　
</caption>
<td width="16" style="font-family: 宋体; font-size: 12px; line-height: 15px">
<img onmousewheel="return bbimg(this)" style="CURSOR: pointer" onclick="javascript:window.open(this.src);" src="http://www.gggl.gov.cn/fwgc/jiaocheng/html/yellow.gif" onload="javascript:if(this.width>screen.width-500)this.style.width=screen.width-500;"></td>
<caption>　　
</caption>
<td style="font-family: 宋体; font-size: 12px; line-height: 15px">Yellow =
"#FFFF00"</td>
<caption>　</caption>
</tr>
<caption>　　
</caption>
<tr>
<td width="16" style="font-family: 宋体; font-size: 12px; line-height: 15px">
<img onmousewheel="return bbimg(this)" style="CURSOR: pointer" onclick="javascript:window.open(this.src);" src="http://www.gggl.gov.cn/fwgc/jiaocheng/html/maroon.gif" onload="javascript:if(this.width>screen.width-500)this.style.width=screen.width-500;"></td>
<caption>　　
</caption>
<td style="font-family: 宋体; font-size: 12px; line-height: 15px">Maroon =
"#800000"?</td>
<caption>　　
</caption>
<td width="16" style="font-family: 宋体; font-size: 12px; line-height: 15px">
<img onmousewheel="return bbimg(this)" style="CURSOR: pointer" onclick="javascript:window.open(this.src);" src="http://www.gggl.gov.cn/fwgc/jiaocheng/html/navy.gif" onload="javascript:if(this.width>screen.width-500)this.style.width=screen.width-500;"></td>
<caption>　　
</caption>
<td style="font-family: 宋体; font-size: 12px; line-height: 15px">Navy = "#000080"</td>
<caption>　</caption>
</tr>
<caption>　　
</caption>
<tr>
<td width="16" style="font-family: 宋体; font-size: 12px; line-height: 15px">
<img onmousewheel="return bbimg(this)" style="CURSOR: pointer" onclick="javascript:window.open(this.src);" src="http://www.gggl.gov.cn/fwgc/jiaocheng/html/red.gif" onload="javascript:if(this.width>screen.width-500)this.style.width=screen.width-500;"></td>
<caption>　　
</caption>
<td style="font-family: 宋体; font-size: 12px; line-height: 15px">Red =
"#FF0000"?</td>
<caption>　　
</caption>
<td width="16" style="font-family: 宋体; font-size: 12px; line-height: 15px">
<img onmousewheel="return bbimg(this)" style="CURSOR: pointer" onclick="javascript:window.open(this.src);" src="http://www.gggl.gov.cn/fwgc/jiaocheng/html/blue.gif" onload="javascript:if(this.width>screen.width-500)this.style.width=screen.width-500;"></td>
<caption>　　
</caption>
<td style="font-family: 宋体; font-size: 12px; line-height: 15px">Blue = "#0000FF"</td>
<caption>　</caption>
</tr>
<caption>　　
</caption>
<tr>
<td width="16" style="font-family: 宋体; font-size: 12px; line-height: 15px">
<img onmousewheel="return bbimg(this)" style="CURSOR: pointer" onclick="javascript:window.open(this.src);" src="http://www.gggl.gov.cn/fwgc/jiaocheng/html/purple.gif" onload="javascript:if(this.width>screen.width-500)this.style.width=screen.width-500;"></td>
<caption>　　
</caption>
<td style="font-family: 宋体; font-size: 12px; line-height: 15px">Purple =
"#800080"?</td>
<caption>　　
</caption>
<td width="16" style="font-family: 宋体; font-size: 12px; line-height: 15px">
<img onmousewheel="return bbimg(this)" style="CURSOR: pointer" onclick="javascript:window.open(this.src);" src="http://www.gggl.gov.cn/fwgc/jiaocheng/html/teal.gif" onload="javascript:if(this.width>screen.width-500)this.style.width=screen.width-500;"></td>
<caption>　　
</caption>
<td style="font-family: 宋体; font-size: 12px; line-height: 15px">Teal = "#008080"</td>
<caption>　</caption>
</tr>
<caption>　　
</caption>
<tr>
<td width="16" style="font-family: 宋体; font-size: 12px; line-height: 15px">
<img onmousewheel="return bbimg(this)" style="CURSOR: pointer" onclick="javascript:window.open(this.src);" src="http://www.gggl.gov.cn/fwgc/jiaocheng/html/fuchsia.gif" onload="javascript:if(this.width>screen.width-500)this.style.width=screen.width-500;"></td>
<caption>　　
</caption>
<td style="font-family: 宋体; font-size: 12px; line-height: 15px">Fuchsia =
"#FF00FF"?</td>
<caption>　　
</caption>
<td width="16" style="font-family: 宋体; font-size: 12px; line-height: 15px">
<img onmousewheel="return bbimg(this)" style="CURSOR: pointer" onclick="javascript:window.open(this.src);" src="http://www.gggl.gov.cn/fwgc/jiaocheng/html/aqua.gif" onload="javascript:if(this.width>screen.width-500)this.style.width=screen.width-500;"></td>
<caption>　　
</caption>
<td style="font-family: 宋体; font-size: 12px; line-height: 15px">Aqua = "#00FFFF"</td>
<caption>　</caption>
</tr>
<caption>　</caption>
</table>
　
　
<hr width="100%">
请看例子：
<HTML> 
 
<HEAD> 
 
<TITLE>文字的颜色</TITLE> 
 
</HEAD> 
<BODY BGCOLOR=000080> 
 
<CENTER> 
 
色彩斑斓的世界 
 
色彩斑斓的世界 
 
色彩斑斓的世界 
 
色彩斑斓的世界 
 
色彩斑斓的世界 
 
色彩斑斓的世界 
 
色彩斑斓的世界 
 
</CENTER> 
 
</BODY> 
 
 
 
</HTML>
色彩斑斓的世界色彩斑斓的世界色彩斑斓的世界色彩斑斓的世界

色彩斑斓的世界色彩斑斓的世界色彩斑斓的世界

位置控制
 
　　通过ALIGN属性可以选择文字或图片的对齐方式，LEFT表示向左对齐，RIGHT表示向右对齐，CENTER表示居中。基本语法如下：
　　　　　<DIV ALIGN=#>　　　#＝left／right／center
<hr width="100%">
例：
<html> 
 
<head> 
 
<title>位置控制</title> 
 
</head>
<body> 
 
<div align=left> 
 
你好! 
 
<div align=right> 
 
你好! 
 
<div align=center> 
 
你好! 
 
</body> 
 
</html>
　



<div align="left">
 
你好! 
 
 
　</div>
<div align="right">
 
你好! 
 
 
　</div>
<div align="center">
 
你好! 
　</div>

　
<div align="center">
<hr width="100%"></div>
　
　　另外，ALIGN属性也常常用在其它标签中，引起其内容位置的变动。
　
　
　　如： 
 
　　　　<HR ALIGN=#>　　　#＝left／right／center 
 
　　　　<H1 ALIGN=#〉
　

综合示例
 
 
 
　
　
　　前面我们所讲是单独使用一个标签的方法，在实际的编写中，许多标签和一些属性是结合起来使用的， 
 
比如： 
 
　　　　文字 
 
　　　　文字
　
　
　
<div align="right">
<hr width="100%"></div>
　
　
　

【例】
　
　
<HTML> 
 
<HEAD> 
 
<TITLE>字体样式</TITLE> 
 
</HEAD>
　
　
<BODY> 
 
 
 
白 
居易 
 

　
　
　　白居易（772-846年）字乐天，晚居香山，自号香山居士，原籍太原。白居易是唐代新乐府运动的倡 
导者，是中国文学史上堪与屈原、李白、杜甫并列的第一流大诗人。 
　
　
　　白居易出身于小官僚家庭。大约在贞元三年（ 787年）的年初，十六岁的白居易带着自己的诗稿，到 
了京都长安。老诗人顾况看到这位不速之客的姓名有“居易”二字，便很恢谐地说：“长安米贵，居住不 
易！”及披卷读到《赋得古原草送别》中的
　
　
<CITE>“离离原上草，一岁一枯荣；野火烧不尽，春风吹又生”</CITE>
　
　
时，
不禁大为惊奇，拍案称绝，马上改变语气，郑重地说：“能写出这样好的诗句,‘居’下去是不难的，刚才我是同你开开玩笑罢了。”从此，白居易的诗名大振。 

　
　
　　白居易生活的时代，主要是建中、元和、长庆时期（公元781-824年）。是唐朝走向衰败的极端苦难动荡的时代。 

　
　
　　白居易是继杜甫之后，我国伟大的现实主义诗人。
他的贡献是在总结我国自《诗经》以来现实主义诗歌创作经验的基础上，建立了现实主义的诗歌理论，掀起了一个波澜壮阔的现实主义的诗歌运动——新乐府运动，创作了大量优秀的现实主义诗篇。 

　
　
</BODY> 
 
</HTML> 
 
【显示结果】 
　
白居易
　
　
　　白居易（772-846年）字乐天，晚居香山，自号香山居士，原籍太原。白居易是唐代新乐府运动的倡 
 
导者，是中国文学史上堪与屈原、李白、杜甫并列的第一流大诗人。 
　
　
　　白居易出身于小官僚家庭。大约在贞元三年（ 787年）的年初，十六岁的白居易带着自己的诗稿，到 
 
了京都长安。老诗人顾况看到这位不速之客的姓名有“居易”二字，便很恢谐地说：“长安米贵，居住 
不易！”及披卷读到《赋得古原草送别》中的
　
　

“离离原上草，一岁一枯荣；野火烧不尽，春风吹又生” 
　
　
　
时，不禁大为惊奇，拍案称绝，马上改变语气，郑重地说：“能写出这样好的诗句,‘居’下去是不难 
的，刚才我是同你开开玩笑罢了。”从此，白居易的诗名大振。 
　
　
　　白居易生活的时代，主要是建中、元和、长庆时期（公元781-824年）。是唐朝走向衰败的极端苦难 
动荡的时代。 
　
　
　　白居易是继杜甫之后，我国伟大的现实主义诗人。他的贡献是在总结我国自《诗经》以来现实主义 
诗歌创作经验的基础上，建立了现实主义的诗歌理论，掀起了一个波澜壮阔的现实主义的诗歌运动——新乐 
府运动，创作了大量优秀的现实主义诗篇。

　
插入图形
 
 
 
　
　
　　超文本之所以在很短的时间内如此广泛的受到人们的青睐，很重要的一个原因时它能支持多媒体的特性，如图象、声音、动画等。
　
　
　
<hr width="100%">
　
　
　
基本格式
　
　
　　超文本支持的图象格式一般有X
Bitmap(XBM)、GIF、JPEG三种，所以我们对图片处理后要保存为这三种格式中的任何一种，这样才可以在浏览器中看到。 
 
　　插入图象的标签是<IMG>，其格式为：
　
　
　　　　　<IMG SRC="图形文件地址">
　
　

　　SRC属性指明了所要链接的图象文件地址，这个图形文件可以是本地机器上的图形，也可以是位于远端主机上的图形。地址的表示方法可以沿用上一篇内容“文件的链接”中URL地址表示方法。
　
　
　　例：　<IMG SRC="images/ball.gif">
　
　
　　IMG还有两个属性是HEIGHT和WIDTH，分别表示图形的高和宽。通过这两个属性，可以改变图形的大小，如果没有设置，图形按原大显示：
　
　
　　例：
　
　
<center>
<table>
<caption> 
 
 
 
 
　</caption>
<tr>
<td style="font-family: 宋体; font-size: 12px; line-height: 15px"><IMG
SRC="flowers0.jpg"></td>
<caption>　　
</caption>
<td style="font-family: 宋体; font-size: 12px; line-height: 15px">　　<IMG
SRC="flowers0.jpg" width="200" heigth="100"></td>
<caption>　</caption>
</tr>
<caption>　　
</caption>
<tr>
<td style="font-family: 宋体; font-size: 12px; line-height: 15px">
<img onmousewheel="return bbimg(this)" style="CURSOR: pointer" onclick="javascript:window.open(this.src);" src="http://www.gggl.gov.cn/fwgc/jiaocheng/html/flowers0.jpg" onload="javascript:if(this.width>screen.width-500)this.style.width=screen.width-500;"></td>
<caption>　　
</caption>
<td style="font-family: 宋体; font-size: 12px; line-height: 15px"><center>
<img onmousewheel="return bbimg(this)" style="CURSOR: pointer" onclick="javascript:window.open(this.src);" src="http://www.gggl.gov.cn/fwgc/jiaocheng/html/flowers0.jpg" onload="javascript:if(this.width>screen.width-500)this.style.width=screen.width-500;"></center>
</td>
<caption>　</caption>
</tr>
<caption>　</caption>
</table>
</center>
　
　
　
<hr width="100%">
 
 
 
图形与文字的对齐排列：

　
　
　
　　由IMG中的ALIGN属性来设置图文的对齐方式，有以下几种：
　
　
<table cellSpacing="0" cellPadding="5" width="100%" border="1">
<caption> 
 
 
 
 
　</caption>
<tr>
<td style="font-family: 宋体; font-size: 12px; line-height: 15px">
ALIGN=top</td>
<caption>　　
</caption>
<td style="font-family: 宋体; font-size: 12px; line-height: 15px">〈IMG
SRC="love.gif" ALIGN=top>美丽的心灵</td>
<caption>　　
</caption>
<td style="font-family: 宋体; font-size: 12px; line-height: 15px">　<img onmousewheel="return bbimg(this)" style="CURSOR: pointer" onclick="javascript:window.open(this.src);" src="http://www.gggl.gov.cn/fwgc/jiaocheng/html/love.gif" onload="javascript:if(this.width>screen.width-500)this.style.width=screen.width-500;">　美丽的心灵</td>
<caption>　</caption>
</tr>
<caption>　　
</caption>
<tr>
<td style="font-family: 宋体; font-size: 12px; line-height: 15px">ALIGN=middle</td>
<caption>　　
</caption>
<td style="font-family: 宋体; font-size: 12px; line-height: 15px">〈IMG
SRC="love.gif" ALIGN=middle>美丽的心灵</td>
<caption>　　
</caption>
<td style="font-family: 宋体; font-size: 12px; line-height: 15px">　<img onmousewheel="return bbimg(this)" style="CURSOR: pointer" onclick="javascript:window.open(this.src);" src="http://www.gggl.gov.cn/fwgc/jiaocheng/html/love.gif" onload="javascript:if(this.width>screen.width-500)this.style.width=screen.width-500;">　美丽的心灵</td>
<caption>　</caption>
</tr>
<caption>　　
</caption>
<tr>
<td style="font-family: 宋体; font-size: 12px; line-height: 15px">ALIGN=buttom</td>
<caption>　　
</caption>
<td style="font-family: 宋体; font-size: 12px; line-height: 15px">〈IMG
SRC="love.gif" ALIGN=buttom>美丽的心灵</td>
<caption>　　
</caption>
<td style="font-family: 宋体; font-size: 12px; line-height: 15px">　<img onmousewheel="return bbimg(this)" style="CURSOR: pointer" onclick="javascript:window.open(this.src);" src="http://www.gggl.gov.cn/fwgc/jiaocheng/html/love.gif" onload="javascript:if(this.width>screen.width-500)this.style.width=screen.width-500;">　美丽的心灵</td>
<caption>　</caption>
</tr>
<caption>　　
</caption>
<tr>
<td style="font-family: 宋体; font-size: 12px; line-height: 15px">
ALIGN=texttop</td>
<caption>　　
</caption>
<td style="font-family: 宋体; font-size: 12px; line-height: 15px">〈IMG
SRC="love.gif" ALIGN=textop>美丽的心灵</td>
<caption>　　
</caption>
<td style="font-family: 宋体; font-size: 12px; line-height: 15px">　<img onmousewheel="return bbimg(this)" style="CURSOR: pointer" onclick="javascript:window.open(this.src);" src="http://www.gggl.gov.cn/fwgc/jiaocheng/html/love.gif" onload="javascript:if(this.width>screen.width-500)this.style.width=screen.width-500;">　美丽的心灵</td>
<caption>　</caption>
</tr>
<caption>　　
</caption>
<tr>
<td style="font-family: 宋体; font-size: 12px; line-height: 15px">
ALIGN=baseline</td>
<caption>　　
</caption>
<td style="font-family: 宋体; font-size: 12px; line-height: 15px">〈IMG
SRC="love.gif" ALIGN=baeline>美丽的心灵</td>
<caption>　　
</caption>
<td style="font-family: 宋体; font-size: 12px; line-height: 15px">　<img onmousewheel="return bbimg(this)" style="CURSOR: pointer" onclick="javascript:window.open(this.src);" src="http://www.gggl.gov.cn/fwgc/jiaocheng/html/love.gif" onload="javascript:if(this.width>screen.width-500)this.style.width=screen.width-500;">　美丽的心灵</td>
<caption>　</caption>
</tr>
<caption>　　
</caption>
<tr>
<td style="font-family: 宋体; font-size: 12px; line-height: 15px">ALIGN=left</td>
<caption>　　
</caption>
<td style="font-family: 宋体; font-size: 12px; line-height: 15px">〈IMG
SRC="love.gif" ALIGN=left>美丽的心 
 
灵，有着数不清的爱心，象天空里的星星，明 
 
亮晶莹。</td>
<caption>　　
</caption>
<td style="font-family: 宋体; font-size: 12px; line-height: 15px">
<img onmousewheel="return bbimg(this)" style="CURSOR: pointer" onclick="javascript:window.open(this.src);" src="http://www.gggl.gov.cn/fwgc/jiaocheng/html/love.gif" onload="javascript:if(this.width>screen.width-500)this.style.width=screen.width-500;">美丽的心灵， 
 
有着数不清的 
 
爱心，象天空 
 
里的星星，明 
 
亮晶莹。</td>
<caption>　</caption>
</tr>
<caption>　　
</caption>
<tr>
<td style="font-family: 宋体; font-size: 12px; line-height: 15px">ALIGN=right</td>
<caption>　　
</caption>
<td style="font-family: 宋体; font-size: 12px; line-height: 15px">〈IMG
SRC="love.gif" ALIGN=right>美丽的心 
 
灵，有着数不清的爱心，象天空里的星星，明 
 
亮晶莹。</td>
<caption>　　
</caption>
<td style="font-family: 宋体; font-size: 12px; line-height: 15px">
<img onmousewheel="return bbimg(this)" style="CURSOR: pointer" onclick="javascript:window.open(this.src);" src="http://www.gggl.gov.cn/fwgc/jiaocheng/html/love.gif" onload="javascript:if(this.width>screen.width-500)this.style.width=screen.width-500;">美丽的心灵， 
 
有着数不清的 
 
爱心，象天空 
 
里的星星，明 
 
亮晶莹。</td>
<caption>　</caption>
</tr>
<caption>　</caption>
</table>
　
　
　
<hr width="100%">
 
 
 
 
 
图文之间的距离设置：

　
　
　
　　在HTML文件里图形水平位置的配置，可由HSPACE属性来完成，其垂直位置的配置，由VSPACE来完成。
　
　
<table cellSpacing="0" cellPadding="5" border="1">
<caption> 
 
 
 
 
　</caption>
<tr>
<td style="font-family: 宋体; font-size: 12px; line-height: 15px">
<IMA　SRC="love.gif" ></td>
<caption>　　
</caption>
<td style="font-family: 宋体; font-size: 12px; line-height: 15px">
<img onmousewheel="return bbimg(this)" style="CURSOR: pointer" onclick="javascript:window.open(this.src);" src="http://www.gggl.gov.cn/fwgc/jiaocheng/html/love.gif" onload="javascript:if(this.width>screen.width-500)this.style.width=screen.width-500;">美丽的心灵</td>
<caption>　</caption>
</tr>
<caption>　　
</caption>
<tr>
<td style="font-family: 宋体; font-size: 12px; line-height: 15px">
<IMA　SRC="love.gif" HSPACE=30></td>
<caption>　　
</caption>
<td style="font-family: 宋体; font-size: 12px; line-height: 15px">
<img onmousewheel="return bbimg(this)" style="CURSOR: pointer" onclick="javascript:window.open(this.src);" src="http://www.gggl.gov.cn/fwgc/jiaocheng/html/love.gif" onload="javascript:if(this.width>screen.width-500)this.style.width=screen.width-500;">美丽的心灵</td>
<caption>　</caption>
</tr>
<caption>　　
</caption>
<tr>
<td style="font-family: 宋体; font-size: 12px; line-height: 15px">
<IMA　SRC="love.gif" VSPACE=30></td>
<caption>　　
</caption>
<td style="font-family: 宋体; font-size: 12px; line-height: 15px">
<img onmousewheel="return bbimg(this)" style="CURSOR: pointer" onclick="javascript:window.open(this.src);" src="http://www.gggl.gov.cn/fwgc/jiaocheng/html/love.gif" onload="javascript:if(this.width>screen.width-500)this.style.width=screen.width-500;">美丽的心灵</td>
<caption>　</caption>
</tr>
<caption>　</caption>
</table>
　
　
　
<hr width="100%">
 
 
 
图形按钮：

　
　
　
　　图形按钮就是使用者通过在图形上单击，就能连接到某个地址上去。很简单，我们只要调用一下前面的知识就可以完成了。其基本格式如下：
　
　
　　<A　HREF="资源地址"><IMG SRC="图形文件地址"></A>
　
　
例：
　
　
　　<A HREF="index.htm"><IMA SRC="html.gif"></A>
　
　
显示结果为：
　
　

<a target="_blank" style="text-decoration: none; color: #000000" href="http://www.tietu.com/">
<img onmousewheel="return bbimg(this)" style="CURSOR: pointer" onclick="javascript:window.open(this.src);" src="http://www.moonyh.com/bbs/uploadFace/19_20041301838036828.gif" onload="javascript:if(this.width>screen.width-500)this.style.width=screen.width-500;"></a>
　
　
　　图形上出现小手了，我们试一下吧！
播放音乐
 
 
 
　
　
　　HTML除了可以插入图形之外，还可以播放音乐和视频等。用浏览器可以播放的音乐格式有：MIDI音乐、WAV音乐、AU格式。
　
　
　
<hr width="100%">
　
　
　
点播音乐
　
　
　　将音乐做成一个链接，只需用鼠标在上面单击，就可以听到动人的音乐了，这样做的方法很简单：
　
　
　　　<A　HREF="音乐地址">乐曲名</A>
　
　
例如：<img onmousewheel="return bbimg(this)" style="CURSOR: pointer" onclick="javascript:window.open(this.src);" src="http://www.gggl.gov.cn/fwgc/jiaocheng/html/yball.gif" onload="javascript:if(this.width>screen.width-500)this.style.width=screen.width-500;">播放一段MIDI音乐：
　
　
　　　<A　HREF="midi.mid">MIDI音乐</A>
　
　
　　　<img onmousewheel="return bbimg(this)" style="CURSOR: pointer" onclick="javascript:window.open(this.src);" src="http://www.gggl.gov.cn/fwgc/jiaocheng/html/yball.gif" onload="javascript:if(this.width>screen.width-500)this.style.width=screen.width-500;">播放一段AU格式音乐：
　
　
　　　<A　HREF="you.au">同桌的你-AU音乐</A>　　　　 
 
 
　
　　把我们喜欢的音乐收集起来，作成一个音乐库，随时都可以让自己和别人徜徉在音乐的海洋中！
　
　
　
<hr width="100%">
　
　
　
自动载入音乐
　
　
　　前面，我们是借助链接来实现网上播放音乐这一功能的，我们还可以让音乐自动载入，你可以让它出现控制面板或当背景音乐来使用。基本语法：
　
　
　　　　<EMBED SRC="音乐文件地址">
　
　
属性有：
　
　
<table cellSpacing="0" cellPadding="5" border="1">
<caption> 
 
 
 
 
　</caption>
<tr>
<td style="font-family: 宋体; font-size: 12px; line-height: 15px">
SRC="FILENAME"</td>
<caption>　　
</caption>
<td style="font-family: 宋体; font-size: 12px; line-height: 15px">
设定音乐文件的路径</td>
<caption>　</caption>
</tr>
<caption>　　
</caption>
<tr>
<td style="font-family: 宋体; font-size: 12px; line-height: 15px">
AUTOSTART=TRUE/FALSE</td>
<caption>　　
</caption>
<td style="font-family: 宋体; font-size: 12px; line-height: 15px">
是否要音乐文件传送完就自动播放，TRUE是要，FALSE是不要，默认为FALSE</td>
<caption>　</caption>
</tr>
<caption>　　
</caption>
<tr>
<td style="font-family: 宋体; font-size: 12px; line-height: 15px">
LOOP=TRUE/FALSE</td>
<caption>　　
</caption>
<td style="font-family: 宋体; font-size: 12px; line-height: 15px">
设定播放重复次数，LOOP=6表示重复6次，TRUE表示无限次播放，FALSE播放一次即停止。</td>
<caption>　</caption>
</tr>
<caption>　　
</caption>
<tr>
<td style="font-family: 宋体; font-size: 12px; line-height: 15px">
STARTIME="分:秒"</td>
<caption>　　
</caption>
<td style="font-family: 宋体; font-size: 12px; line-height: 15px">
设定乐曲的开始播放时间，如20秒后播放写为STARTIME=00:20</td>
<caption>　</caption>
</tr>
<caption>　　
</caption>
<tr>
<td style="font-family: 宋体; font-size: 12px; line-height: 15px">VOLUME=0-100</td>
<caption>　　
</caption>
<td style="font-family: 宋体; font-size: 12px; line-height: 15px">
设定音量的大小。如果没设定的话，就用系统的音量。</td>
<caption>　</caption>
</tr>
<caption>　　
</caption>
<tr>
<td style="font-family: 宋体; font-size: 12px; line-height: 15px">WIDTH HEIGHT</td>
<caption>　　
</caption>
<td style="font-family: 宋体; font-size: 12px; line-height: 15px">设定控制面板的大小</td>
<caption>　</caption>
</tr>
<caption>　　
</caption>
<tr>
<td style="font-family: 宋体; font-size: 12px; line-height: 15px">HIDDEN=TRUE</td>
<caption>　　
</caption>
<td style="font-family: 宋体; font-size: 12px; line-height: 15px">隐藏控制面板</td>
<caption>　</caption>
</tr>
<caption>　　
</caption>
<tr>
<td style="font-family: 宋体; font-size: 12px; line-height: 15px">
CONTROLS=CONSOLE/SMALLCONSOLE</td>
<caption>　　
</caption>
<td style="font-family: 宋体; font-size: 12px; line-height: 15px">设定控制面板的样子</td>
<caption>　</caption>
</tr>
<caption>　</caption>
</table>
　
　
例： 
 

*************************************
　
　
<html> 
 
<head> 
 
<title>播放音乐</title> 
 
</head> 
 
　　<EMBED SRC="midi.mid" autostart=true hidden=true loop=true>
　
　
　　作为背景音乐来播放。 
 
</body> 
 
</html>
　
　
例： 
 

*************************************
　
　
<html> 
 
<head> 
 
<title>播放音乐</title> 
 
</head> 
 
　　<EMBED SRC="midi.mid" loop=true width=145 height=60>
　
　
　　出现控制面板了，你可以控制它的开与关，还可以调节音量的大小。 
 
<／body> 
 
</html>

<embed src="http://www.wcnw.net/midi/midi1/24.mid" width="145" height="60" type="audio/mid" loop="

广州论坛's Archiver

[转帖]HTML语言贴图教程！（完整篇）