如何使用html代碼美化你的個人空間，新手慎入

1.要先點選添加我的日誌，將以下代碼剪下貼在你的個人空間。
2.左下角【顯示原代碼】打勾，然後貼上既可。



學前育成：

本來這些不該是我講的，因為這些算是很基礎的吧，可能還是有人不知道，就重複一次吧

一.關於剪切，複製，和粘貼

新手大多是喜歡用右鍵，但是不是什麼時候都能用右鍵的，請熟練操作快捷鍵——

複製：ctrl+c
剪切：ctrl+x
粘貼：ctrl+v
全選：ctrl+a
撤消：ctrl+z

二.關於換行，高級模式下換行有兩種

1.直接敲回車鍵，可以達到換行的效果，但實際上是分段！下面的一行字會和上面的一行有距離的
  
2.shift+會車，這個才是真正的換行，兩行緊密排在一起！

三.有關html代碼，html代碼由標籤構成。常見的有段落，文字，圖片，多媒體，表格等等

接下來逐一的介紹這些標籤的用法



第一講：文字標籤
基本語法： <font>文字〈/font〉
可通過參數改變文字的大小，顏色，字體，粗細等等，如
————————————————傳說中的分隔線————————————————
<FONT style="FONT-SIZE: 18px; COLOR: red; FONT-FAMILY: 黑體">文字</FONT>
效果：文字
註解：
style=" ; ",這裡是設置文字的樣式，各屬性用分號隔開即可
font-size:字的大小，px是像素，說明文字大小18像素
color：這個不用多說了是顏色，可以用英文（red，blue,black,white,..）表示,同樣可以用16進制格式表示color:#ffffff(#號加6位數字) f
font-family:看都看得出是字體了
————————————————傳說中的分隔線————————————————
同樣還有簡易的方法，如
<FONT color=#cfcf88 size=7>文字</FONT>
效果：文字
可以簡單的不用style直接用以上的來設置文字的顏色和大小
size:字號，1到7可以選擇
————————————————傳說中的分隔線————————————————
加粗，傾斜，下劃線，刪除線
放在<font></font>標籤中間
加粗： <b></b>或者<strong></strong>
如: <FONT style="FONT-SIZE: 20px"><STRONG>文字</STRONG></FONT>
效果：文字
————————————————傳說中的分隔線————————————————
傾斜： <i></i>或<EM></EM>
下劃線： <u></u>
刪除線： <STRIKE></STRIKE>




第二講：段落
標籤： <p></p>
可以設置段落的樣式，對齊方式如
< align=right>文字</P>
效果：

文字

註解：align為對齊方式，可選left，center，right，justify

講到這就要和上面講到的換行對應一下，回車符對應的是<p></p> |3<xoqD0
而shift+回車對應的則是換行符<br>

第三講：圖片標籤

基本語法： <img src=圖片地址> （這是個不成對出現的標籤）

原始圖片<IMG src="http://img141.imageshack.us/img141/2446/111ff7.jpg">

————————————————傳說中的分隔線————————————————

可以通過屬性設置圖片的大小：

通過樣式控制大小

<IMG style="WIDTH: 96px; HEIGHT: 92px" src=http://img141.imageshack.us/img141/2446/111ff7.jpg>

————————————————傳說中的分隔線————————————————

另外還可以還可以直接設置圖片大小：

<IMG width=50 height=50 src=http://img141.imageshack.us/img141/2446/111ff7.jpg>

第四講：超級連接標籤

語法： <A href="地址">連接對像</A>

————————————————傳說中的分隔線————————————————

如： <A href=http://www.dk101.com/Discuz/index.php>頂客論壇</A>

效果：訪客無法瀏覽此圖片或連結，請先 註冊 或 登入會員 。

————————————————傳說中的分隔線————————————————

同樣連接對象也可以是圖片

如： <A href=http://www.dk101.com/Discuz/index.php><IMG width=50 height=50 src=http://img141.imageshack.us/img141/2446/111ff7.jpg></A>

效果：

訪客無法瀏覽此圖片或連結，請先 註冊 或 登入會員 。

第五講：播放器標籤
播放器代碼其實是很複雜的，這裡就介紹最常用的簡易標籤
基本語法： <embed src=歌曲地址>
可設置參數：
width=300
heigth=50（當然也可以通過style樣式，來設置大小）
loop=-1(循環次數，-1就是無限循環，1為播放一次結束)
autostart=1/0(1為自動播放，0為手動開始)
hidden=1/0（是否隱藏播放器）
showstatusbar=1/0（是否顯示歌曲狀態攔）
常見的就是上面的那些，具體的還有下面這些
    showcontrols 屬性：是否顯示控制欄（包括播放控件及可選的聲音和位置控件）；
    showaudiocontrols 屬性：是否在控制欄顯示聲音控件（靜音按鈕和音量滑塊）；
    showpositioncontrols 屬性：是否在控制欄顯示位置控件（包括向後跳進、快退、快進、向前跳進、預覽播放列表中的每個剪輯）；
    showtracker 屬性：是否顯示搜索欄；
    showdisplay 屬性：是否顯示顯示面板（用來提供節目與剪輯的信息）；
    showcaptioning 屬性：是否顯示字幕顯示面板；
    showgotobar 屬性：是否顯示轉到欄；
    showstatusbar 屬性：是否顯示狀態欄；
隨便寫一個：
<embed src=歌曲地址 width=300 height=48 showstatusbar=1 loop=-1 autostart=1>
這就是個長為300 高48 顯示狀態條 無限循環 自動的播放器




第六講：移動效果（俗稱走馬燈）
語法： <marquee> 移動對像</marquee>
對象可是文字，圖片，表格，播放器等等
同樣可以通過設置圖片大小的兩種方法來設置對像活動的區域（注意，長和寬至少有一項是必須設置的）
width=300  height=300
或者style="width:300px;height:300px"
常用的參數可選的：
behavior：可以在頁面上一旦出現文本時讓瀏覽器按照設定的方法來處理文本。如果設定的方法是slide，那麼文本就移動到文檔上，並停留在頁邊距上。如果設定為alternate，則文本從一邊移動到另一邊。如果設定為scroll，文本將在頁面上反覆滾動。本屬性不是必須使用的。可以設定的值有：silide，alternate，scroll。　
direction：用於設定文本滾動的方向，可以設定的值有:left,right ,up,down。此屬性不是必須使用的。
scrollamount：用於設定每個連續滾動文本後面的間隔，用來控制移動速度的，該間隔用像素表示。此屬性不是必須使用的。
scrolldelay：用於設定兩次滾動操作之間的間隔時間，該時間以毫秒為單位。同樣是用來控制滾動速度的,數值越大，速度越慢，如無特別的需要，推薦使用上邊的書香控制！
如： <marquee width=100  height=100 direction=up> 移動對像</marquee>
移動對像





第七講：文本框標籤（文本區）
基本語法： <TEXTAREA></TEXTAREA>
<TEXTAREA style="WIDTH: 100px; HEIGHT: 100px">文字</TEXTAREA>
好像頂客裡直接貼文本框有點小問題，請嵌入表格中使用...沒有一定基礎不推薦使用這組標籤！！




第八講：表格標籤
終於講到了這個，著是最複雜的一個了，不單是語法，更是效果最多樣化的，可以說html貼最精華的部分也就在這了
<TABLE>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>
可以看出是四層的標籤
<td>這裡控制單元格屬性 jp)}:UA 8pw%t0t(S
<tr>控制行屬性
KS2}Kd GsY7>
<table>控制表格屬性
width:寬度（適用於table和td） 5$4 >?`o' [i!3+;Rf 0
height：高度（適用於table，tr，td） 8mh}mT Ge Ed32^(Ge
cellSpacing:單元間距，單元格與表格邊線、兩單元格之間的距離（適用與table） &h*}R5SV A~4'< W
cellPadding：單元邊距，單元格內的內容距單元格邊線的距離（適用於table） 0WKh.~ (\`[KILu
border：邊框厚度（適用於table） ?4bx!}0 2`J:R^Kj
bgcolor:背景色（適用於table和td，兩個可同時設置） 0J~ O5o8f .vF-Q3SS&^
background：背景圖片（實用於table和td，兩個可同時設置，不要與背景色重複使用）
————————————————傳說中的分隔線————————————————
下面舉幾個簡單的例子：
1.最簡單的在圖片上寫字
<table bordercolor=#841a00 height=200 cellspacing=2 width=400 background=http://www.ne.jp/asahi/syaraku/kichinyado/hana/ayame1/ayame11/ayame12.jpg border=2>
<tbody>
<tr>
<td>輸入文字 </td></tr></tbody></table>
效果：

輸入文字

————————————————傳說中的分隔線————————————————
如不需要邊框的話 邊框厚度設置成0就好了，就會出現下面的效果：
<table bordercolor=#841a00 height=200 cellspacing=2 width=400 background=http://www.ne.jp/asahi/syaraku/kichinyado/hana/ayame1/ayame11/ayame12.jpg border=0>
<tbody>
<tr>
<td>輸入文字 </td></tr></tbody></table>

輸入文字

————————————————傳說中的分隔線————————————————
2.背景填充色：
<TABLE borderColor=gray height=150 cellSpacing=10 width=400 bgColor=yellow border=30>
<TBODY>
<TR>
<TD bgColor=green>輸入文字</TD></TR></T></TBODY></TABLE>

輸入文字

第九講：對齊方式
講了上面的那麼多，大家應該注意到一個很重要的問題，就是對齊方式的問題，對齊方式會直接影響到實際效果：
align：橫向對齊 常用到有left，right,center
因為適用對像很多（主要有<p>,<table><td>,<marquee>）,所以單獨拿出來講！
如： <p align=center>段落內容<p> Bf5]ssOd
（段落內可以是任何內容，表格，文字，播放器，圖片，走馬燈，段落等等）
如放在 <talbe>內，則可以控制整個表格相對於外部的對齊方式 `?@ ~x!E\ b``^%ZFC2
放字<td>內則控制單元格內部的內容相對表格的對齊方式
————————————————傳說中的分隔線————————————————
valign：縱向對齊  常用到的屬性有top,center,bottom
適用對像(<table>,<td><marquee>)
如： <td valign=top>段落內容<td>
寫到這，標籤基本上算是講完了！！！




第十講：濾鏡效果
帖子講到這呢，才有點味道了，因為從這開始，才能出一些比較好看的效果！！
先從無參數的濾鏡開始
————————————————傳說中的分隔線————————————————
1.橫向翻轉
基本語法：style="filter: fliph()"
主要適用範圍：文字<font>,圖片<img>,播放器<embed>等等如：
<font style="filter: fliph(); width: 100px">大家一起學!</font>
效果：
大家一起學!
注意一下，給文字加濾鏡時，樣式裡要給出文字區域的大小！！！
————————————————傳說中的分隔線————————————————
2.縱向翻轉
基本語法：基本語法：style="filter: flipv()"
主要適用範圍：文字<font>,圖片<img>,播放器<embed>等等如：
<IMG style="filter: flipv()" src=http://img246.imageshack.us/img246/5696/1111cs1.jpg>

————————————————傳說中的分隔線————————————————
3.黑白效果
基本語法：style="filter: gray()"
主要適用範圍：圖片<img>,播放器<embed>，表格<table>，單元格<td>
例如： <embed  style="filter: xray()" width=300 height=28 autostart=false src=http://wma.mtvtop.net/5671/mtvtop_31/wanglingroudangwomzaiyiqi1/005.wma>

————————————————傳說中的分隔線————————————————
4.x光效果（黑白底片）
基本語法：style="filter: xray()"
主要適用範圍：圖片<img>,播放器<embed>，表格<table>，單元格<td>
例如： <IMG style="filter: xray()" src=http://img246.imageshack.us/img246/5696/1111cs1.jpg>

————————————————傳說中的分隔線————————————————
5.反色效果（彩色底片）
基本語法：style="filter: xray()"
主要適用範圍：圖片<img>,播放器<embed>，表格<table>，單元格<td>
例如： <embed style="filter: invert()" src=http://file1.baizhao.com/hard0/user310/310483/mydisk/fenzhen.wma width=300 height=50 showstatusbar=true autostart=0>
效果：

上面講到的都是些無參數的濾鏡，下面將到的幾個是才參數的濾鏡
————————————————傳說中的分隔線————————————————
6.羽化效果（半透明效果）
基本語法：style="filter: alpha(opacity=10,finishopacity=70,style=3)"
opacity屬性：設置起始透明度，取值0至100之間的任意數值，100表示完全不透明；finishopacity屬性為終止透明度，缺省為0 X7;S
style屬性：設置漸變風格，0表示均勻漸變，1表示線性漸變，2表示放射漸變，3表示直角漸變，缺省值為0。
主要適用範圍：文字<font>,圖片<img>,播放器<embed>，表格<table>，單元格<td>
如： <img style="filter: alpha(opacity=10,finishopacity=70,style=3)" src="http://img141.imageshack.us/img141/2446/111ff7.jpg">
效果：

————————————————傳說中的分隔線————————————————
7.發光效果：
基本語法：style="filter:glow(color=red,strength=4)"
color屬性：光暈顏色；strength：光暈的厚度。
主要適用範圍：文字<font>,圖片<img>,播放器<embed>，表格<table>
如： <FONT style="FILTER: glow(color=red,strength=4); WIDTH: 200px" color=white>大家一起學</FONT>
效果：大家一起學
————————————————傳說中的分隔線————————————————
8.陰影效果」
基本語法：style="filter:shadow(color=red,direction=40)"
color屬性：陰影顏色；
D(V=P2{ - Av^*:C
direction屬性：陰影角度，值取0至360度。
主要適用範圍：文字<font>,圖片<img>,播放器<embed>，表格<table>
如： <FONT style="FONT-SIZE: 15px; FILTER: shadow(color=red,direction=40); WIDTH: 150px; HEIGHT: 20px">大家一起學!</FONT>
效果：大家一起學!
————————————————傳說中的分隔線————————————————
9.模糊效果
語法：style="filter: blur(add=0,direction=30,strength=5)"
其add屬性是用來確定是否在運動模糊中使用原有目標，其值為0和1，0表示「否」，用於文字，1表示「是」，用於圖像；direction屬性是模糊移動的角度，其值為0至360度；strength屬性是模糊的強度。
主要適用範圍：文字<font>,圖片<img>
如： <FONT style="FONT-SIZE: 30px; FILTER: blur(add=0,direction=30,strength=5); WIDTH: 186px; HEIGHT: 42px" color=#4229a3>大家一起學!</FONT>
效果：
大家一起學!
————————————————傳說中的分隔線————————————————
10.波紋效果
語法：style="filter: wave(add=0,lightstrength=50,strength=4,freq=2,phrase=30)"
add屬性：布爾型，0或1，0表示將原始對像加入最後效果中，1則反之； 4C`n2{i
freq屬性：決定顯示的頻率，即應出現多少個波形； BJr3/ ]r
phrase屬性：決定波形的形狀，值取0至360之間； ? /4%7V\
strength屬性：形狀變化的強度 Lm6U``2
lightstrength屬性：光線變化的強度
主要適用範圍：文字<font>,圖片<img>
如: <FONT style="FONT-SIZE: 30px; FILTER: wave(add=0,lightstrength=50,strength=4,freq=2,phrase=30); WIDTH: 190px; HEIGHT: 44px" color=#c43cc4>大家一起學!</FONT>
效果： |K{5W(t.
大家一起學!
————————————————傳說中的分隔線————————————————
11.透明效果（選色透明）
語法：style="FILTER:Chroma( Color=#CCCCCC)"
作用效果：如果濾鏡中的像素有顏色與設定的顏色相同，則該像素變為透明（包括圖片的像素）。例如使用的語句是 FILTER:Chroma( Color=#CCCCCC) ，則濾鏡作用範圍內所有顏色為「#CCCCCC」的像素都變為透明。
主要適用範圍：文字<font>,播放器<embed>，
如： <embed  style="filter: Chroma(color=black)" width=300 height=28 autostart=false src=http://wma.mtvtop.net/5671/mtvtop_31/wanglingroudangwomzaiyiqi1/005.wma showstatusbar=true >

效果： HE5%u}<





第十一講：運用實例
基本的一些標籤及語法算是講得差不多了，光說不練嘴把式，還得實戰演練一番！！
這裡先推薦一款功能在線編輯器：訪客無法瀏覽此圖片或連結，請先 註冊 或 登入會員 。
功能比較強大，很多直接就可以編輯，不用到代碼模式下修改！可以用它直接生成表格，圖片，文本框，以及設置顏色，對齊格式！
首先要說的是個總規則：
1.代碼模式下：標籤內的屬性控制該標籤內的內容（如段落<p>標籤裡面的屬性控制段落的屬性，當然這個段落可以由「文字，圖片，表格，播放器，走馬燈，段落，或者這些任意組合」構成）
2.可視編輯模式下：請遵循先選取，後操作的原則，選區尤為重要，大多時候無法達到預期的效果，都是選區不正確。
3.如使用清風以外的在線編輯器的話，可視模式下選區比較重要，在完成編輯後，如果實在沒有把握選中的話，請使用ctrl+a全部選中！
————————————————傳說中的分隔線————————————————
例一：水紋倒影
效果：
hN{-OvK

首先我們解讀一下：明顯這是兩張圖片，上面的圖片沒有做什麼效果。至於倒影，首先我們要給它來個縱向翻轉，就可以把它倒過來了；接著呢，因為反射的關係，顏色會變淡，那麼我們羽化一下，就可以讓它變淡；最後一步，因為水波的關係，圖片會有點波動，我們再做一個波形變化，就能實現下面一張圖片的效果了，當然圖片高度還得設置得比上面小一點！
怎麼讓兩張圖片緊密的排在一起呢，前面講到了，換行就可以了 即<br>,那麼全部的代碼就是：
<IMG height=200 src=http://img141.imageshack.us/img141/2446/111ff7.jpg width=200 ><BR>
<IMG style="FILTER: Wave(Add=0, Freq=2, LightStrength=5, Phase=0, Strength=3) flipv() alpha(opacity=60,finishopacity=60,style=0)" height=150 src=http://img141.imageshack.us/img141/2446/111ff7.jpg  width=200>
————————————————傳說中的分隔線————————————————
例二：播放器效果1


我們來解讀一下：首先播放器顯示的只有狀態欄，那麼我們要用showstatusbar="true"顯示出狀態欄，並且控制大小讓它只現實狀態欄，高度為24；接著我們讓這個播放器變成透明的，那麼加個透鏡，讓黑色變成透明的style="FILTER: Chroma(color=black)"，狀態條的背景為black；最後呢在把這個播放器嵌入一個表格，那麼給表格加個背景的話，就能顯示出背景了！
解讀之後，我們就可以寫出以下的代碼代碼：
<TABLE cellSpacing=0 cellPadding=0 background=http://img1.3lian.com/img2008/03/020/gifbj071.gif border=0>
<TBODY>
<TR>
<TD><EMBED style="FILTER: Chroma(color=black)" src=http://wma.mtvtop.net/5671/mtvtop_31/wanglingroudangwomzaiyiqi1/005.wma width=300 height=24 type=audio/x-ms-wma autostart="false" showstatusbar="true"> </TD></TR></TBODY></TABLE>
————————————————傳說中的分隔線————————————————
例三：播放器效果2

我們來解讀：首先播放器的基本設置和上面是一樣的，那麼怎麼讓播放器的字變成紅色的呢？首先找到播放器原來字體的顏色#89A4FF（偶用抓色工具抓出來的），讓這個顏色變成透明的FILTER: Chroma(color=#89A4FF)；那麼背景是黑條怎麼辦呢，我們給播放器加個反色invert() ；最後把播放器嵌在一個紅色背景的表格裡，就能得到上面的效果了
我們就可以得到下面的一段代碼：
<TABLE cellSpacing=0 cellPadding=0 bgColor=red border=0>
<TBODY>
<TR>
<TD><EMBED style="FILTER: Chroma(color=#89A4FF) invert()" src=http://wma.mtvtop.net/5671/mtvtop_31/wanglingroudangwomzaiyiqi1/005.wma width=300 height=24 type=audio/x-ms-wma showstatusbar="true" autostart="false"> </TD></TR></TBODY></TABLE>
————————————————傳說中的分隔線————————————————
例四：金屬光澤

大家一起學

解讀一下：很明顯這裡出現了一個顏色變化，我們怎麼實現呢，可以用波形來實現， V_nW-(GI7X 5hq"o"|2
style="FILTER: wave(add=0,lightstrength=40,strength=0,freq=1,phrase=0)" ；我們把頻率設置成1，那麼就只會出現一次顏色變換，strength設置為0，那麼形狀不會發生改變，只要合理的設置顏色和光線變化強度的話就能實現以上的效果了
我們可以用以下代碼實現上面的效果：
<TABLE style="FILTER: wave(add=0,lightstrength=40,strength=0,freq=1,phrase=0)" height=30 cellSpacing=0 cellPadding=0 width=300 bgColor=#c0c0c0 border=0>
<TBODY>
<TR>
<TD>
< align=center><FONT color=#ff00ff>大家一起學</FONT></P></TD></TR></TBODY></TABLE>
————————————————傳說中的分隔線————————————————
例五：立體邊框表格
這個相對比較簡單一點，發個代碼解釋一下就可以了
<table height=150 cellspacing=10 bordercolordark=#722c2e width=200 bordercolorlight=#e5bcbd  bgcolor=#B8E1D8 border=1>
<tbody>
<tr>
<td>輸入文字</td></tr></tbody></table>

輸入文字

bordercolordark:暗線顏色 B+<]CJmpEZ Lxi#NQ79i
bordercolorlight:明線顏色
這兩個顏色設置成一樣的就和普通邊框沒什麼區別，當設置深淺不一樣，就會出現立體效果，當然不一定是要暗線的顏色一定更深，兩個顏色對調的話，分別會出現鏤刻和浮雕的效果。你們可以自己嘗試一下！！