过期域名预定抢注

 找回密碼
 免费注册

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

[複製鏈接]
發表於 2007-8-25 17:32:55 | 顯示全部樓層 |閱讀模式
1、簡介及入門 ──一開始你所需要做的和創作你的第一個HTML文件
# b: o% _4 R) @. f* D: s2、標籤、屬性和元素──構成HTML的要素
% t( b0 J9 R# T, ~5 z$ e+ y3、title文檔標題 ──頁面的標題
- ^* `6 D" `' m; M+ f5 A5 H# v4、段落──用段落構建你的內容 7 G, K. ?6 j4 J8 Q& U' c9 r+ S/ q. S
5、標題h1~h6 ──6個等級的標題 7 f$ \1 [9 N: c& k7 m  T+ v# Z( [
6、列表──定義有序或無序的列表 " b, ~( R9 C% R* o5 \5 M  X
7、鏈接──把東西鏈接起來  j) r! i  j# a7 e+ z% l
8、圖像──添加一點不是文本的東西0 w: X$ ?% j2 u- U8 e3 U4 l$ o) C
9、表格table ──使用表格式的數據
+ x8 k( j2 i! S; s2 Y5 |% A& a$ q& V10、表單form ──文本框和其他由用戶輸入的構件
9 Q! |; }7 _2 D5 C( `- b11、綜合應用__把上面所有的要素堆積起來

評分

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

查看全部評分

 樓主| 發表於 2007-8-25 17:33:18 | 顯示全部樓層
1、簡介及入門 ──一開始你所需要做的和創作你的第一個HTML文件 3 C, {" ?/ O( ?2 W

) S% P7 T% n9 e' M- X# @! N7 l/ X這份HTML初級教程假設你沒有任何HTML和CSS的知識背景。
& ~4 n( z$ }- ]8 \5 \+ Y/ F4 ^- d5 r- M0 c/ o) Y( ], D4 R
學習基本的HTML十分容易,只要你能從頭到尾按照每一步驟來實踐。最後我們會將每一步綜合起來,以便我們繼續學習CSS初級指南。
, w3 B# U  M. x/ a
$ P8 [7 b) g# P; ^需要記住的是,HTML和CSS是關於內容(HTML)和表現(CSS)的一切。HTML不過是有精美結構的內容罷了,是我們將要在下一步學習的CSS則是用來格式化內容的。! s- }) g, j; X

2 }) B' t" E  o3 f) i0 N$ {" y或許你已經留神過其他的HTML的教程,你可能會發現它們提及一些HTMLDog沒有的東西。這是因為許多方法已經過時,不符合標準或者只是平白的壞實踐。從一開始就在腦海中形成「走對的路」的思想最終可以幫助你掌握得更好。' H' D+ q7 N  C5 U( D

7 Y  x% B4 |# h+ k. b4 U7 ^絕大部分的HTML要素並不比你電腦上的其他要素要難——只不過是一大堆歸類的文件放置在一大堆的文件夾裡面而已。' g. ]! F2 W* P

6 Q# L0 K/ a; m" @HTML文件與簡單的文本文件無異,所以開始編輯HTML你只需要一個簡單的文本編輯器。記事本就是一個例子(在Windows裡可以從程序-〉附件的菜單中找到,如果你使用的是Linux,恭喜你,無論是控制台或者桌面環境,你都有更多更好的選擇,比如控制台的vi以及各種vi變種,GNOME的Gedit,KDE的kate等等——譯者注)。
3 n  S4 E5 n, g% _' P1 r; |
1 U! d( P0 V- ~) p8 E[ 本帖最後由 qpyangwu 於 2007-8-25 17:34 編輯 ]
回復 给力 爆菊

使用道具 舉報

 樓主| 發表於 2007-8-25 17:35:07 | 顯示全部樓層
2、標籤、屬性和元素──構成HTML的要素 # t1 f3 x  a5 @! M

4 |+ W' A* n0 ^% j2 ^儘管HTML的基礎是純文本,但我們還是需要多一些東西才能使純文本文件變成合法的HTML文件。4 Y$ M" b) I- ?5 ?- D1 k( F0 W( Z
5 C0 d0 s) r1 a1 _2 W
標籤
/ w* J  x9 b9 k: e3 _# `+ D3 R  W$ A& K$ u5 z
HTML基本的構成包含標籤,標籤圍繞著內容,賦予內容某些意義。
0 _9 q3 K" o" k, q' v2 F' a( c2 Z! q1 C# S
按照下面改進你的文件:
# x# J0 s( j: F3 x) J) ~( U" n; q8 A2 c! Q+ Q9 S3 g" a7 R+ `

5 @: s; M0 r" M- a! `* N2 a3 H% I" T+ T/ q7 D. X! W
Example Source Code [www.cn-webmaster.cn]+ z& U3 Y& r4 e: j
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" # g, U% g" P( U
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">1 g  C$ g* a! x# u( O! Q0 a
<html>
. F+ r+ X% f! S) E<body>
. O. k( }4 o; R7 \: k8 `/ F* G這是我的第一個網頁6 h3 U3 f% v8 f7 q8 V; I
</body>
1 |/ m) p# |# j% V. Y</html>
. Y3 y8 y# k8 `! F
: M/ ]& I4 I0 D& c保存文件,回到瀏覽器界面和選擇「玩新」(這會重新裝載網頁)。
# U* k% H& b- y+ e7 x2 e# u. G" `
; o3 ?/ B( R: N" V2 k網頁的外觀沒有任何改變,HTML的目的是表達內容,而不是表達表現,這個例子現在已經定義了網頁一定的基本元素。
- F9 p% o2 f' V9 ]; M' ?* G6 C1 p1 D1 U/ S
3 b( d4 \# d+ @第一行以<!DOCTYPE..開始是為了讓瀏覽器知道你到底要做什麼。你可能還不知道自己在做什麼,但接受它很重要。如果你不這樣做,瀏覽器將用「quirks」(奇怪的)模式來表現你的網頁。現在還不必擔心,當然你需要瞭解或者學習的話可以看看 HTML高級教成的 進一步學習「文檔類型」。當前,只需要記住把這一行放在文件的頂端就可以了。3 i! j2 h5 S: y5 T

% k1 b0 [1 V# U' `& K& ^言歸正傳,<html>是隔開其他內容的起始標籤,它告訴瀏覽器,位於自己與閉合標籤</html>之間的就是是HTML文檔。在<body>和</body>之間的是這個文檔展示在瀏覽器上的主要內容。# `, i1 m  x5 u! W3 h& k0 N8 X/ Q

  |9 q" V4 V! k, a& {閉合標籤$ [3 d% V* t4 Q( ?/ \* x
6 \' g- n  a5 Q* ^4 K: M
</body>和</html>關閉他們各自的標籤。所有的HTML標籤都要關閉。儘管老版本的HTML允許某些標籤不關閉,但最新的標準要求所有的標籤都要關閉。無論如何,閉合標籤是一個好習慣。
1 t- l; f* k  Q
# A: W. Z1 ^7 ]9 k' V& Z) n, [並不是所有的標籤都像<html></html>一樣關閉,有的標籤不用繞在內容外面,它們是自關閉的。比如斷行的的標籤是這樣的:<br />。呆會我們還有這方面的例子。你所需要記住的是,所有的標籤都必須關閉,以及,大部分的內容都在標籤之間,他們的格式是這樣的:起始標籤 - 內容 - 閉合標籤。2 u( \; a  }+ x

$ p; z& C& t: B( O0 n2 \$ H屬性: w: y8 w* R0 Q6 E9 G: U/ z

& w% M1 P. B1 @. n0 {+ a! {/ E標籤可以有屬性,包含額外的信息。屬性一般出現在開放標籤中,它們的值總是在引號中。就像這樣:<tag attribute="value">Margarine</tag>。呆會我們會講解帶屬性的標籤。$ D9 c% i* m" S. H: ], E3 C

. }5 ?$ w% I1 `: D  f元素0 ?& J, c8 a2 {+ j
! S7 L- J* o& }" p4 X! q7 T* `, c
除了標記元素的開始與結束,標籤不願再多做些什麼。元素是構建網頁的bits。你可能會說,比如,在<body>和</body>之間的是主體元素,又如,<title>和</title>是標籤,而<title>Rumple Stiltskin</title>則是標題元素。
回復 给力 爆菊

使用道具 舉報

 樓主| 發表於 2007-8-25 17:35:42 | 顯示全部樓層
3、title文檔標題 ──頁面的標題
/ W  L7 U" h$ }& F* A& v* W: `* G1 C  d2 H+ o! M
所有的HTML網頁都應該有文檔標題。
) G5 V0 {% K7 {. `+ j
; X( n9 m' t$ c6 @7 e8 R+ B給你的文檔增加一個標題,按照下面改變你的代碼:9 H  s" I# I/ {1 V0 j( b

- |/ P% n/ |- A' x9 [/ x7 b* s% ?! Q8 P. n! h) X

7 l4 Q7 [9 p/ L# b! s: ~0 h Example Source Code [www.cn-webmaster.cn]
, g+ {$ z: m, S1 c0 Z$ ^<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" / Q9 f. ]1 a2 d* o9 A# C
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">$ @  U6 j/ C) Y
<html>9 g. a4 B9 L1 h* K
<head>! ~! R1 X3 K  R) S
<title>我的第一個網頁</title>
+ O( `4 b1 g+ E  N! h: ?, ]4 U4 o  F</head>% H0 z+ h( H5 f0 r5 p! x8 o! R" F7 V
<body>
  d6 \# |; R- `1 Z& \我的第一個網頁& b( q9 q. X1 ?: g7 d
</body>8 T6 |' h. q; u
</html>
4 Z" d' a7 L* W5 F0 k2 m0 ?$ a
+ P- C. Z* N) k5 r! s; y. c你可以看到,我們已經增加從<head>標籤和<title>標籤開始的兩個新元素(看看他們是怎麼關閉的)。  E3 r& e0 N- Z" ~9 n

+ u% H, k7 W0 G! x. i$ L頭元素(從起始標籤<head>到閉合標籤</head>之間的內容)出現在主體元素(從起始標籤<body>到閉合標籤</body>之間的內容)之前,包含將在主體元素信息之前裝載的信息。這些信息不會出現在瀏覽器窗口中。8 \, u4 x6 }' Y( H( z

! y$ }6 C5 N* ?) ^# u* @9 T3 e隨著我們進一步學習,你會看到更多能夠插入頭元素的其它元素,但最重要的還是標題元素。" ]9 {# [# k6 p
3 d/ A2 k* H8 C7 k5 L
如果你從瀏覽器查看這個網頁(像前面一樣已經保存和玩新),你可以看到「這是我的第一個網頁」出現在瀏覽器窗口的標題欄。你鍵入的位於標題(title)標籤的文本已經變成了這個文檔的標題,驚奇吧?假設把這個網頁增添到你的收藏夾或者書籤,你會看到標題也會出現在這裡
回復 给力 爆菊

使用道具 舉報

 樓主| 發表於 2007-8-25 17:36:06 | 顯示全部樓層
4、段落──用段落構建你的內容
3 Q6 N; r) U+ k) H7 ~: Z
+ s9 b; S) |/ ?3 [; [4 P現在你的HTML文檔已經有了基本的框架,你可以來「胡搞」一陣子其他內容了
, b+ e8 `% q2 W% e: ?
% i* n% ^( S$ W$ h" E回到記事本,按照下面增加新行:+ j5 q9 C$ P( q+ Q$ d1 z8 h

4 K6 c& o* K- K$ J+ x# F( }0 N3 o$ {/ m
; V. F8 _) _+ B1 a2 v
Example Source Code [www.cn-webmaster.cn]3 }- e: H" ^5 A1 Q* M2 ?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
. T1 o8 B6 G3 X4 q- @"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
9 l7 F- i" b# f$ z) u% W<html>$ X' V3 |/ x! ~! Y% j
<head>; T# d% o/ j# a# O# l6 m7 M
<title>我的第一個網頁</title>
( l3 n# E+ o( h2 V0 [( J7 m</head>; ^0 h* l( ^6 G
<body>
4 \+ O0 s' o% f- X# x8 t' r這是我的第一個網頁 多令人激動5 H: `3 L. [! V! Y0 r, o% @9 a4 o
</body>- u, r7 l2 {. J* i2 ]  t
</html>
- J( u8 V  |: U' y1 K( Z+ X- E
7 K5 ~* p& x) G) Z接著用瀏覽器查看一下。5 b+ h% h' A3 ~* h1 ]3 c5 D

; x& c/ A! y& r+ g5 Z% Y3 M你可能期望你的頁面展示出像所你鍵入得一樣格式,分為兩行,但是你會看到:' a$ q; v& p: i& P" N

4 E/ s# v5 y5 E
3 g3 r9 ]3 [! X0 O; f0 o+ r Example Source Code [www.cn-webmaster.cn]
# ?$ J6 D$ I, S7 o; Q這是我的第一個網頁多令人激動
' ^- d/ h; _. o( s: ^6 `7 d! \' q3 `( W9 O
這是因為瀏覽器不會關注你的代碼是怎麼寫的,也絲毫不關心空格(就算你鍵入「這是我的第一個網頁    多令人激動」,結果還是是一樣的)。
, t, Q% c+ B1 O, p/ W' @0 s- J7 i) A% _2 Y/ q
要文本以不同的行來顯示,你必須明確地指出。
8 e1 Y; D4 h* V' `1 D$ S/ M
2 _! U" R' {2 n( b4 k6 L* |4 \按照下面改進你的代碼:
) c: R5 U& P) u! X2 p' ?6 H2 K0 s  C: e- D
2 V1 v% R& Y+ h6 O
Example Source Code [www.cn-webmaster.cn]6 l. {: x+ v- H4 i
<p>這是我的第一個網頁</p>0 r8 K  y+ b( z6 T* Q8 f
<p>多令人激動</p>. @7 n8 R2 u7 h' x

& t) s. r0 @% }- O2 [p標籤代表paragraph,即段落。
6 ]; \/ q& Z9 L  ?, l6 g( ~% o
2 w, P& z( `. i3 N9 P2 Q查看結果,這兩行終究以兩行來顯示。cn-webmaster.cn
# i7 E( c2 l  }  s6 q9 r0 x( W
( O9 K  M  Z7 h0 r/ GHTML文檔的內容應該跟書籍或者文章一樣,在適當的地方應該劃分段落。0 y" u* R0 V7 \3 R$ u
; V; A2 Z) n  a% D2 e: b
強調
7 [  f9 u8 q, |
# F4 H9 q6 f7 O$ K5 u; A在段落中你可以用em標籤和strong標籤來強調突出文本。它們都做幾乎相同的事,儘管傳統上瀏覽器會以斜體來顯示em,以粗體來顯示strong。5 I; J7 E6 Y5 P1 R
: v, s" O( j$ d/ Z/ E! t/ K

: k3 p  i, s; [) f Example Source Code [www.cn-webmaster.cn]
+ K* O; z8 w  d" D<p>是的, 那個 <em>就是</em> 我要說的。 <strong>多</strong>令人激動</p> 5 b( G. {8 P7 {2 l9 G0 O" N

$ A  K2 W+ V" X% k% y$ E- ~換行
! c- }' b* W9 C3 F' O; b3 b1 z4 |! k! a+ \5 f$ R2 P" |
換行標籤可以用來打斷成兩行,像下面:6 L: Z! T, l: P. X
; {# H4 U: a% Z# G! v1 v

+ p# d+ w+ W9 o# c  Z, O0 o/ W Example Source Code [www.cn-webmaster.cn]8 M# X! K: ?# e) Y* E3 E
這是我的第一個網頁<br /> 多令人激動 : _9 A; d+ |0 d1 l

$ ^, `% F) _% a& }5 P% |5 D, L# \但是,這個方法已經嚴重被濫用來劃分段落,它不應該使用在預計分段的兩段文本中。(是什麼結構,該用什麼標籤就用什麼標籤,不是為斷行而分段或者為分段而斷行——譯者注)
4 c- B+ ]9 F9 S  i/ l* Z6 A6 G" c: T% V
(因為沒有任何東西在換行標籤之間,所以沒有閉合標籤,它是用「/」在br後自閉合的。)
回復 给力 爆菊

使用道具 舉報

 樓主| 發表於 2007-8-25 17:36:28 | 顯示全部樓層
5、標題h1~h6 ──6個等級的標題
, a9 @1 c' o/ `8 S( ~* L* P3 A; \7 ?( l. p8 O- ~" M9 M7 J
段落標籤是格式化文本的開始。% R' J1 s/ ^9 Y% ^1 I* @9 U

; @7 }5 u3 i" s; B( D3 U1 ]$ a  gHTML標籤有專門的標籤處理你頁面上的標題。1 M8 @  x. \& @6 w9 x- S

2 |2 _& s: L7 x+ f) j  m  u它們是h1,h2,h3,h4,h5和h6,像封建社會一樣,h1就是萬能的君主而h6就是最底層的百姓。6 S) j& }" j0 n* B& b+ \

' G+ O, T! q! f& i按照下面改進你的代碼:7 c9 v* o/ h3 D+ Z& k7 n8 f

( h2 w7 v/ J- R9 m' Z4 N: G6 _8 H1 @
$ L7 M6 ~9 q) I6 C* Z+ W5 K. N
Example Source Code [www.cn-webmaster.cn]" H) _: j# ]4 _4 `; d! m% w( c
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" . Y6 c$ R) Y" C6 s0 f2 q
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  I) F/ V$ \" C! p<html>) H; z' k  X( @- m
<head>
) S+ |* N! G; A7 h5 y+ {<title>我的第一個網頁</title>
6 B4 r* G5 `0 z+ r" {9 Q, G" ~</head>+ y4 ?+ k  D3 o9 n( D* U4 T" ~
<body>8 v! K) X# g5 F- o
<h1>我的第一個網頁</h1>
4 {' z  {# Z* C/ _4 E<h2>這是什麼</h2>; ~$ I& p9 A6 g! U
<p>用HTML組合起來的簡單網頁</p>' y# r% u4 f* _  w  o3 \0 Z
<h2>目的</h2>
' t) r- U" `' k" C4 u<p>學習HTML</p>, N* `  B, L% w$ ]( A
</body>
6 w8 ^2 b* M( D- ^+ w6 t! `</html>
; Y: v: @( b  f& s: r$ R' l0 l+ A2 `' L" ~8 X& S  S
注意,h1標籤在一個頁面只能使用一次——假定它是這個頁面的主標題,是不應該使用多次的(相當於一篇文章的題目,你可以有一個副題目,但你不會使用兩個並列的題目吧?——譯者注)。' W% G0 U. z4 h; ?

  d1 ?/ \; u3 C! x. x但是,h2到h6可以如你所需任意使用多次,但它們應依設計意圖,該按順序使用。比如,h4應該是h3的子標題,h3應該是h2的子標題,以此類推
回復 给力 爆菊

使用道具 舉報

 樓主| 發表於 2007-8-25 17:36:51 | 顯示全部樓層
6、列表──定義有序或無序的列表
2 {/ Q7 x! G1 _2 E5 S  e/ W$ e
5 \; {& z: h3 s$ S+ |$ D; T! b) k! S) k  t. z4 V
有三種類型的列表:無序、有序和定義列表。首先我們來學習前兩種,在HTML中級指南中學習定義列表。
+ s8 t. S0 }& R) J; c2 t
0 E8 d% e& a9 O" w0 @) k為你的代碼增加以下東西:
$ |; c) t& ?! \( ~5 r+ j% w; r8 [4 Z/ V8 ?
( n  ~( E* }. K, W& U

: g7 D; ]7 f4 g& Q5 \ Example Source Code [www.cn-webmaster.cn]
1 }* C+ A4 h# i* ?! ]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" / i+ |1 S+ X, J0 Q- G' [* R& h: Y1 z
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"># r% C+ J1 |9 y5 J+ S
<html>/ E/ x1 ?8 R% k- S  R
<head>
! u( P% z; X- [! m. O7 N<title>我的第一個網頁</title>9 O4 ]/ {- `+ {. U. b
</head>
% e5 ~4 {2 T& c: R<body>: ^3 S- p% m7 y% n/ S
<h1>我的第一個網頁</h1>3 f5 `. Q5 f) ~
<h2>這是什麼</h2>
+ X! p- |; O- F$ \3 a: q<p>用HTML組合起來的簡單網頁</p>
& a5 c6 J8 e' F+ ]( }9 l8 d<h2>目的</h2>/ y' \5 t' M" }% |. `
<ul>
& _7 d1 r. d8 S+ e7 z% b6 t( V <li>學習HTML</li>
& j$ W" _( i+ Q: J& y; Q, \ <li>顯擺,炫耀</li>
6 q, A/ E* k0 k: U6 y/ ? <li>因為我已經愛上了我的電腦,我想給她點HTML愛情調料。</li>
$ @8 S( \' o8 U- `+ i" @</ul>/ T  N5 m( m! ]0 C/ j
</body>: `$ {! M& i  y4 k4 [0 q8 \
</html> 0 H. I1 C, e# D
* \. {4 U& D' e8 X: n  }( L9 V
在瀏覽器中查看,你會看到有項目符號(比如方塊)的列表。把ul改成ol後項目符號會變成編號,字母的或者數字的。
# ^" Z$ s, h0 L: P* i2 |' K. M+ Q! s" \* a/ I
列表裡當然可以包含列表,形成有等級層次的嵌套列表。% P7 z; ^- {: h( I1 b$ ^
  X6 s3 @% H) Y# o# U1 B
用下面的代碼代替:
. s9 E: d( m9 Y0 Z/ s) m9 L4 V& l
( n% D: r9 H  q- N2 P
Example Source Code [www.cn-webmaster.cn]! l( s9 ^. x1 w. S/ |( V
<ul>( {2 F. F- e" ?* E5 \+ r! Q8 l( ]6 H* ~
<li>學習HTML</li>
3 T' Q" {. {7 I  S2 @! O3 w <li> 顯擺,炫耀 + K4 g" m) [9 T
<ol>
. Z4 R9 L. P; [- `    <li>向老闆</li>
$ ^* I" J; [0 T# k. P. w2 ~4 A    <li>向朋友</li>; _# ~- b& `4 I
    <li>向我的小貓</li>2 I9 T  g* V, c
    <li>給我腦中多嘴的小鴨子</li>
: d$ Q" F1 g) ~. T3 I </ol></li>
9 j  E' R0 S3 K6 A<li>因為我已經愛上了我的電腦,我想給她點HTML愛情調料。</li>$ ~, t0 G1 z" \+ ^! h( U
</ul>) u! I2 R- ~% q- A6 d
- k" T9 {; q; Q" W6 I
Ay vwah lah。列表裡面包含著列表。你可以在這裡包含更多的列表,還可以在那裡包含更多的列表,等等等等.
回復 给力 爆菊

使用道具 舉報

 樓主| 發表於 2007-8-25 17:37:14 | 顯示全部樓層
7、鏈接──把東西鏈接起來7 F+ c3 V/ }  t8 J$ ~5 c6 J
( |8 n2 y; ?6 I5 ~  S: X5 Y5 U

+ r/ ~% y) U. u5 {, W4 {+ C現在你已經創建了一個獨立的網頁,所有的都顯得不錯。使因特網顯得特別的,是因為它把所有東西都連接起來了。5 g" N) j9 i* ]6 F

2 k+ V6 p; j7 U! K/ n3 LHTML中的H和T代表HyperText,即超文本,表示著一個由連接文本所構成的系統。/ g4 U; Z$ M) Q1 Z+ V
# l2 M+ @$ P5 r
錨標籤a用來定義一個連接,但是還是需要為錨標籤增添其他的東西──連接目標。
% _: ~6 l7 s4 c) @6 C3 I; V+ u+ N* j! l$ G' P- q" R+ }" V
為你的代碼增加以下東西:
1 T# o+ P: r# A
( ?. ~8 H% a) ?' _
$ ^. B, r% P8 _- n( j# N/ N' }# l
Example Source Code [www.cn-webmaster.cn]
: z; ?2 S* _# ?, [. {<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" , h% b( @) E6 z" J$ h
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
1 V. ^4 s4 C' m3 J) w! E% I<html>
. F, C, E8 X+ z& v1 }8 L<head>
- m) h* |, k8 d8 N<title>我的第一個網頁</title>
: h/ P0 J4 q' ?# b* h</head>
4 S3 v# M8 D5 ]8 T" ?<body>& b8 Y  ?  d0 g
<h1>我的第一個網頁</h1>
" y; u9 [- }# v <h2>這是什麼</h2>
; w% x& \' u9 B; Z6 L; k: |( e <p>用HTML組合起來的簡單網頁</p>9 u+ ~: A8 h# L; L( H* `& D
<h2>目的</h2>' j) |6 O6 K. [- G+ |( Z2 c
<p>學習HTML</p># U1 U7 W/ F0 R# B& n) S. @
<h2>在哪裡尋找教程</h2>' |' q* m, X4 o+ z% m; \8 C+ [. ?
<p><a href="http://www.google.com">Google</a></p>" f! u# i4 l" a- j8 i6 M0 h
</body>. ~* _* q! ^8 v( d7 K
</html>
& q$ t: O; i; W6 D1 ]* {9 U- [; ^) V
連接的目標用href屬性來定義。連接可以是絕對的,比如http://www.htmldog.com,也可以是相對的,相對於當前頁面來說。
% a0 o1 r# R- L; k
1 H8 l( ?: D, ]3 P1 U$ P& y所以,假設你有另外一個HTML文檔「flyingmoss.html」,其中一行代碼可以寫成<a href="flyingmoss.html">The miracle of moss in flight</a> ,諸如此類。( C3 d; f4 ^; t  S) c

7 x" O8 r$ B7 u! I% x) E* @* c連接不僅可以連接到其他的HTML文檔,也可以連接到頁面上的其他文件。; m9 l# a  p, I: `! q2 J
; |- u% {) W4 j6 {
連接還可以轉到頁面的其他部分。你可以給幾乎所有的標籤增加id屬性,比如<h2 id="moss">Moss</h2>,然後連接到它,像是這樣做:<a href="#moss">Go to moss</a>,點擊這個連接會直接滾動到帶有這個id的元素。
* Y: K* e6 L$ L6 s6 P9 D9 C( N- B  H' S! R8 g( }, x
注意+ V2 I/ A- U4 [) b

8 Q: i9 H% p6 w' `( X& c1 N$ w8 O* y) u
Example Source Code [www.cn-webmaster.cn]  a1 H0 C3 M2 h- d5 w
a標籤允許你為連接打開新窗口,而不是取代當前窗口,初聽起來似乎是一個不錯的主意,因為它不會讓用戶離開你的頁面。
( M/ d5 i0 ]* l+ ^8 f: _1 }% `5 z# E2 ]$ W, _: V
但是,有很多理由證明,你不應該這樣做。
. x3 p) N! X: g4 e3 \. g: u. B3 I0 W& n6 C7 ?" S/ U. ?" x$ v; t
從易用性的觀點來看,這種方法破壞導航。最常用的導航玩具是瀏覽器上的「後退」,打開新窗口使這個功能失去了作用。
  @$ t* ?" N' M/ T0 |, |" Y7 K5 z6 a! R! |# W) C% E
更廣泛地,還是從易用的觀點來看,用戶不需要到處都是彈出的新窗口。如果用戶需要打開新窗口,他們有權利(是的,有權利。不要強行干涉別人意志,不是很好嗎?在一般情況下,建議你盡量不要使用新窗口——譯者注)讓自己來控制。
回復 给力 爆菊

使用道具 舉報

 樓主| 發表於 2007-8-25 17:37:36 | 顯示全部樓層
8、圖像──添加一點不是文本的東西
  {: n0 o: P" Z" }& r' p3 o# F* ~% X$ n+ |3 _1 h, z

+ k' w9 n* ], y# d- n! R" g( e都是文本的話看起來讓人感到乏味和無聊,自然,網頁不應該僅僅是文本而已(呵呵,對於一些技術性的文檔,我想,文本就已經嚴重足夠了——譯者注),它是多媒體的,最常見的形式就是圖像。0 k0 ?# ^) D. l, M
# _8 W7 y6 Z* p  I8 M
圖像標籤img用來為HTML添加圖像,像下面這樣改進你的代碼:' T7 }) h( \, T$ F" R' Y
. S! P' q9 Y& k* f/ ]* S

9 c( N* A1 A; v' `7 I% J, g% ~' L
$ W* K  F4 A6 N/ y3 L1 ? Example Source Code [www.cn-webmaster.cn]
' o: W$ O8 t7 c) M- n0 O, ~8 J<img src="http://www.yourdomain.com/logo.gif" width="88" height="31" alt="mysite logo" />, b& L% T. G6 V; c4 T& D; @4 f7 h  J

% Q, [! V+ T/ d7 e3 ssrc屬性告訴瀏覽器圖像的地址。就像a標籤一樣,它可以是絕對的,如示範所示,但更多時候它是相對的。比如,你擁有自己的圖像且已經另存為alienpie.jpg放置在images文件夾下,代碼可以這樣寫<img src="images/alienpie.jpg"...
3 k8 b+ n/ F$ F2 V" y" X* N' {) U# Y- P+ V; u& Z& d2 c
長度屬性width和高度屬性height是必需的(Zeldman的「惡名昭著」的《Designing with Web Standards》(中文版《網站重構——應用Web標準進行設計》已經出版,推薦翻譯者之一的著名設計師ajie的網站網頁設計師,你要是沒有訪問過,趕緊去,保準你收穫不小!)中說,width和height不是必須的,這可以節省帶寬。平時做網頁我也不喜歡用這兩個屬性。——譯者注),因為瀏覽器在下載過程中能夠計算出圖像佔據的空間,否則瀏覽器可能會產生一個頁面的跳躍,因為事先並不知道圖像要佔用多少空間,以致於破壞頁面佈局。
. p8 Z1 }/ i. c8 w8 t$ x. R5 {
4 Q/ v2 |2 w+ W/ Ualt屬性表示可替代的描述。這是為不能或者不選擇圖像顯示的客戶端著想(比如終端瀏覽器lynx,不能顯示圖片,但可顯示alt中的文本。最壞的情況是,你寫錯了圖片的文件名或者路徑,即使在圖形瀏覽器中圖片顯示不出,但仍可顯示出alt中的文本,不會讓訪問者造成不必要的誤解。什麼情況下我們都推薦你,一定記得使用alt。——譯者注)。在最新版本的HTML版本中,這是不可缺少的屬性。6 J; I) ^( {2 _( x, l6 r3 M
/ `& {+ }9 B: C+ n5 {% }
注意- ^8 l) `; O" B

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

使用道具 舉報

 樓主| 發表於 2007-8-25 17:38:11 | 顯示全部樓層
9、表格table ──使用表格式的數據
: h6 Q. t3 P, k' ~+ j% B
7 D( M7 @3 X. k* a% }漫步萬維網世界,有多少HTML表格被用來佈局頁面,還一度被濫用。我們會在 CSS高級教程中學習怎樣不用表格佈局頁面。表格的正確用處應該是,展示表格式的數據。
3 U& s( {9 }% o$ y4 ]/ ~7 @+ N$ }/ X/ e4 ?/ }
有很多標籤可以用在表格中,在初級指南中教授表格是如何工作的確實是一件比較困難的事情,沒有關係,我們一步一步來,先來看一個例子。例子什麼時候都是學習的好方法。- \! n2 d+ {" {/ ~. f
- ]6 Y8 y9 K! y9 I1 i' B
把下面的代碼拷貝到你文檔的主體(<body>與</body>中),我們就可以明細每個標籤是任何工作的了。. _- Q+ D; _1 x7 \7 f8 w
+ ~) F4 K; j3 p% H2 E) g7 J; `: v
( ^+ ]0 G7 Q4 d1 W) s; i
6 M3 i  S' h' |9 c( V
Example Source Code [www.cn-webmaster.cn]. p1 ?) x2 |, {* d/ F/ p8 |
<table>
+ t# l' T" F* A0 H: a<tr>' l2 D# U+ i$ k" O: D5 p# T
<td>Row 1, cell 1</td>1 |+ T2 H( S, z; R% k- e
<td>Row 1, cell 2</td>
- r- x0 D1 w4 T' r$ \4 B0 a/ U<td>Row 1, cell 3</td>+ M0 F, q, x  f
</tr>
, @' Y" W5 u  r<tr>/ `/ B  M, z* M! U* n9 `
<td>Row 2, cell 1</td>( {3 Z, K8 I( N2 {# P
<td>Row 2, cell 2</td>
4 {$ V! {  u7 ?& y& s; H<td>Row 2, cell 3</td>
& w4 L8 I2 s& {( g4 i</tr>: x: M& i0 e1 O; R- u) y2 t6 P! `
<tr>: k' ]+ o9 L' K0 I& z' F) I. P
<td>Row 3, cell 1</td>
* i* L( l  }2 e' w( W+ `<td>Row 3, cell 2</td>
, j/ M8 Q: k$ V4 A<td>Row 3, cell 3</td>
7 p  @5 w, R7 F' P+ c</tr>
2 g& {5 i0 M  o6 [<tr>
. @, }9 T( P4 ]- b<td>Row 4, cell 1</td>0 ]# [8 _- t. u8 n2 V$ t
<td>Row 4, cell 2</td>
- u( C2 u" t+ p+ `2 G<td>Row 4, cell 3</td>+ J* A  L  _" w/ _& W5 `' {
</tr>3 B* J  S# ^5 H" j% m
</table>
9 A/ ^# n! J2 g4 L! Q 8 Z& u& @2 Z/ n/ Z1 M: W
table元素定義標籤;tr元素定義表格中的一行;td元素定義數據單元格,這必須包含在tr標籤內,如上所示。7 u- b: s) ^& E! ^  D5 I6 _8 M
- o: L: s7 z; t! a0 `. J
假設一個3x4的表格,包含12個單元,這就需要4個tr元素來定義行數和3個td元素在各行,總共有12個td元素。
回復 给力 爆菊

使用道具 舉報

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

本版積分規則

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

GMT+8, 2025-7-11 13:05

By DZ X3.5

小黑屋

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