常用HTML代碼解釋

大家在論壇看到的那些漂亮的帖多是漂亮的圖片、音樂加上一些代碼組成,這些代碼就是HTML代碼,我們在這裏將圖片+音樂+背景或再加上FLASH組成的帖簡稱爲“代碼帖”。這些帖以她的獨特魅力,吸引了衆多網友。但很多人沒有去揭開她那美麗的面紗,總是在門外徘徊。我編制這些教學帖,就是希望大家都去了解她,去實踐,製作出自己的心情、精彩和美麗。
     一般來說你是不需要了解那些大多HTML代碼的實際意義,但是,對一些HTML代碼是需要理解的,對製作、調試效果有幫助。在這裏我準備分幾講來對代碼的編寫規則加以解釋。實際上我在這領域的探索時間也不長,難免有不足或不當之處,還請大家補充完善。謝謝!
     在這裏,我將不定期地編制些資料提供給大家。
常用HTML代碼彙編:
一、文字
1.標題文字 <h#>..........</h#> #=1~6;h1爲最大字,h6爲最小字
2.字體變化 <font>..........</font>
【1】字體大小 <font size=#>..........</font> #=1~7;數字愈大字也愈大
【2】指定字型 <font face="字體名稱">..........</font>
【3】文字顏色 <font color=#rrggbb>..........</font>
               rr:表紅色(red)色碼
               gg:表綠色(green)色碼
               bb:表藍色(blue)色碼
               rrggbb也可用6位顏色代碼數字
3.顯示小字體 <small>..........</small>
4.顯示大字體 <big>..........</big>
5.粗體字 <b>..........</b>
6.斜體字 <i>..........</i>
7.打字機字體 <tt>..........</tt>
8.底線 <u>..........</u>
9.刪除線 <strike>..........</strike>
10.下標字 <sub>..........</sub>
11.上標字 <sup>..........</sup>
12.文字閃爍效果 <blink>..........</blink>
13.換行(也稱回車) <br>
14.分段 <p>
15.文字的對齊方向 <p align="#"> #號可爲 left:表向左對齊(預設值) center:表向中對齊 right:表向右對齊 P.S.<p align="#">之後的文字都會以所設的對齊方式顯示,直到出現另一個<p align="#">改變其對齊方向,遇到<hr>或<h#>標籤時會自動設回預設的向左對齊。
16.分隔線 <hr>
【1】分隔線的粗細 <hr size=點數>
【2】分隔線的寬度 <hr size=點數或百分比>
【3】分隔線對齊方向 <hr align="#">
      #號可爲 left:表向左對齊(預設值) center:表向中對齊 right:表向右對齊
【4】分隔線的顏色 <hr color=#rrggbb>
【5】實心分隔線 <hr noshade>
17.居中對齊 <center>..........</center>
18.依原始樣式顯示 <pre>..........</pre>
19.<body>指令的屬性
【1】背景顏色 -- bgcolor <body bgcolor=#rrggbb>
【2】背景圖案 -- background <body   background="圖形文件名">
【3】設定背景圖案不會捲動 -- bgproperties <body bgproperties=fixed>
【4】文件內容文字的顏色 -- text <body text=#rrggbb>
【5】超連結文字顏色 -- link <body link=#rrggbb>
【6】正被選取的超連結文字顏色 -- vlink <body vlink=#rrggbb>
【7】已連結過的超連結文字顏色 -- alink <body alink=#rrggbb>
20.文字移動指令<MARQUEE>..........</MARQUEE>
      移動速度指令是:scrollAmount=#     #最小爲1,速度爲最慢;數字越大移動的越快。
      移動方向指令是:direction=#           up向上、down向下、left向左、right向右。     
      指令舉例:<MARQUEE scrollAmount=3 direction=up>..........</MARQUEE>
二、圖片
1.插入圖片 <img src="圖形文件名">
2.設定圖框 -- border <img src="圖形文件名" border=點數>
3.設定圖形大小 -- width、height <img src="圖形文件名" width=寬度點數 height=高度點數>
4.設定圖形上下左右留空 -- vspace、hspace <img src="圖形文件名" vspace=上下留空點數 hspace=左右留空點數>
5.圖形附註 <img src="圖形文件名" alt="說明文字">
6.預載圖片
<img src="高解析度圖形文件名" lowsrc="低解析度圖形文件名"> P.S.兩個圖的圖形大小最好一致;
7.影像地圖(Image Map) <img src="圖形文件名" usemap="#圖的名稱"> <map name="圖的名稱">
<area shape=形狀 coords=區域座標列表 href="連結點之URL">
<area shape=形狀 coords=區域座標列表 href="連結點之URL">
<area shape=形狀 coords=區域座標列表 href="連結點之URL">
<area shape=形狀 coords=區域座標列表 href="連結點之URL"> </map <
【1】定義形狀 -- shape
shape=rect:矩形 shape=circle:圓形 shape=poly:多邊形
【2】定義區域 -- coords
a.矩形:必須使用四個數字,前兩個數字爲左上角座標,後兩個數字爲右下角座標
例:<area shape=rect coords=100,50,200,75 href="URL">
b.圓形:必須使用三個數字,前兩個數字爲圓心的座標,最後一個數字爲半徑長度
例:<area shape=circle coords=85,155,30 href="URL">
c.任意圖形(多邊形):將圖形之每一轉折點座標依序填入
例:<area shape=poly coords=232,70,285,70,300,90,250,90,200,78 href="URL"
三、表格相關
1.表格標題
<caption>..........</caption>
表格標題位置 -- align
<caption align="#"> #號可爲 top:表標題置於表格上方(預設值)
bottom:表標題置於表格下方
2.定義列 <tr>
3.定義欄位 《1》<td>:靠左對齊
            《2》<th>:靠中對齊ⅱ粗體
【1】水平位置 -- align <th align="#">
                   #號可爲 left:向左對齊   center:向中對齊 right:向右對齊
【2】垂直位置 -- align <th align="#"> #號可爲
                 top:向上對齊 middle:向中對齊     bottom:向下對齊
【3】欄位寬度 -- width      <th width=點數或百分比>
【4】欄位垂直合併 -- rowspan     <th rowspan=欲合併欄位數>
【5】欄位橫向合併 -- colspan       <th colspan=欲合併欄位數>
四、表格的主要屬性
1. <table>標記的主要屬性
     align定義表格的對齊方式,有三個屬性值center,left,right
     background定義表格的背景圖案,屬性值爲圖片的地址
     bgcolor定義表格的背景顏色,屬性值是各種顏色代碼
     border定義表格的邊框寬度,屬性值是數字
     bordercolor定義表格邊框的顏色,屬性值是各種顏色代碼
     cellpadding定義單元格內容與單元格邊框之間的距離,屬性值是數字
     cellspacing定義表格中單元格之間的距離
     height定義表格的高度,屬性值是數字
     width定義表格的寬度,屬性值是數字
2. <tr>標記,表格是由多行與多列組成的,<tr>標記用來定義表格的一行,他的屬性極其屬性值定義的是表格中的該行,其主要屬性與屬性值如下:
     align定義對齊方式,屬性值與上同
     background定義背景圖案 bgcolor定義背景色
3. <td>標記。用<td>標記概況起來的內容表示表格的單元。其主要屬性與屬性值和<table>標記的一樣,補充兩個合併列和行的代碼:
     colspan定義合併表格的列數,屬性值是數字
     rowspan定義合併表格的行數,屬性值是數字
五、FRAME
1、分割視窗指令 <frameset>..........</frameset>
【1】垂直(上下)分割 -- rows
<frameset rows=#> #號可爲點數:
     如欲分割爲100,200,300三個視窗,則<frameset rows=100,200,300>;
     亦可以*號代表,如<frameset rows=*,500,*>
     百分比:如<frameset rows=30%,70%>,各項總和最好爲100%;
【2】水平(左右)分割 -- cols <frameset cols=點數或百分比>
2、指定視窗內容 -- <frame>
<frameset cols=30%,70%> <frame> <frame> </frameset>
【1】指定視窗的文件名稱 -- src <frame src=HTML檔名>
【2】定義視窗的名稱 -- name
<frame name=視窗名稱>
【3】設定文件與上下邊框的距離 -- marginheight
<frame marginheight=點數>
【4】設定文件與左右邊框的距離 -- marginwidth
<frame marginwidth=點數>
【5】設定分割視窗卷軸 -- scrolling
<frame scrolling=#> #號可爲 yes:固定出現卷軸
           no:不出現卷軸
           auto:自動判斷文件大小需不需要卷軸(預設值)
【6】鎖住分割視窗的大小 -- noresize <frame noresize>
六、歌曲代碼:
     在這組代碼中,不必管它是mms.http.rtsp,只要看尾綴是asf、wma、wmv、wmv、rm都可適用下面的代碼:
1. 手動播放:
<EMBED src=歌曲地址 volume="100" width=39 height=18 hidden="FALSE" autostart="fault" type="audio/x-pn-realaudio-plugin" controls="PlayButton">
2. 打開頁面自動播放:
<EMBED src="歌曲地址" width="39" height="18" autostart="true" hidden="false" loop="infinite" align="middle" volume="100" type="audio/x-pn-realaudio-plugin" controls="PlayButton" autostart="true">
     代碼帖的外框是用圖片製作的,製作者使用自己喜歡的圖片搭配成那些精美外框。外框有單層和多層的,但製作時都是一樣,在這裏我舉二個例子來說明。
一、雙層外框       是用二組“TABLE”定義的代碼組成的雙層背景外框。一般在雙層外框是外框圖片+內容圖片組成,也可以按下面的實例處理。大家可以先看實例和原代碼:
主題內容區

原代碼:
<DIV align=center>
<TABLE cellPadding=3 width=550 align=center background=http://www.coolhot.cn/680/hongxiu/yaoyaosucai/taozhuang/002.files/002.jpg border=0>
<TBODY>
<TR>
<TD>
<TABLE height=300 width=550 background=http://www.coolhot.cn/680/hongxiu/yaoyaosucai/taozhuang/002.files/001.gif border=1>
<TBODY>
<TR>
<TD>
<P align=center><FONT style="FONT-SIZE: 40pt; FILTER: glow(color=#98BBEF); WIDTH: 100%; COLOR: #6600ff; LINE-HEIGHT: 150%; FONT-FAMILY: 華文新魏">主題內容區</FONT></P><BR><BR><BR><BR><BR></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></DIV>
二、五層外框      五層外框是用五組“TABLE”定義的代碼組成的。下面是實例、原代碼和外框指令的位置圖解:



實 例:


主題內容區

原代碼:
<DIV align=center>
<TABLE cellSpacing=35 align=center background=http://www.coolhot.cn/680/hongxiu/yaoyaosucai/taozhuang/002.files/001.gif border=0>
<TBODY>
<TR>
<TD>
<TABLE cellPadding=3 width="95%" align=center background=http://www.coolhot.cn/680/hongxiu/yaoyaosucai/taozhuang/002.files/002.jpg border=0>
<TBODY>
<TR>
<TD>
<TABLE cellPadding=13 width="100%" align=center background=http://www.coolhot.cn/680/hongxiu/yaoyaosucai/taozhuang/002.files/001.gif border=0>
<TBODY>
<TR>
<TD>
<TABLE cellPadding=0 width="96%" align=center background=http://www.coolhot.cn/680/hongxiu/yaoyaosucai/taozhuang/002.files/002.jpg border=0>
<TBODY>
<TR>
<TD>
<TABLE height=300 width=460 align=center background=http://www.coolhot.cn/680/hongxiu/yaoyaosucai/taozhuang/002.files/003.jpg border=0>
<TBODY>
<TR>
<TD><BR><BR><BR><BR>
<P align=center><FONT style="FONT-SIZE: 40pt; FILTER: glow(color=#98BBEF); WIDTH: 100%; COLOR: #6600ff; LINE-HEIGHT: 150%; FONT-FAMILY: 華文新魏">主題內容區</FONT></P><BR><BR><BR><BR><BR>
</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></DIV>
     大家可以從上面二個實例的原代碼中看出,每層外框都是由“<TABLE……>”、“<TBODY>”、“<TR>”、“<TD>”加結束指令“</TD></TR></TBODY></TABLE>”指令對組成的,大家在製作時,一定要注意它的對應關係,如少了指令,在發帖時就容易出錯。這是代碼帖最基本的單元組,大家如果能掌握好這個規律,就可以製作出五彩繽紛的漂亮帖了。
三、發代碼帖的注意事項 1、打開頁面,點擊UBB模式按鈕。然後在UBB模式欄內粘貼代碼編輯你的貼子,完成後點擊返回Design模式。在Design模式的狀態下,點擊預覽,預覽效果正常,就可以發表了。預覽效果不正常,再點擊返回HTML模式,修改代碼。
2、爲什麼在預覽能看的,發貼後就不行啊?
  解決的辦法:首先,請你檢查語法是否正確。第二、用UBB格式語法編輯完後,點擊“預覽”查看效果。第三、以上都沒問題後,再點擊Design、點擊預覽查看或點擊“發表”。有些貼(尤其是加了透明flash的貼)如果不這樣,發表後是一堆亂碼。
3、其它注意事項 (1)發表代碼帖子的時候,要選擇進入UBB模式窗口,並且取消自動修正。編輯修改的時候也一樣。
 (2)編寫代碼的時候,代碼之間只能空一格,如果用了回車或是分行就會無法正常顯示了。如果發表帖子後,出現:以下內容含腳本,或可能導致頁面不正常的代碼的提示,可以試運行代碼,如果顯示正常,那只要在修改編輯的時候,看看代碼之間有沒有多了、 <、空格等,並把這些多餘的代碼都刪除,纔可以正常顯示。
 (3)在UBB模式下是不支持默認換行,在需要換行時要使用換行符“<BR>”,而不能簡單的通過回車來實現。
 (4)注意首、尾代碼一致,代碼多餘或欠缺都會引起發佈時出錯。
套用代碼:<div align="center"><table border="1" width="90%" height="403" background="背景圖片地址"><tr><td width="80%" height="100%"><p align="center"><br><br><br><font face="華文彩雲" size="6" color="#FFFFFF">歌曲或音樂名稱</font><br><br><p align="center"><img src="圖片地址"><br><br><font color="#FFFFFF" size=3>介紹文字</font><br><br><br><EMBED style="FILTER: xray()" src=音樂地址 width=250 height=30 type=audio/x-ms-wma autostart="true" loop="-1"><br><br><br></td></tr></table></div>
簡易套用代碼詳解:
<div align="center">是定義帖子居中;
<table border="1" width="90%" height="403" background="背景圖片地址"><tr><td width="80%" height="100%">
這其中的border="1"是定義表格邊線的寬度,定義爲0則無邊線;width="90%" height="403"分別定義背景圖表格的寬度和高度.如果背景圖是一張大圖,可以這樣定義:width=圖片寬度 height=圖片高度
<p align="center"><br><br><br><font face="華文彩雲" size="6" color="#FFFFFF">歌曲或音樂名稱</font><br><br>
<p align="center">是定義文字居中的,<br>是回行代碼,加幾個就會空幾行。<font face="華文彩雲" size="6" color="#FFFFFF">是定義文字屬性的。face="華文彩雲"是定義字體,你可以把字體換成隸書、宋體等。size="6"是定義字號的,數字越大字越大,如果不定義,默認是2號字。color="#FFFFFF"是定義字體顏色的。全部字體顏色的代碼在妙手飾圖區有人發過,你可以找來改。
<p align="center"><img src="圖片地址"><br><br><font color="#FFFFFF">介紹文字</font><br><br><br>
第一個括號裏的代碼仍然是定義圖片和文字居中的。<img src="圖片地址">是插入圖片代碼。<font color="#FFFFFF" size=3>介紹文字</font>是定義這段文字的。如果想改變字號、字體、字的顏色,可照搬上面我講的定義方法。
<EMBED style="FILTER: xray()" src=音樂地址 width=250 height=30 type=audio/x-ms-wma autostart="true" loop="-1">
這一段是插入播放器代碼,因爲我插的是特殊的播放器,style="FILTER: xray()" 是特殊代碼。“src=音樂地址”是插入音樂文件的地址。width=250 height=30分別定義播放器的寬度和高度(如果把寬和高都設成零則爲隱藏,並且只能自動播放)。autostart="true" loop="-1"是定義音樂播放方式的,autostart="true"是設定手動或自動播放,“true”或“1”是自動播放,“false”或“0”是手動播放;loop="-1"是播放次數,“true”或“1”表示重複播放,false”“-1”或“0”是隻播放一次。
<br><br><br></td></tr></table></div>回行代碼和與前面對應的固定代碼。
怎樣使用特效代碼?
   
     只要把這些代碼複製、粘貼到你的網頁源代碼中,保存,再在瀏覽器中打開,你就會看到效果了!

怎樣在網頁中插入代碼?
·使用DreamWeaver:
     在編輯狀態下按F10即彈出源代碼窗口,將特效代碼粘貼進去即可。
   
·使用FrontPage:
       點擊編輯窗口左下角的“HTML”選項卡即出現源代碼窗口,將特效代碼粘貼進去即可。
   
·直接使用“記事本”等編輯器:
     直接用這些編輯器打開網頁文件,出現的就是源代碼,將特效代碼粘貼進去即可。

在什麼地方插入代碼?
     一般來說,在網頁源代碼的<body>與</body>之間的任何地方插入代碼都可以(除非特別指明,例如要求插入到<head>與</head>之間)。

該怎樣修改代碼?
     插入代碼之後,把代碼中的文字替換成你自己的內容即可。
   
     注意:爲避免出錯,請不要改動除中文文字之外的代碼,否則程序可能會不能運行!
簡單的html代碼和西陸貼圖知識
============================
         因爲在發帖時要加入一些代碼,這些代碼就是html代碼,一般是不需要了解這些html代碼的意義,但是最簡單的一些html代碼是需要理解的,對調試特殊效果有幫助,這裏我們提供一些簡單的html代碼,需要了解更多可以參照最下面的兩個鏈接教程。

         其實在我們這個網站一般的貼圖並不難,但要把圖貼好還要下點功夫啦!如果bbs啓用了編輯器就像我這兒,用複製粘貼方法最簡單即:找到你想在bbs貼的圖片(絕對網址,電腦硬盤裏的不行需上傳)用鼠標點圖右鍵複製,移回到bbs發貼欄內右鍵粘貼,這時你就能在發帖欄內看到圖片,然後提交完成操作。整個就是複製粘貼文章的過程.呵呵,簡單吧
==============================
         另一種就是bbs最常用的html貼圖方法:
          首先要找到你想在bbs貼的圖片,右擊圖片/屬性/圖片地址(url),複製下來然後把它粘貼到""中間,

即單圖法:<img src="圖片地址">
================================
多圖貼法分爲:

1.橫排貼法:
<img src="圖片地址"><img src="圖片地址"><img src="圖片地址">........
================================
2.直排貼法:
<img src="圖片地址">
<img src="圖片地址">
<img src="圖片地址">
<img src="圖片地址">
........
直排較好看比較常用!在進行以上操作時鍵盤最好在英文狀態。
特別注意:在我們這個網站使用html語言貼圖,一定要事先在編輯器源代碼前的空格內打上"勾"否則貼不出圖的!! (待操作完成發帖前,再去掉“勾”你可閱覽到你將要發出的文章,如有錯誤還可修改。)
================================
         在下面提供一些常用特效代碼供大家方便使用

如何貼背景圖案(文字與圖片居中):
<center><table cellpadding=0 cellspacing=0 bordercolorlight=#aaaaee border=8 width=98% align=center table background="背景圖片或顏色" width=700><tr><td><center><br><br><br>
文字或圖片。。。
<td></table>
================================
圖片加邊框:
<table border=2><td><img src="圖片地址"></td></table>
===============================
圖上做文:<center><table width="480" border="0"><tbody><tr><td valign="left" background="圖片地址" width="580" height="330">
</center>
</td>
</tr>
</table>
===============================
帖子裏插入flash代碼:
<embed src="http://flash地址" width=500 height=340></embed>
================================
貼mp3播放器的代碼
<embed src="mp3地址" width=310 height=35 type=audio/x-pn-realaudio-plugin controls="controlpanel,statusbar" autostart="true" loop="true">
==============================
支持rm或mid格式(隨機播放):  
<embed src="http--rm\mp3\mid" width=150 height=25 type=audio/x-pn-realaudio-plugin controls="controlpanel" autostart="true">
=============================
(非自動播放):
<embed name=player1 src="http:--rm\mp3" width=248 height=66 type=audio/x-pn-realaudio-plugin border="0">
============================
隱藏mp3播放器:    <embed width="0" height="0" src="mp3地址" type="application/x-shockwave-flash"></embed>
================================
播放器直接放(在中間小圖):
<center><embed src="歌曲地址" width="39" height="18" autostart="true" hidden="false" loop="infinite" align="middle" volume="100" type="audio/x-pn-realaudio-plugin" controls="playbutton" autostart="true">
==============================
視頻常用播放器[mtv]
<embed src="視頻地址" type="audio/x-pn-realaudio-plugin" console="clip1" controls="controlpanel,statusbar" height="330" width="450" autostart="true">
一些常用的貼歌的語法,要學習的請進來看看
1.Mp自動播放代碼是:<EMBED src=歌曲地址
width=300 height=45 type="audio/x-pn-realaudio-<br>plugin" loop="true" autostart="true" controls="ControlPanel,StatusBar">
2.Mp按鍵播放的代碼是:<EMBED src=歌曲地址
width=300 height=45 type="audio/x-pn-realaudio-<br>plugin" loop="true" autostart="false" controls="ControlPanel,StatusBar">
3.MTV(包括Flash)視頻播放的代碼是:<EMBED style="WIDTH: 650px; HEIGHT: 450px" src=動畫地址
width=650 height=450 type=audio/x-pn-realaudio controls="p_w_picpathwindow" autostart="true" loop="true" console="huayue">
4.Realplayer按鍵播放的代碼是:<EMBED src=歌曲地址  width=320 height=52
type="audio/x-pn-realaudio-<br>plugin"
loop="true" autostart="false" controls="ControlPanel,StatusBar">
5.Realplayer自動播放的代碼是:<EMBED src=歌曲地址  width=320 height=52
type="audio/x-pn-realaudio-<br>plugin"
loop="true" autostart="true" controls="ControlPanel,StatusBar">
6.Realplayer視頻播放的代碼是:<EMBED style="WIDTH: 650px; HEIGHT: 450px" src=歌曲地址   width=650 height=450 type=audio/x-pn-realaudio controls="p_w_picpathwindow" autostart="true" loop="true" console="huayue">
7.播放器變顏色的代碼是:<EMBED style="FILTER: invert(); WIDTH: 300px; HEIGHT: 50px"
src=歌曲地址
type=audio/mpeg ShowStatusBar="1" autostart="true" loop=true volume="0">
8.點擊下載(裏面有歌曲地址)的代碼是:<A href="歌曲地址"  target=_blank>點擊下載
9.如果想只聽到音樂而看不到播放器的,只需要把代碼裏的width=320 height=52改爲width=0 height=0就可以了.
10.使用Windows Media Player播放器自動播放的語法: <EMBED name=mplayer1 pluginspage=http://www.microsoft.com/Windows/Downloads/Contents/Products/MediaPlayer/ src=http://www.xbxk.com/temp/wjllnmbcjlgdaq.mp3
width=320 height=50
type=application\/x-mplayer2 showcontrols="1" ShowDisplay="0" ShowStatusBar="1" autostart="1">
11.使用Windows Media Player播放器手動播放的語法: <EMBED name=mplayer1 pluginspage=http://www.microsoft.com/Windows/Downloads/Contents/Products/MediaPlayer/ src=http://www.xbxk.com/temp/wjllnmbcjlgdaq.mp3
width=320 height=50
type=application\/x-mplayer2 showcontrols="1" ShowDisplay="0" ShowStatusBar="1" autostart="0">
你把代碼(先把代碼中的"歌曲地址"替換成你自己有效的歌曲地址)保存到文本文檔.然後把文本文檔裏的內容(即是保存的代碼)另存爲x.htm文件.雙擊打開x.htm文件,這時瀏覽器會出現一個播放器的圖標,你把播放器圖標複製到你要發表的地方點擊提交發表即可.
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章