16 12
发新话题
打印

入门级HTML语言学习教程

9、HTML语言剖析之图形标记/ @' E0 N  {: ^, W
 # M! d2 H3 ?0 S* ]
■ <IMG> :
& ]: |% g& v7 K<IMG> 称图形标记,主要用以插入图片于网页中,至于其它用处如配合影片文件等的播 放及影像地图(Image Map 或称一图多连结)则于不会在这节提及,请看【影像地图】及 【其他标记】。. T  F- C9 {5 Y( i  Z2 j
<IMG> 的一般参数设定:
5 @. @8 r1 f$ N& {+ T* x: F$ ?0 {' N, F% b; a) G% v) y0 r2 ?# C
例如 <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">! A( g4 b+ @7 \+ t2 V7 H3 T+ ]5 C5 v
2 u9 |9 w. ?8 i
src="logo.gif"6 t+ E! S" _6 l* f- `# o
图片来源,接受 .gif, .jpg 及 .png 格式,前两者通行己久,后者由 96 年开始发展, 于未来取代前两者。若图片文件与该 html 文件同处一目录则只 写上文件案名称,否则 必须加上正确的途径,相对及绝对皆可。
4 s" r' M2 C. a7 O) L$ Mwidth=100 height=100" C& J# _! X: I) g3 D' I/ G* ]3 L0 \
设定图片大小,此宽度、及高度一般采用 pixels 作单位。通常只设为图片的真实 大小以免失真,若 要改变图片大小最好事先使用图像编辑工具。
  v8 x, k) x4 l, \- P5 `hspace=5 vspace=57 z8 W7 L! f  W4 H% ?2 {9 v
设定图片边沿空白,以免文字或其它图片过于贴近。hspace 是设定图片左右的空 间,vspace 则是设定图片上下的空间,高度采用 pixels 作单位。2 T% u* Z$ r, B- Z$ b
border=2& w3 O9 Z$ r0 |) M- V5 X6 ^* [
图片边框厚度。
" \% r9 `6 A/ }) j- T) o: g: h" m$ ^) Ialign="top"' Y' `1 p; p" G- f) v( p1 X
调整图片旁边文字的位置,你可以控制文字出现在图片的偏上方、中间、底端、 左右等,可选值:top, middle, bottom, left, right,内定为 botom。Netscape 还支持 texttop, baseline, absmiddle, absbottom,
3 _1 Q& U* y0 s& M5 Q+ Gtexttop 表示图片和文字依顶线对 ,
4 B- ~7 q" D3 _baseline 表示图片对 到目前文字行底线值,
; S* r. n* K, U! zabsmiddle 表示图片对 到目前文字行绝对中央,4 R) h$ e& P7 r# t# D! k- N
absbottom 表示图片对 到目前文字行绝对底部,(绝对底部意指它考虑到比方 y 、g、q 等字的下缘)。
# K7 s7 g" n. \9 ?5 S2 walt="Logo of PenPal Garden"
/ M& k5 }* g+ Y! w5 n9 \' s$ C这是用以描述该图形的文字,若用者使用文字浏览器,由于不支持图片,这些文 字更会代替图片而被显示。若于支持图片显示的浏览器,当鼠标移至图片上该些 文字亦会显示。
7 d) y! ^( o( \lowsrc="pre_logo.gif"9 W, Q8 h: k8 o" n  T7 G( D
设定先显示低解像图片,若所加入的是一张很大的图片,下载 时很长,这张低 解像图片会先被显示以免浏览失却兴趣,通当是原图片灰阶版本。& {) J4 s8 Y% a- M& w
例子一: 原始码 <img src="girl.gif" width=100 height=112 border=0 alt="beautiful girl"> 普通插入  
: S4 \- @1 l( f* i* [显示结果  普通插入  
* D  f/ b: O0 A* {9 R' K) k0 ^+ y# d+ F! e7 b6 z9 y

% H, L  j) U$ ]3 G. v例子二: 原始码 <img src="girl.gif" width=100 height=112 border=0 alt="beautiful" hspace=10 vspace=20"> 设定上下左右空白位置  , d+ H0 s* Q  _% p2 c
显示结果  设定上下左右空白位置  0 Y+ c9 ]1 H7 D! l, I
' z3 @. c5 s& T$ T) M. q& T* h) S7 Z

$ r/ z/ b8 V! U例子三: 原始码 <img src="girl.gif" width=100 height=112 border=4 alt="beautiful" hspace=10 vspace=20"> 设定上下左右空白位置  1 O% f' I8 V7 h
显示结果  设定字画中间对 ,边框厚度为 4。  , ^6 t9 R1 X. {2 C7 L
0 X5 Z0 C- _# Y2 j# h: ]0 E

$ }3 m+ g6 Y, x+ ?/ Q* \& K9 B例子四: 原始码 <img src="girl.gif" width=100 height=112 alt="beautiful lady" align="right" border=0> 设定图片靠右。  
) h4 w0 ]  n6 v$ U' Z# s* T' X显示结果  设定图片靠右。  " p2 G+ Z: `/ `4 q9 D
/ D$ I# y" F" B! l3 g/ Q" p: x

. E+ W: ~0 e- A: h$ D例子五: 原始码 <img src="girl.gif" width=200 height=220 alt="I'm not beautiful right now" border=0> 放大了的图片  
" u2 r3 Q! @5 e8 H  r9 w. S  l$ i2 [显示结果  放大了的图片
为支持本站生存,占用您几秒钟时间,请随手点击本站顶部的Google广告,谢谢~~
Unto thine own self be ture and thou canst not then to any man be false!

珍惜自己的时间就等于珍惜自己的生命
10、HTML语言剖析之链接标记( n: _: s* q$ m0 L& r5 c# B9 N2 y

& T: R: F( `8 ^7 ~<A>) U& [5 ~7 R% ^* m
<BASE>  
, e5 J& p5 X. _■ <A> : ▲Top: D" ^. K& T7 c% Z, }
2 ?0 K( n" z' Y1 [- G3 {( V
<A> 称连结标记,由 <A> 与 </A> 所围的文字、图片等等可以成为一个连结。
3 m8 _4 i: p  \( ~% Q+ i<A> 的一般参数设定:
2 V6 N+ M3 H$ H; i3 G% E% n* P) w- S# e! A9 G) O
例如 <a href="index.html" name="hello" target="_top">
; `% H5 R& A2 ?, n' t+ Q$ R6 v/ N) d, J/ T& I3 A  e. [' \
href="index.html"
4 W9 E2 Y% T- @! U) p+ L, Z& ?3 j这参数不能与另一参数 name 同时使用,使用这参数才能造成可按的连结。: t0 Q- l4 B/ P1 M3 G; c
当作为一外部连结时: href 所设定的是该连结所要连到的文件名称,若 该文件与此 html 档不是同在一目录请加上适当的路径,相对绝对皆可。( }) M. D* V' Y2 g: T  }; T
当作为一内部连结时: href 所设定的是该连结所要连到的同文件内参考 点或指定文件之参考点,且不 要包围任何字画只 加上结束标示 </a>便 可以,例如 <a href="#there"></a> 、 <a href="index.html#there"></a> 及 <a href="http://www.school.net.hk/~chris55/index.html#there"></a> 其中 there 便 是参考点,并 於其前加上符号 # 以作识别,参考点由下一个参数 name 事先於文件中埋下。7 k& n& A7 f0 w4 C( O- u; Q0 ]8 u

9 ]9 U9 B, {$ _- O* Mname="hello"
3 m# `, R  S, V( `3 O- v8 q0 ~# o+ C这参数是为文件埋下参考点,作为被连结,不会被显示。所以说造成一个内部连 结 要使用两次 <A> 连结标记。一个使用参数 name 事先於文件中埋下一参考 点,另一个使用参数 href 连到这个参考点。
3 ]* Q' W) h3 M( Z/ w& ]6 |, M7 S, j4 Q
target="_top"2 o' p& }$ W$ B, ?
设定连结被按後之结果所要显示的视窗。可选值为: _blank, _parent, _self, _top, 框 窗名称。
$ |1 O; H; b$ X- F8 ^
/ U+ d1 n  H& I, C, M/ Xtarget="框窗名称"
1 q  v* ?! c7 ?5 T. I7 V这只运用於框架中,若被设定则连结结果将显示於该“框窗名称”之框窗 中,框窗名称是事先由框架标记所命名。4 g, s+ v! W% j
target="_blank" 或 target="new"5 _: f+ v# n4 U6 j* E  K/ x$ T
将连结的画面内容,开在新的浏览视窗中。
" J8 Z5 p$ y* y/ f: \% mtarget="_parent"
- W  d* g9 K% |. A  H# ^7 l4 u$ V将连结的画面内容,当成文件的上一个画面。
+ [4 F& a6 m, J$ u/ rtarget="_self", Z+ ^" D, g: h2 F, {! [3 q  s/ ]- q
将连结的画面内容,显示在目前的视窗中。(内定值)
2 y) |& I% T5 g* f2 j! k& ztarget="_top"9 J, O' k% {( @7 j! d4 t
将框架中连结的画面内容,显示在没有框架的视窗中。(即除去了框架)
+ r3 P6 J3 D+ C例子一:(外部连结) 原始码 <a href="../promote/engines.html">四百五十个寻找引擎</a>
; k- X5 e6 A( g<p><a href="http://www.hkseek.com/icq">
/ {5 E2 W$ G& H5 f3 I<img src="link_image.gif" width=99 height=44 border=1 alt="ICQ Garden"></a>! E6 c5 F' E# b1 O
<p><a href="http://www.hkseek.com/icq">* J1 K1 x# M, K/ ]
<img src="link_image.gif" width=99 height=44 border=0 alt="ICQ Garden"></a>  
( M/ b" S1 V! Y) C显示结果 四百五十个寻找引擎
+ w* a) G; N: }. \. Z: P& L% O% D5 Y5 D6 P7 P

) ^, Z  w: k' l( i  g% ?9 I/ p5 B+ B& M- o' x

9 U2 y% v4 B  \) }9 J' ]6 ]
8 V/ @3 T% Y; r+ J$ T5 J/ g2 q1 ^1 D' h+ {, c4 X- b3 H  ^
例子二(内部连结):请到 PenPal Garden 的 FAQ Page 刻体验一下何为内部连结。 原始码 <a name="test"></a>
/ y! n& Q; R% i) `: \: h7 I<a href="#test">本页的内部连结</a>
+ r5 H& H1 P: O# w; s* }<br><a href="http://www.school.net.hk/~chi/faq.html#14">跳到 PenPal Garden 的 FAQ 部分</a>  5 S4 Z0 a2 M' T! i
显示结果 本页的内部连结9 J) r- G8 q9 ]* r  E; |9 A! c% z
跳到 PenPal Garden 的 FAQ 部分  4 c) |; h( n: J) O1 M

, ]& u) m" B1 \# t- b* ?: _) v! {+ @3 F- f5 f2 f/ p7 v
■ <BASE> : ▲Top$ }' a6 |! o5 K9 y
2 H& Y9 x& c, Y# p0 ?
<BASE> 是一个连结基准标记,用以改变文件中所有连结标记的参数内定值。它只能应用 於文件的开头部分,即标记 <HEAD> 与 </HEAD> 之间。
8 y5 s, r9 K5 |0 A: W3 h8 B<BASE> 的一般参数设定:2 B! l( `: n% ^% d% N, h' C0 N" v' J2 m
' s6 D. x# z' [
例如 <base href="http://www.microsoft.com/" target="_top">6 A6 ~8 r' W) C0 @; c+ k! I# R2 K
/ N$ h5 j0 O: U0 P0 ^- f! U1 e
href="http://www.microsoft.com/"& x, s$ u# f; m( T/ c
设定该页网页中所有 HTTP 文件及图形(包括相对路径连结及 <IMG> 图形标记 等)的内定路径,其他如 ftp:// 及 gopher:// 等则不受影响。这参数只可填入一个相 对或绝对的路径,不必填入档案名称。一般相对路径连结及 <IMG> 图形标记等是 内定以该页网页所在的目录作为起点,若依这例子,该文件中所有连结将会以 http://www.microsoft.com/ 作为起点,若其中有连结如 <a href="index.html">Back to Main Page</a> ,那末它不会连到自已目录下的 index.html,它将会连到 Microsoft 的 首页,这是因为相对路径己给 <BASE> 转成绝对的了。
! n- s& O5 I1 f3 ttarget="_top"
8 ]& i4 _) o- E6 O8 q; m. g设定该页网页中所有连结被按後之结果所要显示的视窗,免得分别为所有连结加 上 target 参数,常应用於框架中。其设定与 <A> 连结标记中 target 参数相同。
% I3 ]0 D0 D4 f9 C8 x2 c; Y* V& p1 A4 q例子容後再写,你可亲自尝试或到一些以框架制作的网页去体验一下。
为支持本站生存,占用您几秒钟时间,请随手点击本站顶部的Google广告,谢谢~~
Unto thine own self be ture and thou canst not then to any man be false!

珍惜自己的时间就等于珍惜自己的生命
11、HTML语言剖析之多媒体标记
/ n5 Y  L8 y( E/ z! \
$ F" k: R5 t4 {  Y( \4 `<BGSOUND>4 _  b. Q! x2 C+ D9 z
<EMBED>  
: F% B8 c/ ^8 V1 c/ k4 R0 o■ <BGSOUND>:
7 k8 ~7 @! Z1 C" |! I<BGSOUND> 是用以插入背景音乐,但只适用於 IE,其参数设定不多。如下7 m1 [" A. G  D' Z& W
<BGSOUND src="your.mid" autostart=true loop=infinite># U4 Y; u% Z7 X, l- g2 b! M$ x

& C9 c0 Y' j: T1 k1 Jsrc="your.mid"
% m2 p# @  @( [" O/ M; M; E设定 midi 档案及路径,可以是相对或绝对。
& ^* b" V) C+ R7 g- ^$ rautostart=true
% c, [8 ~" k" q9 P! H是否在音乐档传完之後,就自动播放音乐。true 是,false 否 (内定值)。
4 }5 W1 S  C. [loop=infinite
1 y, y" a$ h5 c& w, X" ?% a是否自动反覆播放。LOOP=2 表示重复两次,Infinite 表示重复多次。
( ^& P2 l7 _6 J2 p) ?+ ]7 X( B/ @& L
■ <EMBED>:+ v! z8 P% q5 B
<EMBED> 是用以插入各种多媒体,格式可以是 Midi、Wav、AIFF、AU 等等,Netscape 及 新版的 IE 都支援。其参数设定狻多。如下
% Y+ V8 V. W$ f" M% l<EMBED src="your.mid" autostart="true" loop="true" hidden="true">
8 U2 u5 y8 s' E$ f+ a( D' C7 t7 p" N2 ^' s" J/ j2 B& {8 \, b1 x
src="your.mid", H, H* \! F% V! n- m6 t* c# D
设定 midi 档案及路径,可以是相对或绝对。
+ S& Q% }- V! \autostart=true
4 U8 l& ]0 o  Y; _! V, F是否在音乐档传完之後,就自动播放音乐。true 是,false 否 (内定值)。
+ d9 ^' M9 m6 @$ Jloop="true"+ M& D+ A; M3 I9 p
是否自动反覆播放。LOOP=2 表示重复两次,true 是, false 否。
" D: o+ E5 ~( n$ K3 PHIDDEN="true"9 o, _; [4 r6 X' K# M4 N
是否完全隐藏控制画面,true 为是,no 为否 (内定)。
7 v& q1 X, w) PSTARTTIME="分:秒"
7 ?% w8 n/ f3 ]- A设定歌曲开始播放的时间。如 STARTTIME="00:30" 表示从第30秒处开始播放。: N/ ]2 q) L7 O* Y+ [# Y! n
VOLUME="0-100": z) T6 R* S3 l6 K8 v: N  x
设定量的大小,数值是0到100之间。内定则为使用者系统本身之设定。2 E# H. H  y' Z
WIDTH="整数" 和 HIGH="整数"4 m9 |5 V1 C3 i7 ~' Y: X
设定控制画面的宽度和高度。(若 HIDDEN="no")
" k1 c/ R- T% {4 O  H. {ALIGN="center", K* o/ ^/ [3 s  m6 Y: p9 q2 h4 m! ?8 o
设定控制画面和旁边文字的对 方式,其值可以是 top、bottom、center、baseline、 left、right、texttop、middle、absmiddle、absbottom。  c( X1 p" K' ?, \
CONTROLS="smallconsole"
) a! y7 `9 q4 I  d9 q% j设定控制画面的外貌。预设值是 console。: X- C$ z4 {! J" K: d' {2 g
console 一般正常的面板   0 c; Y6 r9 v  k4 x
smallconsole 较小的面板   6 z, }* H1 P. ?& B7 l3 w* B
playbutton 只显示播放按钮   
) Q* e( T2 Y: |pausecutton 只显示暂停按钮   
" o) ?& M; M0 z, E2 R9 ostopbutton 只显示停止按钮   : \, g, M7 ~- V3 G
volumelever 只显示音量调整钮
为支持本站生存,占用您几秒钟时间,请随手点击本站顶部的Google广告,谢谢~~
Unto thine own self be ture and thou canst not then to any man be false!

珍惜自己的时间就等于珍惜自己的生命
12、HTML语言剖析之其他标记
! g2 Y( U$ Z8 y* y, x& p/ R; n  ~8 ?' J- o1 S& Z5 R
<MARQUEE>8 m3 x" J) u7 w
<BLINK>9 T5 F8 ~1 t3 i# f+ \( F4 _) l
<ISINDEX>0 t1 w. S) K6 G& x- b0 @2 [. P
<META>* w2 ]3 n" K4 X8 ~, p
<LINK>  
0 x/ p$ f# X8 }+ P■ <MARQUEE>:
9 j7 }' c! o9 i<MARQUEE> 只适用於 IE ,译为「跑马灯」如 Status Bar 的那种,意指走动或卷动的 文字,其参数设定狻多。我先举些例子,然後再列出各参数。. B0 F, y3 G" @) N3 D6 ?
例子一: 原始码 <marquee width=150>I'm a small MARQUEE</marquee>  - D, z- d1 _3 R8 q
显示结果 I'm a small MARQUEE
2 Q; S; ?4 a$ X' y8 J6 ^. m5 ?* P' i, b, {

; y0 _; v9 d& r* U例子二: 原始码 <marquee behavior=slide>This is a slide effect</marquee>  
# s; m6 w* b1 G7 ~; ]# h显示结果 This is a slide effect) a! |$ j. B' D) \" s7 t$ K

# t% z0 q) a  `9 i9 i1 Z
( C" m7 `  T& ?' @3 \例子三: 原始码 <marquee behavior=alternate>撞来撞去,啊!我昏啦</marquee>  
3 e9 `" o) ^% Z& a0 a- w$ ^, A显示结果 撞来撞去,啊!我昏啦' S( C" t* K9 r+ E1 ?  t
7 P) c( q7 d  \& a/ S6 t

8 x% \* A$ q! \1 W例子四: 原始码 <marquee scrolldelay=5 scrollamount=50>哗!!太快了,我又昏啦</marquee>  
2 S8 r$ ^" G8 _# V; B3 h7 E显示结果 哗!!太快了,我又昏啦# K. d& X0 b) S9 K7 o
9 d8 g5 {9 f9 J3 E# }
0 N. z6 u' X3 l5 T( ~
<marquee behavior="SCROLL" direction="LEFT" bgcolor="#0000FF" height="30" width="150" hspace="0" vspace="0" loop="INFINITE" scrollamount="30" scrolldelay="500">Hello</marquee>+ N( ~! R. v) D$ h& V) f

3 g: x9 @- K/ \; p) p" W' Y6 @behavior="SCROLL"; O: x$ \8 Y4 j% H, k) u3 g
决定文字的卷动方式,可选值为:2 ~( O0 ^; i& Y1 d
SCROLL 一般卷动,是内定值。5 R+ U% l- b% y" N& p* E% o1 n  Q
SLIDE 如幻灯片,一格格的,效果是文字一接触左边便全部消失。
* x8 x8 X3 g8 X/ [ALTERNATE 文字向左右两边撞来撞去。  J; @" I9 q' l0 p7 T6 H3 r
! T" Y; r) p; x: i! T5 X; l
direction="LEFT"8 R. s9 R8 T2 d+ ^5 ^
设定文字的卷动方向,LEFT 表示向左,是内定值,RIGHT 表示向右。
6 n. S, }. `) I2 V6 H. {/ ]# q& g6 \: F
bgcolor="#0000FF"1 i* k0 Z# L- i) p( B. X
设定文字卷动范围的背景颜色。
" L  w. G2 i! D5 _6 P4 M1 ?1 p. j+ A, Y3 o2 N7 t( u
height="30" width="150"
1 v& b9 x5 Z( g5 U9 ]>设定文字卷动范围,可采用相对或绝对,如 30% 或 30 等,单位为像素。
( D# K: w: {; r* J0 J4 f; r( }0 |* v
hspace="0" vspace="0"7 k( h! g4 c, f0 B& a
设定文字的水平及垂直空白位置。3 f. Y' Y$ G3 H9 t$ S4 c5 ?

, J' T' }: n- q& x) Kloop="INFINITE"
8 d2 V8 y5 p) D设定文字卷动次数,其值可以是正整数或 INFINITE,INFINITE 是内定值,表示无 限次。7 {. ]( E4 R5 j% d' c; r

& i' m, n) I+ P& mscrollamount="30"
+ V& I2 J0 m, Q& Q  C每「格」文字之间的间隔,单位是像素。1 l/ |1 o2 P' X  z7 h
. t. j' ~9 T+ C& @2 |& I
scrolldelay="500") P5 K  w; V( z
文字卷动的停顿时间,单位是毫秒。
; r* r) v: `1 U0 X) p: N% }  q; @5 j& a8 {& a
■ <BLINK> : ▲Top& \; K0 a& u$ y' o
4 U7 _( U( s* X+ I; k, }
<BLINK> 是令文字闪烁,只适用於 NC,用法直接,没有参数。看看例子便知:/ Q* F; b7 p' T+ S
例子: 原始码 <blink>我是天上星,闪又闪</blink>  ' D& {4 g: h* b  Z' p  Q
显示结果 我是天上星,闪又闪  3 R# m( @: l; E; g, e
1 O; ?7 Q# p# ^$ E1 Y) Z+ `

+ Y% K. I# D  e7 d■ <ISINDEX> : ▲Top/ t! k7 i# r! M
8 w$ J% {: D. Z" P8 _7 |
<ISINDEX> 可让某些 Web Server 找寻网页内的关键字,假如你的 Web Server 提供这样的找寻功能,使用者的浏览器也支援这些找寻功能,那堋,载入网页时就会看到一个简单的 找寻方块。其用法直接,没有参数,本来是要放於 <HEAD> 标记内的,但把它放在 <BODY> 标记内亦不见有问题,请记住,3W 以反对此标记。$ ~# X1 }7 ^* Q* |2 P  Q
例子: 原始码 <isindex>  
6 T0 k! M+ b, E* F8 ~显示结果
) a% a3 A* \5 B# G4 m' s5 ~& T* A--------------------------------------------------------------------------------
5 G8 B! n, q/ d& q0 a可以搜索该索引。请键入要搜索的关键字:
: B0 R$ R# o6 x--------------------------------------------------------------------------------
# }2 U1 H5 Y" }3 C$ s
: U) d) t& Q' Z4 f2 i! @9 U" x/ [5 u& u( E8 X! v# s" g* Y5 W4 |
' u9 E4 R- E4 N- s5 V
■ <META> : ▲Top; W, f( {2 U3 O0 h" c2 v

9 m1 T* i* ]/ t<META> 是放於 <HEAD> 与 </HEAD>之间的标记,功用与变化等对,所以我公式化地介 绍。$ _9 F6 B7 V9 J2 [( F
<meta name="Description" content="This is Chris's Home Page">
  n- w% R% J+ ?+ Z  z该网页的描述,作用於寻找引擎的登录
' u+ ]/ I( R3 g5 f
3 n* v/ T3 @! S* }<meta name="Keywords" content="Chris, Web, Music, photo">
  Y9 r# G' x. @% \4 K该网页的关键字,作用於寻找引擎的登录% V: z/ t+ O& v6 b
" _3 O& g( T  n, E3 }) b1 J! d
<meta http-equiv="Expires" content="Tue, 09 Dec 1997 00:00:00 GMT">
+ N2 _$ _& {8 _/ w<meta http-equiv="Pragma" content="no-cache"># C0 s1 v' Q0 w& U' S$ b: u
以上行功能相同,都是要浏览器重新载入该页,不要使用快取档案,当然可以修 改该 Expire 时间。+ [5 ^1 z/ G( {, _1 P( e
6 d7 F7 ]" T8 ?3 M: M& m; r- g
<meta http-equiv="Content-Type" content="text/html; charset=big5">
; C6 d/ i5 v8 ?' u& a<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">9 w% R/ L& m; Q
设定这是 HTML 文件及其编码语系,中文网页请使用 big5 那行,或者不设编码亦 可,纯英文网页建议使用 iso-8859-1。
' G& o8 u2 H- h. s
7 w- G. H+ p0 \) v; F) U& c9 P. p<meta name="GENERATOR" content="Mozilla/4.04 [en] (Win95; I) [Netscape]">
  _: g4 y" V. K<meta name="GENERATOR" content="Microsoft FrontPage 3.0">
+ p) A- ^) N, E7 F0 z, p- v这只表示该网页由甚堋编辑器写成。4 ~. h% n2 s5 d0 Y6 j! L" j! U' f

" ^9 i2 b2 k6 g4 B- |$ j* C$ ?<meta http-equiv="refresh" content="10; url=http://www.hkiwc.com">
, r2 f, i! q( l' m, @这一行较为实用,能於预定秒数内自动转到指定的网址。原始码中 10 表示 10秒。
' n0 k6 `9 G# _; {) A& r9 F
9 J/ N/ l" A/ Q1 X■ <LINK> : ▲Top$ ^$ T( C3 d, g, M
" L+ D; p. W# @5 \8 g; T: M
<LINK> 用来将目前文件与其它 URL 作连结,但不会有连结按钮,用於 <HEAD> 标记间, 格式如下:& j4 w" y( [1 M' V
<link href="URL" rel="relationship">
, M) k6 E* B$ U4 I1 E<link href="URL" rev="relationship">, x$ p; U/ V- \' V/ n
其用法我们会於 Style Sheet 一节详细介绍。
为支持本站生存,占用您几秒钟时间,请随手点击本站顶部的Google广告,谢谢~~
Unto thine own self be ture and thou canst not then to any man be false!

珍惜自己的时间就等于珍惜自己的生命
13、HTML语言剖析之特殊字符

&lt; <
小於号或显示标记
&gt; >
大於号或显示标记
&amp; & 可用於显示其它特殊字符
&quot; " 引号
&reg; ® 己注册
&copy; © 版权
&trade; 商标
&ensp;
半方大的空白
&emsp;
全方大的空白
&nbsp;
不断行的空白
■ iso latin-1 特殊字符 :
&aelig; æ uppercase ae diphthing
&aacute; á uppercase a, acute accent
&acirc; â uppercase a, circumflex accent
&agrave; à uppercase a, grave accent
&aring; å uppercase a, ring
&atilde; ã uppercase a, tilde
&auml; ä uppercase a, dieresis or umlaut mark
&ccedil; ç uppercase c, cedilla
&eth; ð uppercase eth, icelandic
&eacute; é uppercase e, acute accent
&ecirc; ê uppercase e, circumflex accent
&egrave; è uppercase e, grave accent
&euml; ë uppercase e, dieresis or umlaut mark
&iacute; í uppercase i, acute accent
&icirc; î uppercase i, circumflex accent
&igrave; ì uppercase i, grave accent
&iuml; ï uppercase i, dieresis or umlaut mark
&ntilde; ñ uppercase n, tilde
&oacute; ó uppercase o, acute accent
&ocirc; ô uppercase o, circumflex accent
&ograve; ò uppercase o, grave accent
&oslash; ø uppercase o, slash
&otilde; õ uppercase o, tilde
&ouml; ö uppercase o, dieresis or umlaut mark
&thorn; þ uppercase thorn, icelandic
&uacute; ú uppercase u, acute accent
&ucirc; û uppercase u, circumflex accent
&ugrave; ù uppercase u, grave accent
&uuml; ü uppercase u, dieresis or umlaut mark
&yacute; ý uppercase y, acute accent
&aelig; æ lowercase ae diphthing
&aacute; á lowercase a, acute accent
&acirc; â lowercase a, circumflex accent
&agrave; à lowercase a, grave accent
&aring; å lowercase a, ring
&atilde; ã lowercase a, tilde
&auml; ä lowercase a, dieresis or umlaut mark
&ccedil; ç lowercase c, cedilla
&eth; ð lowercase eth, icelandic
&eacute; é lowercase e, acute accent
&ecirc; ê lowercase e, circumflex accent
&egrave; è lowercase e, grave accent
&euml; ë lowercase e, dieresis or umlaut mark
&iacute; í lowercase i, acute accent
&icirc; î lowercase i, circumflex accent
&igrave; ì lowercase i, grave accent
&iuml; ï lowercase i, dieresis or umlaut mark
&ntilde; ñ lowercase n, tilde
&oacute; ó lowercase o, acute accent
&ocirc; ô lowercase o, circumflex accent
&ograve; ò lowercase o, grave accent
&oslash; ø lowercase o, slash
&otilde; õ lowercase o, tilde
&ouml; ö lowercase o, dieresis or umlaut mark
&szlig; ß lowercase sharp s, german (sz ligature)
&thorn; þ lowercase thorn, icelandic
&uacute; ú lowercase u, acute accent
&ucirc; û lowercase u, circumflex accent
&ugrave; ù lowercase u, grave accent
&uuml; ü lowercase u, dieresis or umlaut mark
&yacute; ý lowercase y, acute accent
&yuml; ÿ lowercase y, dieresis or umlaut mark
为支持本站生存,占用您几秒钟时间,请随手点击本站顶部的Google广告,谢谢~~
Unto thine own self be ture and thou canst not then to any man be false!

珍惜自己的时间就等于珍惜自己的生命
14、HTML语言剖析之调色原理8 }$ ^5 a6 A  A: Z1 Q
: |7 G. D1 C, V" R# z
HTML 的颜色表示可分两种:
4 y% x0 i/ w' y以命名方式定义常用的颜色,如 RED。
; B) l7 H9 M: N以 RGB 值表示,如 #FF0000 表示 red。
0 b2 I) I/ h7 j, k# S+ t命名方式涵括的色种不多亦不甚方便,较少采用,以下介绍 RGB 值的原理:
8 K7 m4 n; t) d7 f4 t, X* y: l# M6 E  v: n3 s
众所皆知颜色是由 "red" "green" "blue" 三原色组合而成的,在 HTML 中对於彩度的定义是 采十六进位的,对於三原色 HTML 分别给予两个十六进位去定义,也就是每个原色可有 256 种彩度,故此三原色可混合成一千六佰多万的颜色。! \4 H* c2 W* P

5 E( Z0 ^) W, W1 Q, c  Z) e例如
- ?2 n/ Y9 r! j; ~) W+ a白色的组成是 red=ff, green=ff, blue=ff, RGB 值即为 ffffff
& q$ D; U# k+ `; T' U4 {! S红色的组成是 red=ff, green=00, blue=00, RGB 值即为 ff0000
% G" Z: k% U7 n1 ~; N( u* `1 Z绿色的组成是 red=00, green=ff, blue=00, RGB 值即为 00ff00
% `0 H) j1 }  v: {0 ~% m+ _& z) S蓝色的组成是 red=00, green=00, blue=ff, RGB 值即为 0000ff
/ U) c8 q! Y0 R. @% ]  |黑色的组成是 red=00, green=00, blue=00, RGB 值即为 0000009 z5 F: d, T0 W9 [) @% O9 o
  x! K. S6 n3 b2 b
於应用时常在每个 RGB 值之前加上符号 # 以示分别,但不加亦可。" c7 t( s1 D' c! A( I0 E# K& }1 X/ ?

6 h) N9 K0 @6 C) m4 |1 k■ HTML 基本架构:
: g! D6 [+ D4 i& J4 W1 J# \选按不同颜色按键以测试前景颜色效果 (只适合 Internet Explorer)
2 F. s" y8 u+ E) d2 n                  + D' U: K1 A/ A
选按不同颜色按键以测试背景颜色效果
' m7 A5 n& q$ D! M1 p6 H                  
* r# B0 D7 X: W) I& [9 s, |或输入一个 RGB 颜色码或名称
* F" K# J3 b0 P7 ~8 t" {1 F        r/ I3 _2 O# Q" y

$ |% A  k8 T. c■ 16 常用颜色表:
- l5 a* U# p1 s( H  QColor Value Name   Color Value Name
8 k- a$ \! Y) F( b! U3 Z  #00FFFF aqua     #808080 gray2 `$ @8 M: F9 U- S$ l: U
  #000080 navy     #C0C0C0 silver
; g; b; i5 X6 j8 V" `7 o) M  #000000 black     #008000 green
' ^; I' I7 [- d( ^) X: C  #808000 olive     #008080 teal6 |9 g/ h; `/ A7 a% g
  #0000FF blue     #00FF00 lime0 c9 |8 s  A* l! |# y+ {3 z; B
  #800080 purple     #FFFF00 yellow+ s% x1 o# m5 Q$ [9 [: {
  #FF00FF fuchsia     #800000 maroon4 |; {4 R. f+ V- m1 i7 }
  #FF0000 red     #FFFFFF white( |! ]% s8 p' T: Q% Z4 D
8 l  j9 h% j0 l" V  k
■ 其它常用颜色表:
' w' T/ M$ z3 l  F2 q4 j& rColor Value Name   Color Value Name# _! {3 \' {9 }5 ~* w3 `% I
  #F0F8FF aliceblue     #A00000 antiquewith
7 g" _% q3 b# p. j, v! n  #7FFFD4 aquamarine     #F0FFFF azure9 M1 g  S5 X% K8 c) E! a: D1 q
  #F5F5DC beige     #FFE4C4 bisque
, v- t! h' ~/ G) ~4 Y' r# L  #000000 black     #FFEBCD blanchedalmond
' Q) _. V; `2 I" a" E/ ]  #0000FF blue     #8A2BE2 blueviolet% w. D( W; A3 `, o) z
  #A52A2A brown     #DEB887 burlywood1 r6 t1 J8 ~# s- }, O8 ?
  #5F9EA0 cadetblue     #7FFF00 chartreuse" C" w# C7 P, r) I1 I# `" b
  #D2691E chocolate     #FF7F50 coral# C4 d0 I' R8 W! u* ^
  #C0F000 cornfloewrblue     #FFF8DC cornsilk8 ?8 N4 b9 O; Z5 X+ R
  #00FFFF cyan     #00008B darkblue& I" O. a+ D. s, v# V9 ]
  #008B8B darkcyan     #B8860B darkgoldenrod! Z) a% N6 G$ [8 l" n
  #A9A9A9 darkgray     #006400 darkgreen4 J( u% N) {; Z4 q4 C) E3 E3 M
  #DA0000 darkhaki     #8B008B darkmagenta
( q( Q: j: O+ n  #556B2F darkolivegreen     #DA000E darkorenge: [7 s' G5 z" y3 e7 s6 M
  #9932CC darkorchid     #8B0000 darkred+ [/ G& w. x0 u+ d1 l  P
  #E9967A darksalmon     #8FBC8F darkseagreen
& v/ ~2 Y3 C+ C  #483D8B darkslateblue     #2F4F4F darkslategray3 L1 d7 S3 ~0 C. W6 J' W
  #00CED1 darkturquoise     #9400D3 darkviolet2 x. c7 i* b- e! s" E: ?
  #FF1493 deeppink     #00BFFF deepskyblue# a; x5 k, c. J& o- w2 T* e
  #696969 dimgray     #1E90FF dodgerblue7 F# r( s2 q: }$ C8 f
  #B22222 firebrick     #FFFAF0 floralwhite  X  u$ _) D/ L* @6 M" ]1 v
  #228B22 forestgreen     #DCDCDC gainsboro  Z: p. y$ @. |0 ~0 y& ]- K1 M6 u
  #00000E gostwhite     #FFD700 gold  ^7 {9 F1 |: N8 X1 i
  #00E00D golenrod     #808080 gray+ n/ C+ _3 [6 K3 P/ `
  #008000 green     #ADFF2F greenyellow1 P/ m# |& X) E2 q
  #F0FFF0 honeydew     #FF69B4 hotpink- |" e+ ^) r# V5 K
  #CD5C5C indianred     #FFFFF0 ivory
( e* w- p+ u: F6 e% N: e' @: z( }  #F0E68C khaki     #E6E6FA lavender. }3 p- Z6 g- l. c1 q( U" W5 ^: K
  #FFF0F5 lavenderblush     #7CFC00 lawngreen
6 F$ q7 q# X' v1 b  #FFFACD lemonchiffon     #ADD8E6 lightblue
) @0 o& B$ q7 q6 i2 w" _" a  #F08080 lightcoral     #E0FFFF lightcyan
" P' S7 a7 T, E6 L  #0000E0 lightgodenrod     #0000E0 lightgodenrodyellow
' p5 h" @$ V8 x/ j; y/ j* t  #0000A0 lightgray     #90EE90 lightgreen0 _' U$ y! A; b. a/ E- U! K  S0 [
  #FFB6C1 lightpink     #FFA07A lightsalmon
$ H( i  P  d" O  #20B2AA lightseagreen     #87CEFA lightskyblue
! G, G# _" ^5 _  #0000EB lightslateblue     #778899 lightslategray
/ w( X: A& n: f3 E  z/ K3 ]  #B0C4DE lightsteelblue     #FFFFE0 lightyellow. C! {& H3 d, M. ]
  #32CD32 limegreen     #FAF0E6 linen4 h3 u% ^% z, Z& h6 y' p9 {! Z
  #FF00FF magenta     #800000 maroon2 O8 u4 I( Z( y+ f) k& g8 c$ V4 k
  #66CDAA mediumaquamarine     #0000CD mediumblue9 ], s, H9 A! h% ^% U2 a8 X6 Y
  #BA55D3 mediumorchid     #ED0000 mediumpurpul- e7 a$ |! r- u! }4 F7 N
  #3CB371 mediumseagreen     #7B68EE mediumslateblue
3 ^# t9 E4 S) x+ Y  #00FA9A mediumspringgreen     #48D1CC mediumturquoise2 a: L5 V% @* R6 ]8 W1 r
  #C71585 mediumvioletred     #191970 midnightblue8 @, \4 A( A) X
  #F5FFFA mintcream     #FFE4E1 mistyrose
3 I; }( i: o# J# N' C- q2 w  #FFE4B5 moccasin     #FFDEAD navajowhite
( I' E6 i1 C; V5 v, F! a& B  #000080 navy     #A0B0E0 navyblue
9 E% P* Z; ^- r5 }9 k7 x  #FDF5E6 oldlace     #6B8E23 olivedrab
( E7 P: m  t; ~  M  #FFA500 orange     #0E0EED orengered! h$ U" R, D& K
  #DA70D6 orchid     #A00D00 palegodenrod9 y- [; `4 H+ o
  #98FB98 palegreen     #AFEEEE paleturquoise& X. p% }1 \2 ]% A
  #DB7093 palevioletred     #FFEFD5 papayawhip- `6 X$ o5 ]6 r! X6 B
  #FFDAB9 peachpuff     #CD853F peru, S2 z/ Z1 V$ h; r+ G/ |
  #FFC0CB pink     #DDA0DD plum: z7 C9 }* I1 X6 q' t
  #B0E0E6 powderblue     #800080 purple
5 a9 {& G" W6 {( h) N* S# {4 E. D  #FF0000 red     #BC8F8F rosybrown7 F4 i) U1 X3 @; B
  #4169E1 royalblue     #8B4513 saddlebrown
4 `: R0 B$ c$ K  #FA8072 salmon     #F4A460 sandybrown
# I4 e! p" a- n2 L& a  #2E8B57 seagreen     #FFF5EE seashell3 v5 H2 X% i0 ]6 L- V# Z
  #A0522D sienna     #87CEEB skyblue: c% b' j: d' A9 ]* Z+ w
  #6A5ACD slateblue     #708090 slategray
# y5 m6 F4 p, n; G  #FFFAFA snow     #00FF7F springgreen+ f3 \  S  Y3 A, t
  #4682B4 steelblue     #D2B48C tan/ V# D$ ]2 ~6 y; \
  #D8BFD8 thistle     #FF6347 tomato
* `* I! d$ T# g& {( o; Y6 s  #40E0D0 turquoise     #EE82EE violet
+ W1 {& ?. d# Z4 i* p% Y- _  [6 Z  #00E0ED violetred     #F5DEB3 wheat
# G! D* n4 {2 K  #000E00 hite     #F5F5F5 whitesmoke
% v2 I2 r3 F6 Q& |7 h4 H6 D: b5 @  #FFFF00 yellow     #9ACD32 yellowgreen
为支持本站生存,占用您几秒钟时间,请随手点击本站顶部的Google广告,谢谢~~
Unto thine own self be ture and thou canst not then to any man be false!

珍惜自己的时间就等于珍惜自己的生命
 16 12
发新话题
版块跳转