YK Forum » 網頁製作 » 常用HTML代碼匯編


2008-3-14 10:11 PM 仁傑
常用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" c>

2. 打開頁面自動播放:
<EMBED src="歌曲地址" width="39" height="18" autostart="true" hidden="false" loop="infinite" align="middle" volume="100" type="audio/x-pn-realaudio-plugin" c autostart="true">

2008-3-14 10:20 PM `乜叉.
@@仁先上左線的....
做網頁最岩使....
謝了~

2009-3-10 11:00 PM totoro7735
好東西~~~我要收藏研究研究~~~感謝

2009-4-2 10:16 PM aaww12345
收藏起來~~;P

2009-10-2 01:29 AM tracy714
好極了:em49:

2010-2-2 10:47 PM dou_520
好啊!用得啊!

2010-12-3 05:17 PM Gifts
真是太實用了 非常感謝

2010-12-4 09:13 PM williamyii77
好好用,thx唒了

2011-7-26 11:08 AM foreverbeautyhk
;P ;P  THX

2011-7-26 04:35 PM POS
太實用了 收藏:)

2011-8-8 11:50 AM kid91a16
雖然沒有製作過html

但是推你一個

頁: [1]
查看完整版本: 常用HTML代碼匯編


Powered by Discuz! Archiver 5.0.0  © 2001-2006 Comsenz Inc.