过期域名预定抢注

 找回密碼
 免费注册

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

[複製鏈接]
發表於 2007-8-25 17:32:55 | 顯示全部樓層 |閱讀模式
1、簡介及入門 ──一開始你所需要做的和創作你的第一個HTML文件 ' S1 a  O" }# ?$ A( C) z1 U. h! P
2、標籤、屬性和元素──構成HTML的要素 ! h% `$ [0 D9 ~8 ~
3、title文檔標題 ──頁面的標題" M2 N5 p6 l; ^# }
4、段落──用段落構建你的內容
; c; c4 i$ J6 O, J) s0 I) Y; X5、標題h1~h6 ──6個等級的標題
1 X, C$ q8 S. j' Y; s6、列表──定義有序或無序的列表   j0 W3 D* _- O9 @
7、鏈接──把東西鏈接起來
, l4 c- `2 x; t; p* o8、圖像──添加一點不是文本的東西1 r! V0 S% `9 @& H4 v
9、表格table ──使用表格式的數據
  U* ?8 z+ Q: r6 J10、表單form ──文本框和其他由用戶輸入的構件
/ g: A- A$ A0 m& ^3 x. F11、綜合應用__把上面所有的要素堆積起來

評分

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

查看全部評分

 樓主| 發表於 2007-8-25 17:33:18 | 顯示全部樓層
1、簡介及入門 ──一開始你所需要做的和創作你的第一個HTML文件
1 y  e. e/ u% y1 a6 A$ [
8 j# s/ k; G8 Q7 V' n) f4 t這份HTML初級教程假設你沒有任何HTML和CSS的知識背景。
2 e  ~1 ~7 L* N$ J' {- R, Y
5 L& ?5 P) b" n! K5 E" x0 p) i; H學習基本的HTML十分容易,只要你能從頭到尾按照每一步驟來實踐。最後我們會將每一步綜合起來,以便我們繼續學習CSS初級指南。
5 D: c3 J: d& |" I
" d( e: F) D; s$ g' [& [8 B0 j需要記住的是,HTML和CSS是關於內容(HTML)和表現(CSS)的一切。HTML不過是有精美結構的內容罷了,是我們將要在下一步學習的CSS則是用來格式化內容的。
2 y# p$ Q9 g% y3 c. S$ T' F4 V
$ f9 P5 T* B( Y# g- B) w或許你已經留神過其他的HTML的教程,你可能會發現它們提及一些HTMLDog沒有的東西。這是因為許多方法已經過時,不符合標準或者只是平白的壞實踐。從一開始就在腦海中形成「走對的路」的思想最終可以幫助你掌握得更好。
0 b# K1 Y4 Q, H  e
- R- f0 r2 c. F4 g絕大部分的HTML要素並不比你電腦上的其他要素要難——只不過是一大堆歸類的文件放置在一大堆的文件夾裡面而已。
( ~: }5 @/ F! V8 L. ~( f8 b, M6 J: f9 G  h
HTML文件與簡單的文本文件無異,所以開始編輯HTML你只需要一個簡單的文本編輯器。記事本就是一個例子(在Windows裡可以從程序-〉附件的菜單中找到,如果你使用的是Linux,恭喜你,無論是控制台或者桌面環境,你都有更多更好的選擇,比如控制台的vi以及各種vi變種,GNOME的Gedit,KDE的kate等等——譯者注)。: J0 y+ S% \/ V) V/ t

( n( P3 \7 r' @  ]' q5 N2 |8 i; e) i) @[ 本帖最後由 qpyangwu 於 2007-8-25 17:34 編輯 ]
回復 给力 爆菊

使用道具 舉報

 樓主| 發表於 2007-8-25 17:35:07 | 顯示全部樓層
2、標籤、屬性和元素──構成HTML的要素
9 [& _) E, r) |
! C. l( L8 E6 X2 p* k$ W儘管HTML的基礎是純文本,但我們還是需要多一些東西才能使純文本文件變成合法的HTML文件。2 {2 f5 ?- j" i1 d

; M' S4 y7 t3 c) a  D標籤1 e% ^7 L5 g$ \
# ^- [3 T- \  y, K2 v: w, k
HTML基本的構成包含標籤,標籤圍繞著內容,賦予內容某些意義。* a( e5 ~! F0 k- w% w1 N$ f# Y
# y0 t# A5 o! H* B' R8 D8 C8 `
按照下面改進你的文件:7 E5 V) Z/ k; \) A3 y7 F

" r) e0 w8 J5 b, f; f) C; f7 ?' \' r" O2 b! S
. j9 p! N5 \$ `$ B9 A) c& L
Example Source Code [www.cn-webmaster.cn]
& S* \- H& X, U. c' P- `4 \<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
$ v% J9 B! N8 [# z"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
0 W0 K3 f) u( ~- F. e$ @  }<html>/ ^  X  e% T& w4 y+ i* n/ O
<body>
) S& o; X. w& ?+ X2 r這是我的第一個網頁
, L2 z$ o) b0 W, N5 f3 w9 H</body>
9 O- u, ]3 e8 a$ Q1 T</html>
2 K% _1 X; @- x4 N& l- H
- T/ @8 U% {/ L; L+ k) @" p保存文件,回到瀏覽器界面和選擇「玩新」(這會重新裝載網頁)。8 l! s6 H1 B8 ]* |7 l$ z
, e- E$ T! ~3 j- q$ T
網頁的外觀沒有任何改變,HTML的目的是表達內容,而不是表達表現,這個例子現在已經定義了網頁一定的基本元素。
6 r: l/ S0 B& h  ]$ R  m7 L( d" l8 A# N
第一行以<!DOCTYPE..開始是為了讓瀏覽器知道你到底要做什麼。你可能還不知道自己在做什麼,但接受它很重要。如果你不這樣做,瀏覽器將用「quirks」(奇怪的)模式來表現你的網頁。現在還不必擔心,當然你需要瞭解或者學習的話可以看看 HTML高級教成的 進一步學習「文檔類型」。當前,只需要記住把這一行放在文件的頂端就可以了。  C3 o+ U" j% q. u2 n

4 }1 c2 w% Z& H2 G+ W* }3 {言歸正傳,<html>是隔開其他內容的起始標籤,它告訴瀏覽器,位於自己與閉合標籤</html>之間的就是是HTML文檔。在<body>和</body>之間的是這個文檔展示在瀏覽器上的主要內容。7 u) V; s0 \" x' w# O

% |& y% i# A4 p閉合標籤
, V# n3 ?3 n, \! J7 N5 ^4 A, Z; R4 Y2 w; F
</body>和</html>關閉他們各自的標籤。所有的HTML標籤都要關閉。儘管老版本的HTML允許某些標籤不關閉,但最新的標準要求所有的標籤都要關閉。無論如何,閉合標籤是一個好習慣。
% U2 h: p2 w: h2 R, t2 o# J& V$ a; O! M2 _
並不是所有的標籤都像<html></html>一樣關閉,有的標籤不用繞在內容外面,它們是自關閉的。比如斷行的的標籤是這樣的:<br />。呆會我們還有這方面的例子。你所需要記住的是,所有的標籤都必須關閉,以及,大部分的內容都在標籤之間,他們的格式是這樣的:起始標籤 - 內容 - 閉合標籤。
( ?; b5 X! n' Z% B
2 v, u9 Q8 |3 D* M1 V+ H7 {屬性+ `, B9 ^9 I6 m5 z8 V2 ?

3 K7 ^6 [# f- A5 \' X7 h  }9 V標籤可以有屬性,包含額外的信息。屬性一般出現在開放標籤中,它們的值總是在引號中。就像這樣:<tag attribute="value">Margarine</tag>。呆會我們會講解帶屬性的標籤。0 p& i" S  Q6 f3 c
) t; X' |3 ^- R- c- f" X
元素$ V" S0 K; r4 P6 H2 K) X3 a
$ q6 \' m& p% D% C. z! t
除了標記元素的開始與結束,標籤不願再多做些什麼。元素是構建網頁的bits。你可能會說,比如,在<body>和</body>之間的是主體元素,又如,<title>和</title>是標籤,而<title>Rumple Stiltskin</title>則是標題元素。
回復 给力 爆菊

使用道具 舉報

 樓主| 發表於 2007-8-25 17:35:42 | 顯示全部樓層
3、title文檔標題 ──頁面的標題
* k6 K1 K) Z( S& i+ X, e9 E$ q/ n& i  b7 X
所有的HTML網頁都應該有文檔標題。  J" ~& v$ o9 V# |& w
6 T4 v! K2 ~4 u' Z; X2 N$ L; {/ v5 v
給你的文檔增加一個標題,按照下面改變你的代碼:
' s1 ~# K+ M7 P. q" v- e" F/ F9 x) G$ y+ \

5 [/ X# C( U2 ]3 W: O" s8 ?- T2 X7 q6 k2 K  K  r& `: C
Example Source Code [www.cn-webmaster.cn]
; V( T7 C4 F+ f. U<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
( w. [' G* v$ j# @"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">, h3 ?8 X) j+ i
<html>
  S: u% y& T) _" J- J  y) g<head>  S5 @9 b, n+ o4 D- @
<title>我的第一個網頁</title>/ s, e4 i/ r- k# J. i
</head>
0 x/ U7 I1 Y+ m4 e. y<body>
' F1 E2 A4 |, m8 t: S  k我的第一個網頁& N/ S% N) v1 L$ T  j' T
</body>
# Y0 g" T7 }2 V5 |5 u3 M</html> 2 A  v& m; s& I0 ]; `

5 W- F, {# ]/ |4 K+ W" t你可以看到,我們已經增加從<head>標籤和<title>標籤開始的兩個新元素(看看他們是怎麼關閉的)。6 T  y, V% H7 x
5 I6 W( y7 J& K; @4 K
頭元素(從起始標籤<head>到閉合標籤</head>之間的內容)出現在主體元素(從起始標籤<body>到閉合標籤</body>之間的內容)之前,包含將在主體元素信息之前裝載的信息。這些信息不會出現在瀏覽器窗口中。
4 f7 v$ `9 E/ L- Z9 Q
7 {8 _8 P. e" W隨著我們進一步學習,你會看到更多能夠插入頭元素的其它元素,但最重要的還是標題元素。
- E' C9 @/ p0 r0 x; O) o! I
5 J' L+ n$ f2 I. l. V) c- \* a如果你從瀏覽器查看這個網頁(像前面一樣已經保存和玩新),你可以看到「這是我的第一個網頁」出現在瀏覽器窗口的標題欄。你鍵入的位於標題(title)標籤的文本已經變成了這個文檔的標題,驚奇吧?假設把這個網頁增添到你的收藏夾或者書籤,你會看到標題也會出現在這裡
回復 给力 爆菊

使用道具 舉報

 樓主| 發表於 2007-8-25 17:36:06 | 顯示全部樓層
4、段落──用段落構建你的內容 ' Q/ v- J5 `1 N% |1 P
; V, H; T" \' m, {) ^+ {
現在你的HTML文檔已經有了基本的框架,你可以來「胡搞」一陣子其他內容了
# w, f3 e/ N5 ?+ q$ `: I$ L0 E' D! y* }* l
回到記事本,按照下面增加新行:  l/ q6 w* B, g( i, d' O
/ [% T( U+ A- ?5 m5 ^5 s

" M% O7 f4 B* R% i' ~
% Q  c* E$ c- u" C Example Source Code [www.cn-webmaster.cn]0 d( d2 A1 ^+ b7 D* z+ a: ?. \# M* u
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
' T2 a' a& J3 a& K; _# v"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
, v$ s! ~% Y/ I5 N3 o' J/ y7 }<html>; D5 O! e8 v1 t# L% T
<head>
) m7 K$ I9 `/ l<title>我的第一個網頁</title>
6 a; D/ L  \/ j  n! R</head>
9 b, o8 `% v  N# i& ^* i4 h<body>& m2 `; q0 w. W$ v: u5 i
這是我的第一個網頁 多令人激動. x/ q* G$ `9 a- c  W. m
</body>- o/ F. ~* l: J- a
</html>7 s/ b. c( L2 G

% A; Y3 r, ^1 b. W+ S. E, p0 N接著用瀏覽器查看一下。8 z5 i; ^  e7 y4 c7 ^) a, ^& {
3 c3 d& H$ }. ]# j: \: c* W: z
你可能期望你的頁面展示出像所你鍵入得一樣格式,分為兩行,但是你會看到:/ W4 I1 d% @. D9 ^: o
& X, y1 |/ a$ c

: X- I. o- |$ D Example Source Code [www.cn-webmaster.cn]0 q+ `2 @7 @; D0 k% x& f0 \
這是我的第一個網頁多令人激動9 F* J5 T1 @0 }( A& T' V
8 Z, L6 E* }/ T; N
這是因為瀏覽器不會關注你的代碼是怎麼寫的,也絲毫不關心空格(就算你鍵入「這是我的第一個網頁    多令人激動」,結果還是是一樣的)。/ p' H5 b! E9 X3 i

# h  o% k0 V# A' Z4 ~! B3 s8 S要文本以不同的行來顯示,你必須明確地指出。( @% p  q6 P2 F/ \2 X7 e

2 J4 n" k" d$ g! D* \7 x) p按照下面改進你的代碼:) M& \  A, T1 Q; O  N8 m8 U

# C% B0 _3 J8 j1 R$ [' h8 g( a5 @6 A
Example Source Code [www.cn-webmaster.cn]- q2 W/ q- j- k0 F
<p>這是我的第一個網頁</p>
5 ?: ?( W7 }' g<p>多令人激動</p>4 S3 A8 f7 V3 S* e; T
+ }! E, t/ C. v- A" Y# J# [
p標籤代表paragraph,即段落。
, j9 ?2 i: C8 E8 \* |8 w6 n9 {/ d/ h) q/ M8 j! ^
查看結果,這兩行終究以兩行來顯示。cn-webmaster.cn
9 H; e! N1 O# H% e6 Y( l' L3 W  H  u/ g* x. ~1 I* O
HTML文檔的內容應該跟書籍或者文章一樣,在適當的地方應該劃分段落。% F5 S9 F" V; R/ u
; \1 V; A' ]: j
強調8 d1 W/ r1 v( |8 d
/ V. g1 s3 `# Q; E; y; O: n2 q
在段落中你可以用em標籤和strong標籤來強調突出文本。它們都做幾乎相同的事,儘管傳統上瀏覽器會以斜體來顯示em,以粗體來顯示strong。- \* D7 }" ^1 _: P- j2 A  h
( d" q* y$ s! V1 a0 J- c$ d9 H

4 ?8 Z, n$ B* Y$ v. I/ j! R3 f Example Source Code [www.cn-webmaster.cn]
/ y1 p# q( v) [/ C! a: D- Z" h" ~# _<p>是的, 那個 <em>就是</em> 我要說的。 <strong>多</strong>令人激動</p> ! a8 I) S0 I: o) Z8 ?

7 W& F* h% ^5 O3 k9 k換行6 f% z: _) O. V3 j; l

2 _# w7 s* i/ [1 C  g6 i換行標籤可以用來打斷成兩行,像下面:
# s4 D, ~( t/ @: e3 K. G& i9 o7 w8 c! q* Q8 c* s8 k6 A
) p: v* c: Z" K# B- n+ M: N
Example Source Code [www.cn-webmaster.cn]
0 M' w0 Y  d5 ]4 ]7 }3 \4 I這是我的第一個網頁<br /> 多令人激動 0 g( }0 J1 }- _' Z: N- m

, y( L6 D' z% T( i( z5 x& Z2 J- H) x1 I但是,這個方法已經嚴重被濫用來劃分段落,它不應該使用在預計分段的兩段文本中。(是什麼結構,該用什麼標籤就用什麼標籤,不是為斷行而分段或者為分段而斷行——譯者注)
3 \! q0 o1 l" t6 |9 I* N- C! g1 [7 x3 F4 j" B# W# d
(因為沒有任何東西在換行標籤之間,所以沒有閉合標籤,它是用「/」在br後自閉合的。)
回復 给力 爆菊

使用道具 舉報

 樓主| 發表於 2007-8-25 17:36:28 | 顯示全部樓層
5、標題h1~h6 ──6個等級的標題 - L( J( t+ G$ m5 U8 o2 o: n
. b9 Q+ L6 e7 Q) I% Y/ ^( M3 k- C0 g) g
段落標籤是格式化文本的開始。3 K) j' r+ l! @9 c% z; K3 v

' u! D$ J, p' r- uHTML標籤有專門的標籤處理你頁面上的標題。7 f) G8 U& N8 n7 Y4 F

# B  N2 ]* O, O8 p5 p它們是h1,h2,h3,h4,h5和h6,像封建社會一樣,h1就是萬能的君主而h6就是最底層的百姓。- x' N7 x  Y2 }" U
. H4 B  N: M- q- b6 o& a  Y% `
按照下面改進你的代碼:, A" `0 \* {" Q- v
- T0 g0 P2 y4 h8 G

- G& x, \$ ~4 w  u4 o8 {  |4 N+ t) ~6 M7 c
Example Source Code [www.cn-webmaster.cn]
% g& z# P$ h& n' w. R& o3 u9 Y5 ?<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" : }8 S7 y# {0 F) C9 @: P* f
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">5 \" S+ p9 U+ y
<html>
9 c2 B  W0 U5 S/ ~1 n' j$ {<head>7 f9 j5 t7 C" r* V
<title>我的第一個網頁</title>5 ?& m: U  q$ S
</head>' [& x  g( A+ C" c6 |; D( Z: f
<body>8 F# q  Q# L- K
<h1>我的第一個網頁</h1>+ W' c4 q* c' w) I3 y# Q
<h2>這是什麼</h2>% L( @/ U1 ?+ j0 v/ ?
<p>用HTML組合起來的簡單網頁</p>
# ?4 P4 w3 S" o% U: ^8 e/ X3 h<h2>目的</h2>6 X- f) e$ V* o4 h4 K+ S
<p>學習HTML</p>
3 N: q8 Y- z1 i2 q! R, Q; R6 P) S</body>) C8 M  j9 d3 b' l  Y$ Y/ ]
</html>
( }2 z4 W3 ?7 S  f# f% z7 R# ~( `. v; u/ I7 a9 c) a
注意,h1標籤在一個頁面只能使用一次——假定它是這個頁面的主標題,是不應該使用多次的(相當於一篇文章的題目,你可以有一個副題目,但你不會使用兩個並列的題目吧?——譯者注)。
7 d* @' [4 c( M% ^' m) [5 Y) ?3 M$ L4 V/ v2 b
但是,h2到h6可以如你所需任意使用多次,但它們應依設計意圖,該按順序使用。比如,h4應該是h3的子標題,h3應該是h2的子標題,以此類推
回復 给力 爆菊

使用道具 舉報

 樓主| 發表於 2007-8-25 17:36:51 | 顯示全部樓層
6、列表──定義有序或無序的列表
6 K8 e7 D# u. C4 C; M6 a# j7 x8 u' c) b" g5 w
; W9 i+ `4 a2 w' g! t. N$ V
有三種類型的列表:無序、有序和定義列表。首先我們來學習前兩種,在HTML中級指南中學習定義列表。
* U) d  ]9 O5 I9 {$ E
8 g- K1 N% _3 y$ Z. C7 g為你的代碼增加以下東西:
' A9 l& T( `: j8 V0 }
$ {7 ]$ C8 Q+ Y7 G
% c" ?( a# c3 L4 x% t, z! f$ i# J1 B: h2 G. f  U" m9 A
Example Source Code [www.cn-webmaster.cn]
% X' N. V# v& K4 Z+ Q2 d0 O0 ~& m<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
6 A# b+ v. L3 \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
6 y/ a3 w1 _6 P" n- j- C<html>5 z" l, p* C  d: _. I% k
<head>
1 c& W& ^" x: {6 D5 o. h  L$ ^0 I3 p<title>我的第一個網頁</title>
, Q& `; }8 q  r! a0 W6 G7 U  M8 z</head>
& t6 t) q( B) K" y* q5 m( Z% h<body>
8 q8 a  \0 w  V# Q0 \6 n<h1>我的第一個網頁</h1>! d7 R2 |8 b1 \$ S; n
<h2>這是什麼</h2>
7 O: F' F- \' P: N' t<p>用HTML組合起來的簡單網頁</p>+ F# b' K0 g" N: w
<h2>目的</h2>
1 E* u% q5 n0 _& N' b<ul>+ g% J( Z' q0 r- ~& `4 O" c
<li>學習HTML</li>2 V  q( Y9 p5 i
<li>顯擺,炫耀</li>
5 e0 I  j* S' x; E6 X% W <li>因為我已經愛上了我的電腦,我想給她點HTML愛情調料。</li>
( }& a; P* E1 J% d$ J</ul>8 X# G' a$ l, M
</body>
8 ~, j* x: ^% K0 [</html>
0 X: Q  G- v8 U  P
% K# S  J4 Q' {1 d+ |7 P. `在瀏覽器中查看,你會看到有項目符號(比如方塊)的列表。把ul改成ol後項目符號會變成編號,字母的或者數字的。
/ K8 f) Z: u' H! `* R" L- N0 r  e& A/ N
列表裡當然可以包含列表,形成有等級層次的嵌套列表。
& U9 l" z" G! n5 ?) J6 T0 C
# T. }' P; p2 J' e用下面的代碼代替:2 l, A) v: o( M- [, t

1 G. _. {( [% b9 f1 Y- i( _6 B. o# C* Z
Example Source Code [www.cn-webmaster.cn]
* U* h! c3 q" G  y& e4 D! c  y/ x<ul>8 T& d. h3 _/ y- [4 _
<li>學習HTML</li>
$ K4 f4 h" Y* [7 h <li> 顯擺,炫耀 $ [  V( M1 z2 i: Z& X, f
<ol>
0 k* b" Z: Q4 q    <li>向老闆</li>8 R5 n- q( o- a# ]
    <li>向朋友</li>
9 k4 b( C" ]  U( V    <li>向我的小貓</li>0 c- `2 k, f# w7 e* f; H
    <li>給我腦中多嘴的小鴨子</li>
* X  I! C9 j5 v5 W </ol></li>% D6 j9 `/ s; E! Q. d( B2 N
<li>因為我已經愛上了我的電腦,我想給她點HTML愛情調料。</li>
, C* R# o2 A! p5 W( P6 i9 q</ul>
7 u; F+ H7 M3 U 6 _4 ]4 e+ G' D% i. \4 f  u
Ay vwah lah。列表裡面包含著列表。你可以在這裡包含更多的列表,還可以在那裡包含更多的列表,等等等等.
回復 给力 爆菊

使用道具 舉報

 樓主| 發表於 2007-8-25 17:37:14 | 顯示全部樓層
7、鏈接──把東西鏈接起來+ ?! @- k, E9 M
$ E8 U, q8 ~5 b4 `3 A2 Y3 s3 q

) n% f% I) |6 M! o8 w3 k! M現在你已經創建了一個獨立的網頁,所有的都顯得不錯。使因特網顯得特別的,是因為它把所有東西都連接起來了。# s- ]3 R: t4 W5 S/ m; u0 K

  d( a5 ~3 Q8 ?9 N* K; M5 {3 fHTML中的H和T代表HyperText,即超文本,表示著一個由連接文本所構成的系統。6 l/ h* T, i* @* ^

- w0 k1 v- `' k& ~) d錨標籤a用來定義一個連接,但是還是需要為錨標籤增添其他的東西──連接目標。& @6 N4 M4 k6 Q. m$ A5 Q8 r- i7 A8 ~! U

1 I  s: b2 i5 [# M& D* q1 g7 T為你的代碼增加以下東西:
# N( ]1 Y' M6 F& B$ H6 J4 @2 z( Q3 t. O. R# D8 ?
  p; e( b2 n5 M9 i: R* W

/ B3 m0 ]4 Y+ I/ B Example Source Code [www.cn-webmaster.cn]& |: {& a1 _' n# e
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ' Q8 K; j, D8 l% B* i1 u
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
: `/ n5 z, \, |. ]0 e: x<html>
) h- s. f& Y$ [8 N9 i/ w; `  z<head>
! V& i# m1 i7 ^% @<title>我的第一個網頁</title>4 g6 J7 D, }3 }# p: W, m
</head>
7 F  X1 p8 a/ n<body>
% r9 }! B7 n9 q7 ~  q- G <h1>我的第一個網頁</h1>
2 D  X: [" Y- ~5 f( \ <h2>這是什麼</h2>
( S* L# _7 |) z3 i. } <p>用HTML組合起來的簡單網頁</p>7 N; u2 X* k# [8 X/ y
<h2>目的</h2>
( c: X9 Q, R; Q4 A6 w <p>學習HTML</p>
: M2 n, _. G. o7 m0 p0 F6 F! B <h2>在哪裡尋找教程</h2>
* g# H# P2 |7 d+ ] <p><a href="http://www.google.com">Google</a></p>
+ }9 \9 C1 t/ G0 s8 ?</body>
( f$ y+ Q( F% g% t4 P</html> - v( e, ?% C& W/ N3 j4 q5 z

2 Q4 a! s/ B' w! }7 O/ i9 t連接的目標用href屬性來定義。連接可以是絕對的,比如http://www.htmldog.com,也可以是相對的,相對於當前頁面來說。
4 p4 w, m: x6 k3 U9 G
! ~! B# W4 r7 y3 ?. s" ?$ k! T+ M所以,假設你有另外一個HTML文檔「flyingmoss.html」,其中一行代碼可以寫成<a href="flyingmoss.html">The miracle of moss in flight</a> ,諸如此類。0 R5 U' U' o* N
  ~7 Y  i5 Y* g; B+ A0 m6 M) R6 \* ?% ~
連接不僅可以連接到其他的HTML文檔,也可以連接到頁面上的其他文件。& q4 H! }8 b# z; z

: S7 ?% \3 T# b; g6 J  j4 w連接還可以轉到頁面的其他部分。你可以給幾乎所有的標籤增加id屬性,比如<h2 id="moss">Moss</h2>,然後連接到它,像是這樣做:<a href="#moss">Go to moss</a>,點擊這個連接會直接滾動到帶有這個id的元素。
- _0 u, f7 m% p1 n! U8 ~4 }6 Q, t% Q! ]  ^) h& S. `
注意
# C. K" c5 l/ s' y9 u+ B! F- ~; a2 L) v# J7 t

% n8 ?5 n+ m" Q3 j Example Source Code [www.cn-webmaster.cn]" L% L* \' [, o
a標籤允許你為連接打開新窗口,而不是取代當前窗口,初聽起來似乎是一個不錯的主意,因為它不會讓用戶離開你的頁面。
- \# w; o! Y0 h& |0 ]) ?9 T9 o' b2 t! `& p, v
但是,有很多理由證明,你不應該這樣做。  s( @/ [' G0 e% A( A

3 x2 Q2 S2 W) n5 [9 q- j+ T從易用性的觀點來看,這種方法破壞導航。最常用的導航玩具是瀏覽器上的「後退」,打開新窗口使這個功能失去了作用。. L0 t- z- N* V) n  l

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

使用道具 舉報

 樓主| 發表於 2007-8-25 17:37:36 | 顯示全部樓層
8、圖像──添加一點不是文本的東西
9 u9 O5 [; c2 L0 N2 w  y! F" Z/ t. z9 c' ]% Q2 x
3 d5 B* K" I3 K; u/ k( x% Q
都是文本的話看起來讓人感到乏味和無聊,自然,網頁不應該僅僅是文本而已(呵呵,對於一些技術性的文檔,我想,文本就已經嚴重足夠了——譯者注),它是多媒體的,最常見的形式就是圖像。( R! L7 I( u$ a- z
2 V4 P, n  s: m9 n) [4 Y% c; j* w
圖像標籤img用來為HTML添加圖像,像下面這樣改進你的代碼:/ z; t* O" B4 d. q. M0 J' v2 ~: V! h

# j7 X6 ]5 i# A: [3 j
( |' `! M+ S5 m  e- y% n9 s! l: u, l  s- O6 M
Example Source Code [www.cn-webmaster.cn]
- h: |' O* I/ |* d, O<img src="http://www.yourdomain.com/logo.gif" width="88" height="31" alt="mysite logo" />
+ Z9 W4 m9 _- Q9 t
' v! ]! j5 T6 I% |9 ?& R7 t2 Jsrc屬性告訴瀏覽器圖像的地址。就像a標籤一樣,它可以是絕對的,如示範所示,但更多時候它是相對的。比如,你擁有自己的圖像且已經另存為alienpie.jpg放置在images文件夾下,代碼可以這樣寫<img src="images/alienpie.jpg"...2 Z" q9 ~9 a' V- f* y1 v

5 d- A8 U3 D0 q3 V長度屬性width和高度屬性height是必需的(Zeldman的「惡名昭著」的《Designing with Web Standards》(中文版《網站重構——應用Web標準進行設計》已經出版,推薦翻譯者之一的著名設計師ajie的網站網頁設計師,你要是沒有訪問過,趕緊去,保準你收穫不小!)中說,width和height不是必須的,這可以節省帶寬。平時做網頁我也不喜歡用這兩個屬性。——譯者注),因為瀏覽器在下載過程中能夠計算出圖像佔據的空間,否則瀏覽器可能會產生一個頁面的跳躍,因為事先並不知道圖像要佔用多少空間,以致於破壞頁面佈局。
3 B. A( b$ e5 H- `: f( t  N1 d) q. {) ]! A" \$ s) ?
alt屬性表示可替代的描述。這是為不能或者不選擇圖像顯示的客戶端著想(比如終端瀏覽器lynx,不能顯示圖片,但可顯示alt中的文本。最壞的情況是,你寫錯了圖片的文件名或者路徑,即使在圖形瀏覽器中圖片顯示不出,但仍可顯示出alt中的文本,不會讓訪問者造成不必要的誤解。什麼情況下我們都推薦你,一定記得使用alt。——譯者注)。在最新版本的HTML版本中,這是不可缺少的屬性。4 Q/ h( x9 O3 a! [) e/ u; ^1 j

$ C5 h5 b  r, i* G7 H; |注意5 ^9 B6 ?3 f# ]: T; s

) i) m4 T5 d. u. t6 V* S9 O
  r' ]0 @# p* f' z% ] Example Source Code [www.cn-webmaster.cn]' F) q! m4 z+ r
給網頁創做圖像雖然不是本站的主題,但我們還是有一些對你有用的東西要說。9 F  G5 G2 h7 a4 X
經常被用到的圖像格式是GIF和JPEG。他們都是壓縮過的格式,有各自十分不同的用途。
1 l: D+ M# Q$ tGIF圖像不超過256色,但可以保持原有圖像的色彩。色數越低,圖像文件就越小。
9 x2 Z% F' i4 q6 `0 ~GIF應該用在有純質顏色的圖像上。
9 p+ q4 f: k7 s2 ^+ y6 i9 [! bJPEG使用十分精確的算法來壓縮圖像,對原圖像有些微的改變。壓縮程度越低,圖像文件越大,從而圖像更清晰。) z. k6 R6 I8 j" e- H; u9 r
JPEG應該使用在要逼真描繪的諸如攝影的圖像上。
* \1 a. v. F5 I* f網頁設計初學者需要處理的文件可能就是圖像文件了,忽視圖像過大是初學者常犯的錯誤。網頁下載應該盡可能快,想想看,一個使用少於7kb每秒的Modem聯網的人要用多少時間來下載你的整個頁面。  v4 U) U  n+ a
你必須在圖像質量和圖像文件大小之間作出選擇。許多現代的圖像處理軟件允許用最佳方式壓縮圖像,但同樣是一個冒險,或者產生錯誤。+ ^* Q3 Q1 d5 g1 E7 g4 Y
譯者有話說:顯然,現在還沒有誰推薦PNG格式的圖像,可能只因為IE對其糟糕的支持。GIF到目前為止還沒有解決專利問題,使用它還是得冒侵權之危險。PNG很有潛力,同樣也具有透明能力,色數也不止GIF的可憐的256色而已,卻具有JPEG的高清晰、高保真度,這也是我,以個人的立場向你推薦的原因。; |7 ]/ L5 X2 a! W/ {- i
請參考GIF還是PNG.
回復 给力 爆菊

使用道具 舉報

 樓主| 發表於 2007-8-25 17:38:11 | 顯示全部樓層
9、表格table ──使用表格式的數據
+ u) s, G3 g$ t, |* V" ~% [# K$ e# O4 G
漫步萬維網世界,有多少HTML表格被用來佈局頁面,還一度被濫用。我們會在 CSS高級教程中學習怎樣不用表格佈局頁面。表格的正確用處應該是,展示表格式的數據。
5 M8 M+ m3 K3 B1 M& t7 A8 d& S, _  I1 \5 X% C3 R& x+ a+ z5 P! Y
有很多標籤可以用在表格中,在初級指南中教授表格是如何工作的確實是一件比較困難的事情,沒有關係,我們一步一步來,先來看一個例子。例子什麼時候都是學習的好方法。
  d. q9 l6 r: G
+ g5 s& d5 S. z9 s! ^3 g把下面的代碼拷貝到你文檔的主體(<body>與</body>中),我們就可以明細每個標籤是任何工作的了。
1 U) V% S; g* c, O" V. E( O9 I8 q6 [  H# p( l. Q* u- Z
& c8 ?( t+ N' I" i8 S8 L  @

  Q2 u+ D7 e; f, D9 t$ p! \ Example Source Code [www.cn-webmaster.cn]4 |' b. W! b( H6 n
<table>
, [* G( e$ r7 [8 R3 h4 y. l<tr>
* K) j) C7 R1 J7 T" g<td>Row 1, cell 1</td>- b9 {! v# g/ n" @. L
<td>Row 1, cell 2</td>( v: n2 P# u% w2 ~1 r
<td>Row 1, cell 3</td>% |- j& f3 a, [0 _2 }& t! f. B+ L
</tr>7 J- I/ F" n4 P$ K: z0 b) e
<tr>
% C# T3 D3 L6 w<td>Row 2, cell 1</td># C/ x4 ?1 O* E; F* f: \. V
<td>Row 2, cell 2</td>
) B2 K4 x/ X: s8 ]  _3 C<td>Row 2, cell 3</td>
) ^5 w  T$ ?% n- x  ?" ^7 P  b</tr>, Z% c& x) T6 i* F/ V
<tr>* c" t1 r( o) `- n6 ^" b
<td>Row 3, cell 1</td>
8 c4 f$ z: {8 W- h% x& F' K) R3 _<td>Row 3, cell 2</td>* O+ t+ [3 o' p
<td>Row 3, cell 3</td>
! y! g5 l- N$ E" o- r+ ^# h</tr>4 r0 T2 Y' ]1 z& }9 v8 j% w" G1 b5 \
<tr>
# T9 Q$ Y5 i7 g1 u6 Y  _<td>Row 4, cell 1</td>
* W! W+ x2 J( G. D<td>Row 4, cell 2</td>
7 `, ]7 W, O- h( Y. H  c* u4 I<td>Row 4, cell 3</td>
2 B( W4 |8 L' r7 r" K5 l/ T</tr>
. X+ ], q1 f" @5 t7 E. u) `</table>! w! j2 O# P: L  V& k
6 ~" x# ]( [1 D7 D
table元素定義標籤;tr元素定義表格中的一行;td元素定義數據單元格,這必須包含在tr標籤內,如上所示。- g( e4 [6 F* l

6 b. X5 i3 ~& N3 b4 l' C假設一個3x4的表格,包含12個單元,這就需要4個tr元素來定義行數和3個td元素在各行,總共有12個td元素。
回復 给力 爆菊

使用道具 舉報

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

本版積分規則

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

GMT+8, 2025-7-19 07:05

By DZ X3.5

小黑屋

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