ＨＴＭＬ代码

蓝蓝

大家在论坛看到的那些漂亮的贴图多是加了一些代码，这些代码就是ＨＴＭＬ代码，一般来说你是不需要了解这些ＨＴＭＬ代码的意义，但是，最简单的一些ＨＴＭＬ代码是需要理解的，对调试特殊效果有帮助，这里我提供一些基本的ＨＴＭＬ代码解释和使用方法。

一，文字的布局

1， 文字的大小；颜色及字体

, Z- C5 ~. P" r5 t' A# C% p

<font size=4 color=#ff1493 face=新宋体> 你需要的文字 </font>

) P% J8 o& K) o1 l1 ]( `. \8 u `. p

2， 行的控制

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

8 |% K7 m; k$ E. E

例1： 你好吗？<p>很好。

你好吗？

' L' F8 E& ~& x" u1 c9 p

很好。

) r5 E$ y$ n g5 w& L3 b9 l8 n3 \

换行 <br>

3 l. b. J9 B* `

例2： 你好吗？<br>很好。

你好吗？
很好。

) \' U# h/ R0 K/ W2 K

3，文字的对齐(Alignment)

* L6 |& n2 M2 R

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

& b" ]4 `9 h# u3 e4 S

<center> ... ... </center>

* Y, ^* ~, ^$ T$ \

4，文字的分区(Division)显示

<div align=#> ... ... </div>  #=left, center, right

" V P5 `2 B+ U& _3 n7 Q

注解：

! x# M; }2 B, g! c% C3 F

<p align=center>表示居中，<p align=left>表示居左，<p align=right>表示居右。

& B5 m* B6 V' e# M' W

<div align=center>表示居中，<div align=left>表示居左，<div align=right>表示居右。

face=字体　常用字体为：宋体.黑体.楷体.仿宋.华文行楷.新宋体.华文新魏等

size=字体大小，这里的最大值为7　取值越大文字就越大

另一种贴法：

<font style=font:40pt face=新宋体 color=#ff0000>插入文字</font>

font:40pt　数值越大文字就越大。

color=颜色代码。

蓝蓝

二，如何贴图

1， 单张图片　　

- k9 x G2 K" ^. X, |

　　代码如下：
<img src=http://www.eonet.ne.jp/~qingshuix/mobile/yj.jpg>

注明：多张图片连贴时，注意使用换行代码<p>或<br>

7 ?/ c5 F* L% w. S( Y5 J" k

单张图片尺寸压缩用语

一张普通图片如下图：

尺寸压缩后如下图

Q. |, S4 d" z9 j5 X" t" M( C) p3 x0 r, z6 |$ l# z7 c0 r% u" o4 ~; h! g 8 a$ Y6 ]9 W! [8 |* \* d

代码如下：
<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 width=250>

蓝蓝

2， 背景图片代码：

4 E2 ~! y* n, Y/ b

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

效果如下：

6 V# f2 J3 [; [+ z4 |# t

给图片外框增添颜色

" C, m. Y# r l$ I0 g) H2 o. D4 m6 c2 y + e! [3 g l; y- k2 J

代码如下：

<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"，
' p1 k# I5 e3 m0 U) j9 W) T

大家看到了么，这个就是边框颜色。

6 z- z# J {- r6 Q: n0 {/ Z M

如果不要边框怎办，把border=0就行了。

4 u ]! t$ e4 U9 p" L! Z9 J

文字在图片里居中

8 {! E/ F [. n7 ~秋风秋雨迎秋致， 秋意秋韵宜秋君， 秋花秋蟹捎秋讯， 秋情秋果喜煞人。

代码如下：
<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>
<BR><BR><BR><BR><BR><BR><BR><BR><BR>
<CENTER><FONT size=5 color=#d3d3d3>
秋风秋雨迎秋致，<BR><BR>秋意秋韵宜秋君，<BR><BR>
秋花秋蟹捎秋讯，<BR><BR>秋情秋果喜煞人。<BR><BR> <BR><BR><BR><BR></FONT> </CENTER></TD></TR></TBODY></TABLE>

文字在图片里居中滚动

+ f" D% n# i9 C2 n+ ]5 o! F1 @4 y% r) N9 d, H# V+ ^9 o# O8 w) l, Q. N

/ P) }2 L: V8 b; m) L k 9 l0 B7 t. P, \7 Z2 w' J 秋风秋雨迎秋致， 秋意秋韵宜秋君， 秋花秋蟹捎秋讯， 秋情秋果喜煞人。

- N$ m, ^. I2 |+ N* O1 K) [/ x7 `& R

代码如下：
<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>
<BR><BR><BR><BR>
<MARQUEE scrollAmount=2 direction=up height=230>
<CENTER><FONT size=5 color=red><BR>
秋风秋雨迎秋致，<BR>秋意秋韵宜秋君，<BR>
秋花秋蟹捎秋讯， <BR>秋情秋果喜煞人。<BR></FONT></MARQUEE> </TD></TR></TBODY></TABLE></CENTER>

<marquee >文字内容</marquee>为滚动用语

2 a- o M+ z) {% F

direction=up 为上滚； scrollamount=2为滚动速度

3 f; K# i7 {% \& k' \ S9 p

height=230为滚动范围，也可不要。

蓝蓝

三，透明flash的运用

6 A4 N4 _+ T2 ^, @/ A

代码如下：
<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>

/ L' Z/ s/ P/ T- i6 N0 Z5 w

- M& O# b: \7 J8 F0 W

给flash动画增添背景

2 S1 A; B' [$ F2 l _. V3 ?% z3 A3 P' F; A) F1 ]7 U

6 b7 W' R/ n& R$ b 6 f; N, B$ D' D6 e z" {6 }) V2 L7 s真诚的问候，为你祝福 ( |& Z" c/ u7 M; b1 a J6 \/ `我会永远伴随你 唯美音画

代码如下：
<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"><BR><BR><BR></CENTER>
<CENTER><FONT color=#d3d3d3 size=6><B>真诚的问候，为你祝福</B></FONT><BR><BR><BR></CENTER>
<CENTER><FONT color=#d3d3d3 size=4><B>我会永远伴随你
<EMBED src=http://www.long21.net/card/main/0404/0404252f.swf width=450 height=300 type=application/x-shockwave-flash quality="high">
<FONT color=#d3d3d3 size=4><B>唯美音画</B> </CENTER></FONT></B></FONT>
</TD>
</TR>
</TBODY>
</TABLE>
</CENTER>

蓝蓝

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>
<P align=center><IMG border=0 height=450 src="http://images.21cn.com/albums/photos/forum_picture/00/03/1061049768_8152.jpg" width=350></P></FONT>
<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>

蓝蓝

四，多层背景的应用

代码如下：
<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 将会失效。

蓝蓝

五，如何贴背景音乐

/ Y/ C& U2 s9 H% k! S; x

如何显示（隐藏）播放器效果

9 e0 Y% D( p( C

隐藏播放器用语：

wma；mp3；midi等多可以使用

<embed src="音乐地址"HIDDEN=TRUE AUTOSTAT=TRUE LOOP=TRUE>

<bgsound src="音乐地址" Loop=-1>

---

; R* n1 ]( s- S, h6 Y3 O! R; D

) |8 L! R% Q- s

显示播放器用语（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-<br>plugin" loop="true" autostart="true" controls="ControlPanel,StatusBar">

 

---

（rm,wav,swf,mp3等格式）

' M6 d* w* M5 @ D+ [ ]" w9 K' b

<embed src="音乐地址" autostart="true" width="330" height="83">

H& f6 Q( t6 l1 _3 O7 ^

 

1 V4 N' N) `/ T7 c5 g

说明：
AutoStart=true　表示是否要音乐文件传送完就自动播放，TRUE是要，FALSE是不要，默认为true

Loop=true　表示设定播放重复次数，LOOP=3表示重复3次，true表示无限次播放，FALSE播放一次即停止。width=宽度 height=高度　可以设定控制播放器面板的大小，如果都设置为0就可以把播放器隐藏了。

mandy823

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

陈晓晨

ceshi