html教程

dxgf 2010-09-19

展開全文

大家在論壇看到的那些漂亮的貼圖多是加了一些代碼，這些代碼
就是ＨＴＭＬ代碼，一般來說你是不需要了解這些ＨＴＭＬ代碼的意義，
但是，最簡單的一些ＨＴＭＬ代碼是需要理解的，對調(diào)試特殊效果有幫
助，這里我提供一些基本的ＨＴＭＬ代碼解釋和使用方法，請參考。
實話實說本人也是探索的時間不長，難免有不足之處，還請大家
補充完善。謝謝??！

一，文字的布局

1，文字的大小；顏色及字體
<font size=4 color=#ff1493 face=新宋體> 你需要的文字</font>

2，行的控制

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

例1：你好嗎？<p>很好。</p>
你好嗎？

很好。

換行 <br>

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

3，文字的對齊(Alignment)

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

4，文字的分區(qū)(Division)顯示

<div align=#> ... ... </div> #=left, center, right
注解：
<P align=center>表示居中，<P align=left>表示居左，<P align=right>表示居右。
<div align=center>表示居中，<div align=left>表示居左，<div align=right>表示居右。
face=字體　常用字體為：宋體.黑體.楷體.仿宋.華文行楷.新宋體.華文新魏等
size=字體大小，這里的最大值為7　取值越大文字就越大。

另一種貼法：

<font style=font:40pt face=新宋體 color=#ff0000>插入文字</font>
font:40pt　數(shù)值越大文字就越大 color=顏色代碼。

二，如何貼圖

1，單張圖片

代碼如下：
<src="你需要的圖片地址">
注明：多張圖片連貼時，注意使用換行代碼<p>或<br>

單張圖片尺寸壓縮用語

一張普通圖片如下圖：

尺寸壓縮后如下圖

代碼如下：
<TABLE border=3>
<TBODY>
<TR>
<TD>
<IMG src="你需要的圖片地址" width=300 height=300>
</TD>
</TR>
</TBODY>
</TABLE>
border 為圖片邊框的尺寸，width 和 height 則為圖片的寬高，
這個尺寸可以隨意調(diào)節(jié)，以圖片美觀，則大小適宜。

再一個就是 -- 沒有邊框的：

代碼如下：
<img src="你需要的圖片地址" width=250>

2，背景圖片代碼：
<TABLE cellSpacing=10 cellPadding=10 width=550 align=center background=bj001.gif border=5>
<TBODY>
<TR>
<TD>
.... 在這里輸入你需要的文字或圖片 ...
</TR>
</TD>
</TBODY>
</TABLE>
效果如下：

.... 在這里輸入你需要的文字或圖片 ...

給圖片外框增添顏色

代碼如下：
<TABLE borderColor=#ff7f50 border=3>
<TBODY>
<TR>
<TD>
<IMG src="yj.jpg">
</TD>
</TR>
</TBODY>
</TABLE>
比上面的尺寸壓縮里多了個 bordercolor="#FF7F50"，
大家看到了嗎？這個就是邊框顏色。
如果不要邊框怎么辦，把　border=0　就行了。

文字在背景圖片里居中

秋風(fēng)秋雨迎秋致，

秋意秋韻宜秋君，

秋花秋蟹捎秋訊，

秋情秋果喜煞人。

代碼如下：
<TABLE borderColor=#ff1493 cellSpacing=10 cellPadding=0 width=550 align=center background=bj001.gif border=5>
<TBODY>
<TR>
<TD valign="middle" align="center">
<FONT size=5 color=#ffffff>
秋風(fēng)秋雨迎秋致，<BR>秋意秋韻宜秋君，<BR>
秋花秋蟹捎秋訊，<BR>秋情秋果喜煞人。<BR></FONT> </TD></TR></TBODY></TABLE>
說明：　　這里的　 valign="middle"　表示垂直居中　；　 align="center"表示水平居中

文字在背景圖片里居中滾動

秋風(fēng)秋雨迎秋致，

秋意秋韻宜秋君，

秋花秋蟹捎秋訊，

秋情秋果喜煞人。

代碼如下：
<TABLE cellSpacing=5 cellPadding=5 width=500 align=center background="bj002.gif" border=5>
<TBODY>
<TR>
<TD>
<MARQUEE scrollAmount=2 direction=up height=230>
<CENTER><FONT size=5 color=red><BR>
秋風(fēng)秋雨迎秋致，<BR>秋意秋韻宜秋君，<BR>
秋花秋蟹捎秋訊， <BR>秋情秋果喜煞人。<BR></FONT></MARQUEE>
</TD>
</TR>
</TBODY>
</TABLE>
說明：　<marquee >文字內(nèi)容</marquee>為滾動用語； direction=up 為上滾；
scrollamount=2為滾動速度； height=230為滾動范圍，也可不要。

圖片在背景圖片里居中滾動

代碼如下：
<TABLE borderColor="#ff7f50" border="3" width="550" align="center" background="http://image15.360doc.com/DownloadImg/2010/09/1921/5409562_3.gif">
<TBODY>
<TR>
<TD align="center"><MARQUEE scrollamount="2" direction="up" height=430><CENTER><IMG src="http://image15.360doc.com/DownloadImg/2010/09/1921/5409562_1.jpg"><BR><IMG src="http://image15.360doc.com/DownloadImg/2010/09/1921/5409562_1.jpg"></CENTER></MARQUEE></TD>
</TR>
</TBODY>
</TABLE>

三，透明flash的運用

代碼如下：
<TABLE height="600" cellspacing="0" cellpadding="0" width="480" background="yuri.jpg" border="3" align="center">
<TBODY>
<TR>
<TD><EMBED pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://www./yjhpjp/yujietmswf/19.swf" width="480" height="590" type="application/x-shockwave-flash" quality="high" wmode="transparent"></TD>
</TR>
</TBODY>
</TABLE>

給flash動畫增添背景

真誠的問候，為你祝福

我會永遠伴隨你

編輯制作：玉　潔

代碼如下：
<TABLE cellspacing="15" cellpadding="5" width="550" background="http://image15.360doc.com/DownloadImg/2010/09/1921/5409562_3.gif" border="6" align="center">
<TBODY>
<TR>
<TD align="center"><IMG src="mg0002.gif"><IMG src="mg0002.gif"><IMG src="mg0002.gif"><IMG src="mg0002.gif"><BR>
<BR><FONT color="#ffffff" size="5"><B>真誠的問候，為你祝福</B></FONT><BR>
<BR><FONT color="#d3d3d3" size="5"><B>我會永遠伴隨你</B></FONT><BR>
<BR>
<EMBED src="http://www./card/main/0404/0404252f.swf" width="450" height="320" type="application/x-shockwave-flash" quality="high"><BR>
<BR>
<FONT color="#d3d3d3">編輯制作：玉　潔</FONT><BR>
<BR>
</TD>
</TR>
</TBODY>
</TABLE>

注解：

透明flash的定位

　　　把FLASH定位，這樣圖片就不用作背景，直接用圖片的格式，圖片的大小也可以隨心所欲，效果要比前面一種好。
　　　7.0版本的論壇使用這種效果時，在發(fā)帖前先要將發(fā)帖欄下面的《自動修正》取消才能正常顯示。

四，多層背景的應(yīng)用

代碼如下：
<TABLE align=center background="背景圖片網(wǎng)址" border=10 cellSpacing=2 borderColor=#841A00 width=500>
<TBODY>
<TR>
<TD>
<TABLE align=center background="背景圖片網(wǎng)址" border=10 cellSpacing=2 borderColor=#841A00 width=500>
<TBODY>
<TR>
<TD>
<TABLE align=center background="背景圖片網(wǎng)址" 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>收尾。
常用的參數(shù)設(shè)定及注解：
<table width="400" border="10" cellspacing="2" cellpadding="2" align="CENTER" valign="TOP" background="圖片網(wǎng)址" bgcolor="#0000FF" bordercolor="#CF0000" bordercolorlight="#00FF00" bordercolordark="#00FFFF">

width="400" 表格寬度，接受絕對值（如 500）及相對值（如 80%）。
border="10"   表格邊框的厚度。
cellspacing="2"  表格格線的厚度
cellPadding=5　表格格線內(nèi)厚度
align="CENTER"
表格的擺放位置（水平），可選值為：左： left,　右： right,　居中： center
valign="TOP".
表格內(nèi)內(nèi)容的對齊方式（垂直），可選值為： top, middle, bottom。　　
background="背景圖片網(wǎng)址"
表格的背景圖片，與 bgcolor 不要同用。
bgcolor="#0000FF"   表格的底色，與 background 不要同用
bordercolor="#CF0000"  表格邊框顏色
bordercolorlight="#00FF00"  表格邊框向光部分的顏色
bordercolordark="#00FFFF"
表格邊框背光部分的顏色，使用 bordercolorlight 或 bordercolordark 時
bordercolor 將會失效。

五，如何貼背景音樂

如何顯示（隱藏）播放器效果
隱藏播放器用語： wma； mp3； midi 等都可以使用
<1 , > <embed src="音樂地址"HIDDEN=TRUE AUTOSTAT=TRUE LOOP=TRUE>
<2 , > <bgsound src="音樂地址" Loop=-1>

顯示播放器用語： wma； mp3； midi 等都可以使用
<EMBED src="音樂地址" width=350 height=45 type="audio/x-pn-realaudio-<br>plugin" loop="true" autostart="true" controls="ControlPanel,StatusBar">
顯示效果1:

（rm,wav,swf,mp3等格式）
<embed src="音樂地址" autostart="FALSE" width="330" height="200">
顯示效果2:

說明：
autostart="true"　表示是否要音樂文件傳送完就自動播放，
TRUE是要，F(xiàn)ALSE是不要，默認為true
Loop=true　表示設(shè)定播放重復(fù)次數(shù)， LOOP=3 表示重復(fù)3次，
true 表示無限次播放，F(xiàn)ALSE 播放一次即停止。
width=寬度 height=高度　可以設(shè)定控制播放器面板的大小，
如果都設(shè)置為0就可以把播放器隱藏了。