ＨＴＭＬ代码

蓝蓝发表于 2007-10-15 13:16:19

大家在论坛看到的那些漂亮的贴图多是加了一些代码，这些代码就是ＨＴＭＬ代码，一般来说你是不需要了解这些ＨＴＭＬ代码的意义，但是，最简单的一些ＨＴＭＬ代码是需要理解的，对调试特殊效果有帮助，这里我提供一些基本的ＨＴＭＬ代码解释和使用方法。 
一，文字的布局 
1，文字的大小；颜色及字体 
 你需要的文字 
2，行的控制 
<H3>段(Paragraph) (可以看作是空行) </H3> 
<TT>例1：你好吗？很好。</TT> 
你好吗？ 
很好。 
<H3>换行 </H3> 
<TT>例2：你好吗？ 很好。</TT> 
你好吗？ 很好。 
3，文字的对齐(Alignment) 
 ... ...    #=left, center, right 
<center> ... ... </center> 
4，文字的分区(Division)显示 
<H3><div align=#> ... ... </div>  #=left, center, right</H3> 
注解： 
表示居中，<p align=left>表示居左，表示居右。 
<div align=center>表示居中，<div align=left>表示居左，<div align=right>表示居右。 
 face=字体　常用字体为：宋体.黑体.楷体.仿宋.华文行楷.新宋体.华文新魏等 size=字体大小，这里的最大值为7　取值越大文字就越大 另一种贴法： 插入文字 font:40pt　数值越大文字就越大。 color=颜色代码。

蓝蓝发表于 2007-10-15 13:17:46

二，如何贴图
1，单张图片　　 <IMG src="http://www.eonet.ne.jp/~qingshuix/mobile/yj.jpg">
　　代码如下： <img src=http://www.eonet.ne.jp/~qingshuix/mobile/yj.jpg>
注明：多张图片连贴时，注意使用换行代码或 
单张图片尺寸压缩用语一张普通图片如下图： <IMG src="http://www.eonet.ne.jp/~qingshuix/mobile/yj.jpg"> 
尺寸压缩后如下图 
<TABLE border=3>
<TBODY>
<TR>
<TD><IMG src="http://www.eonet.ne.jp/~qingshuix/mobile/yj.jpg"></TD></TR></TBODY></TABLE>
代码如下： <TABLE border=3> <TBODY> <TR> <TD> <IMG src="http://www.eonet.ne.jp/~qingshuix/mobile/yj.jpg" width=250 height=250> </TD></TR></TBODY></TABLE> border为图片边框的尺寸，width和height则为图片的宽高， 这个尺寸可以随意调节，以图片美观，则大小适宜。 再一个就是--没有边框的： <IMG src="http://www.eonet.ne.jp/~qingshuix/mobile/yj.jpg"> 代码如下： <img src=http://www.eonet.ne.jp/~qingshuix/mobile/yj.jpg width=250>

蓝蓝发表于 2007-10-15 13:18:41

2，背景图片代码：
<TABLE cellSpacing=10 cellPadding=10 width=550 align=center background=http://www.jqmbbs.com/jqm/UploadFile/2005-9/20059150273870819.gif border=5> <TBODY> <TR> <TD> .... 在这里输入你需要的文字或图片 ... </TR></TD></TBODY></TABLE>
效果如下：
<TABLE cellSpacing=10 cellPadding=10 width=550 align=center background=http://www.jqmbbs.com/jqm/UploadFile/2005-9/20059150273870819.gif border=5>
<TBODY>
<TR>
<TD> </TD></TR></TBODY></TABLE> 
给图片外框增添颜色
<TABLE borderColor=#ff7f50 border=3>
<TBODY>
<TR>
<TD><IMG src="http://www.eonet.ne.jp/~qingshuix/mobile/yj.jpg"></TD></TR></TBODY></TABLE>
代码如下： <TABLE borderColor=#ff7f50 border=3> <TBODY> <TR> <TD> <IMG src="http://www.eonet.ne.jp/~qingshuix/mobile/yj.jpg"> </TD></TR></TBODY></TABLE> 比上面的尺寸压缩里多了个bordercolor="#FF7F50"， 
大家看到了么，这个就是边框颜色。 
如果不要边框怎办，把border=0就行了。 
文字在图片里居中
<TABLE borderColor=#ff1493 cellSpacing=10 cellPadding=0 width=550 background=http://www.jqmbbs.com/jqm/UploadFile/2005-9/20059150273870819.gif border=5>
<TBODY>
<TR>
<TD> 
<CENTER>秋风秋雨迎秋致， 秋意秋韵宜秋君， 秋花秋蟹捎秋讯， 秋情秋果喜煞人。 </CENTER></TD></TR></TBODY></TABLE>
代码如下： <TABLE borderColor=#ff1493 cellSpacing=10 cellPadding=0 width=550 align=center background=http://www.jqmbbs.com/jqm/UploadFile/2005-9/20059150273870819.gif border=5> <TBODY> <TR> <TD> <CENTER> 秋风秋雨迎秋致， 秋意秋韵宜秋君， 秋花秋蟹捎秋讯， 秋情秋果喜煞人。 </CENTER></TD></TR></TBODY></TABLE> 
文字在图片里居中滚动
<TABLE cellSpacing=5 cellPadding=5 width=500 background=http://www.jqmbbs.com/jqm/UploadFile/2005-9/20059150273870819.gif border=5>
<TBODY>
<TR>
<TD> 
<MARQUEE scrollAmount=2 direction=up height=230>
<CENTER> 秋风秋雨迎秋致， 秋意秋韵宜秋君， 秋花秋蟹捎秋讯， 秋情秋果喜煞人。 </CENTER></MARQUEE></TD></TR></TBODY></TABLE>
<DIV align=left>
代码如下： <CENTER> <TABLE cellSpacing=5 cellPadding=5 width=500 align=center background="http://www.jqmbbs.com/jqm/UploadFile/2005-9/20059150273870819.gif" border=5> <TBODY> <TR> <TD> <MARQUEE scrollAmount=2 direction=up height=230> <CENTER> 秋风秋雨迎秋致， 秋意秋韵宜秋君， 秋花秋蟹捎秋讯， 秋情秋果喜煞人。 </MARQUEE> </TD></TR></TBODY></TABLE></CENTER>
<marquee >文字内容</marquee>为滚动用语
direction=up 为上滚； scrollamount=2为滚动速度
height=230为滚动范围，也可不要。</DIV>

蓝蓝发表于 2007-10-15 13:20:29

三，透明flash的运用
<TABLE height=600 cellSpacing=0 cellPadding=0 width=480 background=http://www.jqmbbs.com/jqm/UploadFile/2005-9/20059150464068591.jpg border=3>
<TBODY>
<TR>
<TD><EMBED pluginspage=http://www.macromedia.com/go/getflashplayer src=http://www.geocities.jp/yukie1125n/yujietmswf/19.swf width=480 height=590 type=application/x-shockwave-flash wmode="transparent" quality="high"></TD></TR></TBODY></TABLE>
代码如下： <TABLE height=600 cellSpacing=0 cellPadding=0 width=480 align=center background=="背景图片网址" border=3 > <TBODY> <TR> <TD> <EMBED pluginspage=http://www.macromedia.com/go/getflashplayer src=http://www.geocities.jp/yukie1125n/yujietmswf/19.swf width=480 height=590 type=application/x-shockwave-flash wmode="transparent" quality="high"></EMBED></TD></TR></TBODY></TABLE> 
 
给flash动画增添背景 
<TABLE cellSpacing=15 cellPadding=5 width=550 background=http://www.jqmbbs.com/jqm/UploadFile/2005-9/20059150273870819.gif border=6>
<TBODY>
<TR>
<TD>
<CENTER><IMG src="http://www.eonet.ne.jp/~qingshuix/mobile/mg0002.gif"><IMG src="http://www.eonet.ne.jp/~qingshuix/mobile/mg0002.gif"> 
<CENTER>真诚的问候，为你祝福 </CENTER>
<CENTER>我会永远伴随你 <EMBED src=http://www.long21.net/card/main/0404/0404252f.swf width=450 height=300 type=application/x-shockwave-flash quality="high"> 唯美音画 </CENTER></CENTER></TD></TR></TBODY></TABLE> 代码如下： <CENTER> <TABLE cellSpacing=15 cellPadding=5 width=550 align=center background="背景图片网址" border=6 > <TBODY> <TR> <TD> <CENTER><IMG src="UploadFile/2004-11/20041115143819254.gif"><IMG src="UploadFile/2004-11/20041115143819254.gif"> </CENTER> <CENTER>真诚的问候，为你祝福 </CENTER> <CENTER>我会永远伴随你 <EMBED src=http://www.long21.net/card/main/0404/0404252f.swf width=450 height=300 type=application/x-shockwave-flash quality="high"> 唯美音画 </CENTER> </TD> </TR> </TBODY> </TABLE> </CENTER>

蓝蓝发表于 2007-10-15 13:21:32

<PRE>1,透明FLASH代码: <EMBED pluginspage=http://www.macromedia.com/go/getflashplayer src=http://www.geocities.jp/yukie1125n/yujietmswf/19.swf width=480 height=590 type=application/x-shockwave-flash quality="high" wmode="transparent"></EMBED> 2,一般FLASH代码: <EMBED src=http://www.long21.net/card/main/0404/0404252f.swf width=450 height=300 type=application/x-shockwave-flash quality="high"> 透明flash的定位 把FLASH定位，这样图片就不用作背景，直接用图片的格式，图片的大小也可以随心所欲，效果要比前面一种好。 7.0版本的论坛使用这种效果时，在发帖前先要将发帖栏下面的《自动修正》取消才能正常显示。 代码如下： <TABLE align=center background=http://wanruo.jahee.com/jpsc/bj/a1.gif border=4 cellPadding=0 cellSpacing=0 height=560 width=450 table> <TBODY><TR><TD> <IMG border=0 height=450 src="<A href="http://images.21cn.com/albums/photos/forum_picture/00/03/1061049768_8152.jpg" target=_blank>http://images.21cn.com/albums/photos/forum_picture/00/03/1061049768_8152.jpg</A>" width=350> <EMBED style="LEFT: 280px; WIDTH: 400px; POSITION: absolute; TOP: 100px; HEIGHT: 500px" align=right src=http://www.geocities.jp/yukie1125n/yujietmswf/19.swf width=400 height=300 type=application/octet-stream wmode="transparent" quality="high" ;;></EMBED> <EMBED style="LEFT: 350px; WIDTH: 350px; POSITION: absolute; TOP: 200px; HEIGHT: 300px" align=right src=http://www.geocities.jp/yukie1125n/yujietmswf/20.swf width=400 height=300 type=application/octet-stream wmode="transparent" quality="high" ;;></EMBED> </TD></TR></TBODY></TABLE> 说明： TOP: 100px 是指FLASH与帖子上边之间的距离（也就是FLASH与IE的距离）。 　　　LEFT: 280px 是指FLASH与帖子左边的距离 　　　WIDTH:400px　HEIGHT: 300px　是指FLASH定位的范围宽度和高度；后面的width=400 height=3000 是FLASH的宽和高了。 补充：每个数据适应修改可使透明flash重叠。 下面是重叠的例子，可根据自己需要修改数据。 <EMBED style="LEFT: 350px; WIDTH: 300px; POSITION: absolute; TOP: 480px; HEIGHT: 300px" align=right src=http://www.geocities.jp/yukie1125n/yujietmswf/19.swf width=400 height=300 type=application/octet-stream wmode="transparent" quality="high" ;;></EMBED> <EMBED style="LEFT: 350px; WIDTH: 300px; POSITION: absolute; TOP: 480px; HEIGHT: 300px" align=right src=http://www.geocities.jp/yukie1125n/yujietmswf/20.swf width=300 height=200 type=application/octet-stream wmode="transparent" quality="high" ;;></EMBED></PRE>

蓝蓝发表于 2007-10-15 13:25:01

<PRE>四，多层背景的应用 代码如下： <TABLE align=center background="背景图片网址" border=10 cellSpacing=2 borderColor=#841A00 width=500> <TBODY> <TR> <TD> <TABLE align=center background="背景图片网址" border=10 cellSpacing=2 borderColor=#841A00 width=500> <TBODY> <TR> <TD> <TABLE align=center background="背景图片网址" border=10 cellSpacing=2 borderColor=#841A00 width=500> <TBODY> <TR> <TD>以此类推 帖子的文章加图片 </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> 注意： 前边用了多少<table......><tr><td>后面就要有多少</td></tr></table>收尾。 常用的参数设定及注解： <table width="400" border="10" cellspacing="2" cellpadding="2" align="CENTER" valign="TOP" background="图片网址" bgcolor="#0000FF" bordercolor="#CF0000" bordercolorlight="#00FF00" bordercolordark="#00FFFF"> width="400" 表格宽度，接受绝对值（如 500）及相对值（如 80%）。 border="10" 表格边框的厚度。 cellspacing="2"表格格线的厚度 cellPadding=5　表格格线内厚度 align="CENTER" 表格的摆放位置（水平），可选值为：左： left,　右： right,　居中： center valign="TOP". 表格内内容的对齐方式（垂直），可选值为： top, middle, bottom。　　 background="背景图片网址" 表格的背景图片，与 bgcolor 不要同用。 bgcolor="#0000FF" 表格的底色，与 background 不要同用 bordercolor="#CF0000"表格边框颜色 bordercolorlight="#00FF00"表格边框向光部分的颜色 bordercolordark="#00FFFF" 表格边框背光部分的颜色，使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。 </PRE>

蓝蓝发表于 2007-10-15 13:27:28

五，如何贴背景音乐 
如何显示（隐藏）播放器效果 
隐藏播放器用语： 
wma；mp3；midi等多可以使用 
<embed src="音乐地址"HIDDEN=TRUE AUTOSTAT=TRUE LOOP=TRUE> 
<bgsound src="音乐地址" Loop=-1> 
<HR SIZE=6>
 
显示播放器用语（wma；mp3；midi）等都可以使用 
<EMBED src=http://61.128.101.130:4080/song/k2/0318/4.wma width=350 height=45 type="audio/x-pn-realaudio- plugin" loop="true" autostart="true" controls="ControlPanel,StatusBar"> 
  
<HR SIZE=5>
 （rm,wav,swf,mp3等格式） 
<embed src="音乐地址" autostart="true" width="330" height="83"> 
  
说明： AutoStart=true　表示是否要音乐文件传送完就自动播放，TRUE是要，FALSE是不要，默认为true Loop=true　表示设定播放重复次数，LOOP=3表示重复3次，true表示无限次播放，FALSE播放一次即停止。width=宽度 height=高度　可以设定控制播放器面板的大小，如果都设置为0就可以把播放器隐藏了。

mandy823 发表于 2007-11-15 17:52:49

我现在在学校也是学html 编程..基本的我都会了:victory:

陈晓晨 发表于 2007-11-17 00:40:27

ceshi

页: [1]

SINOFACE|海华网's Archiver

ＨＴＭＬ代码