过期域名预定抢注

 找回密碼
 免费注册

XHTML與CSS入門經典 從零開始系列教程!

[複製鏈接]
發表於 2007-8-25 17:32:55 | 顯示全部樓層 |閱讀模式
1、簡介及入門 ──一開始你所需要做的和創作你的第一個HTML文件
) M5 j/ }5 g( Z2、標籤、屬性和元素──構成HTML的要素
& H* u* Q7 ], ^/ v' A. R3、title文檔標題 ──頁面的標題
" f, Z: B+ D) p% J0 f4、段落──用段落構建你的內容 8 a) f# n- f1 s3 r! x4 y
5、標題h1~h6 ──6個等級的標題 , z! H8 u, K/ s
6、列表──定義有序或無序的列表 8 J4 o4 P0 }$ J4 A
7、鏈接──把東西鏈接起來
- a0 M7 Y8 D7 F; G& n8、圖像──添加一點不是文本的東西5 l/ ]/ e6 K) G9 ]1 a6 C
9、表格table ──使用表格式的數據
, P0 K3 X1 }$ W0 T5 H2 u/ {10、表單form ──文本框和其他由用戶輸入的構件
, @3 L' I4 S% |$ f) `, H11、綜合應用__把上面所有的要素堆積起來

評分

參與人數 1 +5 收起 理由
來生瞳 + 5 精品文章

查看全部評分

 樓主| 發表於 2007-8-25 17:33:18 | 顯示全部樓層
1、簡介及入門 ──一開始你所需要做的和創作你的第一個HTML文件 / k- j- u" b, `& y) P, d7 z

0 {! N" U; b- B  B; s# |8 e這份HTML初級教程假設你沒有任何HTML和CSS的知識背景。
' l* x. n" M& k2 E1 d4 h3 S7 v1 ?! R# _
學習基本的HTML十分容易,只要你能從頭到尾按照每一步驟來實踐。最後我們會將每一步綜合起來,以便我們繼續學習CSS初級指南。! Q$ ]6 W& ]3 j6 o5 _4 J

2 t  ?- `6 c, x8 S4 {. p% G7 q* K/ ?需要記住的是,HTML和CSS是關於內容(HTML)和表現(CSS)的一切。HTML不過是有精美結構的內容罷了,是我們將要在下一步學習的CSS則是用來格式化內容的。# e9 f+ D* O3 v, a7 t

$ u5 f7 X4 x+ Q* b7 h0 d或許你已經留神過其他的HTML的教程,你可能會發現它們提及一些HTMLDog沒有的東西。這是因為許多方法已經過時,不符合標準或者只是平白的壞實踐。從一開始就在腦海中形成「走對的路」的思想最終可以幫助你掌握得更好。
6 m* P/ S- p5 }- q
8 N! l9 Y: z6 Z/ h# L* k* B絕大部分的HTML要素並不比你電腦上的其他要素要難——只不過是一大堆歸類的文件放置在一大堆的文件夾裡面而已。' C3 f* l. z& q3 L1 c/ H7 b$ K

- h- K$ I# s+ V* S! ]1 OHTML文件與簡單的文本文件無異,所以開始編輯HTML你只需要一個簡單的文本編輯器。記事本就是一個例子(在Windows裡可以從程序-〉附件的菜單中找到,如果你使用的是Linux,恭喜你,無論是控制台或者桌面環境,你都有更多更好的選擇,比如控制台的vi以及各種vi變種,GNOME的Gedit,KDE的kate等等——譯者注)。0 i% A% T/ u$ n( I

* s. G# M: N& W+ a2 ~' F[ 本帖最後由 qpyangwu 於 2007-8-25 17:34 編輯 ]
回復 给力 爆菊

使用道具 舉報

 樓主| 發表於 2007-8-25 17:35:07 | 顯示全部樓層
2、標籤、屬性和元素──構成HTML的要素 & n) V/ S8 c& x0 Y
& W; G1 m* C: k
儘管HTML的基礎是純文本,但我們還是需要多一些東西才能使純文本文件變成合法的HTML文件。  i% B* [- _( \6 f

- S4 n, i1 F2 _4 t標籤; k* T/ {- ^: A  E" n; H
$ [: u0 h# ?" K: O6 h; R
HTML基本的構成包含標籤,標籤圍繞著內容,賦予內容某些意義。
' G0 T- f. g8 @+ X. s9 B. A' B% K6 y/ d8 a5 c. T' K" b
按照下面改進你的文件:& u4 K9 {+ X% j/ U6 J

/ V5 w8 u5 H  `- w
: f% P5 S, R7 [: g, E$ j7 {0 G
$ ~8 g  o6 `# F4 \: M9 C7 ]0 ^: ^ Example Source Code [www.cn-webmaster.cn]: d5 v: w4 M4 u6 o/ N$ H3 J
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+ Y6 s; o. L7 R"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
& @4 l& a4 _' b' W8 ?<html># `2 [0 J1 l* F
<body>9 V# Q* L: K$ ]& S) U9 o
這是我的第一個網頁4 U1 e9 m0 l& l* E' p! d
</body>
/ [8 @: Y7 Y2 R# F, T# {9 S: L/ W</html>
- r9 k( L: e: C" x1 ~
. U, z2 p3 t  |' e5 z2 m保存文件,回到瀏覽器界面和選擇「玩新」(這會重新裝載網頁)。
# p/ j" V9 I& F0 g4 J- ]
/ `: Z' w" x0 }網頁的外觀沒有任何改變,HTML的目的是表達內容,而不是表達表現,這個例子現在已經定義了網頁一定的基本元素。& \0 }) Z9 f+ F9 w1 S* w. B) `
9 P" S- a: g7 A4 D
第一行以<!DOCTYPE..開始是為了讓瀏覽器知道你到底要做什麼。你可能還不知道自己在做什麼,但接受它很重要。如果你不這樣做,瀏覽器將用「quirks」(奇怪的)模式來表現你的網頁。現在還不必擔心,當然你需要瞭解或者學習的話可以看看 HTML高級教成的 進一步學習「文檔類型」。當前,只需要記住把這一行放在文件的頂端就可以了。/ A1 a# p- n# O& p8 F
) v$ j5 q6 @, {% e
言歸正傳,<html>是隔開其他內容的起始標籤,它告訴瀏覽器,位於自己與閉合標籤</html>之間的就是是HTML文檔。在<body>和</body>之間的是這個文檔展示在瀏覽器上的主要內容。  h* a& K2 r: I4 u) U

6 W" U& G3 a9 x/ d6 z! ^閉合標籤- [5 W: P$ z( g6 p! E7 W, H
" F" a9 N: X  Q7 q# q& r
</body>和</html>關閉他們各自的標籤。所有的HTML標籤都要關閉。儘管老版本的HTML允許某些標籤不關閉,但最新的標準要求所有的標籤都要關閉。無論如何,閉合標籤是一個好習慣。
) F8 |, y6 Q. S$ \& @* `+ @4 d# f4 G( a0 p2 T
並不是所有的標籤都像<html></html>一樣關閉,有的標籤不用繞在內容外面,它們是自關閉的。比如斷行的的標籤是這樣的:<br />。呆會我們還有這方面的例子。你所需要記住的是,所有的標籤都必須關閉,以及,大部分的內容都在標籤之間,他們的格式是這樣的:起始標籤 - 內容 - 閉合標籤。+ B& r' @# [8 a

0 A8 u% C+ H1 O1 j" F, i0 D屬性
$ t5 D% W3 M/ ^* ?: D7 W9 X9 R/ v6 B9 d* m2 A2 k" a
標籤可以有屬性,包含額外的信息。屬性一般出現在開放標籤中,它們的值總是在引號中。就像這樣:<tag attribute="value">Margarine</tag>。呆會我們會講解帶屬性的標籤。6 @* u* `: p, S
: n! y" V0 F: x, L
元素
: {5 k3 T; r( g! U7 E5 [  A
: \; `9 A- ~1 n9 o/ v除了標記元素的開始與結束,標籤不願再多做些什麼。元素是構建網頁的bits。你可能會說,比如,在<body>和</body>之間的是主體元素,又如,<title>和</title>是標籤,而<title>Rumple Stiltskin</title>則是標題元素。
回復 给力 爆菊

使用道具 舉報

 樓主| 發表於 2007-8-25 17:35:42 | 顯示全部樓層
3、title文檔標題 ──頁面的標題
& I4 E. c* F2 N) Z+ \
2 Q6 d: m( S- [* y; d所有的HTML網頁都應該有文檔標題。
0 _% U% y5 l2 `
  l3 W1 j- Z) I* u) D4 {給你的文檔增加一個標題,按照下面改變你的代碼:
! u) U. x% y$ i/ P
. M: b& R9 P1 V8 K, n- L: d) S. v% b0 S# V

1 A! T& i0 J2 Q Example Source Code [www.cn-webmaster.cn]# Z. s7 X) d8 C( x
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
1 k9 K- z& u% j3 `"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
0 V; n) W- V- u<html>
# G% G  r; R% F: n) N<head>4 g! i) w5 b0 _) w5 T6 g
<title>我的第一個網頁</title>4 c$ Z/ |! C' W8 N, V
</head>8 \/ R6 t/ @7 l0 J! x$ ^' y: |
<body>2 b# q4 \( x2 X) ^. n+ d! Z
我的第一個網頁
) n) _8 f+ c' v8 t/ A# @</body>. P. V5 j( ^7 p: {* ]
</html> 7 C# F4 z4 G( X5 p/ h: F

! i+ Z& L. ~+ F0 ~你可以看到,我們已經增加從<head>標籤和<title>標籤開始的兩個新元素(看看他們是怎麼關閉的)。0 b+ z! ?' O4 J. ~
' S3 ^3 u* r3 s! y& d2 z7 o8 F
頭元素(從起始標籤<head>到閉合標籤</head>之間的內容)出現在主體元素(從起始標籤<body>到閉合標籤</body>之間的內容)之前,包含將在主體元素信息之前裝載的信息。這些信息不會出現在瀏覽器窗口中。
  X( j6 I1 A% U0 v2 ~2 V  A7 Q$ y  \
% w, d  h9 G4 Z" h5 Z' w" o6 W# R% T隨著我們進一步學習,你會看到更多能夠插入頭元素的其它元素,但最重要的還是標題元素。
6 N! W. Q# N- D' `6 ^3 r1 b  k7 X( m6 ^. Q$ H
如果你從瀏覽器查看這個網頁(像前面一樣已經保存和玩新),你可以看到「這是我的第一個網頁」出現在瀏覽器窗口的標題欄。你鍵入的位於標題(title)標籤的文本已經變成了這個文檔的標題,驚奇吧?假設把這個網頁增添到你的收藏夾或者書籤,你會看到標題也會出現在這裡
回復 给力 爆菊

使用道具 舉報

 樓主| 發表於 2007-8-25 17:36:06 | 顯示全部樓層
4、段落──用段落構建你的內容
  _; h7 D7 \9 ]8 s3 Q' @, U, N% A/ o/ E- W9 y1 ?
現在你的HTML文檔已經有了基本的框架,你可以來「胡搞」一陣子其他內容了 " [: l+ N- s. c: r" R
& k9 X, `6 w- B7 P" |; j. e0 m% T7 D
回到記事本,按照下面增加新行:
2 b4 t; x( \; j+ \. m. V9 R: t9 Y& {& z* C$ F: w
9 L# l! }1 A* H

2 N- w) E) `# K! P Example Source Code [www.cn-webmaster.cn]  u" }# f2 p0 Q! R2 D4 }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" * E- o6 c2 }( {
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">" c& b: O$ ?' F" Y$ U: o3 h
<html>
, E. q* Q' O& w6 b! g2 Y<head>
, @1 n" S# y" w% k( u  x<title>我的第一個網頁</title>
4 s) T: Z1 ~3 N, b- F) T# ^" Q</head>. C4 m7 O& K' k% y& {$ x. c
<body>
; k. `/ S; u" ~2 L( K% B5 B這是我的第一個網頁 多令人激動: L) l0 l) W# ~+ e/ Y# B7 N
</body>
# w# Z: {, E, V# i/ I7 K& z% v</html>4 I" r. s2 g. I1 b+ g, A) b3 r

! y& R; X( j) P4 {8 ~7 T2 D接著用瀏覽器查看一下。
4 i' u( q, b8 m0 O) B/ [  h7 K  N3 L# q0 ]* I
你可能期望你的頁面展示出像所你鍵入得一樣格式,分為兩行,但是你會看到:
0 G; a2 k$ g$ F' e
4 X" ~# J' k! Y  G
1 c. e# F. g) g9 Q- S1 f$ u/ r0 c: T Example Source Code [www.cn-webmaster.cn]
  l: K; k; V4 l4 I+ n5 x# L' a, B, j這是我的第一個網頁多令人激動& T6 N& G: h/ r: q" M

$ s2 u/ {* t2 G6 _$ h  P" q9 s這是因為瀏覽器不會關注你的代碼是怎麼寫的,也絲毫不關心空格(就算你鍵入「這是我的第一個網頁    多令人激動」,結果還是是一樣的)。' _9 |7 P/ T2 f9 p& d: _) R; ^. L) N

2 b7 J% t: j. e- q! t1 v3 \要文本以不同的行來顯示,你必須明確地指出。3 \& T! B9 d9 C1 Y" `; a* }! N

/ }- C# M% t0 W5 x1 d4 w7 N按照下面改進你的代碼:& m$ B  i  ~" q( f5 Z4 E: }

" @; p% V8 V- q* J9 k6 A3 S* ^- o! `+ _, ^  k9 q+ q! U. M- E
Example Source Code [www.cn-webmaster.cn]6 @) f& Y& K9 V6 T5 {
<p>這是我的第一個網頁</p>% x: `* f: ?* J+ l9 ~9 w2 M
<p>多令人激動</p>; r- U- }% \" A  F3 C1 _& u2 O6 x
5 K7 G0 m6 H) z, P
p標籤代表paragraph,即段落。0 \9 V) i# ?9 V# ^2 [

) _  s% @( K. X( i4 ~& M& k# J3 x查看結果,這兩行終究以兩行來顯示。cn-webmaster.cn8 l& a$ O' k7 _
$ Z' w0 o4 H8 s7 Z3 f
HTML文檔的內容應該跟書籍或者文章一樣,在適當的地方應該劃分段落。
0 d" n  x: y" x4 E1 D/ p% b' p7 H/ Z! t( b, u# t! v+ [' _0 n
強調- E  o- M/ Z3 Y6 G/ z3 D
8 b) A2 R. W6 y. v- }* b
在段落中你可以用em標籤和strong標籤來強調突出文本。它們都做幾乎相同的事,儘管傳統上瀏覽器會以斜體來顯示em,以粗體來顯示strong。- Y9 x8 ?# C7 b  b
3 g; \5 ?9 A. A+ W4 [) e3 I
* O0 r. ~( E/ ]3 m1 X* X: S" O
Example Source Code [www.cn-webmaster.cn]8 ]4 C  X* U3 C8 ?2 L
<p>是的, 那個 <em>就是</em> 我要說的。 <strong>多</strong>令人激動</p> ; L( x1 a5 j* c$ o& R; Q8 w3 P
, [+ O3 P3 y, K% T9 ^7 P
換行0 f" \% C, z1 a& j/ r" q0 i0 c

9 f- v" j" m- c( J- N0 q& \2 H換行標籤可以用來打斷成兩行,像下面:) q4 \% s8 d  `- h  z
5 q- b' s  G# O# N. x
, k: P$ R- |7 I) t
Example Source Code [www.cn-webmaster.cn]( ?, R! Q8 @6 @6 M
這是我的第一個網頁<br /> 多令人激動 * p: T* X* m* D' o$ K8 d1 }
$ y, Z; w7 u1 \) P- A
但是,這個方法已經嚴重被濫用來劃分段落,它不應該使用在預計分段的兩段文本中。(是什麼結構,該用什麼標籤就用什麼標籤,不是為斷行而分段或者為分段而斷行——譯者注)& t$ C, I( N$ o/ [4 i2 O
& P; h5 y8 e! d6 O$ r
(因為沒有任何東西在換行標籤之間,所以沒有閉合標籤,它是用「/」在br後自閉合的。)
回復 给力 爆菊

使用道具 舉報

 樓主| 發表於 2007-8-25 17:36:28 | 顯示全部樓層
5、標題h1~h6 ──6個等級的標題
/ R; ?7 V. r4 ?7 p" b( |* V6 d9 \. ~
段落標籤是格式化文本的開始。# j9 o. B7 r4 U+ Z( O. l4 ^

/ C$ U) g  E! m# I( r# g1 xHTML標籤有專門的標籤處理你頁面上的標題。
! w- ~. q3 H: J7 K* J' m( l. m: C9 _
它們是h1,h2,h3,h4,h5和h6,像封建社會一樣,h1就是萬能的君主而h6就是最底層的百姓。
  G* l6 H# Y8 C& L  ?
! j6 c% T& A3 [按照下面改進你的代碼:' \- k& V2 Z8 _- I
4 e  N# p, Z& r) `) {
! D) ]/ V4 n# c* R$ {& N

: M0 l% I' {) M& N8 b' C8 ] Example Source Code [www.cn-webmaster.cn]
4 J& [, a. t5 q* s; T; [<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" $ N; t1 C- j* I$ e: s5 L2 V
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">8 ]. `( M0 }. E3 H! |5 J
<html>+ D3 ]0 T+ [8 A5 O
<head>7 ~3 b2 l3 a9 w1 j7 \
<title>我的第一個網頁</title>0 ~6 o, U/ e- [
</head>
" W9 |9 c% e9 D  w7 S<body>) G' W: v) R, o; P# N7 b' }% {
<h1>我的第一個網頁</h1>
0 N0 B$ _5 D6 K; b! h4 P! @<h2>這是什麼</h2>: f" x/ E/ c/ z9 K- Z1 A* k
<p>用HTML組合起來的簡單網頁</p>) T& m0 B. h" W! }; N( r* C3 d
<h2>目的</h2>2 S2 f- {4 l5 X
<p>學習HTML</p>/ N0 q# y  ?1 l6 i; w1 E
</body>$ m4 [& D0 b- e- J/ W- V: V
</html> 1 h' U% |5 {! P+ |

; P9 b/ M' G# i: W5 D: E注意,h1標籤在一個頁面只能使用一次——假定它是這個頁面的主標題,是不應該使用多次的(相當於一篇文章的題目,你可以有一個副題目,但你不會使用兩個並列的題目吧?——譯者注)。6 J5 b* B4 f) `& v; u' j: ?
) C6 m- y, \" P$ c9 ^; O8 v
但是,h2到h6可以如你所需任意使用多次,但它們應依設計意圖,該按順序使用。比如,h4應該是h3的子標題,h3應該是h2的子標題,以此類推
回復 给力 爆菊

使用道具 舉報

 樓主| 發表於 2007-8-25 17:36:51 | 顯示全部樓層
6、列表──定義有序或無序的列表
1 d5 X1 ], F8 q; M8 R- ~& Y, i/ p' G7 _
" E; e4 Z$ w3 u0 ?" V
有三種類型的列表:無序、有序和定義列表。首先我們來學習前兩種,在HTML中級指南中學習定義列表。
- A9 r& H, R, t& U4 V+ T8 k" x" x: x6 Q' Q, U7 F
為你的代碼增加以下東西:$ L9 ?" z! a- Z5 }) I8 I" x; i; o

' Q/ n# Y' f  K+ Y
# I2 C- _, t9 I. ^5 q( l3 h
  y! U* w4 Z1 Q, q Example Source Code [www.cn-webmaster.cn]
5 m2 C1 B: w8 E3 D<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 6 ?% F2 ]' u% j3 V$ }& n4 K# i
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">( |  t$ Z$ ^; h% T( D& W" C
<html>
/ [2 w0 f9 i0 S( n: i7 T<head>
9 B! X  U( S* P3 P: B; u$ l<title>我的第一個網頁</title>
$ R2 l( k! z% }* Z6 a3 x</head>
) n9 [! x+ L- K+ v$ X<body>/ b: l$ q& q  G. U) {  x5 h9 t
<h1>我的第一個網頁</h1>" u* T$ m) P2 b1 O& \& M! F, ]
<h2>這是什麼</h2>! P/ ^+ n3 h' h+ J" D
<p>用HTML組合起來的簡單網頁</p>
1 j/ [/ u6 N4 y  w1 v<h2>目的</h2>
( e! f. m3 k" M: T. I<ul>
8 w7 M* W- F* l$ o/ [ <li>學習HTML</li>/ g9 w& ]* e- w7 P
<li>顯擺,炫耀</li>  \1 L- F7 Z9 H$ B
<li>因為我已經愛上了我的電腦,我想給她點HTML愛情調料。</li>0 s, H( Q( X$ b- F
</ul>$ v5 I6 `& ?0 H* H! K
</body>$ c: R) T) T4 O. e4 ]: _! t* _
</html> 7 T) Q9 P' v/ l/ ~

3 H) C- q) }  P1 S" I在瀏覽器中查看,你會看到有項目符號(比如方塊)的列表。把ul改成ol後項目符號會變成編號,字母的或者數字的。
. r, G( @  A# h" j9 W* i& o( [  Y+ x+ s" H! e3 I4 d9 r. Z$ Q$ |
列表裡當然可以包含列表,形成有等級層次的嵌套列表。
4 f4 S! Z( a( q+ c
5 p0 b$ ]% l: D9 X4 D4 J用下面的代碼代替:: l; ?6 r+ Z" \1 m
  e% D5 t' W! U* r  B5 S
% q: s1 T; t+ D+ E
Example Source Code [www.cn-webmaster.cn]8 y8 u1 K0 r; P0 f" b! I& w
<ul>  W& Z, J+ S* s) D4 o5 [% k, _: X
<li>學習HTML</li>1 K0 ^- E* M2 C* _: I
<li> 顯擺,炫耀   m* p7 D- d6 J, ?
<ol>/ }  D3 Z, Y0 G! l" X$ `2 F
    <li>向老闆</li>% H6 s8 G9 q5 E' K& O2 T
    <li>向朋友</li>
/ \2 i9 y; s+ _# b    <li>向我的小貓</li>
4 A8 j/ z; g: w4 X" V    <li>給我腦中多嘴的小鴨子</li>
; k2 J6 O& x5 n/ n, f* t9 ?2 c </ol></li>: X" a, n  T  V# X2 |1 }( ]- T; O
<li>因為我已經愛上了我的電腦,我想給她點HTML愛情調料。</li>7 s. |6 O! u7 c+ I; q
</ul>7 z6 A( ~$ U& n! }+ H
: L+ J$ \6 e' T0 o$ A' `8 u, h$ q) O8 E2 q
Ay vwah lah。列表裡面包含著列表。你可以在這裡包含更多的列表,還可以在那裡包含更多的列表,等等等等.
回復 给力 爆菊

使用道具 舉報

 樓主| 發表於 2007-8-25 17:37:14 | 顯示全部樓層
7、鏈接──把東西鏈接起來
  g4 J. m' U, K3 Y" ^
4 }' r! k0 {3 k: O, n$ Q5 k
! N6 R* ~6 v7 B1 f5 c現在你已經創建了一個獨立的網頁,所有的都顯得不錯。使因特網顯得特別的,是因為它把所有東西都連接起來了。" T/ @. ^& L8 g9 R
2 G3 o# Y+ o: B4 K) d$ I" s, v
HTML中的H和T代表HyperText,即超文本,表示著一個由連接文本所構成的系統。% `& q2 Z* Q% ^9 v) \
0 p# F4 r8 N3 D. M
錨標籤a用來定義一個連接,但是還是需要為錨標籤增添其他的東西──連接目標。& `, ]2 ?: }$ I% h( a/ Q: j
# x. ?- B$ Y4 t0 u
為你的代碼增加以下東西:
1 a5 E  t4 ]6 P) d- e$ m1 d. h
3 Q, d% r: Q) \1 M: b
: H  o+ e$ ?9 J$ t# q! Q* p! ~8 V: r
Example Source Code [www.cn-webmaster.cn]* H1 U; I1 M0 [% v/ V7 s
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
/ w: U; v/ T1 t8 Z. y"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
6 W5 o6 r6 [3 [<html>  F. Q. o) b2 V/ c5 z9 C$ M3 K
<head>
. _; C7 S! m; u+ x# h/ S. Q" a<title>我的第一個網頁</title>
3 ?' L/ D. t* c' k! c2 r4 M</head>& W2 {' T( ?9 H" d  \5 |8 s5 r" C
<body>
% v; E+ v! q) Z: Y: x* E) n <h1>我的第一個網頁</h1>
' Q/ ^4 K' M$ j) X# b2 \8 H0 \$ \8 ~- a <h2>這是什麼</h2>
7 E( j% j, h! O* M: W, ~ <p>用HTML組合起來的簡單網頁</p>
2 y  C' O- t5 z <h2>目的</h2>& `- \2 F# x/ d, |( \4 ^) M8 v
<p>學習HTML</p>
# M' _  ^, U+ q8 N+ M; ?1 g <h2>在哪裡尋找教程</h2>$ t8 m8 j  C5 q6 }. {1 A7 s1 u4 ~' p
<p><a href="http://www.google.com">Google</a></p>
# ]5 }' o0 n" b7 b5 K9 E</body>
6 M7 n% D& {$ K</html>
- m8 _+ H; v" R1 W  Z# [: \' |, @7 K3 o5 T% w8 n
連接的目標用href屬性來定義。連接可以是絕對的,比如http://www.htmldog.com,也可以是相對的,相對於當前頁面來說。
+ N& p" z- t* [# H" R, |$ y1 e5 p3 B0 V) L1 g
所以,假設你有另外一個HTML文檔「flyingmoss.html」,其中一行代碼可以寫成<a href="flyingmoss.html">The miracle of moss in flight</a> ,諸如此類。
) D% B; u+ }5 o- K1 P( {1 U( Q) m9 s2 \( P( P* f& _6 N; h/ S0 M& y" j
連接不僅可以連接到其他的HTML文檔,也可以連接到頁面上的其他文件。
9 F2 u/ K0 r4 k7 J- U" ~" j( I
/ \+ b+ Z$ p! _0 I- }連接還可以轉到頁面的其他部分。你可以給幾乎所有的標籤增加id屬性,比如<h2 id="moss">Moss</h2>,然後連接到它,像是這樣做:<a href="#moss">Go to moss</a>,點擊這個連接會直接滾動到帶有這個id的元素。* e! x9 T, g! j

) I' R! J5 V2 D6 N( `注意
, m* g  i7 G: T% [  \. a7 [8 k* Z  z- B+ c4 c  ~0 V8 c

& G# q- ]. b% \6 K  i Example Source Code [www.cn-webmaster.cn]: H0 i- _! w9 m/ ^( @. P
a標籤允許你為連接打開新窗口,而不是取代當前窗口,初聽起來似乎是一個不錯的主意,因為它不會讓用戶離開你的頁面。5 c; `/ k7 G/ ]: V* F' H
# j/ {- B: H+ l( d! k+ L
但是,有很多理由證明,你不應該這樣做。
+ ]/ k, X7 @1 p6 [; t
) ?) F) k+ Y# m5 x: P4 J從易用性的觀點來看,這種方法破壞導航。最常用的導航玩具是瀏覽器上的「後退」,打開新窗口使這個功能失去了作用。+ d7 i: s0 i8 y: |6 k

& t& J% Q( k% x" u7 i9 _更廣泛地,還是從易用的觀點來看,用戶不需要到處都是彈出的新窗口。如果用戶需要打開新窗口,他們有權利(是的,有權利。不要強行干涉別人意志,不是很好嗎?在一般情況下,建議你盡量不要使用新窗口——譯者注)讓自己來控制。
回復 给力 爆菊

使用道具 舉報

 樓主| 發表於 2007-8-25 17:37:36 | 顯示全部樓層
8、圖像──添加一點不是文本的東西
+ [, I& o9 U9 T% m9 C9 B/ I- p# l) i+ |: h3 o% o' d1 V! R6 j5 I
9 c% b: v2 z0 k+ W7 T( m# ~
都是文本的話看起來讓人感到乏味和無聊,自然,網頁不應該僅僅是文本而已(呵呵,對於一些技術性的文檔,我想,文本就已經嚴重足夠了——譯者注),它是多媒體的,最常見的形式就是圖像。
4 A- L2 v3 e. y: p0 n3 O
& R- h- C! l$ |) P: }4 T6 R4 s8 ?! L圖像標籤img用來為HTML添加圖像,像下面這樣改進你的代碼:
- ], v3 s* R$ N! J9 Y+ N, d8 p, x9 ^& Z" M, u6 ~
# U# `9 C9 ^$ f

1 n$ t( ?- g6 j" i: F Example Source Code [www.cn-webmaster.cn]: n+ n+ r% y7 ^5 y# K
<img src="http://www.yourdomain.com/logo.gif" width="88" height="31" alt="mysite logo" />
9 B1 {+ e- [  M $ R2 u2 M: t# K) }9 k$ q
src屬性告訴瀏覽器圖像的地址。就像a標籤一樣,它可以是絕對的,如示範所示,但更多時候它是相對的。比如,你擁有自己的圖像且已經另存為alienpie.jpg放置在images文件夾下,代碼可以這樣寫<img src="images/alienpie.jpg"...
+ z! t7 g. s( |8 m8 o1 U" P
4 B) G4 Z7 A" H. O, U% Z  m長度屬性width和高度屬性height是必需的(Zeldman的「惡名昭著」的《Designing with Web Standards》(中文版《網站重構——應用Web標準進行設計》已經出版,推薦翻譯者之一的著名設計師ajie的網站網頁設計師,你要是沒有訪問過,趕緊去,保準你收穫不小!)中說,width和height不是必須的,這可以節省帶寬。平時做網頁我也不喜歡用這兩個屬性。——譯者注),因為瀏覽器在下載過程中能夠計算出圖像佔據的空間,否則瀏覽器可能會產生一個頁面的跳躍,因為事先並不知道圖像要佔用多少空間,以致於破壞頁面佈局。1 V# G$ \" ?  b1 d7 f9 D/ w- c

+ k) I2 X! F; t2 C- Nalt屬性表示可替代的描述。這是為不能或者不選擇圖像顯示的客戶端著想(比如終端瀏覽器lynx,不能顯示圖片,但可顯示alt中的文本。最壞的情況是,你寫錯了圖片的文件名或者路徑,即使在圖形瀏覽器中圖片顯示不出,但仍可顯示出alt中的文本,不會讓訪問者造成不必要的誤解。什麼情況下我們都推薦你,一定記得使用alt。——譯者注)。在最新版本的HTML版本中,這是不可缺少的屬性。, ^  b: u% O. W+ C6 S8 {4 K

' ?' i/ H% q3 j! J1 k! [; B' M注意
: z- E# u  P% _+ `6 I; l4 q1 k) q9 ?* Z! M7 |; e

" r# e& T: {# o" p9 W+ b. A Example Source Code [www.cn-webmaster.cn]
$ N' W# e6 [# h5 `5 s給網頁創做圖像雖然不是本站的主題,但我們還是有一些對你有用的東西要說。0 U- C# W' g( q) u. i# c9 L
經常被用到的圖像格式是GIF和JPEG。他們都是壓縮過的格式,有各自十分不同的用途。- B1 j# g1 g3 r7 w+ {3 c
GIF圖像不超過256色,但可以保持原有圖像的色彩。色數越低,圖像文件就越小。& z- D5 X' s$ p' ]
GIF應該用在有純質顏色的圖像上。
7 b4 ^; U6 r( fJPEG使用十分精確的算法來壓縮圖像,對原圖像有些微的改變。壓縮程度越低,圖像文件越大,從而圖像更清晰。# A. |- B7 F) H6 ~+ x! \/ G/ x
JPEG應該使用在要逼真描繪的諸如攝影的圖像上。
/ }0 l: g2 l. Q4 u& ]; s網頁設計初學者需要處理的文件可能就是圖像文件了,忽視圖像過大是初學者常犯的錯誤。網頁下載應該盡可能快,想想看,一個使用少於7kb每秒的Modem聯網的人要用多少時間來下載你的整個頁面。
' G2 G6 B6 V7 d! C, j& l7 t% V' f5 {你必須在圖像質量和圖像文件大小之間作出選擇。許多現代的圖像處理軟件允許用最佳方式壓縮圖像,但同樣是一個冒險,或者產生錯誤。9 K, `( p! c* {5 Z/ y- h, [- L
譯者有話說:顯然,現在還沒有誰推薦PNG格式的圖像,可能只因為IE對其糟糕的支持。GIF到目前為止還沒有解決專利問題,使用它還是得冒侵權之危險。PNG很有潛力,同樣也具有透明能力,色數也不止GIF的可憐的256色而已,卻具有JPEG的高清晰、高保真度,這也是我,以個人的立場向你推薦的原因。
4 s. h7 A/ m% @, t3 n9 ^6 I: w* M/ z; s請參考GIF還是PNG.
回復 给力 爆菊

使用道具 舉報

 樓主| 發表於 2007-8-25 17:38:11 | 顯示全部樓層
9、表格table ──使用表格式的數據
7 ?% N5 K+ k3 P$ r) J. t% M9 f* _4 d4 I3 S* c: c8 A9 |
漫步萬維網世界,有多少HTML表格被用來佈局頁面,還一度被濫用。我們會在 CSS高級教程中學習怎樣不用表格佈局頁面。表格的正確用處應該是,展示表格式的數據。
; b* c5 c* n' P: D' o9 H) z/ c; v" O; g6 {# R2 p+ C
有很多標籤可以用在表格中,在初級指南中教授表格是如何工作的確實是一件比較困難的事情,沒有關係,我們一步一步來,先來看一個例子。例子什麼時候都是學習的好方法。8 j* |( ?/ A) k, n) f7 T

' m9 a! f6 @+ Y; _' g/ r" m. l' N* k把下面的代碼拷貝到你文檔的主體(<body>與</body>中),我們就可以明細每個標籤是任何工作的了。# o7 ~! g) w9 Z: E
- g5 {3 n# p) N2 k# N

. I; Y; G- g# [: E% Q; n
6 P0 ~# r, G# x* i Example Source Code [www.cn-webmaster.cn]
4 t+ h! E  E% x2 h: G: F- {8 B1 t& k7 }<table>
# W: \! o  h) C<tr>, e2 c/ f& F1 G. b/ P  u# }5 x
<td>Row 1, cell 1</td>
  {) G, D  W3 M& v<td>Row 1, cell 2</td>
' L/ u' Z( e0 w* x' \/ I, E<td>Row 1, cell 3</td>
. j4 Q. r5 ?0 H+ ?  G</tr>
5 K4 A( Y. W: B+ Y( D<tr>
) N) m$ Q) t1 u1 q<td>Row 2, cell 1</td>
0 i# N& I3 m+ Z) i3 f7 k0 K" h# W<td>Row 2, cell 2</td>! T3 Z6 r# X, \( Y' h3 d
<td>Row 2, cell 3</td>! @5 A7 R( O  U* |% }* q9 u
</tr>
% Y4 s( T$ X' `! q# S! [<tr>
  ?5 r9 \* R; \# f<td>Row 3, cell 1</td>! p# g5 i9 g5 p3 D
<td>Row 3, cell 2</td>
3 d+ n# B% U6 b) M<td>Row 3, cell 3</td>$ g  D  \" L0 e
</tr>) {- I& m+ E+ a  t! I3 r  \
<tr>
% {" H/ E% @* ^: y' K6 S1 a3 h<td>Row 4, cell 1</td>
) h6 ~. n6 W: d! @9 Y0 f: i<td>Row 4, cell 2</td>
2 y/ _5 s, b+ |; J; |/ d<td>Row 4, cell 3</td>
5 D' j3 j7 S+ q; |2 @4 D</tr>
- c% ]. G% [2 {2 S7 }& n</table># W: P+ u; @5 }$ G% }% Z: E7 m

$ v! }" ?- {, ^; p. o, Qtable元素定義標籤;tr元素定義表格中的一行;td元素定義數據單元格,這必須包含在tr標籤內,如上所示。' \3 V8 l! r9 {# N8 P

! ^  Y2 Z% U& z9 A& d  }' ]假設一個3x4的表格,包含12個單元,這就需要4個tr元素來定義行數和3個td元素在各行,總共有12個td元素。
回復 给力 爆菊

使用道具 舉報

您需要登錄後才可以回帖 登錄 | 免费注册

本版積分規則

點基跨境 數位編輯創業論壇

GMT+8, 2025-7-11 08:51

By DZ X3.5

小黑屋

快速回復 返回頂部 返回列表