11、綜合應用__把上面所有的要素堆積起來. t7 p" g6 {) `- S5 M& J7 F
/ c6 E2 K L$ z# k# ]3 b如果你業已全部瀏覽HTML初級指南的全部頁面,學習完畢初級指南,你事實上已經是一個能幹的HTMLer了。
0 n0 S+ Q9 X% Y7 h$ F
" t$ k2 d; W+ q& y: j0 r0 z6 D實際上,基於許多人編寫HTML都相當差勁的事實,你應該做得比他們更好。8 q4 @$ f5 x& \. J3 D2 E/ T
: O9 x, ] H3 d3 s$ W0 p! @
下面的代碼把前面所教授的綜合在一起了:
6 _- e7 K; U, J6 K0 A
g3 }8 @1 K" F" U: ?4 x
8 |6 B, I" g; j, h+ D7 r, B9 g& U1 W
Example Source Code [www.cn-webmaster.cn]
v8 k+ T/ s& R" J<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 4 r$ H$ c: J& k; Q: u
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
! P5 U- s" z" c& O5 n+ S+ y' o<html>
4 U& W' W; {# R/ D% e<head>
" g, j+ e% i! ?* U' C% f9 N+ X" S<title>我的第一個網頁</title>: H, z7 M9 X+ k
<!-- 順便說一下,這是註釋 -->% o& I H2 b5 Z$ M' d. y7 h; b
</head>6 o$ V- l; R/ b
<body>( M; Y ~" V, f+ _5 Q t- [; V
<h1>我的第一個網頁</h1>5 o! E4 |" D d5 D; F
<h2>這是什麼</h2> `" p/ r# x' b6 _/ ^* P4 M
<p>用HTML組合起來的簡單網頁。 <strong>A用HTML組合起來的簡單網頁。</strong> 用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。</p>
0 }+ F- \- |2 \; C* S$ S' G<h2>目的</h2>
5 L/ J! O+ b' @( T( M4 z<ul>
! w. G. d m) G% z' \: ~<li>學習HTML</li>
3 ^+ Z; {5 ]- f1 H F<li> 顯擺,炫耀
7 C* x2 `# R- ^; d/ \! X0 C <ol>, Y, o7 d3 B9 F% ~" }% p# b; o
<li>向老闆</li>
* c V& ~1 m( j: p <li>向朋友</li>
: d& _ p9 d% K7 K2 B0 e7 B' F6 \ <li>向我的小貓</li>
t. b& F2 X0 O4 P <li>給我腦中多嘴的小鴨子</li>
- Q+ ?# z; `- u9 Z/ \ x. ?2 j( g </ol></li>
& R& c9 _9 }. v8 l1 v9 ?: _<li>因為我已經愛上了我的電腦,我想給她點HTML愛情調料。</li>
4 G0 V( {/ d% O8 l+ b</ul>
]* m6 J- j6 o( t. ~5 c6 R7 W: Y) h<h2>在哪裡可以找到教程</h2>& x1 ]# E" d* \8 a9 S/ g) h! Z
<p><a href="http://www.google.com"><img src="http://www.google.com/intl/zh-CN_ALL/images/logo.gif" width="88" height="31" alt="Neo1 logo" /></a></p>
y) z! @4 _" ^/ T; c; b<h2>一些隨意的表單</h2>1 }+ P( w2 s- a8 v9 f* p- x
<table border="1">
" H8 V' ~) d3 K<tr>
7 `( u1 s+ D+ T! ` Z" U<td>Row 1, cell 1</td>
" }4 Z. o9 Z* `( U* u* ]$ m<td>Row 1, cell 2</td>
; o+ n2 R2 s" N" I% w1 a: K<td>Row 1, cell 3</td>
5 p3 z* r: ]0 X7 e2 n. N* X) D</tr>
/ l6 d! L7 \- O: W<tr>5 b6 ~9 ]( l. z. b- m
<td>Row 2, cell 1</td>/ ~3 j+ ~1 U0 \' ^" [2 m
<td>Row 2, cell 2</td>
" i8 [: y6 L7 K3 l, z; A# u% i<td>Row 2, cell 3</td>1 l# e) m7 Y9 g! Q" o) I
</tr>
, ]0 u3 P1 _3 w: E/ D& N<tr>
( n+ M9 l0 [& d `+ c$ }<td>Row 3, cell 1</td>+ B) t6 |. v9 C* C, \! E. n5 |( ^
<td>Row 3, cell 2</td>
, o4 _: ] n0 e% m: m; U<td>Row 3, cell 3</td>
. `4 G) Z+ y8 o9 p/ f6 \9 J5 C</tr>0 K6 p3 m7 X5 q, P
<tr>3 n8 `# d/ I% Q2 ^/ H9 k/ i+ \1 B- P
<td>Row 4, cell 1</td>6 a. C8 Y6 O; `1 p% N$ l; O
<td>Row 4, cell 2</td>% X9 Y! \- w1 }; L
<td>Row 4, cell 3</td>! F7 G7 p- ^) J! \7 f
</tr>
% M' b9 K% e- Q9 }4 r6 i/ @</table>/ z# j: k. T& A- i( V
<h2>一些隨意的表單</h2>" e$ B3 ` F* s0 S$ w8 ^- u4 p
<p><strong>注意:</strong> 看起來似乎很重要的部分,但實際上什麼都不做</p>/ @6 V8 {) [0 E9 L
<form action="somescript.php" method="post">
* T- W3 i9 q6 f' w6 P<p>名字:</p>% }2 ^ F( {2 L3 Z( v2 ^ x$ y
<p><input type="text" name="name" value="你的名字" /></p>
1 o# Y2 b; m5 i" H; [7 E% Z3 \<p>評論:</p>
) z) y, G* C7 N<p><textarea rows="10" cols="20" name="comments">在這裡寫下你的評論</textarea></p>8 ?8 B& d% e- Y7 m/ b
<p>你是:</p>5 o$ B+ O" l8 G3 \: n7 P
<p><input type="radio" name="areyou" value="male" /> 男性</p>
# Q4 i" W( v) a( M9 y<p><input type="radio" name="areyou" value="female" /> 女性</p>; `$ r+ c8 S" g
<p><input type="radio" name="areyou" value="hermaphrodite" /> 雙性</p>+ m8 n1 g% a e5 L' ~+ X" Q
<p><input type="radio" name="areyou" value="asexual" checked="checked" /> 無性</p>8 m! ~6 Y2 e2 K( O% s, L
<p><input type="submit" /></p> <p><input type="reset" /></p>9 D6 x1 J7 l: g
</form>
5 n1 E/ ?: B' [</body>
* K8 K$ V* n: l. m/ Z5 P3 d9 V4 ?</html> 1 `( @+ p( j" T
$ s6 T# }5 h, `就這樣。保存文件,然後在瀏覽器中查看──這是理解所有工作原理的最好方法。繼續吧!
, ~' o3 ~# M, M- D; l9 L. o8 k
' ]( Y4 m/ p! e7 H感到滿意的話,你可以繼續學習CSS中級教程了。 |