[贴图公式(教你编辑漂亮图片)]+[HTML中/高级教程在389楼处]

无可奈何花落去 发表于 2004-4-18 13:04:41

本帖最后由 kittenmimi 于 2009-1-28 00:28 编辑

大家看到的那些漂亮的贴图是加了html代码，相信很多人想知道如何编辑。但由于我也是门外汉，所以转载相关的知识，大家自己研究吧。097:)

注意：以下所有公式请大家使用时把*号去掉。。

贴内背景公式：
<*center><*table cellpadding=0 cellspacing=0 border=0 WIDTH=100% align=center table background="内背景图片地址" width=720><*tr><*td><*center>
。。。。。。
（要贴的内容－－图片或文字）
。。。。。。
<*td><*/table>

背景图片等可参见：
“设计区素材超市”
太漂亮了,没话可说(九尾狐-秋)

效果
<table cellpadding=0 cellspacing=0 border=0 WIDTH=50% align=center table background="http://bbs.xyhc.com/attachments/month_0410/200492823215801105_wq4dNpUSNdb9.jpg" width=100><tr><td><center>
<center>欢迎光临优质美图
<td></table>

关于漂亮边框，大家可以参阅以下教材:美图多层背景套装系列下载(康桥)

图片向左移动：
<*marquee directio=left><*img src="图片地址"><*/marquee>

效果
<marquee directio=left><img src="http://bbs.xyhc.com/images/default/logo.gif"></marquee>

文字向左移动：
<*marquee directio=left><*font size=? color=?>文字部分<*/font><*/marquee>

效果
<marquee directio=left>希望大家赏图愉快</marquee>

贴FLASH：
<*embed src="★"width="660"height="450">或者
<*embed src="xxxxxxxxx" width="500，80%" height="350，80%">

帖子外背景底图：
<*body background="地址">

外背景底图图不动：
<*body background="地址" bgproperties="fixed">

图片居中：
<*center><*img src="图片地址">

贴播放器：
<*embed src="http://mp3.baidu.com/r?url=http://fchen.sosoo.net/music/pop/469.mp3" width=480 height=35 controls=ControlPanel loop=true autostart=true volume=100 type=audio/x-pn-realaudio-plugin Initfn=load-types mime-types=mime.types>
隐藏播放：
<*embed src="xxxxxxx" width="0" height="0" autostart="true" loop="true" align="middle" volume="200" type="audio/x-pn-realaudio-plugin" exts="ra,ram" Init fn="load-types" mime-types="mime.types" ALT="(Random)">

交替舞动的蝴蝶：
<*FONT COLOR=GREEN><*marquee behavior="alternate"scrollamount=8 direction=right><*b><*font color=#7700bb size=6><*FONT color=red><*MARQUEE behavior=alternate direction=up height=150 width=50><*img src=http://www.fyj.cn/dhome/dimg/4013.gif><*/MARQUEE><*FONT color=orange><*MARQUEE behavior=alternate direction=up height=200 width=50><*img src=http://www.fyj.cn/dhome/dimg/4013.gif><*/MARQUEE><*FONT color=Fuchsia><*MARQUEE behavior=alternate direction=up height=150 width=50><*img src=http://www.fyj.cn/dhome/dimg/4013.gif><*/MARQUEE><*FONT color=olive><*MARQUEE behavior=alternate direction=up height=200 width=50><*img src=http://www.fyj.cn/dhome/dimg/4013.gif><*/MARQUEE><*FONT COLOR=GREEN><*MARQUEE behavior=alternate direction=up height=150 width=50><*img src=http://www.fyj.cn/dhome/dimg/4013.gif><*/MARQUEE><*FONT color=red><*MARQUEE behavior=alternate direction=up height=200 width=50><*img src=http://www.fyj.cn/dhome/dimg/4013.gif>

带框的背景：
<*center><*table border="5" background=http://szg01.myrice.com/bg5.gif width="600" height="440" >

<*td><*/table>

文字向上滚注意文字分行并拉开行距：
<*marquee direction=up scrollamount=3>
<*center><*font color="lime" size="5" face="隶书">图区的朋友们好<*/font>
<*/marquee>

效果
<marquee direction=up scrollamount=3>
<center>图区的朋友们好
</marquee>

文字向下滚：
<*marquee direction=down scrollamount=3>
<*center><*font color="lime" size="5" face="隶书">祝朋友们天天开心<*/font>
<*/marquee>

效果
<marquee direction=down scrollamount=3>
<center>祝朋友们天天开心
</marquee>

带阴影效果的文字：
<*FONT style="FONT-SIZE: 30pt; FILTER: shadow(color=gray); WIDTH: 100%; COLOR: lime; LINE-HEIGHT: 100%; FONT-FAMILY: 细圆">祝朋友们天天开心<*/FONT>

效果
祝朋友们天天开心

<*FONT style="FONT-SIZE: 30pt; FILTER: glow(color=#C71585); WIDTH: 100%; LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云" color=#e9bbcc>    图   区   欢   迎   你<*/FONT>

效果
    图   区   欢   迎   你

跳跃的文字：
[*b][*size=6][*color=red]<*MARQUEE direction=up behavior=alternate width=50 height=80> 优
<*/MARQUEE><*MARQUEE direction=up behavior=alternate width=50 height=90>质
<*/MARQUEE><*MARQUEE direction=up behavior=alternate width=50 height=100>美
<*/MARQUEE><*MARQUEE direction=up behavior=alternate width=50 height=90>图
<*/MARQUEE><*MARQUEE direction=up behavior=alternate width=50 height=80>欢<*/MARQUEE><*/MARQUEE><*MARQUEE direction=up behavior=alternate width=50 height=90>迎
<*/MARQUEE><*MARQUEE direction=up behavior=alternate width=50 height=80>你<*/MARQUEE>[*/color][*/size][*/b]
效果
<MARQUEE direction=up behavior=alternate width=50 height=80> 优
</MARQUEE><MARQUEE direction=up behavior=alternate width=50 height=90>质
</MARQUEE><MARQUEE direction=up behavior=alternate width=50 height=100>美
</MARQUEE><MARQUEE direction=up behavior=alternate width=50 height=90>图
</MARQUEE><MARQUEE direction=up behavior=alternate width=50 height=80>欢</MARQUEE></MARQUEE><MARQUEE direction=up behavior=alternate width=50 height=90>迎
</MARQUEE><MARQUEE direction=up behavior=alternate width=50 height=80>你</MARQUEE>

常用字体：

宋体黑体楷体_GB2312 仿宋_GB2312

新宋体幼圆隶书方正舒体

华文新魏华文行楷华文细黑华文彩云

常用字体颜色：
浅绿----aqua 黑----black 兰----blue 紫红----fuchsia，
灰----gray 绿----green 亮绿----lime 茶----maroon，
深兰----navy 橄榄----olive 紫----pourple 红---red，
银----silver 青----teal 白----white 黄----yellow
紫红--purple

贴图的正确格式：
<*center><*img src="http://gallery.2088.com.cn/flower/photo/2/fl036.jpg">

背景图片语法：
<*body　background="http://www.binghe.com/s/yinyue/mid/images/star_back.gif"><*/body>

透明效果：
<*img src="http://bbs.xyhc.com/images/default/logo.gif" width=300 height=250 style=filter:Alpha(opacity=100,style=2);>

效果
<img src="http://bbs.xyhc.com/images/default/logo.gif" width=300 height=250 style=filter:Alpha(opacity=100,style=2);>

待续

[ Last edited by 飛飛 on 2005-7-14 at 08:01 ]

[ 本帖最后由芊芊于 2006-1-20 15:28 编辑 ]

kiasu 发表于 2004-4-18 13:25:43

花落好有心哦，这个绝对是好东东，收藏先！

K。借个位置转载会员的教程贴。:@－－花卷
－－－－－－－－－－－－－－－－－－－－－－－－－－－－
（下面公式可直接套用）

以下是引用康桥 at 2004-11-21　9:52的发言:

不懂html语言的朋友也可以做一幅漂亮的图哦,只要复制这些代码.换上你自已喜欢的图片网址或者动画网址, 一幅属于你的大作就产生了。

一、边框：

1.两层

<TABLE cellSpacing=10 cellPadding=8 width=480 bgColor=#000000 border=1>
<TBODY><TR><TD><TABLE cellSpacing=2 cellPadding=2 width=480 bgColor=#000000 border=0>
<TBODY><TR><TD>加入内容</td></tr></tbody></table></td></tr></tbody></table>

2.八层
<TABLE cellSpacing=0 cellPadding=4 width="95%" align=center background=http://www.enchantingdesignz.com/linkware/parker/p2strip.jpg border=0>
<TBODY>
<TR>
<TD>
<TABLE height=315 cellSpacing=0 cellPadding=15 width="100%" background=http://www.enchantingdesignz.com/linkware/parker/p2background.jpg border=0>
<TBODY>
<TR>
<TD>
<TABLE height=355 cellSpacing=0 cellPadding=2 width="100%" background=http://www.enchantingdesignz.com/linkware/parker/p2strip.jpg border=0>
<TBODY>
<TR>
<TD>
<TABLE height=387 cellSpacing=0 cellPadding=2 width="100%" background=http://www.enchantingdesignz.com/linkware/parker/p2background.jpg border=0>
<TBODY>
<TR>
<TD>
<TABLE height=365 cellSpacing=0 cellPadding=2 width="100%" background=http://www.enchantingdesignz.com/linkware/parker/p2strip.jpg border=0>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=0 cellPadding=15 width="100%" background=http://www.enchantingdesignz.com/linkware/parker/p2background.jpg border=0>
<TBODY>
<TR>
<TD>
<DIV align=center>
<TABLE height=362 cellSpacing=0 cellPadding=2 width="100%" background=http://www.enchantingdesignz.com/linkware/parker/p2strip.jpg border=0>
<TBODY>
<TR>
<TD>
<DIV align=center>
<TABLE height=361 cellSpacing=0 cellPadding=4 width="100%" background=http://www.enchantingdesignz.com/linkware/parker/p2background.jpg border=0>
<TBODY>
<TR>
<TD>
<TABLE height=204 cellSpacing=0 cellPadding=4 width="100%" border=0>
<TBODY>
<TR>
<TD>
加入内容
</TD></TR></TBODY></TABLE></DIV></TD></TR></TBODY></TABLE></DIV></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

3.三层
<CENTER><TABLE cellSpacing=10 cellPadding=2 width=450 bgColor=#000000 border=1><TR><TD><TABLE cellSpacing=8 cellPadding=10 width=450 bgColor=#000000 border=1><TR><TD><CENTER><TABLE cellSpacing=8 cellPadding=10 width=450 background=http://tech.china.com/zh_cn/home4u/sucai/gifanimation/line/0153.gif border=0><TR><TD>加入内容</TD></TR></TABLE></CENTER></TD></TR></TABLE></TD></TR></TABLE>

4.一层
<TABLE cellSpacing=1 cellPadding=0 width="100%" align=center background=http://pugongyingw.51.net/image/bj/10.jpg border=5>
<TBODY>
<TR>
<TD>加入内容</TD></TR></TBODY></TABLE>

5.两层
<CENTER>
<TABLE borderColor=#0000ff cellSpacing=0 borderColorDark=#ffffff cellPadding=0 width=480 border=1>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=5 cellPadding=5 width=430 align=center background=http://znrs.2000y.net/UploadFile/2004-6/200467181958882.jpg border=0>
<TBODY>
<TR>
<TD>
加入内容
</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
</CENTER>

二、加入内容（图片、FLASH、音乐等代码）：

（一）单纯的一张图片：

<IMG src=http://forum.xicn.net/uploadFile/2004/05/29/AqSegBJrrq214800bingchuan4.jpg>

（二）加框有一层FLASH的图片：

<TABLE height=300 cellSpacing=0 cellPadding=0 width=400 background=http://www.xiangfan.org/htdocs/dvbbs/UploadFile/2004-6/200462095958665.jpg border=1 bortercolor="#000000">
<TBODY>
<TR>
<TD>
<EMBED src=http://www.cn898.net/bg/6.swf width=400 height=300 type=application/x-shockwave-flash wmode="transparent" menu="false" quality="high" tybe="application/x-shockwave-flash"> </TD></TR></TBODY></TABLE>

（三）加框用两层FLASH的图片：


<TABLE height=300 cellSpacing=0 cellPadding=0 width=400 background=http://www.xiangfan.org/htdocs/dvbbs/UploadFile/2004-6/200462010554370.jpg border=1 bortercolor="#000000">
<TBODY>
<TR>
<TD>
<EMBED align=right src=http://www.cn898.net/bg/400.swf width=400 height=280 type=application/x-shockwave-flash wmode="transparent" menu="false" quality="high" tybe="application/x-shockwave-flash"> <EMBED align=right src=http://www.cn898.net/bg/fh/3/1.swf width=380 height=285 type=application/x-shockwave-flash wmode="transparent" menu="false" quality="high" tybe="application/x-shockwave-flash"> </TD></TR></TBODY></TABLE>

（四）两个FLASH上下排列的图片：

<TABLE cellSpacing=0 cellPadding=0 width=400 height=300 background=http://www.xiangfan.org/htdocs/dvbbs/UploadFile/2004-6/200462095452492.jpg border=1 bortercolor="#000000">
<TBODY>
<TR>
<TD>
<EMBED src=http://www.cn898.net/bg/fh/3/1.swf width=400 height=150 type=application/x-shockwave-flash tybe="application/x-shockwave-flash" quality="high" menu="false" wmode="transparent"> <EMBED src=http://www.cn898.net/bg/9.swf width=400 height=150 type=application/x-shockwave-flash tybe="application/x-shockwave-flash" quality="high" menu="false" wmode="transparent"></TD></TR></TBODY></TABLE>

（五）上下移动的图片们：

<center><MARQUEE scrollAmount=3 scrollDelay=150 direction=up width=450 height=500 borderColor="#000000" border="1">
<IMG src="http://forum.xicn.net/uploadFile/2004/05/29/43akqeHuYd214718bingchuan4.jpg">
<IMG src="http://forum.xicn.net/uploadFile/2004/05/29/DLSKfBs53V215623bingchuan4.jpg">
<IMG src="http://forum.xicn.net/uploadFile/2004/05/29/ZEd88baGsn215638bingchuan4.jpg">
</MARQUEE></center>

（六）左右移动的图片们：

<CENTER>
<MARQUEE scrollAmount=1 direction=right behavior=alternate width="100%">
<CENTER>
<TABLE cellSpacing=0 width=400 background=http://pugongyingw.51.net/image/xiantiao/d/14.gif border=0 cellpading="0">
<TBODY>
<TR>
<TD>
<IMG src="http://bbs.esong.cn/UploadFile/2004-5/bihe.jpg___2004511215822101.jpg">
<IMG src="http://bbs.esong.cn/UploadFile/2004-5/by.jpg___2004511215822766.jpg">
<IMG src="http://bbs.esong.cn/UploadFile/2004-5/htys.jpg___2004511215822890.jpg">
<IMG src="http://bbs.esong.cn/UploadFile/2004-5/hyxq.jpg___2004511215822564.jpg">
<IMG src="http://bbs.esong.cn/UploadFile/2004-5/lty.jpg___2004511215822316.jpg">
<IMG src="http://bbs.esong.cn/UploadFile/2004-5/zyh.jpg___2004511215916227.jpg">
<IMG src="http://bbs.esong.cn/UploadFile/2004-5/yannian.jpg___200451121591787.jpg">
<IMG src="http://bbs.esong.cn/UploadFile/2004-5/xbh.jpg___2004511215917981.jpg">
<IMG src="http://bbs.esong.cn/UploadFile/2004-5/mdqg.jpg___20045112203661.jpg">
<IMG src="http://bbs.esong.cn/UploadFile/2004-5/mlsx.jpg___20045112203201.jpg"></TD></TR></TBODY></TABLE></CENTER></MARQUEE></CENTER>

（七）图片雾化效果：

<CENTER><TABLE cellSpacing=0 cellPadding=0 width=400 background=http://www.cn898.net/bbs/UploadFile/20044244514090780.jpg border=0>
<TBODY>
<TR>
<TD style="FILTER: Alpha(opacity=100,style=2)" width=400 background=http://61.133.87.122/bbs/attachments/month_0405/5_IHwvJkvgflPp.jpg height=300><EMBED pluginspage=http://www.macromedia.com/go/getflashplayer src=http://www.nygyfs.com/tmswf/37.swf width=400 height=300 type=application/x-shockwave-flash quality="high" wmode="transparent"></EMBED></TD></TR></TBODY></TABLE></CENTER>

（八）图片倒影效果：

<IMG src="http://www.smba-china.com/upload/upfile/2004430154320.gif"><IMG src="http://www.smba-china.com/upload/upfile/2004430154320.gif"> 

（九）图片向左右相反的方向移动的效果：

<MARQUEE width=200 height=50><IMG src="http://www.mtxsnow.net/UploadFile/2004361972445799.gif"><IMG src="http://www.snsn.net/user/zn/UploadFile/2004-6/2004615135733903.gif"><IMG src="http://www.mtxsnow.net/UploadFile/2004361972445799.gif"></MARQUEE>
<MARQUEE direction=right width=200 height=50><IMG src="http://851.vicp.net/bbs/UploadFile/2004-4/20044895834296.gif"><IMG src="http://www.snsn.net/user/zn/UploadFile/2004-6/200461612563116.gif"><IMG src="http://851.vicp.net/bbs/UploadFile/2004-4/20044895834296.gif"></MARQUEE> 

（十）加入背景音乐代码：

<EMBED src=http://www.flamesky.org/raynal-onwer/asoka%20theme..wma.wma hidden=true type=audio/x-ms-wma LOOP="TRUE" AUTOSTART="TRUE"></EMBED>
所用元素：<EMBED></EMBED>
参数：
src：音乐文件的URL；
hidden：=true为不可见，=false反之；
type：指定音频类型；
LOOP：是否循环播放，注意其值置于小角双引号中；
AUTOSTART：是否自动播放，其值同上。

[ Last edited by 无可奈何花落去 on 2004-11-26 at 21:05 ]

无可奈何花落去 发表于 2004-4-18 13:30:43

透明FLASH运用

[图区教程]小猪宝宝的作图教程(适合初学者做头像,签名)

http://www.xyhc.com/viewthread.php?tid=412916&extra=page%3D1

 
代码一
<*TABLE align=center background=图片地址 border=0 cellPadding=0 cellSpacing=0 height=180 width=350 table>
<*TBODY>
<*TR>
<*TD>
<*EMBED height=170 pluginspage=http://www.macromedia.com/go/getflashplayer src=http://www.cn898.net/bg/4.swf type=application/x-shockwave-flash width=330 wmode="transparent" quality="high"></EMBED> <*/TD><*/TR><*/TBODY><*/TABLE>

效果
<TABLE align=center background=http://bbs.xyhc.com/images/default/logo.gif border=0 cellPadding=0 cellSpacing=0 height=80 width=240 table>
<TBODY>
<TR>
<TD>
<EMBED height=100 pluginspage=http://www.macromedia.com/go/getflashplayer src=http://www.nygyfs.com/tmswf/86.swf type=application/x-shockwave-flash width=240 wmode="transparent" quality="high"></EMBED>
</TD></TR></TBODY></TABLE>

说明：也就是把FLASH放在图片里面，这样图片就必需作为背景才行，不足之处就在于图片往往较大，而论坛显示范围有限，作为背景的图片常常无法显示全图。所以建议大家在用这种格式的时候最好是选取一些较小的图，也或者自己用PS将图改小了再用。

更多透明flash效果请参阅：
Flash 透明动态效果素材大全(清爽)
Flash 透明动态效果素材大全(絶噯KK)

代码二
<*TABLE align=center background=背景图片地址 border=4 cellPadding=0 cellSpacing=10 height=400 width=450 table><*TBODY><*TR><*TD>
<*P align=center><*IMG border=0 height=180 src="图片地址" width=350><*/P><*/FONT>
<*EMBED style="LEFT: 270px; WIDTH: 400px; POSITION: absolute; TOP: 1200px; HEIGHT: 300px" align=right src=http://www.cn898.net/bg/4.swf width=400 height=300 type=application/octet-stream wmode="transparent" quality="high" ;;><*/EMBED>
<*/TD><*/TR><*/TBODY><*/TABLE>

效果
<TABLE align=center background=http://bbs.xyhc.com/attachments/month_0410/200492823215801105_wq4dNpUSNdb9.jpg border=4 cellPadding=0 cellSpacing=10 height=300 width=100 table><TBODY><TR><TD>
<IMG border=0 height=73 src="http://bbs.xyhc.com/images/default/logo.gif" width=240>
<EMBED style="LEFT: 270px; WIDTH: 400px; POSITION: absolute; TOP: 1200px; HEIGHT: 300px" align=right src=http://www.nygyfs.com/tmswf/97.swf width=400 height=300 type=application/octet-stream wmode="transparent" quality="high" ;;></EMBED>
</TD></TR></TBODY></TABLE>

说明：TOP: 900px 是指FLASH与帖子上边之间的距离（也就是FLASH与IE的距离）。
　　　LEFT: 50px 是指FLASH与帖子左边的距离
　　　WIDTH: 00px　HEIGHT: 300px　是指FLASH定位的范围宽度和高度
　　后面的width=400 height=3000 就是指FLASH的宽和高了。。

代码三
<*center>
<*TABLE id=table1 height=300 cellSpacing=5 borderColorDark=#716699 width=400 borderColorLight=#716699 background=图片地址 border=1>
<*TBODY>
<*TR>
<*TD>
<*P>
<*P><*EMBED pluginspage=http://www.macromedia.com/go/getflashplayer src=http://www.cn898.net/bg/6.swf width=400 height=300 type=application/x-shockwave-flash wmode="transparent" quality="high"><*/EMBED><*/P>
<*P>
<*P><*/P><*/TD><*/TR><*/TBODY><*/TABLE>

效果
<center>
<TABLE id=table1 height=250 cellSpacing=5 borderColorDark=#716699 width=300 borderColorLight=#716699 background=http://blog.beok.net/uploadfile/2004526164544946.GIF border=1>
<TBODY>
<TR>
<TD>

<EMBED pluginspage=http://www.macromedia.com/go/getflashplayer src=http://www.nygyfs.com/tmswf/97.swf width=350 height=190 type=application/x-shockwave-flash wmode="transparent" quality="high"></EMBED>

</TD></TR></TBODY></TABLE>

飘动的心形花束
<*EMBED align=left height=300 src=http://favorites2003.vicp.net/picture/cl/2.swf style="HEIGHT: 400px; LEFT: 200px; POSITION: absolute; TOP: 500px; WIDTH: 400px" type=application/octet-stream;; width=300 wmode="transparent" quality="high"><*EMBED align=left height=300 src=http://favorites2003.vicp.net/picture/cl/2.swf style="HEIGHT: 400px; LEFT: 250px; POSITION: absolute; TOP: 1100px; WIDTH: 400px" type=application/octet-stream;; width=300 wmode="transparent" quality="high"><*EMBED align=left height=300 src=http://favorites2003.vicp.net/picture/cl/2.swf style="HEIGHT: 400px; LEFT: 300px; POSITION: absolute; TOP: 1700px; WIDTH: 400px" type=application/octet-stream;; width=300 wmode="transparent" quality="high"><*EMBED align=left height=300 src=http://favorites2003.vicp.net/picture/cl/2.swf style="HEIGHT: 400px; LEFT: 350px; POSITION: absolute; TOP: 2300px; WIDTH: 400px" type=application/octet-stream;; width=300 wmode="transparent" quality="high"><*EMBED align=left height=300 src=http://favorites2003.vicp.net/picture/cl/2.swf style="HEIGHT: 400px; LEFT: 400px; POSITION: absolute; TOP: 2900px; WIDTH: 400px" type=application/octet-stream;; width=300 wmode="transparent" quality="high"><*EMBED align=left height=300 src=http://favorites2003.vicp.net/picture/cl/2.swf style="HEIGHT: 400px; LEFT: 450px; POSITION: absolute; TOP: 3500px; WIDTH: 400px" type=application/octet-stream;; width=300 wmode="transparent" quality="high"><*EMBED align=left height=300 src=http://favorites2003.vicp.net/picture/cl/2.swf style="HEIGHT: 400px; LEFT: 500px; POSITION: absolute; TOP: 4100px; WIDTH: 400px" type=application/octet-stream;; width=300 wmode="transparent" quality="high"><*EMBED align=left height=300 src=http://favorites2003.vicp.net/picture/cl/2.swf style="HEIGHT: 400px; LEFT: 550px; POSITION: absolute; TOP: 4700px; WIDTH: 400px" type=application/octet-stream;; width=300 wmode="transparent" quality="high"><*EMBED align=left height=300 src=http://favorites2003.vicp.net/picture/cl/2.swf style="HEIGHT: 400px; LEFT: 600px; POSITION: absolute; TOP: 5300px; WIDTH: 400px" type=application/octet-stream;; width=300 wmode="transparent" quality="high"><*EMBED align=left height=300 src=http://favorites2003.vicp.net/picture/cl/2.swf style="HEIGHT: 400px; LEFT: 650px; POSITION: absolute; TOP: 5900px; WIDTH: 400px" type=application/octet-stream;; width=300 wmode="transparent" quality="high"><*/EMBED>
效果
<EMBED align=left height=300 src=http://favorites2003.vicp.net/picture/cl/2.swf style="HEIGHT: 400px; LEFT: 200px; POSITION: absolute; TOP: 500px; WIDTH: 400px" type=application/octet-stream;; width=300 wmode="transparent" quality="high">

[ Last edited by 絶噯KK on 2005-3-20 at 16:01 ]

无可奈何花落去 发表于 2004-4-18 13:34:05

<HTML> <HEAD> <TITLE>HTML教程</TITLE> <META NAME="Author" CONTENT="JY"> <META NAME="GENERATOR" CONTENT="Mozilla/3.04Gold (Win95; I) "> HTML入门　　HTML英语意思是：Hypertext Marked Language，即超文本标记语言,是一种用来制作超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台（如UNIX，WINDOWS等）。自1990年以来HTML就一直被用作World Wide Web 的信息表示语言，用于描述Homepage的格式设计和它与WWW上其它Homepage 的连结信息。使用HTML语言描述的文件，需要通过WWW浏览器显示出效果。　　接下来，我们就结合几个实例来观看一下HTML的全貌，以便于我们首先对它有一个整体上的认识，并且体会一下超文本与标记究竟是什么意思。　　【<A HREF="http://www.gggl.gov.cn/fwgc/jiaocheng/html/yball.gif">实例一</A>】　　　【<A HREF="http://www.moonyh.com/bbs/dispbbs.asp?boardID=15&ID=718">实例二</A>】　　　【<A HREF="http://www.moonyh.com/bbs/dispbbs.asp?boardID=15&ID=545">实例三</A>】　　<IMG SRC="http://www.gggl.gov.cn/fwgc/jiaocheng/html/yball.gif" HEIGHT=15 WIDTH=22>通过HTML可以表现出丰富多彩的设计风格　　　　　图片调用：<IMG SRC="文件名"> 　　　　　文字格式：" COLOR="00FFFF">文字　　<IMG SRC="http://www.gggl.gov.cn/fwgc/jiaocheng/html/yball.gif" HEIGHT=15 WIDTH=22>通过HTML可以实现页面之间的跳转　　　　　页面跳转：〈A HREF="文件路径/文件名"></A>　　<IMG SRC="http://www.gggl.gov.cn/fwgc/jiaocheng/html/yball.gif" HEIGHT=15 WIDTH=22>通过HTML可以展现多媒体的效果　　　　　声频：<EMBED SRC="音乐文件名" AUTOSTART=true> 　　　　　视频：<EMBED SRC="视频文件名" AUTOSTART=true>　　从以上的例子，我们就可以理解超文本与标记的含义了。所谓超文本，因为它可以加入图片、声音、动画、影视等内容，因为它可以从一个文件跳转到另一个文件，与世界各地主机的文件连接。所谓标记，就是它采用了一系列的指令符号来控制输出的效果，这些指令符号用“<标签名字　属性>”来表示。 </BODY> </HTML>
<HTML> <HEAD> <TITLE>HTML教程</TITLE> <META NAME="GENERATOR" CONTENT="Mozilla/3.04Gold (Win95; I) "> <META NAME="Author" CONTENT="JY"> </HEAD> <BODY> <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%">下面是一个最基本的超文本文档的源代码：<TABLE> <TR> <TD><HTML> <HEAD> <TITLE>一个简单的HTML示例</TITLE> </HEAD> <BODY> <CENTER> <H3>欢迎光临</H3> <HR> 　　这是我第一次做，无论怎么样，我都会努力做好！ </CENTER> </BODY> </HTML></TD><TD VALIGN=TOP> ━┓ 　┃文件头 ━┛ ━┓ 　┃ 　┃ 　┃ 　┃文件体 　┃ 　┃ 　┃ 　┃ ━┛ </TD> </TR> </TABLE>超文本中的标签　　刚刚接触超文本，遇到的最大的障碍就是一些用“<”和“>”括起来的句子，我们称它为标签，是用来分割和标记文本的元素，以形成文本的布局、文字的格式及五彩缤纷的画面。1. 单标签 　　某些标记称为“单标签”，因为它只需单独使用就能完整地表达意思，这类标记的语法是： 　　　　　　　　　　< 标签名称> 　　最常用的单标签是 , 它表示换行。 2.双标签 　　另一类标记称为“双标签”，它由“始标签”和“尾标签”两部分构成，必须成对使用， 其中始标签告诉Web浏览器从此处开始执行该标记所表示的功能，而尾标签告诉Web浏览器在这 里结束该功能。始标签前加一个斜杠（/）即成为尾标记。这类标记的语法是： 　　　　　　　　　　　　　<标签> 内容</ 标签> 　　其中“内容” 部分就是要被这对标记施加作用的部分。例如你想突出对某段文字的显示，就将此段文字放在一 标记中：　　　　　　　　　　　　　　第一： 3.标签属性 　　许多单标记和双标记的始标记内可以包含一些属性，其语法是：　　　　　　　　< 标签名字属性1 属性2 属性3 … > 　　各属性之间无先后次序，属性也可省略（即取默认值），例如单标记<HR>表示在文档当前位置画一条 水平线（horizontal line），一般是从窗口中当前行的最左端一直画到最右端。 带一些属性： <PRE> <HR SIZE=3 ALIGN=LEFT WIDTH="75%">　　其中SIZE属性定义线的粗细，属性值取整数，缺为1；ALIGN属性表示对齐方式，可取LEFT（左对齐， 缺省值），CENTER（居中），RIGHT（右对齐）；WIDTH 属性定义线的长度，可取相对值，（由一对 " " 号括起来的百分数，表示相对于充满整个窗口的百分比），也可取绝对值（用整数表示的屏幕像素点的 个数，如WIDTH=300），缺省值是"100%"。</PRE> </BODY> </HTML>
<HTML> <HEAD> <TITLE>HTML教程</TITLE> <META NAME="Author" CONTENT="JY"> <META NAME="GENERATOR" CONTENT="Mozilla/3.04Gold (Win95; I) "> </HEAD> <BODY> 标题 　　一般文章都有标题、副标题、章和节等结构，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> <title>标题示例</title> </head><body>这是一行普通文字 <H1>一级标题</H1> <H2>二级标题</H2> <H3>三级标题</H3> <H4>四级标题</H4> <H5>五级标题</H5> <H6>六级标题</H6> </body> <HR WIDTH="100%">　　从结果可以看出，每一个标题的字体为黑体字，内容文字前后都插入空行。</BODY> </HTML>
<HTML> <HEAD> <TITLE>HTML教程</TITLE> <META NAME="Author" CONTENT="JY"> <META NAME="GENERATOR" CONTENT="Mozilla/3.04Gold (Win95; I) "> </HEAD> <BODY> 换行 　　在编写HTML文件时，我们不必考虑太细的设置，也不必理会段落过长的部分会被浏览器切掉。因为，在HTML语言规范里，每当浏览器窗口被缩小时，浏览器会自动将右边的文字转折至下一行。所以，编写者对于自己需要断行的地方，应加上 标签。　　请看下面的例子： <HR WIDTH="100%"><html> <head> <title>无换行示例</title> </head><body> 登鹳雀楼　白日依山尽，黄河入海流。欲穷千里目，更上一层楼。 </body></html><body> 登鹳雀楼　白日依山尽，黄河入海流。欲穷千里目，更上一层楼。 </body> <HR WIDTH="100%"> <html> <head> <title>换行示例</title> </head><body> 登鹳雀楼 白日依山尽， 黄河入海流。 欲穷千里目， 更上一层楼。 </body></html> <body> 登鹳雀楼 白日依山尽， 黄河入海流。 欲穷千里目， 更上一层楼。 </body> <HR WIDTH="100%"> </BODY> </HTML>
<HTML> <HEAD> <TITLE>HTML教程</TITLE> <META NAME="Author" CONTENT="JY"> <META NAME="GENERATOR" CONTENT="Mozilla/3.04Gold (Win95; I) "> </HEAD> <BODY> 段落标签　　为了排列的整齐、清晰，文字段落之间，我们常用来做标记。文件段落的开始由来标记，段落的结束由来标记，是可以省略的，因为下一个的开始就意味着上一个的结束。　　标签还有一个属性ALING，它用来指名字符显示时的对齐方式，一般值有CENTER、LEFT、RIGHT三种。　　下面，我们用两个例子来说明这个标签的用法。 <HR WIDTH="100%"><html> <head> <title>段落标签</title> </head><body> 浣溪沙　一曲新词酒一杯，去年天气旧亭台，夕阳西下几时回。无可奈何花落去，似曾相识燕归来。小园香径几徘徊。 </body></html><body> 浣溪沙　一曲新词酒一杯，去年天气旧亭台，夕阳西下几时回。无可奈何花落去，似曾相识燕归来。小园香径几徘徊。 </body> <HR WIDTH="100%"><html> <head> <title>段落标签</title> </head><body> 登鹳雀楼白日依山尽， 黄河入海流。 欲穷千里目， 更上一层楼。 </body></html><body> 登鹳雀楼白日依山尽， 黄河入海流。 欲穷千里目， 更上一层楼。 </body> <HR WIDTH="100%"> </BODY> </HTML>
<HTML> <HEAD> <TITLE>HTML教程</TITLE> <META NAME="Author" CONTENT="JY"> <META NAME="GENERATOR" CONTENT="Mozilla/3.04Gold (Win95; I) "> </HEAD> <BODY> 水平线段<HR>　　这个标签可以在屏幕上显示一条水平线，用以分割页面中的不同部分。<HR>有三个属性： 　　　size　水平线的宽度 　　　width 水平线的长，用占屏幕宽度的百分比或象素值来表示 　　　align 水平线的对齐方式，有LEFT RIGHT CENTER三种 　　　noshade 线段无阴影属性，为实心线段　　我们可以用几个例子来说明这线段的用法： <HR WIDTH="100%"><IMG SRC="http://www.gggl.gov.cn/fwgc/jiaocheng/html/yball.gif" HEIGHT=15 WIDTH=22>线段粗细的设定 <HTML> <HEAD> <TITLE>线段粗细的设定</TITLE> </HEAD> <BODY> 这是第一条线段，无size设定，取内定值SIZE=1来显示 <HR> 这是第二条线段，SIZE=5 <HR SIZE=5> 这是第三条线段，SIZE=10 <HR SIZE=10> </BODY> </HTML> <TITLE>线段粗细的设定</TITLE> </HEAD><BODY> 这是第一条线段，无size设定，取内定值SIZE=1来显示 <HR> 这是第二条线段，SIZE=5 <HR SIZE=5> 这是第三条线段，SIZE=10 <HR SIZE=10> <HR WIDTH="100%"><H3><IMG SRC="http://www.gggl.gov.cn/fwgc/jiaocheng/html/yball.gif" HEIGHT=15 WIDTH=22>线段长度的设定</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> <BODY> 这是第一条线段，无WIDTH设定，取WIDTH内定值100%来显示 <HR SIZE=3> 这是第二条线段，WIDTH=50(点数方式) <HR WIDTH=50 SIZE=5> 这是第三条线段，WIDTH=50%(百分比方式) <HR WIDTH=50% SIZE=7> </BODY> <HR WIDTH="100%"><IMG SRC="http://www.gggl.gov.cn/fwgc/jiaocheng/html/yball.gif" HEIGHT=15 WIDTH=22>线段排列的设定 <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> <BODY> 这是第一条线段，无ALIGN设定，(取内定值CENTER显示) <HR WIDTH=50% SIZE=5> 这是第二条线段，向左对齐BR> <HR WIDTH=60% SIZE=7 ALIGN=LEFT> 这是第三条线段，向右对齐 <HR WIDTH=70% SIZE=2 ALIGN=RIGHT> </BODY> <HR WIDTH="100%"> <IMG SRC="http://www.gggl.gov.cn/fwgc/jiaocheng/html/yball.gif" HEIGHT=15 WIDTH=22>无阴影的设定 <HTML> <HEAD> <TITLE>无阴影的设定</TITLE> </HEAD> <BODY> 这是第一条线段，无NOSHADE设定，取内定值阴影效果来显示 <HR WIDTH=80% SIZE=5> 这是第二条线段，有NOSHADE设定 <HR WIDTH=80% SIZE=7 ALIGN=LEFT NOSHADE> </BODY> </HTML> <BODY> 这是第一条线段，无NOSHADE设定，取内定值阴影效果来显示 <HR WIDTH=80% SIZE=5> 这是第二条线段，有NOSHADE设定 <HR WIDTH=80% SIZE=7 ALIGN=LEFT NOSHADE> </BODY> <HR WIDTH="100%"> </BODY> </HTML>
<HTML> <HEAD> <TITLE>HTML教程</TITLE> <META NAME="Author" CONTENT="JY"> <META NAME="GENERATOR" CONTENT="Mozilla/3.04Gold (Win95; I) "> </HEAD> <BODY> 文字的大小设置　　提供设置字号大小的是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> <title>字号大小</title> </head><body> 这是size=7的字体 这是size=6的字体 这是size=5的字体 这是size=4的字体 这是size=3的字体 这是size=2的字体 这是size=1的字体 这是size=-1的字体 </body> <HR WIDTH="100%"> </BODY> </HTML>
<HTML> <HEAD> <TITLE>HTML教程</TITLE> <META NAME="Author" CONTENT="JY"> <META NAME="GENERATOR" CONTENT="Mozilla/3.04Gold (Win95; I) "> </HEAD> <BODY><DIV ALIGN=right><A HREF="http://www.tietu.com"><IMG SRC="http://www.moonyh.com/bbs/uploadFace/19_20041301838036828.gif" BORDER=0 HEIGHT=100 WIDTH=100></A></DIV>文字的字体与样式　　HTML4.0提供了定义字体的功能，用FACE属性来完成这个工作。FACE的属性值可以是本机上的任一字体类型，但有一点麻烦的是，只有对方的电脑中装有相同的字体才可以在他的浏览器中出现你预先设计的风格。　　请看例子： <HR WIDTH="100%"><HTML> <HEAD> <TITLE>字体</TITLE> </HEAD> <BODY> <CENTER> 欢迎光临 欢迎光临 欢迎光临 欢迎光临 Welcom my homepage. Welcom my homepage. </CENTER> </BODY> </HTML> <BODY> <CENTER> 欢迎光临 欢迎光临 欢迎光临 欢迎光临 Welcom my homepage. Welcom my homepage. </CENTER> </BODY> <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> <body> 黑体字 斜体字 加下划线 <BIG>大型字体</BIG> 小型字体 <BLINK>闪烁效果</BLINK> Welcome Welcome <CITE>Welcom</CITE> </body> <HR WIDTH="100%"> </BODY> </HTML>
<HTML> <HEAD> <TITLE>HTML教程</TITLE> <META NAME="Author" CONTENT="JY"> <META NAME="GENERATOR" CONTENT="Mozilla/3.04Gold (Win95; I) "> </HEAD> <BODY> 文字的颜色　　文字颜色设置格式如下：　　　…　　这里的颜色值可以是一个十六进制数(用“#”作为前缀)，也可以是以下16种颜色名称。 <HR WIDTH="100%"><TABLE CELLSPACING=10 CELLPADDING=0 WIDTH="80%" > <TR> <TD WIDTH="16"><IMG SRC="http://www.gggl.gov.cn/fwgc/jiaocheng/html/black.gif" HEIGHT=24 WIDTH=24></TD><TD>Black = "#000000"</TD><TD WIDTH="16"><IMG SRC="http://www.gggl.gov.cn/fwgc/jiaocheng/html/green.gif" HEIGHT=24 WIDTH=24></TD><TD>Green = "#008000"</TD> </TR><TR> <TD WIDTH="16"><IMG SRC="http://www.gggl.gov.cn/fwgc/jiaocheng/html/silver.gif" HEIGHT=24 WIDTH=24></TD><TD>Silver = "#C0C0C0"</TD><TD WIDTH="16"><IMG SRC="http://www.gggl.gov.cn/fwgc/jiaocheng/html/lime.gif" HEIGHT=24 WIDTH=24></TD><TD>Lime = "#00FF00"</TD> </TR><TR> <TD WIDTH="16"><IMG SRC="http://www.gggl.gov.cn/fwgc/jiaocheng/html/gray.gif" HEIGHT=24 WIDTH=24></TD><TD>Gray = "#808080"</TD><TD WIDTH="16"><IMG SRC="http://www.gggl.gov.cn/fwgc/jiaocheng/html/olive.gif" HEIGHT=24 WIDTH=24></TD><TD>Olive = "#808000"</TD> </TR><TR> <TD WIDTH="16"><IMG SRC="http://www.gggl.gov.cn/fwgc/jiaocheng/html/white.gif" HEIGHT=24 WIDTH=24></TD><TD>White = "#FFFFFF"</TD><TD WIDTH="16"><IMG SRC="http://www.gggl.gov.cn/fwgc/jiaocheng/html/yellow.gif" HEIGHT=24 WIDTH=24></TD><TD>Yellow = "#FFFF00"</TD> </TR><TR> <TD WIDTH="16"><IMG SRC="http://www.gggl.gov.cn/fwgc/jiaocheng/html/maroon.gif" HEIGHT=24 WIDTH=24></TD><TD>Maroon = "#800000"</TD><TD WIDTH="16"><IMG SRC="http://www.gggl.gov.cn/fwgc/jiaocheng/html/navy.gif" HEIGHT=24 WIDTH=24></TD><TD>Navy = "#000080"</TD> </TR><TR> <TD WIDTH="16"><IMG SRC="http://www.gggl.gov.cn/fwgc/jiaocheng/html/red.gif" HEIGHT=24 WIDTH=24></TD><TD>Red = "#FF0000"</TD><TD WIDTH="16"><IMG SRC="http://www.gggl.gov.cn/fwgc/jiaocheng/html/blue.gif" HEIGHT=24 WIDTH=24></TD><TD>Blue = "#0000FF"</TD> </TR><TR> <TD WIDTH="16"><IMG SRC="http://www.gggl.gov.cn/fwgc/jiaocheng/html/purple.gif" HEIGHT=24 WIDTH=24></TD><TD>Purple = "#800080"</TD><TD WIDTH="16"><IMG SRC="http://www.gggl.gov.cn/fwgc/jiaocheng/html/teal.gif" HEIGHT=24 WIDTH=24></TD><TD>Teal = "#008080"</TD> </TR><TR> <TD WIDTH="16"><IMG SRC="http://www.gggl.gov.cn/fwgc/jiaocheng/html/fuchsia.gif" HEIGHT=24 WIDTH=24></TD><TD>Fuchsia = "#FF00FF"</TD><TD WIDTH="16"><IMG SRC="http://www.gggl.gov.cn/fwgc/jiaocheng/html/aqua.gif" HEIGHT=24 WIDTH=24></TD><TD>Aqua = "#00FFFF"</TD> </TR> </TABLE> <HR WIDTH="100%">请看例子：<HTML> <HEAD> <TITLE>文字的颜色</TITLE> </HEAD> <BODY BGCOLOR=000080> <CENTER> 色彩斑斓的世界 色彩斑斓的世界 色彩斑斓的世界 色彩斑斓的世界 色彩斑斓的世界 色彩斑斓的世界 色彩斑斓的世界 </CENTER> </BODY> </HTML> 色彩斑斓的世界 色彩斑斓的世界 色彩斑斓的世界 色彩斑斓的世界 色彩斑斓的世界 色彩斑斓的世界 色彩斑斓的世界 <HR WIDTH="100%"> </BODY> </HTML>
<HTML> <HEAD> <TITLE>HTML教程</TITLE> <META NAME="Author" CONTENT="JY"> <META NAME="GENERATOR" CONTENT="Mozilla/3.04Gold (Win95; I) "> </HEAD> <BODY> 位置控制　　通过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><body> <div align=left> 你好! <div align=right> 你好! <div align=center> 你好! </body> <HR WIDTH="100%">　　另外，ALIGN属性也常常用在其它标签中，引起其内容位置的变动。　　如： 　　　　<HR ALIGN=#>　　　#＝left／right／center 　　　　<H1 ALIGN=#〉 <HR WIDTH="100%"> </BODY> </HTML>

<HTML> <HEAD> <TITLE>HTML教程</TITLE> <META NAME="Author" CONTENT="JY"> <META NAME="GENERATOR" CONTENT="Mozilla/3.04Gold (Win95; I) "> </HEAD> <BODY> 综合示例　　前面我们所讲是单独使用一个标签的方法，在实际的编写中，许多标签和一些属性是结合起来使用的， 比如： 　　　　文字 　　　　文字 <HR WIDTH="100%">【例】<HTML> <HEAD> <TITLE>字体样式</TITLE> </HEAD><BODY> 白 居易 　　白居易（772-846年）字乐天，晚居香山，自号香山居士，原籍太原。白居易是唐代新乐府运动的倡 导者，是中国文学史上堪与屈原、李白、杜甫并列的第一流大诗人。 　　白居易出身于小官僚家庭。大约在贞元三年（ 787年）的年初，十六岁的白居易带着自己的诗稿，到 了京都长安。老诗人顾况看到这位不速之客的姓名有“居易”二字，便很恢谐地说：“长安米贵，居住不 易！”及披卷读到《赋得古原草送别》中的<CITE>“离离原上草，一岁一枯荣；野火烧不尽，春风吹又生”</CITE>时，不禁大为惊奇，拍案称绝，马上改变语气，郑重地说：“能写出这样好的诗句,‘居’下去是不难的，刚才我是同你开开玩笑罢了。”从此，白居易的诗名大振。 　　白居易生活的时代，主要是建中、元和、长庆时期（公元781-824年）。是唐朝走向衰败的极端苦难动荡的时代。 　　白居易是继杜甫之后，我国伟大的现实主义诗人。他的贡献是在总结我国自《诗经》以来现实主义诗歌创作经验的基础上，建立了现实主义的诗歌理论，掀起了一个波澜壮阔的现实主义的诗歌运动——新乐府运动，创作了大量优秀的现实主义诗篇。 </BODY> </HTML> 【显示结果】 白居易 　　白居易（772-846年）字乐天，晚居香山，自号香山居士，原籍太原。白居易是唐代新乐府运动的倡 导者，是中国文学史上堪与屈原、李白、杜甫并列的第一流大诗人。 　　白居易出身于小官僚家庭。大约在贞元三年（ 787年）的年初，十六岁的白居易带着自己的诗稿，到 了京都长安。老诗人顾况看到这位不速之客的姓名有“居易”二字，便很恢谐地说：“长安米贵，居住 不易！”及披卷读到《赋得古原草送别》中的<CITE>“离离原上草，一岁一枯荣；野火烧不尽，春风吹又生” </CITE>时，不禁大为惊奇，拍案称绝，马上改变语气，郑重地说：“能写出这样好的诗句,‘居’下去是不难 的，刚才我是同你开开玩笑罢了。”从此，白居易的诗名大振。 　　白居易生活的时代，主要是建中、元和、长庆时期（公元781-824年）。是唐朝走向衰败的极端苦难 动荡的时代。 　　白居易是继杜甫之后，我国伟大的现实主义诗人。他的贡献是在总结我国自《诗经》以来现实主义 诗歌创作经验的基础上，建立了现实主义的诗歌理论，掀起了一个波澜壮阔的现实主义的诗歌运动——新乐 府运动，创作了大量优秀的现实主义诗篇。 <HR WIDTH="100%"> </BODY> </HTML>

[ Last edited by 无可奈何花落去 on 2004-4-22 at 15:25 ]

无可奈何花落去 发表于 2004-4-18 13:50:32

<HTML> <HEAD> <TITLE>HTML教程</TITLE> <META NAME="Author" CONTENT="JY"> <META NAME="GENERATOR" CONTENT="Mozilla/3.04Gold (Win95; I) "> </HEAD> <BODY> 插入图形　　超文本之所以在很短的时间内如此广泛的受到人们的青睐，很重要的一个原因时它能支持多媒体的特性，如图象、声音、动画等。 <HR WIDTH="100%">基本格式　　超文本支持的图象格式一般有X Bitmap(XBM)、GIF、JPEG三种，所以我们对图片处理后要保存为这三种格式中的任何一种，这样才可以在浏览器中看到。 　　插入图象的标签是<IMG>，其格式为：　　　　　<IMG SRC="图形文件地址">　　SRC属性指明了所要链接的图象文件地址，这个图形文件可以是本地机器上的图形，也可以是位于远端主机上的图形。地址的表示方法可以沿用上一篇内容“文件的链接”中URL地址表示方法。　　例：　<IMG SRC="images/ball.gif">　　IMG还有两个属性是HEIGHT和WIDTH，分别表示图形的高和宽。通过这两个属性，可以改变图形的大小，如果没有设置，图形按原大显示：　　例：<CENTER><TABLE> <TR> <TD><IMG SRC="flowers0.jpg"></TD><TD>　　<IMG SRC="flowers0.jpg" width="200" heigth="100"></TD> </TR><TR> <TD><IMG SRC="http://www.gggl.gov.cn/fwgc/jiaocheng/html/flowers0.jpg" HEIGHT=157 WIDTH=252></TD><TD> <CENTER><IMG SRC="http://www.gggl.gov.cn/fwgc/jiaocheng/html/flowers0.jpg" HEIGHT=100 WIDTH=200></CENTER> </TD> </TR> </TABLE></CENTER> <HR WIDTH="100%"> 图形与文字的对齐排列：　　由IMG中的ALIGN属性来设置图文的对齐方式，有以下几种：<TABLE BORDER=1 CELLSPACING=0 CELLPADDING=5 WIDTH="100%" > <TR> <TD>ALIGN=top</TD><TD>〈IMG SRC="love.gif" ALIGN=top>美丽的心灵</TD><TD>　<IMG SRC="http://www.gggl.gov.cn/fwgc/jiaocheng/html/love.gif" HEIGHT=95 WIDTH=126 ALIGN=TOP>　美丽的心灵</TD> </TR><TR> <TD>ALIGN=middle</TD><TD>〈IMG SRC="love.gif" ALIGN=middle>美丽的心灵</TD><TD>　<IMG SRC="http://www.gggl.gov.cn/fwgc/jiaocheng/html/love.gif" HEIGHT=95 WIDTH=126 ALIGN=CENTER>　美丽的心灵</TD> </TR><TR> <TD>ALIGN=buttom</TD><TD>〈IMG SRC="love.gif" ALIGN=buttom>美丽的心灵</TD><TD>　<IMG SRC="http://www.gggl.gov.cn/fwgc/jiaocheng/html/love.gif" HEIGHT=95 WIDTH=126>　美丽的心灵</TD> </TR><TR> <TD>ALIGN=texttop</TD><TD>〈IMG SRC="love.gif" ALIGN=textop>美丽的心灵</TD><TD>　<IMG SRC="http://www.gggl.gov.cn/fwgc/jiaocheng/html/love.gif" HEIGHT=95 WIDTH=126 ALIGN=TEXTTOP>　美丽的心灵</TD> </TR><TR> <TD>ALIGN=baseline</TD><TD>〈IMG SRC="love.gif" ALIGN=baeline>美丽的心灵</TD><TD>　<IMG SRC="http://www.gggl.gov.cn/fwgc/jiaocheng/html/love.gif" HEIGHT=95 WIDTH=126>　美丽的心灵</TD> </TR><TR> <TD>ALIGN=left</TD><TD>〈IMG SRC="love.gif" ALIGN=left>美丽的心 灵，有着数不清的爱心，象天空里的星星，明 亮晶莹。</TD><TD><IMG SRC="http://www.gggl.gov.cn/fwgc/jiaocheng/html/love.gif" HEIGHT=95 WIDTH=126 ALIGN=LEFT>美丽的心灵， 有着数不清的 爱心，象天空 里的星星，明 亮晶莹。</TD> </TR><TR> <TD>ALIGN=right</TD><TD>〈IMG SRC="love.gif" ALIGN=right>美丽的心 灵，有着数不清的爱心，象天空里的星星，明 亮晶莹。</TD><TD><IMG SRC="http://www.gggl.gov.cn/fwgc/jiaocheng/html/love.gif" HEIGHT=95 WIDTH=126 ALIGN=RIGHT>美丽的心灵， 有着数不清的 爱心，象天空 里的星星，明 亮晶莹。</TD> </TR> </TABLE> <HR WIDTH="100%"> 图文之间的距离设置：　　在HTML文件里图形水平位置的配置，可由HSPACE属性来完成，其垂直位置的配置，由VSPACE来完成。<TABLE BORDER=1 CELLSPACING=0 CELLPADDING=5 > <TR> <TD><IMA　SRC="love.gif" ></TD><TD><IMG SRC="http://www.gggl.gov.cn/fwgc/jiaocheng/html/love.gif" HEIGHT=95 WIDTH=126>美丽的心灵</TD> </TR><TR> <TD><IMA　SRC="love.gif" HSPACE=30></TD><TD><IMG SRC="http://www.gggl.gov.cn/fwgc/jiaocheng/html/love.gif" HSPACE=30 HEIGHT=95 WIDTH=126>美丽的心灵</TD> </TR><TR> <TD><IMA　SRC="love.gif" VSPACE=30></TD><TD><IMG SRC="http://www.gggl.gov.cn/fwgc/jiaocheng/html/love.gif" VSPACE=30 HEIGHT=95 WIDTH=126>美丽的心灵</TD> </TR> </TABLE> <HR WIDTH="100%"> 图形按钮：　　图形按钮就是使用者通过在图形上单击，就能连接到某个地址上去。很简单，我们只要调用一下前面的知识就可以完成了。其基本格式如下：　　<A　HREF="资源地址"><IMG SRC="图形文件地址"></A>例：　　<A HREF="index.htm"><IMA SRC="html.gif"></A>显示结果为：<A HREF="http://www.tietu.com"><IMG SRC="http://www.moonyh.com/bbs/uploadFace/19_20041301838036828.gif" BORDER=0></A>　　图形上出现小手了，我们试一下吧！ <HR WIDTH="100%"></BODY> </HTML>
<HTML> <HEAD> <TITLE></TITLE> <META NAME="Author" CONTENT="JY"> <META NAME="GENERATOR" CONTENT="Mozilla/3.04Gold (Win95; I) "> </HEAD> <BODY> 播放音乐　　HTML除了可以插入图形之外，还可以播放音乐和视频等。用浏览器可以播放的音乐格式有：MIDI音乐、WAV音乐、AU格式。 <HR WIDTH="100%">点播音乐　　将音乐做成一个链接，只需用鼠标在上面单击，就可以听到动人的音乐了，这样做的方法很简单：　　　<A　HREF="音乐地址">乐曲名</A>例如：<IMG SRC="http://www.gggl.gov.cn/fwgc/jiaocheng/html/yball.gif" HEIGHT=15 WIDTH=22>播放一段MIDI音乐：　　　<A　HREF="midi.mid">MIDI音乐</A>　　　<IMG SRC="http://www.gggl.gov.cn/fwgc/jiaocheng/html/yball.gif" HEIGHT=15 WIDTH=22>播放一段AU格式音乐：　　　<A　HREF="you.au">同桌的你-AU音乐</A>　　　　 　　把我们喜欢的音乐收集起来，作成一个音乐库，随时都可以让自己和别人徜徉在音乐的海洋中！ <HR WIDTH="100%">自动载入音乐　　前面，我们是借助链接来实现网上播放音乐这一功能的，我们还可以让音乐自动载入，你可以让它出现控制面板或当背景音乐来使用。基本语法：　　　　<EMBED SRC="音乐文件地址">属性有：<TABLE BORDER=1 CELLSPACING=0 CELLPADDING=5 > <TR> <TD>SRC="FILENAME"</TD><TD>设定音乐文件的路径</TD> </TR><TR> <TD>AUTOSTART=TRUE/FALSE</TD><TD>是否要音乐文件传送完就自动播放，TRUE是要，FALSE是不要，默认为FALSE</TD> </TR><TR> <TD>LOOP=TRUE/FALSE</TD><TD>设定播放重复次数，LOOP=6表示重复6次，TRUE表示无限次播放，FALSE播放一次即停止。</TD> </TR><TR> <TD>STARTIME="分:秒"</TD><TD>设定乐曲的开始播放时间，如20秒后播放写为STARTIME=00:20</TD> </TR><TR> <TD>VOLUME=0-100</TD><TD>设定音量的大小。如果没设定的话，就用系统的音量。</TD> </TR><TR> <TD>WIDTH HEIGHT</TD><TD>设定控制面板的大小</TD> </TR><TR> <TD>HIDDEN=TRUE</TD><TD>隐藏控制面板</TD> </TR><TR> <TD>CONTROLS=CONSOLE/SMALLCONSOLE</TD><TD>设定控制面板的样子</TD> </TR> </TABLE>例： *************************************<html> <head> <title>播放音乐</title> </head> 　　<EMBED SRC="midi.mid" autostart=true hidden=true loop=true>　　作为背景音乐来播放。 </body> </html></head> 例： *************************************<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" loop=true width=145 height=60>　　出现控制面板了，你可以控制它的开与关，还可以调节音量的大小。 </body> <HR WIDTH="100%">IE中的背景音乐　　另外，还有一种插入背景音乐格式，不过只有在IE浏览器中才可以听到。　　<bgsound src="音乐文件地址" loop=#> 　　 #=循环数 例： 　　　　　　<bgsound src="sound.wav" loop=3> <HR WIDTH="100%"> </BODY> </HTML>

<HTML> <HEAD> <TITLE></TITLE> <META NAME="Author" CONTENT="JY"> <META NAME="GENERATOR" CONTENT="Mozilla/3.04Gold (Win95; I) "> </HEAD> <BODY> 播放视频　　用浏览器可以播放的格式有：MOV格式、AVI格式。 <HR WIDTH="100%">链接一个视频文件　　将视频文件做成一个链接的方法：　　　<A　HREF=" 视频地址">视频名称</A>例如：<IMG SRC="http://www.gggl.gov.cn/fwgc/jiaocheng/html/yball.gif" HEIGHT=15 WIDTH=22>播放一段视频：　　　<A　HREF="welcome.avi">WINDOWS95</A>　　 <HR WIDTH="100%">自动载入视频　　与音乐的播放一样，我们可以使用EMBED标签播放视频，　　　　<EMBED SRC="视频文件地址">属性有：<TABLE BORDER=1 CELLSPACING=0 CELLPADDING=5 > <TR> <TD>SRC="FILENAME"</TD><TD>设定文件的路径</TD> </TR><TR> <TD>AUTOSTART=TRUE/FALSE</TD><TD>是否要文件传送完就自动播放，TRUE是要，FALSE是不要，默认为FALSE</TD> </TR><TR> <TD>LOOP=TRUE/FALSE</TD><TD>设定播放重复次数，LOOP=6表示重复6次，TRUE表示无限次播放，FALSE播放一次即停止。</TD> </TR><TR> <TD>STARTIME="分:秒"</TD><TD>设定开始播放时间，如20秒后播放写为STARTIME=00:20</TD> </TR><TR> <TD>VOLUME=0-100</TD><TD>设定音量的大小。如果没设定的话，就用系统的音量。</TD> </TR><TR> <TD>WIDTH HEIGHT</TD><TD>设定控制面板的大小</TD> </TR> </TABLE>例： *************************************<html> <head> <title>播放视频</title> </head><body> 播放视频WINDOWS95 　　<EMBED SRC="welcome.avi" autostart=false loop=false width=350 height=250> </body> </html> <HR WIDTH="100%"></BODY> </HTML>
<HTML> <HEAD> <TITLE>HTML教程</TITLE> <META NAME="GENERATOR" CONTENT="Mozilla/3.04Gold (Win95; I) "> <META NAME="Author" CONTENT="JY"> </HEAD> <BODY TEXT="#000000" BGCOLOR="#FFFFFF" LINK="#0000EE" VLINK="#551A8B" ALINK="#FF0000"> <H2>表格的基本结构</H2><H3>　<table>...</table> 　定义表格 　<caption>...</caption>　定义标题 　<tr> 　定义表行 　<th> 　定义表头 　<td> 　定义表元(表格的具体数据) <HR WIDTH="100%"></H3>以下是一个简单的例子：<PRE><table border=1><tr><th>图片1</th><th>图片0</th><th>图片9</th><tr><td>1</td><td>0</td><td>9</td> </table></PRE> <table border=1><tr><th>图片</th><th>图片</th><th>图片</th><tr><td><img src="http://pic.ty.sx.cn/donghua/gif/marker/digits03.GIF"></td><td><img src="http://pic.ty.sx.cn/donghua/gif/marker/digits04.GIF"></td><td><img src="http://pic.ty.sx.cn/donghua/gif/marker/digits05.GIF"></td> </table> <HR WIDTH="100%"> </BODY> </HTML>
<HTML> <HEAD> <TITLE>HTML教程</TITLE> <META NAME="GENERATOR" CONTENT="Mozilla/3.04Gold (Win95; I) "> </HEAD> <BODY TEXT="#000000" BGCOLOR="#FFFFFF" LINK="#0000EE" VLINK="#551A8B" ALINK="#FF0000"> <H2>表格尺寸设置 <HR WIDTH="100%"></H2>表格的大小 　　一般情况下，表格的总长度和总宽度是根据各行和各列的总和自动调整的，如果我们要直接固定表格的大小，可以使用下列方式：<H3>　　　　　　　　　　　<table width=n1 height=n2></H3>　　width和height属性分别指定表格一个固定的宽度和长度，n1和n2可以用像素来表示，也可以用百分比（与整个屏幕相比的大小比例）来表示。　　下表是一个长为200像素，宽为100像素的表格。<table width="200" height="100"><TABLE BORDER=1 WIDTH="200" HEIGHT="100" > <TR> <TD>　　</TD><TD>　　</TD> </TR><TR> <TD>　　　</TD><TD>　　　</TD> </TR> </TABLE>　　下表是一个长为屏幕的20%，宽为屏幕的10%的表格。<table width=20% height=10%><TABLE BORDER=1 WIDTH="20%" HEIGHT="10%" > <TR> <TD>　　　</TD><TD>　　　</TD> </TR><TR> <TD>　　　</TD><TD>　　　</TD> </TR> </TABLE> <HR WIDTH="100%">边框尺寸设置　　边框是用border属性来体现的，它表示表格的边框边厚度和框线。将border设成不同的值，有不同的效果。 <HR WIDTH="100%"> 格间线宽度　　格与格之间的线为格间线，它的宽度可以使用<TABLE>中的CELLSPACING属性加以调节。格式是：　　　　　<TABLE　CELLSPACING=#>　　　#表示要取用的像素值 <HR WIDTH="100%">内容与格线之间的宽度　　我们还可以在<TABLE>中设置CELLPADDING属性，用来规定内容与格线之间的宽度。格式为：　　　　　　　　　　<TABLE　CELLPADDING=#>　　　#表示要取用的像素值 </BODY> </HTML>

<HTML> <HEAD> <TITLE>HTML教程</TITLE> <META NAME="GENERATOR" CONTENT="Mozilla/3.04Gold (Win95; I) "> </HEAD> <BODY TEXT="#000000" BGCOLOR="#FFFFFF" LINK="#0000EE" VLINK="#551A8B" ALINK="#FF0000"> <H2>表格内文字的对齐/布局</H2> <HR WIDTH="100%">　　表格中数据的排列方式有两种，分别是左右排列和上下排列。左右排列是以ALIGN属性来设置，而上下排列则由VALIGN属性来设置。其中左右排列的位置可分为三种：居左（left)、居右(right)和居中(center)；而上下排列基本上比较常用的有四种：上齐(top)、居中(middle)、下齐(bottom)和基线(baseline)。<tr align=#> <th align=#> 　　#=left, center, right <td align=#> <HR ALIGN=LEFT SIZE=1 WIDTH="40%"><tr valign=#> <th valign=#> 　　#=top，middle，bottom，baseline <td valign=#> <H2> <HR WIDTH="100%"></H2>左右排列<table border=1 width="200"> <tr> 　　<th>居左</th><th>居中</th><th>居右</th> <tr> 　　<td align=left>A</td> <td align=center>B</td> <td align=right>C</td> </table> 显示结果：<TABLE BORDER=1 WIDTH="200" > <TR> <TH>居左</TH><TH>居中</TH><TH>居右</TH> </TR><TR> <TD align=left>A</TD><TD align=center>B</TD><TD align=right>C</TD> </TR> </TABLE> <HR WIDTH="100%">上下排列<table border=1 width="250" heith="100"> <tr> 　　　　<th>上齐</th><th>居中</th> <th>下齐</th><th>基线</th> <tr> 　　　　<td valign=top>A</td> <td valign=middle>B</td> <td valign=bottom>C</td><td 　　　　valign=baseline>D</td> </table> 显示结果：<TABLE BORDER=1 WIDTH="250" HEIGHT="100" > <TR> <TD>　　　　</TD><TH>上齐</TH><TH>居中</TH><TH>下齐</TH><TH>基线</TH> </TR><TR> <TD>　　　　</TD><TD valign=top>A</TD><TD valign=middle>B</TD><TD valign=bottom>C</TD><TD 　　　　 valign=baseline>D</TD> </TR> </TABLE> <HR WIDTH="100%"> </BODY> </HTML>

<HTML> <HEAD> <TITLE>HTML 教程</TITLE> <META NAME="GENERATOR" CONTENT="Mozilla/3.04Gold (Win95; I) "> </HEAD> <BODY TEXT="#000000" BGCOLOR="#FFFFFF" LINK="#0000EE" VLINK="#551A8B" ALINK="#FF0000"><H1 ALIGN=RIGHT><A HREF="http://www.tietu.com"><IMG SRC="http://www.moonyh.com/bbs/uploadFace/19_20041301838036828.gif" BORDER=0></A></H1></DIV><H2>表格的颜色</H2>　　在表格中，既可以对整个表格填入底色，也可以对任何一行、一个表元使用背景色。　　表格的背景色彩　　　<table bgcolor=#> 　　行的背景色彩　　　　<tr bgcolor=#> 　　表元的背景色彩　　　<th bgcolor=#>或 <td bgcolor=#> 　　#=rrggbb 16进制 RGB数码, 或者是下列预定义色彩名称： 　　Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow, Aqua <HR WIDTH="100%">例：<html> <head> <title><title> </head><table border=2 bgcolor=aqua> <tr> <th bgcolor=ffaa00>日月轩</th> <th bgcolor=Red>蓝鸢</th> <th rowspan=2>倚修竹</th> <tr bgcolor=yellow> <td>日月轩</td><td>蓝鸢</td> </table> </body> </html> <table border=2 bgcolor=aqua> <tr> <th bgcolor=ffaa00><img src="http://pic.ty.sx.cn/donghua/gif/person/acror5.GIF"></th> <th bgcolor=Red><img src="http://pic.ty.sx.cn/donghua/gif/person/acror9.GIF"></th> <th rowspan=2><img src="http://pic.ty.sx.cn/donghua/gif/person/mermaid1.GIF"></th> <tr bgcolor=yellow> <td>日月轩</td><td>蓝鸢</td> </table> <HR WIDTH="100%"> </BODY> </HTML>

<HTML> <HEAD> <TITLE>HTML教程</TITLE> <META NAME="Author" CONTENT="JY"> <META NAME="GENERATOR" CONTENT="Mozilla/3.04Gold (Win95; I) "> </HEAD> <BODY><DIV ALIGN=right><A HREF="http://www.tietu.com"><IMG SRC="http://www.moonyh.com/bbs/uploadFace/19_20041301838036828.gif" BORDER=0 HEIGHT=120 WIDTH=120></A></DIV>文件之间的链接　　超文本中的链接是其最重要的特性之一，使用者可以从一个页面直接跳转到其他的页面、图象或者服务器。一个链接的基本格式如下：　　　　　　<A HREF="资源地址">链接文字</A>　　·标签<A>表示一个链接的开始，</A>表示链接的结束； 　　·属性“HREF”定义了这个链接所指的地方； 　　·通过点击“链接文字”可以到达指定的文件。　　<A HREF="<img align=absmiddle src=pic/url.gif border=0><a target=_blank href=http://www.tietu.com&quot>http://www.tietu.com&quot</a>;>中华贴图网</A> <HR WIDTH="100%">　　链接分为本地链接、URL链接和目录链接。在各种链接的各个要素中，资源地址是最重要的，一旦路径上出现差错，该资源就无法从用户端取得。<A NAME="n1"></A> URL链接 ************　　如果链接的文件在其它服务器上，我们就要弄清我们所指向的文件时采用的哪一种URL地址。URL意思是统一资源定位器，通过它可以以多种通讯协议于外界沟通来存取信息。　　URL链接的形式是：　　协议名：//主机.域名／路径／文件名 　　其中协议包括：　　file　　　　　　本地系统文件 　　http　　　　　　WWW服务器 　　ftp　　　　　　 ftp服务器 　　telnet　　　　　基于TELNET的协议 　　mailto　　　　　电子邮件 　　news　　　　　　Usenet新闻组 　　gopher　　　　　GOPHER服务器 　　wais　　　　　　WAIS服务器　　例如，我们这样来表达一个URL地址： 　　　　　　<img align=absmiddle src=pic/url.gif border=0><a target=_blank href=http://www.sohu.com>http://www.sohu.com</a> 　　　　　　<img align=absmiddle src=pic/url.gif border=0><a target=_blank href=ftp://ftp.sjstc.edu.cn>ftp://ftp.sjstc.edu.cn</a> 　写在HTML文件中，链接其他主机上的文件时，格式如下： 　　<A HREF="<img align=absmiddle src=pic/url.gif border=0><a target=_blank href=http://www.tietu.com&quot>http://www.tietu.com&quot</a>;></A> </BODY> </HTML>

以上内容均转载于中华贴图网。

[ Last edited by 无可奈何花落去 on 2004-4-22 at 15:34 ]

明月清风 发表于 2004-4-18 14:25:03

谢谢！！！学习中！！！

盗版情人 发表于 2004-4-18 14:38:08

不错，支持小花
------------------------------------------
占位。加一点分隔线----by花落

http://bbs.chinesejia.com/UploadFile/2004-8/20048241595352.gif

http://bbs.chinesejia.com/UploadFile/2004-8/200482415958653.gif

http://bbs.chinesejia.com/UploadFile/2004-8/2004824203434.gif

http://bbs.chinesejia.com/UploadFile/2004-8/20048242010791.gif

http://bbs.chinesejia.com/UploadFile/2004-8/20048242014136.gif

http://bbs.chinesejia.com/UploadFile/2004-8/20048242019424.gif

http://bbs.chinesejia.com/UploadFile/2004-8/20048242029753.gif

http://bbs.chinesejia.com/UploadFile/2004-8/20048242024670.gif

http://bbs.chinesejia.com/UploadFile/2004-8/20048242228932.gif

http://bbs.chinesejia.com/UploadFile/2004-8/20048242234409.gif

http://bbs.chinesejia.com/UploadFile/2004-8/20048242352378.gif

http://bbs.chinesejia.com/UploadFile/2004-8/20048242357362.gif

http://bbs.chinesejia.com/UploadFile/2004-8/2004824243787.gif

http://bbs.chinesejia.com/UploadFile/2004-8/2004824249938.gif

http://bbs.chinesejia.com/UploadFile/2004-8/20048242414517.gif

http://bbs.chinesejia.com/UploadFile/2004-8/20048242420181.gif

http://bbs.chinesejia.com/UploadFile/2004-8/20048242425433.gif

http://bbs.chinesejia.com/UploadFile/2004-8/20048242432358.gif

http://bbs.chinesejia.com/UploadFile/2004-8/200482421040639.gif

http://bbs.chinesejia.com/UploadFile/2004-8/200482421046471.gif

http://bbs.chinesejia.com/UploadFile/2004-8/20048242105147.gif

http://bbs.chinesejia.com/UploadFile/2004-8/20048242111129.gif

http://bbs.chinesejia.com/UploadFile/2004-8/200482421113724.gif

http://bbs.chinesejia.com/UploadFile/2004-8/200482421056667.gif

http://bbs.chinesejia.com/UploadFile/2004-8/20048242118960.gif

http://bbs.chinesejia.com/UploadFile/2004-8/200482421118835.gif

http://bbs.chinesejia.com/UploadFile/2004-8/2004824211246.gif

http://bbs.chinesejia.com/UploadFile/2004-8/200482421130660.gif

http://bbs.chinesejia.com/UploadFile/2004-8/200482421135931.gif

http://bbs.chinesejia.com/UploadFile/2004-8/200482421139859.gif

http://bbs.chinesejia.com/UploadFile/2004-8/200482421144616.gif

http://bbs.chinesejia.com/UploadFile/2004-8/200482421149345.gif

http://bbs.chinesejia.com/UploadFile/2004-8/200482421153293.gif

http://bbs.chinesejia.com/UploadFile/2004-8/200482421158740.gif

http://bbs.chinesejia.com/UploadFile/2004-8/20048242122701.gif

http://bbs.chinesejia.com/UploadFile/2004-8/20048242127972.gif

http://bbs.chinesejia.com/UploadFile/2004-8/200482421212475.gif

http://bbs.chinesejia.com/UploadFile/2004-8/200482421217958.gif

http://bbs.chinesejia.com/UploadFile/2004-8/200482421221878.gif

http://bbs.chinesejia.com/UploadFile/2004-8/200482421226428.gif

http://bbs.chinesejia.com/UploadFile/2004-8/200482421231886.gif

http://bbs.chinesejia.com/UploadFile/2004-8/200482421236976.gif

http://bbs.chinesejia.com/UploadFile/2004-8/200482421241952.gif

http://bbs.chinesejia.com/UploadFile/2004-8/200482421246976.gif

http://bbs.chinesejia.com/UploadFile/2004-8/200482421251745.gif

http://bbs.chinesejia.com/UploadFile/2004-8/200482421256561.gif

http://bbs.chinesejia.com/UploadFile/2004-8/20048242130460.gif

http://bbs.chinesejia.com/UploadFile/2004-8/20048242134334.gif

http://bbs.chinesejia.com/UploadFile/2004-8/200482421419720.gif

http://bbs.chinesejia.com/UploadFile/2004-8/200482421424769.gif

http://bbs.chinesejia.com/UploadFile/2004-8/200482519134644.gif

http://bbs.chinesejia.com/UploadFile/2004-8/200482519149794.gif

http://bbs.chinesejia.com/UploadFile/2004-8/20048251926270.gif

http://bbs.chinesejia.com/UploadFile/2004-8/200482519218405.gif

http://bbs.chinesejia.com/UploadFile/2004-8/200482519249523.gif

http://bbs.chinesejia.com/UploadFile/2004-8/2004825193236.gif

http://bbs.chinesejia.com/UploadFile/2004-8/20048251931582.gif

http://bbs.chinesejia.com/UploadFile/2004-8/200482519348540.gif

http://bbs.chinesejia.com/UploadFile/2004-8/200482519359261.gif

http://bbs.chinesejia.com/UploadFile/2004-8/200482519423403.gif

http://bbs.chinesejia.com/UploadFile/2004-8/200482519518721.gif

http://bbs.chinesejia.com/UploadFile/2004-8/200482519551259.gif

http://bbs.chinesejia.com/UploadFile/2004-8/20048251964619.gif

http://bbs.chinesejia.com/UploadFile/2004-8/200482519622347.gif

http://bbs.chinesejia.com/UploadFile/2004-8/200482519639571.gif

http://bbs.chinesejia.com/UploadFile/2004-8/20048251975944.gif

http://bbs.chinesejia.com/UploadFile/2004-8/200482519719433.gif

http://bbs.chinesejia.com/UploadFile/2004-8/200482519732292.jpg

http://bbs.chinesejia.com/UploadFile/2004-8/200482519744891.jpg

http://bbs.chinesejia.com/UploadFile/2004-8/200482519754949.jpg

[ Last edited by 无可奈何花落去 on 2004-10-17 at 15:55 ]

琥珀色 发表于 2004-4-18 14:57:03

zzyqpylove 发表于 2004-4-18 15:18:17

好哦~支持~严重支持~

tz0123 发表于 2004-4-18 16:53:48

页: [1] 2 3 4 5 6 7 8 9 10

新萤火虫论坛's Archiver

[贴图公式(教你编辑漂亮图片)]+[HTML中/高级教程在389楼处]

透明FLASH运用