當前位置：才華齋>設計>網頁設計>

常用HTML程式碼解釋

網頁設計閱讀(1.95W)

　　一、文字

1.標題文字 <h#>..........</h#>#=1~6；h1為最大字，h6為最小字

2.字型變化 ..........

【1】字型大小 ..........#=1~7；數字愈大字也愈大

【2】指定字型 <fontface="字型名稱">..........

【3】文字顏色 <fontcolor=#rrggbb>..........

rr：表紅色（red）色碼

gg：表綠色（green）色碼

bb：表藍色（blue）色碼

rrggbb也可用6位顏色程式碼數字

3.顯示小字型 ..........

4.顯示大字型 <big>..........</big>

5.粗體字 ..........

6.斜體字 ..........

7.打字機字型 <tt>..........</tt>

8.底線 ..........

9.刪除線 <strike>..........</strike>

10.下標字 ..........

11.上標字 ..........

12.文字閃爍效果 <blink>..........</blink>

13.換行（也稱回車）

14.分段

15.文字的對齊方向 #號可為left：表向左對齊（預設值） center：表向中對齊 right：表向右對齊P.S.<palign="#">之後的文字都會以所設的對齊方式顯示，直到出現另一個<palign="#">改變其對齊方向，遇到<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 <bodybackground="圖形檔名">

【3】設定背景圖案不會捲動 -- bgproperties <bodybgproperties=fixed>

【4】檔案內容文字的顏色 -- text <body text=#rrggbb>

【5】超連結文字顏色 -- link <body link=#rrggbb>

【6】正被選取的超連結文字顏色 -- vlink <bodyvlink=#rrggbb>

【7】已連結過的超連結文字顏色 -- alink <bodyalink=#rrggbb>

20.文字移動指令<MARQUEE>..........</MARQUEE>

移動速度指令是:scrollAmount=##最小為1，速度為最慢；數字越大移動的越快。

移動方向指令是：direction=#up向上、down向下、left向左、right向右。

指令舉例：<MARQUEE scrollAmount=3direction=up>..........</MARQUEE>

　　二、圖片

1.插入圖片 <img src="圖形檔名">

2.設定圖框 -- border <img src="圖形檔名"border=點數>

3.設定圖形大小 -- width、height <img src="圖形檔名"width=寬度點數 height=高度點數>

4.設定圖形上下左右留空 -- vspace、hspace <imgsrc="圖形檔名" vspace=上下留空點數 hspace=左右留空點數>

5.圖形附註 <img src="圖形檔名" alt="說明文字">

6.預載圖片

<img src="高解析度圖形檔名" lowsrc="低解析度圖形檔名">P.S.兩個圖的圖形大小最好一致;

7.影像地圖（Image Map） <img src="圖形檔名"usemap="#圖的名稱"> <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,78href="URL"

　　三、表格相關

1.表格標題

表格標題位置 -- 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三個視窗，則<framesetrows=100,200,300>；

亦可以*號代表，如<frameset rows=*,500,*>

百分比：如<frameset rows=30%,70%>，各項總和最好為100%;

【2】水平（左右）分割 -- cols <framesetcols=點數或百分比>

2、指定視窗內容 -- <frame>

【1】指定視窗的檔名稱 -- src <frame src=HTML檔名>

【2】定義視窗的名稱 -- name

<frame

【3】設定檔案與上下邊框的距離 -- marginheight

【4】設定檔案與左右邊框的距離 -- marginwidth

【5】設定分割視窗卷軸 -- scrolling

<frame scrolling=#> #號可為 yes：固定出現卷軸

no：不出現卷軸

auto：自動判斷檔案大小需不需要卷軸（預設值）

【6】鎖住分割視窗的大小 -- noresize <frame noresize>

　　六、歌曲程式碼:

在這組程式碼中，不必管它是，只要看尾綴是asf、wma、wmv、wmv、rm都可適用下面的程式碼:

1. 手動播放:

2. 開啟頁面自動播放:

------------------------------------------------------------------

套用程式碼:

歌曲或音樂名稱

<imgsrc="圖片地址">

介紹文字

</td></tr>

</table>

簡易套用程式碼詳解:

是定義帖子居中;

這其中的border="1"是定義表格邊線的寬度,定義為0則無邊線;width="90%"height="403"分別定義背景圖表格的寬度和高度.如果背景圖是一張大圖,可以這樣定義:width=圖片寬度height=圖片高度

<fontface="華文彩雲" size="6"color="#FFFFFF">歌曲或音樂名稱

<palign="center">是定義文字居中的， 是回行程式碼，加幾個就會空幾行。<fontface="華文彩雲" size="6"color="#FFFFFF">是定義文字屬性的。face="華文彩雲"是定義字型，你可以把字型換成隸書、宋體等。size="6"是定義字號的，數字越大字越大，如果不定義，預設是2號字。color="#FFFFFF"是定義字型顏色的。全部字型顏色的程式碼在妙手飾圖區有人發過，你可以找來改。

<imgsrc="圖片地址"> <fontcolor="#FFFFFF">介紹文字

第一個括號裡的程式碼仍然是定義圖片和文字居中的。<imgsrc="圖片地址">是插入圖片程式碼。介紹文字是定義這段文字的。如果想改變字擰⒆痔濉⒆值難丈燒瞻嶸廈嫖醫駁畝ㄒ宸椒ā?/font>

這一段是插入播放器程式碼，因為我插的是特殊的播放器，style="FILTER:xray()" 是特殊程式碼。“src=音樂地址”是插入音樂檔案的地址。width=250height=30分別定義播放器的寬度和高度(如果把寬和高都設成零則為隱藏,並且只能自動播放)。autostart="true"loop="-1"是定義音樂播放方式的，autostart="true"是設定手動或自動播放，“true”或“1”是自動播放，“false”或“0”是手動播放；loop="-1"是播放次數，“true”或“1”表示重複播放，“false”“-1”或“0”是隻播放一次。

</td></tr></table>回行程式碼和與前面對應的固定程式碼。

</td></tr></table>回行程式碼和與前面對應的固定程式碼。

p 全稱 pision意為“區分”，稱為區隔標記。作用：設定字、畫、表格等的擺放位置。

使用 p 的方法跟使用其他 tag 的方法一樣：

This is a p tag .

如果單獨使用 p 而不加任何 CSS-P, 那麼它在網頁中的效果和使用 是一樣的。

但當我們把 CSS-P 用到 p中去以後，我麼就可以嚴格設定它的位置。首先我們需要給這個可以被CSS-P 控制的 p 一個 ID 或說是它的名字。比如說我們給下面這個 p的名字是 truck。給名字的目的是我們以後可用 JavaScript 來控制它，比如說移動它或改變它的一些性質等等。

This is a truck

是html的標記

Span元素不同於一般的HTML元素，它沒有自己的顯示內容和顯示特性。只是一個裝載CSS資訊的容器，用來定義一個由文字和HTML標籤組成的`資訊塊。

它是可以引用css樣式的，一般的font不可以

p是指塊文字，像你要定義一塊文字可以用到它。另外做層的時候也經用到它，它就是讓一塊東西整合為一個集合.

p標籤可以以類或ID附加css樣式

1.類

……

如果用id附加，那麼css中應該首先建立這個ID：

如：

#abc {

font-family: Verdana, "宋體";

color: #FF00CC;

}

其中abc就是id

可以在abc這個id下建立很多css屬性，這樣所有在……這個標籤中的內容將遵循abc這個id下的css屬性。

SPAN 和 p的區別在於，p(pision)是一個塊級元素，可以包含段落、標題、表格，乃至諸如章節、摘要和備註等。而SPAN是行內元素，SPAN的前後是不會換行的，它沒有結構的意義，純粹是應用樣式，當其他行內元素都不合適時，可以使用SPAN。

下面以一個例項來說明這兩個屬性的區別。

程式碼：

＜span＞SPAN標記有一個重要而實用的特性，即它什麼事也不會做，它的唯一目的就是圍繞你的HTML程式碼中的其它元素，這樣你就可以為它們指定樣式了。在此例中，＜span＞識別符號允許你將一個段落分成不同的部分。

還有一個識別符號具有類似的功能，＜p＞p也被用來在HTML檔案中建立邏輯部分。但與＜p＞SPAN不同，＜p＞工作於文字塊一級，它在它所包含的HTML元素的前面及後面都引入了行分隔。

效果：

SPAN標記有一個重要而實用的特性，即它什麼事也不會做，它的唯一目的就是圍繞你的HTML程式碼中的其它元素，這樣你就可以為它們指定樣式了。在此例中，識別符號允許你將一個段落分成不同的部分。

還有一個識別符號具有類似的功能，p也被用來在HTML檔案中建立邏輯部分。但與SPAN不同，工作於文字塊一級，它在它所包含的HTML元素的前面及後面都引入了行分隔。

標籤： HTML 程式碼

圖文推薦