HTML 的顏色表示可分兩種:
● 以命名方式定義常用的顏色,如 RED。
● 以 RGB 值表示,如 #FF0000 表示 red。
命名方式涵括的色種不多亦不甚方便,較少采用,以下介紹 RGB 值的原理:
眾所皆知顏色是由 “red” “green” “blue” 三原色組合而成的,在 HTML 中對(duì)於彩度的定義是 采十六進(jìn)位的,對(duì)於三原色 HTML 分別給予兩個(gè)十六進(jìn)位去定義,也就是每個(gè)原色可有 256 種彩度,故此三原色可混合成一千六佰多萬(wàn)的顏色。
例如
白色的組成是 red=ff, green=ff, blue=ff, RGB 值即為 ffffff
紅色的組成是 red=ff, green=00, blue=00, RGB 值即為 ff0000
綠色的組成是 red=00, green=ff, blue=00, RGB 值即為 00ff00
藍(lán)色的組成是 red=00, green=00, blue=ff, RGB 值即為 0000ff
黑色的組成是 red=00, green=00, blue=00, RGB 值即為 000000
於應(yīng)用時(shí)常在每個(gè) RGB 值之前加上符號(hào) # 以示分別,但不加亦可。
■ HTML 基本架構(gòu):
| 選按不同顏色按鍵以測(cè)試前景顏色效果 (只適合 Internet Explorer) 選按不同顏色按鍵以測(cè)試背景顏色效果 |
■ 16 常用顏色表:
| Color | Value | Name | Color | Value | Name | |
| #00FFFF | aqua | #808080 | gray | |||
| #000080 | navy | #C0C0C0 | silver | |||
| #000000 | black | #008000 | green | |||
| #808000 | olive | #008080 | teal | |||
| #0000FF | blue | #00FF00 | lime | |||
| #800080 | purple | #FFFF00 | yellow | |||
| #FF00FF | fuchsia | #800000 | maroon | |||
| #FF0000 | red | #FFFFFF | white |
■ 其它常用顏色表:
| Color | Value | Name | Color | Value | Name | |
| #F0F8FF | aliceblue | #A00000 | antiquewith | |||
| #7FFFD4 | aquamarine | #F0FFFF | azure | |||
| #F5F5DC | beige | #FFE4C4 | bisque | |||
| #000000 | black | #FFEBCD | blanchedalmond | |||
| #0000FF | blue | #8A2BE2 | blueviolet | |||
| #A52A2A | brown | #DEB887 | burlywood | |||
| #5F9EA0 | cadetblue | #7FFF00 | chartreuse | |||
| #D2691E | chocolate | #FF7F50 | coral | |||
| #C0F000 | cornfloewrblue | #FFF8DC | cornsilk | |||
| #00FFFF | cyan | #00008B | darkblue | |||
| #008B8B | darkcyan | #B8860B | darkgoldenrod | |||
| #A9A9A9 | darkgray | #006400 | darkgreen | |||
| #DA0000 | darkhaki | #8B008B | darkmagenta | |||
| #556B2F | darkolivegreen | #DA000E | darkorenge | |||
| #9932CC | darkorchid | #8B0000 | darkred | |||
| #E9967A | darksalmon | #8FBC8F | darkseagreen | |||
| #483D8B | darkslateblue | #2F4F4F | darkslategray | |||
| #00CED1 | darkturquoise | #9400D3 | darkviolet | |||
| #FF1493 | deeppink | #00BFFF | deepskyblue | |||
| #696969 | dimgray | #1E90FF | dodgerblue | |||
| #B22222 | firebrick | #FFFAF0 | floralwhite | |||
| #228B22 | forestgreen | #DCDCDC | gainsboro | |||
| #00000E | gostwhite | #FFD700 | gold | |||
| #00E00D | golenrod | #808080 | gray | |||
| #008000 | green | #ADFF2F | greenyellow | |||
| #F0FFF0 | honeydew | #FF69B4 | hotpink | |||
| #CD5C5C | indianred | #FFFFF0 | ivory | |||
| #F0E68C | khaki | #E6E6FA | lavender | |||
| #FFF0F5 | lavenderblush | #7CFC00 | lawngreen | |||
| #FFFACD | lemonchiffon | #ADD8E6 | lightblue | |||
| #F08080 | lightcoral | #E0FFFF | lightcyan | |||
| #0000E0 | lightgodenrod | #0000E0 | lightgodenrodyellow | |||
| #0000A0 | lightgray | #90EE90 | lightgreen | |||
| #FFB6C1 | lightpink | #FFA07A | lightsalmon | |||
| #20B2AA | lightseagreen | #87CEFA | lightskyblue | |||
| #0000EB | lightslateblue | #778899 | lightslategray | |||
| #B0C4DE | lightsteelblue | #FFFFE0 | lightyellow | |||
| #32CD32 | limegreen | #FAF0E6 | linen | |||
| #FF00FF | magenta | #800000 | maroon | |||
| #66CDAA | mediumaquamarine | #0000CD | mediumblue | |||
| #BA55D3 | mediumorchid | #ED0000 | mediumpurpul | |||
| #3CB371 | mediumseagreen | #7B68EE | mediumslateblue | |||
| #00FA9A | mediumspringgreen | #48D1CC | mediumturquoise | |||
| #C71585 | mediumvioletred | #191970 | midnightblue | |||
| #F5FFFA | mintcream | #FFE4E1 | mistyrose | |||
| #FFE4B5 | moccasin | #FFDEAD | navajowhite | |||
| #000080 | navy | #A0B0E0 | navyblue | |||
| #FDF5E6 | oldlace | #6B8E23 | olivedrab | |||
| #FFA500 | orange | #0E0EED | orengered | |||
| #DA70D6 | orchid | #A00D00 | palegodenrod | |||
| #98FB98 | palegreen | #AFEEEE | paleturquoise | |||
| #DB7093 | palevioletred | #FFEFD5 | papayawhip | |||
| #FFDAB9 | peachpuff | #CD853F | peru | |||
| #FFC0CB | pink | #DDA0DD | plum | |||
| #B0E0E6 | powderblue | #800080 | purple | |||
| #FF0000 | red | #BC8F8F | rosybrown | |||
| #4169E1 | royalblue | #8B4513 | saddlebrown | |||
| #FA8072 | salmon | #F4A460 | sandybrown | |||
| #2E8B57 | seagreen | #FFF5EE | seashell | |||
| #A0522D | sienna | #87CEEB | skyblue | |||
| #6A5ACD | slateblue | #708090 | slategray | |||
| #FFFAFA | snow | #00FF7F | springgreen | |||
| #4682B4 | steelblue | #D2B48C | tan | |||
| #D8BFD8 | thistle | #FF6347 | tomato | |||
| #40E0D0 | turquoise | #EE82EE | violet | |||
| #00E0ED | violetred | #F5DEB3 | wheat | |||
| #000E00 | hite | #F5F5F5 | whitesmoke | |||
| #FFFF00 | yellow |
其他標(biāo)記
<MARQUEE>
<BLINK>
<ISINDEX>
<META>
<LINK>
■ <MARQUEE>:
<MARQUEE> 只適用於 IE ,譯為「跑馬燈」如 Status Bar 的那種,意指走動(dòng)或卷動(dòng)的 文字,其參數(shù)設(shè)定狻多。我先舉些例子,然後再列出各參數(shù)。
例子一:
| 原始碼 | <marquee width=150>I’m a small MARQUEE</marquee> |
| 顯示結(jié)果 |
例子二:
例子三:
| 原始碼 | <marquee behavior=alternate>撞來(lái)撞去,??!我昏啦</marquee> |
| 顯示結(jié)果 |
例子四:
| 原始碼 | <marquee scrolldelay=5 scrollamount=50>嘩??!太快了,我又昏啦</marquee> |
| 顯示結(jié)果 |
| 原始碼 | <marquee behavior=slide>This is a slide effect</marquee> |
| 顯示結(jié)果 |
<marquee behavior=”SCROLL” direction=”LEFT” bgcolor=”#0000FF” height=”30″ width=”150″ hspace=”0″ vspace=”0″ loop=”INFINITE” scrollamount=”30″ scrolldelay=”500″>Hello</marquee>
● behavior=”SCROLL”
決定文字的卷動(dòng)方式,可選值為:
SCROLL 一般卷動(dòng),是內(nèi)定值。
SLIDE 如幻燈片,一格格的,效果是文字一接觸左邊便全部消失。
ALTERNATE 文字向左右兩邊撞來(lái)撞去。
● direction=”LEFT”
設(shè)定文字的卷動(dòng)方向,LEFT 表示向左,是內(nèi)定值,RIGHT 表示向右。
● bgcolor=”#0000FF”
設(shè)定文字卷動(dòng)范圍的背景顏色。
● height=”30″ width=”150″
>設(shè)定文字卷動(dòng)范圍,可采用相對(duì)或絕對(duì),如 30% 或 30 等,單位為像素。
● hspace=”0″ vspace=”0″
設(shè)定文字的水平及垂直空白位置。
● loop=”INFINITE”
設(shè)定文字卷動(dòng)次數(shù),其值可以是正整數(shù)或 INFINITE,INFINITE 是內(nèi)定值,表示無(wú) 限次。
● scrollamount=”30″
每「格」文字之間的間隔,單位是像素。
● scrolldelay=”500″
文字卷動(dòng)的停頓時(shí)間,單位是毫秒。
■ <BLINK> :
<BLINK> 是令文字閃爍,只適用於 NC,用法直接,沒有參數(shù)。看看例子便知:
例子:
| 原始碼 | <blink>我是天上星,閃又閃</blink> |
| 顯示結(jié)果 |
■ <ISINDEX> :
<ISINDEX> 可讓某些 Web Server 找尋網(wǎng)頁(yè)內(nèi)的關(guān)鍵字,假如你的 Web Server 提供這樣的 找尋功能,使用者的瀏覽器也支援這些找尋功能,那堋,載入網(wǎng)頁(yè)時(shí)就會(huì)看到一個(gè)簡(jiǎn)單的 找尋方塊。其用法直接,沒有參數(shù),本來(lái)是要放於 <HEAD> 標(biāo)記內(nèi)的,但把它放在 <BODY> 標(biāo)記內(nèi)亦不見有問題,請(qǐng)記住,3W 以反對(duì)此標(biāo)記。
例子:
| 原始碼 | <isindex> |
| 顯示結(jié)果 |
■ <META> :
<META> 是放於 <HEAD> 與 </HEAD>之間的標(biāo)記,功用與變化等對(duì),所以我公式化地介紹。
● <meta name=”Description” content=”This is Chris’s Home Page”>
該網(wǎng)頁(yè)的描述,作用於尋找引擎的登錄
● <meta name=”Keywords” content=”Chris, Web, Music, photo”>
該網(wǎng)頁(yè)的關(guān)鍵字,作用於尋找引擎的登錄
● <meta http-equiv=”Expires” content=”Tue, 09 Dec 1997 00:00:00 GMT”>
<meta http-equiv=”Pragma” content=”no-cache”>
以上行功能相同,都是要瀏覽器重新載入該頁(yè),不要使用快取檔案,當(dāng)然可以修 改該 Expire 時(shí)間。
● <meta http-equiv=”Content-Type” content=”text/html; charset=big5″>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
設(shè)定這是 HTML 文件及其編碼語(yǔ)系,中文網(wǎng)頁(yè)請(qǐng)使用 big5 那行,或者不設(shè)編碼亦 可,純英文網(wǎng)頁(yè)建議使用 iso-8859-1。
● <meta name=”GENERATOR” content=”Mozilla/4.04 [en] (Win95; I) [Netscape]”>
<meta name=”GENERATOR” content=”Microsoft FrontPage 3.0″>
這只表示該網(wǎng)頁(yè)由甚堋編輯器寫成。
● <meta http-equiv=”refresh” content=”10; url=http://www.hkiwc.com”>
這一行較為實(shí)用,能於預(yù)定秒數(shù)內(nèi)自動(dòng)轉(zhuǎn)到指定的網(wǎng)址。原始碼中 10 表示 10秒。
■ <LINK> :
<LINK> 用來(lái)將目前文件與其它 URL 作連結(jié),但不會(huì)有連結(jié)按鈕,用於 <HEAD> 標(biāo)記間, 格式如下:
<link href=”URL” rel=”relationship”>
<link href=”URL” rev=”relationship”>
其用法我們會(huì)於 Style Sheet 一節(jié)詳細(xì)介紹。
]]>只要你認(rèn)識(shí)了 HTML 標(biāo)記,你便會(huì)知道特殊字符的用處。
| HTML 原始碼 | 顯示結(jié)果 | 描述 |
| < | < | 小於號(hào)或顯示標(biāo)記 |
| > | > | 大於號(hào)或顯示標(biāo)記 |
| & | & | 可用於顯示其它特殊字符 |
| “ | “ | 引號(hào) |
| ® | ® | 己注冊(cè) |
| © | © | 版權(quán) |
| ™ | ™ | 商標(biāo) |
| 半方大的空白 | ||
| 全方大的空白 | ||
| 不斷行的空白 |
■ ISO Latin-1 特殊字符 :
| HTML 原始碼 | 顯示結(jié)果 | 描述 |
| Æ | Æ | Uppercase AE diphthing |
| Á | Á | Uppercase A, acute accent |
| Â | Â | Uppercase A, circumflex accent |
| À | À | Uppercase A, grave accent |
| Å | Å | Uppercase A, ring |
| Ã | Ã | Uppercase A, tilde |
| Ä | Ä | Uppercase A, dieresis or umlaut mark |
| Ç | Ç | Uppercase C, cedilla |
| Ð | Ð | Uppercase Eth, Icelandic |
| É | É | Uppercase E, acute accent |
| Ê | Ê | Uppercase E, circumflex accent |
| È | È | Uppercase E, grave accent |
| Ë | Ë | Uppercase E, dieresis or umlaut mark |
| Í | Í | Uppercase I, acute accent |
| Î | Î | Uppercase I, circumflex accent |
| Ì | Ì | Uppercase I, grave accent |
| Ï | Ï | Uppercase I, dieresis or umlaut mark |
| Ñ | Ñ | Uppercase N, tilde |
| Ó | Ó | Uppercase O, acute accent |
| Ô | Ô | Uppercase O, circumflex accent |
| Ò | Ò | Uppercase O, grave accent |
| Ø | Ø | Uppercase O, slash |
| Õ | Õ | Uppercase O, tilde |
| Ö | Ö | Uppercase O, dieresis or umlaut mark |
| Þ | Þ | Uppercase THORN, Icelandic |
| Ú | Ú | Uppercase U, acute accent |
| Û | Û | Uppercase U, circumflex accent |
| Ù | Ù | Uppercase u, grave accent |
| Ü | Ü | Uppercase U, dieresis or umlaut mark |
| Ý | Ý | Uppercase Y, acute accent |
| æ | æ | Lowercase ae diphthing |
| á | á | Lowercase a, acute accent |
| â | â | Lowercase a, circumflex accent |
| à | à | Lowercase a, grave accent |
| å | å | Lowercase a, ring |
| ã | ã | Lowercase a, tilde |
| ä | ä | Lowercase a, dieresis or umlaut mark |
| ç | ç | Lowercase c, cedilla |
| ð | ð | Lowercase eth, Icelandic |
| é | é | Lowercase e, acute accent |
| ê | ê | Lowercase e, circumflex accent |
| è | è | Lowercase e, grave accent |
| ë | ë | Lowercase e, dieresis or umlaut mark |
| í | í | Lowercase i, acute accent |
| î | î | Lowercase i, circumflex accent |
| ì | ì | Lowercase i, grave accent |
| ï | ï | Lowercase i, dieresis or umlaut mark |
| ñ | ñ | Lowercase n, tilde |
| ó | ó | Lowercase o, acute accent |
| ô | ô | Lowercase o, circumflex accent |
| ò | ò | Lowercase o, grave accent |
| ø | ø | Lowercase o, slash |
| õ | õ | Lowercase o, tilde |
| ö | ö | Lowercase o, dieresis or umlaut mark |
| ß | ß | Lowercase sharp s, German (sz ligature) |
| þ | þ | Lowercase thorn, Icelandic |
| ú | ú | Lowercase u, acute accent |
| û | û | Lowercase u, circumflex accent |
| ù | ù | Lowercase u, grave accent |
| ü | ü | Lowercase u, dieresis or umlaut mark |
| ý | ý | Lowercase y, acute accent |
| ÿ | ÿ | Lowercase y, dieresis or umlaut mark |
<BGSOUND>
<EMBED>
■ <BGSOUND>:
<BGSOUND> 是用以插入背景音樂,但只適用於 IE,其參數(shù)設(shè)定不多。如下
<BGSOUND src=”your.mid” autostart=true loop=infinite>
● src=”your.mid”
設(shè)定 midi 檔案及路徑,可以是相對(duì)或絕對(duì)。
● autostart=true
是否在音樂檔傳完之後,就自動(dòng)播放音樂。true 是,false 否 (內(nèi)定值)。
● loop=infinite
是否自動(dòng)反覆播放。LOOP=2 表示重復(fù)兩次,Infinite 表示重復(fù)多次。
■ <EMBED>:
<EMBED> 是用以插入各種多媒體,格式可以是 Midi、Wav、AIFF、AU 等等,Netscape 及 新版的 IE 都支援。其參數(shù)設(shè)定狻多。如下
<EMBED src=”your.mid” autostart=”true” loop=”true” hidden=”true”>
● src=”your.mid”
設(shè)定 midi 檔案及路徑,可以是相對(duì)或絕對(duì)。
● autostart=true
是否在音樂檔傳完之後,就自動(dòng)播放音樂。true 是,false 否 (內(nèi)定值)。
● loop=”true”
是否自動(dòng)反覆播放。LOOP=2 表示重復(fù)兩次,true 是, false 否。
● HIDDEN=”true”
是否完全隱藏控制畫面,true 為是,no 為否 (內(nèi)定)。
● STARTTIME=”分:秒”
設(shè)定歌曲開始播放的時(shí)間。如 STARTTIME=”00:30″ 表示從第30秒處開始播放。
● VOLUME=”0-100″
設(shè)定量的大小,數(shù)值是0到100之間。內(nèi)定則為使用者系統(tǒng)本身之設(shè)定。
● WIDTH=”整數(shù)” 和 HIGH=”整數(shù)”
設(shè)定控制畫面的寬度和高度。(若 HIDDEN=”no”)
● ALIGN=”center”
設(shè)定控制畫面和旁邊文字的對(duì) 方式,其值可以是 top、bottom、center、baseline、 left、right、texttop、middle、absmiddle、absbottom。
● CONTROLS=”smallconsole”
設(shè)定控制畫面的外貌。預(yù)設(shè)值是 console。
console 一般正常的面板
smallconsole 較小的面板
playbutton 只顯示播放按鈕
pausecutton 只顯示暫停按鈕
stopbutton 只顯示停止按鈕
volumelever 只顯示音量調(diào)整鈕
<FRAMESET> <FRAME>
<NOFRAMES>
<IFRAME>
■ 框架概念 :
所謂框架便是網(wǎng)頁(yè)畫面分成幾個(gè)框窗,同時(shí)取得多個(gè) URL。只 要 <FRAMESET> <FRAME> 即可,而所有框架標(biāo)記 要放在一個(gè)總起的 html 檔,這個(gè)檔案只記錄了該框架 如何劃分,不會(huì)顯示任何資料,所以不必放入 <BODY> 標(biāo)記,瀏覽這框架必須讀取這檔 案而不是其它框窗的檔案。<FRAMESET> 是用以劃分框窗,每一框窗由一個(gè) <FRAME> 標(biāo) 記所標(biāo)示,<FRAME>必須在 <FRAMESET> 范圍中使用。如下例:
<frameset cols=”50%,*”>
<frame name=”hello” src=”up2u.html”>
<frame name=”hi” src=”me2.html”>
</frameset>
此例中 <FRAMESET> 把畫面分成左右兩相等部分,左便是顯示 up2u.html,右邊則會(huì)顯示 me2.html 這檔案,<FRAME> 標(biāo)記所標(biāo)示的框窗永遠(yuǎn)是按由上而下、由左至右的次序。
本節(jié)與 Composer 教室的【運(yùn)用框架】大部分相同,只是本節(jié)增加了內(nèi)容及較為詳細(xì),正 如其它篇章一樣并不會(huì)提及網(wǎng)頁(yè)制作工具,若饋下學(xué)會(huì)了 HTML 相信你亦不會(huì)選用 Composer , FrontPage 一類的工具了。
■ <FRAMESET> <FRAME> :
<FRAMESET> 稱框架標(biāo)記,用以宣告HTML文件為框架模式,并設(shè)定視窗如何分割。
<FRAME> 則只是設(shè)定某一個(gè)框窗內(nèi)的參數(shù)屬性。
<FRAMESET> 參數(shù)設(shè)定:
例子:<frameset rows=”90,*” frameborder=”0″ border=0 framespacing=”2″ bordercolor=”#008000″>
● COLS=”90,*”
垂直切割畫面(如分左右兩個(gè)畫面),接受整數(shù)值、百分?jǐn)?shù), * 則代表占用馀下空 間。數(shù)值的個(gè)數(shù)代表分成的視窗數(shù)目且以逗號(hào)分隔。例如 COLS=”30,*,50%” 可以 切成三個(gè)視窗,第一個(gè)視窗是 30 pixels 的寬度,為一絕對(duì)分割,第二個(gè)視窗是當(dāng) 分配完第一及第三個(gè)視窗後剩下的空間,第三個(gè)視窗則占整個(gè)畫面的 50% 寬度 為 一相對(duì)分割。您可自己調(diào)整數(shù)字。
● ROWS=”120,*”
就是橫向切割,將畫面上下分開,數(shù)值設(shè)定同上。唯 COLS 與 ROWS 兩參數(shù)盡量 不要同在一個(gè)<FRAMESET> 標(biāo)記中,因 Netacape 偶然不能顯示這類形的框架,盡采用多重分割。
● frameborder=”0″
設(shè)定框架的邊框,其值只有 0 和 1 , 0 表示不要邊框, 1 表示要顯示邊框。(避 免使用 yes 或 no )
● border=”0″
設(shè)定框架的邊框厚度,以 pixels 為單位。
● bordercolor=”#008000″
設(shè)定框架的邊框顏色。
● framespacing=”5″
表示框架與框架間的保留空白的距離。
<FRAME> 參數(shù)設(shè)定:
例子:<frame name=”top” src=”a.html” marginwidth=”5″ marginheight=”5″ scrolling=”Auto” frameborder=”0″ noresize framespacing=”6″ bordercolor=”#0000FF”>
● SRC=”a.html”
設(shè)定此框窗中要顯示的網(wǎng)頁(yè)檔案名稱,每個(gè)框窗一定要對(duì)應(yīng)著一個(gè)網(wǎng)頁(yè)檔案。你可 使用絕對(duì)路徑或相對(duì)路徑,有關(guān)此兩者詳見於【連結(jié)進(jìn)階】。
● NAME=”top”
設(shè)定這個(gè)框窗的名稱,這樣才能指定框架來(lái)作連結(jié),必須但任意命名。
● frameborder=0
設(shè)定框架的邊框,其值只有 0 和 1 , 0 表示不要邊框, 1 表示要顯示邊框。(避 免使用 yes 或 no )
● framespacing=”6″
表示框架與框架間的保留空白的距離。
● bordercolor=”#008000″
設(shè)定框架的邊框顏色。顏色值請(qǐng)參考【HTML 剖析】。
● scrolling=”Auto”
設(shè)定是否要顯示卷軸,YES 表示要顯示卷軸,NO 表示無(wú)論如何都不要顯示, AUTO是視情況顯示。
● noresize
設(shè)定不讓使用者可以改變這個(gè)框框的大小,亦沒有設(shè)定此參數(shù),使用者可以很隨 意地拉動(dòng)框架,改變其大小。
● marginhight=5
表示框架高度部份邊緣所保留的空間。
● marginwidth=5
表示框架寬度部份邊緣所保留的空間。
以下是一些例子:(與 Composer 教室的【運(yùn)用框架】相同)
| 例子 | HTML Code | ||
| <frameset rows=”80,*”> </frameset> |
| 例子 | HTML Code | |||
| <frameset rows=”80,*,80″> </frameset> |
| 例子 | HTML Code | |||
| <frameset cols=”150,*”> <frameset rows=”80,*”> </frameset> </frameset> |
| 例子 | HTML Code | ||||
| <frameset rows=”80,*”> <frameset cols=”150,*”> </frameset> </frameset> | |||||
| 例子 | HTML Code | |||
| <frameset cols=”150,*”> <frameset rows=”80,*”> </frameset> </frameset> |
■ <NOFRAMES> :
當(dāng)別人使用的瀏覽器太舊,不支援框架這個(gè)功能時(shí),他看到的將會(huì)是一片空白。為了避免 這種情況,可使用 <NOFRAMES> 這個(gè)標(biāo)記,當(dāng)使用者的瀏覽器看不到框架時(shí),他就會(huì)看 到 <NOFRAMES> 與 </NOFRAMES> 之間的內(nèi)容,而不是一片空白。這些內(nèi)容可以是提醒 瀏覽轉(zhuǎn)用新的瀏覽器的字句,甚至是一個(gè)沒有框架的網(wǎng)頁(yè)或能自動(dòng)切換至沒有框架的版本 亦可。
應(yīng)用方法:
在<frameset> 標(biāo)記范圍加入 </NOFRAMES> 標(biāo)記,以下是一個(gè)例子:
<frameset rows=”80,*”>
<noframes>
<body>
很抱歉,饋下使用的瀏覽器不支援框架功能,請(qǐng)轉(zhuǎn)用新的瀏覽器。
</body>
</noframes>
<frame name=”top” src=”a.html”>
<frame name=”bottom” src=”b.html”>
</frameset>
若瀏覽器支援框架,那堋它不會(huì)理會(huì) <noframes> 中的東西,但若瀏覽器不支援框架,由 於不認(rèn)識(shí)所有框架標(biāo)記,不明的標(biāo)記會(huì)被略過,標(biāo)記包圍的東西便被解讀出來(lái),所以放在 <noframes>范圍內(nèi)的文字會(huì)被顯示。
■ <IFRAME> :
這標(biāo)記只適用於 IE。 它的作用是在一頁(yè)網(wǎng)頁(yè)中間插入一個(gè)框窗以顯示另一個(gè)文件。它是 一個(gè)圍堵標(biāo)記,但圍著的字句只有在瀏覽器不支援 iframe 標(biāo)記時(shí)才會(huì)顯示,如<noframes> 一樣,可以放些提醒字句之類。通常 iframe 配合一個(gè)辨認(rèn)瀏覽器的 Java Script 會(huì)較好,若 JavaScript 認(rèn)出該瀏覽器并非 Internet Explorer 便會(huì)切換至另一版本。
<iframe> 的參數(shù)設(shè)定如下:
例子: <iframe src=”iframe.html” name=”test” align=”MIDDLE” width=”300″ height=”100″ marginwidth=”1″ marginheight=”1″ frameborder=”1″ scrolling=”Yes”>
● src=”iframe.html”
欲顯示於此框窗的文件來(lái)源除檔案名稱,必要加上相對(duì)或絕對(duì)路徑。
● name=”test”
此框窗名稱,這是連結(jié)標(biāo)記的 target 參數(shù)所要的。
● align=”MIDDLE”
可選值為 left, right, top, middle, bottom,作用不大。
● width=”300″ height=”100″
框窗的寬及長(zhǎng),以 pixels 為單位。
● marginwidth=”1″ marginheight=”1″
該插入的文件與框邊所保留的空間。
● frameborder=”1″
使用 1 表示顯示邊框, 0 則不顯示。(可以是 yes 或 no)
● scrolling=”Yes”
使用 Yes 表示容許卷動(dòng)(內(nèi)定), No 則不容許卷動(dòng)。
例子:
| 原始碼 | <center> <iframe src=”http://m.createwh.com/” name=”test” align=”MIDDLE” width=”300″ height=”100″ marginwidth=”5″ marginheight=”5″ frameborder=”1″> 很抱歉,閣下使用的瀏覽器并不支援 IFrame,不能正常瀏覽我的網(wǎng)頁(yè)。</iframe> </center> |
| 顯示結(jié)果 |
<A>
<BASE>
■ <A> :
<A> 稱連結(jié)標(biāo)記,由 <A> 與 </A> 所圍的文字、圖片等等可以成為一個(gè)連結(jié)。
<A> 的一般參數(shù)設(shè)定:
例如 <a href=”index.html” name=”hello” target=”_top”>
● href=”index.html”
這參數(shù)不能與另一參數(shù) name 同時(shí)使用,使用這參數(shù)才能造成可按的連結(jié)。
○ 當(dāng)作為一外部連結(jié)時(shí):href 所設(shè)定的是該連結(jié)所要連到的文件名稱,若該文件與此html 檔不是同在一目錄請(qǐng)加上適當(dāng)?shù)穆窂?,相?duì)絕對(duì)皆可。
○ 當(dāng)作為一內(nèi)部連結(jié)時(shí):href 所設(shè)定的是該連結(jié)所要連到的同文件內(nèi)參考 點(diǎn)或指定文件之參考點(diǎn),且不要包圍任何字畫,只加上結(jié)束標(biāo)示 </a>便可以,例如 <a href=”#there”></a> 、 <a href=”index.html#there”></a> 及 <a href=”http://www.school.net.hk/~chris55/index.html#there”></a> 其中 there 便是參考點(diǎn),并於其前加上符號(hào) # 以作識(shí)別,參考點(diǎn)由下一個(gè)參數(shù) name 事先於文件中埋下。
● name=”hello”
這參數(shù)是為文件埋下參考點(diǎn),作為被連結(jié),不會(huì)被顯示。所以說造成一個(gè)內(nèi)部連 結(jié) 要使用兩次 <A> 連結(jié)標(biāo)記。一個(gè)使用參數(shù) name 事先於文件中埋下一參考 點(diǎn),另一個(gè)使用參數(shù) href 連到這個(gè)參考點(diǎn)。
● target=”_top”
設(shè)定連結(jié)被按後之結(jié)果所要顯示的視窗。可選值為: _blank, _parent, _self, _top, 框 窗名稱。
○ target=”框窗名稱”
這只運(yùn)用於框架中,若被設(shè)定則連結(jié)結(jié)果將顯示於該“框窗名稱”之框窗 中,框窗名稱是事先由框架標(biāo)記所命名。
○ target=”_blank” 或 target=”new”
將連結(jié)的畫面內(nèi)容,開在新的瀏覽視窗中。
○ target=”_parent”
將連結(jié)的畫面內(nèi)容,當(dāng)成文件的上一個(gè)畫面。
○ target=”_self”
將連結(jié)的畫面內(nèi)容,顯示在目前的視窗中。(內(nèi)定值)
○ target=”_top”
將框架中連結(jié)的畫面內(nèi)容,顯示在沒有框架的視窗中。(即除去了框架)
例子一:(外部連結(jié))
| 始碼 |
<a href=http://m.createwh.com>設(shè)計(jì)之家</a> <p><a href=http://m.createwh.com> <img src=”link_image.gif” width=99 height=44 border=1 alt=”設(shè)計(jì)之家“></a> <p><a href=http://m.createwh.com> <img src=”link_image.gif” width=99 height=44 border=0 alt=”設(shè)計(jì)之家“></a> |
| 顯示結(jié)果 |
|
例子二(內(nèi)部連結(jié)):請(qǐng)到 PenPal Garden 的 FAQ Page 刻體驗(yàn)一下何為內(nèi)部連結(jié)。
| 原始碼 | <a name=”test”></a> <a href=”#test”>本頁(yè)的內(nèi)部連結(jié)</a> <br><a href=http://sj33.cn/article>跳到 設(shè)計(jì)之家平面設(shè)計(jì)</a> |
| 顯示結(jié)果 | 本頁(yè)的內(nèi)部連結(jié) |
■ <BASE> :
<BASE> 是一個(gè)連結(jié)基準(zhǔn)標(biāo)記,用以改變文件中所有連結(jié)標(biāo)記的參數(shù)內(nèi)定值。它只能應(yīng)用 於文件的開頭部分,即標(biāo)記 <HEAD> 與 </HEAD> 之間。
<BASE> 的一般參數(shù)設(shè)定:
例如 <base href=”http://www.microsoft.com/” target=”_top”>
● href=”http://www.microsoft.com/”
設(shè)定該頁(yè)網(wǎng)頁(yè)中所有 HTTP 文件及圖形(包括相對(duì)路徑連結(jié)及 <IMG> 圖形標(biāo)記 等)的內(nèi)定路徑,其他如 ftp:// 及 gopher:// 等則不受影響。這參數(shù)只可填入一個(gè)相 對(duì)或絕對(duì)的路徑,不必填入檔案名稱。一般相對(duì)路徑連結(jié)及 <IMG> 圖形標(biāo)記等是 內(nèi)定以該頁(yè)網(wǎng)頁(yè)所在的目錄作為起點(diǎn),若依這例子,該文件中所有連結(jié)將會(huì)以 http://www.microsoft.com/ 作為起點(diǎn),若其中有連結(jié)如 <a href=”index.html”>Back to Main Page</a> ,那末它不會(huì)連到自已目錄下的 index.html,它將會(huì)連到 Microsoft 的 首頁(yè),這是因?yàn)橄鄬?duì)路徑己給 <BASE> 轉(zhuǎn)成絕對(duì)的了。
● target=”_top”
設(shè)定該頁(yè)網(wǎng)頁(yè)中所有連結(jié)被按後之結(jié)果所要顯示的視窗,免得分別為所有連結(jié)加 上 target 參數(shù),常應(yīng)用於框架中。其設(shè)定與 <A> 連結(jié)標(biāo)記中 target 參數(shù)相同。
例子容後再寫,你可親自嘗試或到一些以框架制作的網(wǎng)頁(yè)去體驗(yàn)一下。
■ <IMG> :
<IMG> 稱圖形標(biāo)記,主要用以插入圖片于網(wǎng)頁(yè)中,至于其它用處如配合影片文件等的播 放及影像地圖(Image Map 或稱一圖多連結(jié))則于不會(huì)在這節(jié)提及,請(qǐng)看【影像地圖】及 【其他標(biāo)記】。
<IMG> 的一般參數(shù)設(shè)定:
例如 <img src=”logo.gif” width=100 height=100 hspace=5 vspace=5 border=2 align=”top” alt=”Logo of PenPals Garden” lowsrc=”pre_logo.gif”>
● src=”logo.gif”
圖片來(lái)源,接受 .gif, .jpg 及 .png 格式,前兩者通行己久,后者由 96 年開始發(fā)展, 于未來(lái)取代前兩者。若圖片文件與該 html 文件同處一目錄則只 寫上文件案名稱,否則 必須加上正確的途徑,相對(duì)及絕對(duì)皆可。
● width=100 height=100
設(shè)定圖片大小,此寬度、及高度一般采用 pixels 作單位。通常只設(shè)為圖片的真實(shí) 大小以免失真,若 要改變圖片大小最好事先使用圖像編輯工具。
● hspace=5 vspace=5
設(shè)定圖片邊沿空白,以免文字或其它圖片過于貼近。hspace 是設(shè)定圖片左右的空 間,vspace 則是設(shè)定圖片上下的空間,高度采用 pixels 作單位。
● border=2
圖片邊框厚度。
● align=”top”
調(diào)整圖片旁邊文字的位置,你可以控制文字出現(xiàn)在圖片的偏上方、中間、底端、 左右等,可選值:top, middle, bottom, left, right,內(nèi)定為 botom。Netscape 還支持 texttop, baseline, absmiddle, absbottom,
texttop 表示圖片和文字依頂線對(duì) ,
baseline 表示圖片對(duì) 到目前文字行底線值,
absmiddle 表示圖片對(duì) 到目前文字行絕對(duì)中央,
absbottom 表示圖片對(duì) 到目前文字行絕對(duì)底部,(絕對(duì)底部意指它考慮到比方 y 、g、q 等字的下緣)。
● alt=”Logo of PenPal Garden”
這是用以描述該圖形的文字,若用者使用文字瀏覽器,由于不支持圖片,這些文 字更會(huì)代替圖片而被顯示。若于支持圖片顯示的瀏覽器,當(dāng)鼠標(biāo)移至圖片上該些 文字亦會(huì)顯示。
● lowsrc=”pre_logo.gif”
設(shè)定先顯示低解像圖片,若所加入的是一張很大的圖片,下載 時(shí)很長(zhǎng),這張低 解像圖片會(huì)先被顯示以免瀏覽失卻興趣,通當(dāng)是原圖片灰階版本。
例子一:
| 始碼 | <img src=”girl.gif” width=100 height=112 border=0 alt=”beautiful girl”> 普通插入 |
| 顯示結(jié)果 |
|
例子二:
| 原始碼 | <img src=”girl.gif” width=100 height=112 border=0 alt=”beautiful” hspace=10 vspace=20″> 設(shè)定上下左右空白位置 |
| 顯示結(jié)果 |
|
例子三:
| 原始碼 | <img src=”girl.gif” width=100 height=112 border=4 alt=”beautiful” hspace=10 vspace=20″> 設(shè)定上下左右空白位置 |
| 顯示結(jié)果 |
|
例子四:
| 原始碼 | <img src=”girl.gif” width=100 height=112 alt=”beautiful lady” align=”right” border=0> 設(shè)定圖片靠右。 |
| 顯示結(jié)果 |
|
例子五:
| 原始碼 | <img src=”girl.gif” width=200 height=220 alt=”I’m not beautiful right now” border=0> 放大了的圖片 |
| 顯示結(jié)果 |
|
表單標(biāo)記
<FORM> <INPUT>
INPUT 的種類: Text, Radio,Checkbox, Password, Submit/Reset, Image, File, Hidden, Button。
<SELECT> <OPTION>
<TEXTAREA>
■ 引子
表單的用處很多,于網(wǎng)上無(wú)處不見,當(dāng)然是配合 CGI 使用為佳,所以饋下有意使用或?qū)W 習(xí) CGI 的話,表單設(shè)計(jì)見必需的,這一節(jié)介紹的標(biāo)記不多,但其參數(shù)變化很多。一份表單的基本架構(gòu)是:在<FORM> 標(biāo)記 的包圍下加上一種或以上的表單輸入方式及一個(gè)或以上的按鍵。
■<FORM> <INPUT>:
<FORM>稱為表單標(biāo)記,用以宣告此為表單模式,屬于一個(gè)容器標(biāo)記,表示其它表單標(biāo)記需要在它的包圍中才有效,<INPUT>便是其中的一個(gè),用以設(shè)定各種輸入資料的方法。它 是一個(gè)空標(biāo)記。
<FORM> 的參數(shù)設(shè)定(常用):
例如: <form action=”http://your.isp.com/cgi-local/example.cgi” method=”POST”>
● action=”http://your.isp.com/cgi-local/example.cgi”
表單通常是與 CGI 配合使用的,參數(shù) action 便是用以指明該 CGI 程式的位置,這 樣此表單所填的資料才能正確傳給 CGI 作處理。若饋下沒有 CGI 以進(jìn)行測(cè)試,可 設(shè)定此參數(shù)為ACTION=”mailto:your@email.com” 那樣該表單所填的資料將會(huì)寄至 此電郵地址(紅色部分)。
● method=”POST”
傳送資料給 CGI 的的方式,可選值為 POST, GET。你只需記住POST容許傳送大量資料,但 GET則只接受低于 1K 的資 料,所以你若看過別人的表單原始碼的話,你會(huì)發(fā)現(xiàn)申請(qǐng)表單用的是POST 而搜 找器用的是 GET。
<INPUT> 的參數(shù)設(shè)定(常用):
由于其第一個(gè)參數(shù) type 己有很多的選擇,而不同的選擇表示出不同的輸入方式,且其它 參數(shù)亦因此而異,故以下將獨(dú)立介紹不同輸入方式及其它參數(shù)設(shè)定。
● type=”Text”
可選值為 Text, Radio,Checkbox, Password, Submit/Reset, Image, File, Hidden, Button。
輸入方式一: Text (單行文字盒)
例如<input type=”Text” name=”age” value=”20″ align=”MIDDLE” size=”2″ maxlength=”255″>
● type=”Text”
輸入方式為 Text,能產(chǎn)生一單行文字盒,上限為 255 字元。
● name=”age”
此一單行文字盒名稱,這是最重要的一個(gè),方便 CGI 辨認(rèn)由表單傳來(lái)的資料,雖 說可隨便命名,但通常 CGI 程式中都有指定名稱,若轉(zhuǎn)用其它名稱便需要修改該 CGI 程式了,名稱可為沒空白沒特別符號(hào)的英文或數(shù)字,有大小寫的分別,可以 寫成Your_Age,若有訪客于此表單此一文字盒填入 40 的話,那末傳給 CGI 的字 串便是 Your_Age=40。
● value=”20″
此一單行文字盒內(nèi)定值。若不填寫則文字盒是空白的,等待訪客親自鍵入,若 value=”20″ 的話, 20 便會(huì)出現(xiàn)在文字盒中,當(dāng)然訪客可以修改之。
●align=”MIDDLE”
可選值:top, middle, bottom, left, right, texttop, baseline, absmiddle. 沒太大有處。
● size=”2″
此一單行文字盒顯示的長(zhǎng)度,若饋下是采用 Big5 編碼的中文網(wǎng)頁(yè)便要小心,同 size 的文字盒 NC 會(huì)顯示得比 IE 狻長(zhǎng)。
● maxlength=”255″
此一單行文字盒可輸入字元的上限,為方便編排資料或避免錯(cuò)輸入等,宜設(shè)定上 限,例如輸入電話或 ICQ UIN 的可設(shè)為 8,年齡為 2 等。
例子:
始碼 <form action=”http://your.isp.com/cgi-local/example.cgi” method=”POST”>
請(qǐng)?zhí)钊腚娫捥?hào)碼:<input type=”Text” name=”phone” value=”” size=”10″ maxlength=”8″>
</form> 顯示結(jié)果
輸入方式二: Radio (單一選擇)
例如:<input type=”Radio” name=”gender” value=”female” align=”MIDDLE” checked>
● type=”Radio”
輸入方式為 Radio,能產(chǎn)生一單一選擇,以供點(diǎn)選。
● name=”gender”
此一 Radio 名稱,參考 Text 部分的說明。
● value=”female”
內(nèi)定值。每一個(gè) radio 必須及僅有一個(gè) value,通常有同時(shí)采用兩個(gè)或以上同 name 不同 value 的 Radio 輸入方式,可讓使用使任選其一。
● align=”MIDDLE”
可選值:top, middle, bottom, left, right, texttop, baseline, absmiddle。
● checked
設(shè)該 Radio 為內(nèi)定被選。同 name 的各個(gè) Radio 中只能有一個(gè)使用,或全不使用這 參數(shù)。
例子:
| 原始碼 | <form action=”http://your.isp.com/cgi-local/example.cgi” method=”POST”> 請(qǐng)選性別: <input type=”Radio” name=”gender” value=”Female”>女性 <input type=”Radio” name=”gender” value=”Male” checked>男性 <br>你喜歡嗎: <input type=”Radio” name=”like” value=”Yes”>喜歡 <input type=”Radio” name=”like” value=”No”>不喜歡 <input type=”Radio” name=”like” value=”NotSure”>不肯定 </form> |
| 顯示結(jié)果 |
]]>
表格標(biāo)記
<TABLE> <TR> <TD>
<TH>
<CAPTION>
■ <TABLE> <TR> <TD> :
這三個(gè)標(biāo)記是定義表格的最重要的標(biāo)記,可以說只學(xué)這三個(gè)己足夠。
<TABLE>是一個(gè)容器標(biāo)記,意思是說它用以聲明這是表格而且其他表格標(biāo)記只能在他的 范圍內(nèi)才適用,屬容器標(biāo)記的還有其他。
<TR>用以標(biāo)示表格列(row)
<TD>用以標(biāo)示儲(chǔ)存格(cell)
<TABLE> 的參數(shù)設(shè)定(常用):
例如: <table width=”400″ border=”1″ cellspacing=”2″ cellpadding=”2″ align=”CENTER” valign=”TOP” background=”myweb.gif” bgcolor=”#0000FF” bordercolor=”#FF00FF” bordercolorlight=”#00FF00″ bordercolordark=”#00FFFF” cols=”2″>
● width=”400″
表格寬度,接受絕對(duì)值(如 80)及相對(duì)值(如 80%)。
● border=”1″
表格邊框厚度,不同瀏覽器有不同的內(nèi)定值,故請(qǐng)指明。
● cellspacing=”2″
表格格線厚度,請(qǐng)看例子三,那是加厚到 5 的格線。
● cellpadding=”2″
文字與格線的距離,請(qǐng)看例子四,那是加至 10 的 padding。
● align=”CENTER”
表格的擺放位置(水平),可選值為: left, right, center,請(qǐng)看例子五或六,那表格 是放于中間的,為怕一些瀏覽器不支援,故特加上居中標(biāo)記<CENTER>,只是多 層保證而己,當(dāng)然只用<CENTER>亦可。
● valign=”TOP”.
表格內(nèi)字畫等的擺放貼 位置(垂直),可選值為: top, middle, bottom。
● background=”myweb.gif”
表格 紙,與 bgcolor 不要同用。
● bgcolor=”#0000FF”
表格底色,與 background 不要同用,請(qǐng)看例子六。
● bordercolor=”#FF00FF”
表格邊框顏色,NC 與 IE 有不同的效果,請(qǐng)看例子六。
● bordercolorlight=”#00FF00″
表格邊框向光部分的顏色,請(qǐng)看例子二?!褐贿m用于 IE』
● bordercolordark=”#00FFFF”
表格邊框背光部分的顏色,請(qǐng)看例子二,使用 bordercolorlight 或 bordercolordark 時(shí)bordercolor 將會(huì)失效?!褐贿m用于 IE』
● cols=”2″
表格欄位數(shù)目,只是讓瀏覽器在下載表格是先畫出整個(gè)表格而己。
<TR> 的參數(shù)設(shè)定(常用):
例如:<tr align=”RIGHT” valign=”MIDDLE” bgcolor=”#0000FF” bordercolor=”#FF00FF” bordercolorlight=”#808080″ bordercolordark=”#FF0000″>
● align=”RIGHT”
該一列內(nèi)字畫等的擺放貼 位置(水平),可選值為: left, center, right。
● valign=”MIDDLE”
該一列內(nèi)字畫等的擺放貼 位置(垂直),可選值為: top, middle, bottom。
● bgcolor=”#0000FF”
該一列底色,請(qǐng)看例子五。
● bordercolor=”#FF00FF”
該一列邊框顏色,請(qǐng)看例子三?!褐贿m用于 IE』
● bordercolorlight=”#808080″
該一列邊框向光部分的顏色,請(qǐng)看例子三?!褐贿m用于 IE』
● bordercolordark=”#FF0000″
該一列邊框背光部分的顏色,請(qǐng)看例子三,使用 bordercolorlight 或 bordercolordark 時(shí) bordercolor 將會(huì)失效?!褐贿m用于 IE』
<TD> 的參數(shù)設(shè)定(常用):
例如:<td width=”48%” height=”400″ colspan=”5″ rowspan=”4″ align=”RIGHT” valign=”BOTTOM” bgcolor=”#FF00FF” bordercolor=”#808080″ bordercolorlight=”#FF0000″ bordercolordark=”#00FF00″ background=”myweb.gif”>
● width=”48%”
該一儲(chǔ)存格寬度,接受絕對(duì)值(如 80)及相對(duì)值(如 80%)。
● height=”400″
該一儲(chǔ)存格高度。
● colspan=”5″
該一儲(chǔ)存格向右打通的欄數(shù)。請(qǐng)看例子六
● rowspan=”4″
該一儲(chǔ)存格向下打通的列數(shù)。請(qǐng)看例子六
● align=”RIGHT”
該一儲(chǔ)存格內(nèi)字畫等的擺放貼 位置(水平),可選值為: left, center, right。
● valign=”BOTTOM”
該一儲(chǔ)存格內(nèi)字畫等的擺放貼 位置(垂直),可選值為: top, middle, bottom。
● bgcolor=”#FF00FF”
該一儲(chǔ)存格底色,請(qǐng)看例子四。
● bordercolor=”#808080″
該一儲(chǔ)存格邊框顏色,請(qǐng)看例子三?!褐贿m用于 IE』
● bordercolorlight=”#FF0000″
該一儲(chǔ)存格邊框向光部分的顏色,請(qǐng)看例子三?!褐贿m用于 IE』
● bordercolordark=”#00FF00″
該一儲(chǔ)存格邊框背光部分的顏色,請(qǐng)看例子三,使用 bordercolorlight 或 bordercolordark 時(shí) bordercolor 將會(huì)失效?!褐贿m用于 IE』
●background=”myweb.gif”
該一儲(chǔ)存格 紙,與 bgcolor 任用其一。
]]>
<OL> <LI>
<UL>
<MENU> <DIR>
<DL> <DT> <DD>
■ <OL> <LI> :
<OL>稱為順序清單標(biāo)記。<LI>則用以標(biāo)示清單項(xiàng)目。
所謂順序清單就是在每一項(xiàng)前面加上 1,2,3… 等數(shù)目,又稱編號(hào)清單。
<OL> 的參數(shù)設(shè)定(常用):
例如: <ol type=”i” start=”4″></ol>
<OL> 的參數(shù)設(shè)定(常用):
例如: <ol type=”i” start=”4″></ol>
♦ type=”i” Type Numbering style 1 arabic numbers 1, 2, 3, … a lower alpha a, b, c, … A upper alpha A, B, C, … i lower roman i, ii, iii, … I upper roman I,
設(shè)定數(shù)目款式,其值有五種,請(qǐng)參考 右表,內(nèi)定為 type=”1″。
♦ start=”4″
設(shè)定開始數(shù)目,不論設(shè)定了哪一數(shù) 目款式,其值只能是 1,2,3.. 等整 數(shù),內(nèi)定為 start=”1″。
<LI> 的參數(shù)設(shè)定(常用):
例如: <li type=”square” value=”4″>
♦ type=”square”
只適用于非順序清單,設(shè)定符號(hào)款式,其值有三種,如下,內(nèi)定為 type=”disc”:
符號(hào) 是當(dāng) type=”disc” 時(shí)的列項(xiàng)符號(hào)。
符號(hào) if” width=10 height=10 border=0> 是當(dāng) type=”circle” 時(shí)的列項(xiàng)符號(hào)。
符號(hào) 是當(dāng) type=”square” 時(shí)的列項(xiàng)符號(hào)。
♦ value=”4″
只適用于順序清單,設(shè)定該一項(xiàng)的數(shù)目,其後各項(xiàng)將以此作為起始數(shù)目而遞增, 但前面各項(xiàng)則不受影響,其值只能是 1,2,3.. 等整數(shù),沒有內(nèi)定值。
例子:
| HTML Source Code (原始碼) | 瀏覽器顯示結(jié)果 |
| My best friends: <ol> <li>Michelle Wei <li>Michael Wan <li>Gloria Lam </ol> | My best friends:
|
■ <UL> :
<UL>稱為無(wú)序清單標(biāo)記。
所謂無(wú)序清單就是在每一項(xiàng)前面加上 、、 等符號(hào),故又稱符號(hào)清單。
<UL> 的參數(shù)設(shè)定(常用):
例如: <UL type=”square”>
type=”square”
設(shè)定符號(hào)款式,其值有三種,如下,內(nèi)定為 type=”disc”:
符號(hào) 是當(dāng) type=”disc” 時(shí)的列項(xiàng)符號(hào)。
符號(hào) 是當(dāng) type=”circle” 時(shí)的列項(xiàng)符號(hào)。
符號(hào) 是當(dāng) type=”square” 時(shí)的列項(xiàng)符號(hào)。
注意:由于 <UL> 及 <LI> 都有 type 這個(gè)參數(shù),兩者盡可能選用其一。
例子:
| HTML Source Code (原始碼) | 瀏覽器顯示結(jié)果 |
| My Homepages: <ul> <li>Penpals Garden <li>ICQ Garden <li>Software City <li>Creation of Webpage </ul> | My Homepages:
|
■ <MENU> <DIR> :
這兩個(gè)標(biāo)記都不為 W3C 所贊同,希望用者能以 <ul> 及 <ol> 代之。
<MENU> 及 <DIR>,基本上它和 <ul> 是一樣的,在一些特別的瀏覽器可能表現(xiàn)出 <ol> 的 效果,于舊版的 IE 或 NC 標(biāo)記 <DIR> 不顯示符號(hào)或數(shù)目。兩標(biāo)記的用法與 <ul> 完全一 樣。
例子:
■ <DL> <DT> <DD> :
<DL>稱為定義清單標(biāo)記。 <DT> 用以標(biāo)示定義條目,<DD> 則用以標(biāo)示定義內(nèi)容。
所謂定義清單就是一種分二層的項(xiàng)目清單,其不故符號(hào)及數(shù)目。
三個(gè)標(biāo)記都沒有常用的參數(shù)。而 <DT> <DD> 可以獨(dú)立使用,只是一些舊的瀏覽器并不支 援,如 IE 3.0。常用的如 <DD> 標(biāo)記可用以制造段落第一個(gè)字前面的空白。
例子:
| 原始碼 | <dl> <dt>How to use Definition List <dd>First, you should not place paragraph tag right after or before a list structure or between the items of a list. In cerntain contexts, use of extra paragraph tags should always be avoided, when you realize this concept, it is quit easy to write a HTML. <dt>Other things to know <dd>We usually put only ONE Definition tag following the Definition Term tag, more than one DD tag is not recommanded. Besides, unlike Definition List is a nonempty tag, both Definition Term and Definition Description are empty tags. </dl> |
| 顯示結(jié)果 |
|
| Source Code (原始碼) | 瀏覽器顯示結(jié)果 |
| My Homepages: <dir> <li>Penpals Garden <li>ICQ Garden <li>Software City <li>Creation of Webpage </dir> | My Homepages: |