11、綜合應用__把上面所有的要素堆積起來+ @" @7 E9 z5 X! t' q& y# P3 E
! Z# Q) i2 r* K0 b如果你業已全部瀏覽HTML初級指南的全部頁面,學習完畢初級指南,你事實上已經是一個能幹的HTMLer了。
7 Q& d+ o" `* u: v' ?, ?
$ E$ _5 V& f- @7 x實際上,基於許多人編寫HTML都相當差勁的事實,你應該做得比他們更好。
: n6 n: N2 F1 f2 f# W! H" M
: X; X1 k w' j( C- U Q1 P# E下面的代碼把前面所教授的綜合在一起了:' r) Y* M# V8 x
! ~) b6 k$ e1 S5 o' K( B; ?$ p3 d' r+ A( y
' o% v, H- n! @9 Y. O" g7 u7 w. m4 |4 U% r$ W( G6 Y% K
Example Source Code [www.cn-webmaster.cn]
5 R- ~, L) d8 @& E* ]5 E+ F<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
6 v- }/ I `: p8 N3 `/ x# s( g"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">4 K8 p+ Q t9 \ [5 z# \, I
<html>
6 u1 b3 x9 x! A5 D+ i<head>, E" L4 j/ ~1 k$ E
<title>我的第一個網頁</title>
$ X0 C8 X/ e/ _/ c Z3 I<!-- 順便說一下,這是註釋 -->2 M2 E* m1 I, \) w, }4 b
</head>
$ Y$ o" ?+ r8 B- P: }& X: e<body>
7 U" A8 Q& c4 ~. Z<h1>我的第一個網頁</h1>
: S) g* u2 G5 n1 A! w4 x+ s<h2>這是什麼</h2>
$ L P) n7 E. ^2 s) Z- q" P<p>用HTML組合起來的簡單網頁。 <strong>A用HTML組合起來的簡單網頁。</strong> 用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。</p>
6 y+ i; ^, e- L7 E$ e9 Q$ K<h2>目的</h2>
. g3 @5 ^) Z2 S<ul>) f# {; `# _/ b% W
<li>學習HTML</li>+ E$ }) p" b2 d7 G. c9 j; s5 m
<li> 顯擺,炫耀
4 N+ w1 O) N+ ~! S# {. [- I <ol>$ z& {7 o8 m" j& \8 H+ V+ e
<li>向老闆</li>
! Y& T$ h; ?! Q) V6 o! y W' b <li>向朋友</li>% M2 l% }1 n6 A2 _
<li>向我的小貓</li>5 n/ f$ Z+ K s4 a2 `
<li>給我腦中多嘴的小鴨子</li>9 Z6 i0 X; k6 d5 B$ Q" F3 }( L' l
</ol></li>3 j% i1 O5 f: |# J! V
<li>因為我已經愛上了我的電腦,我想給她點HTML愛情調料。</li>! L8 p+ j& s: B. o5 a
</ul>/ @6 g/ g: U3 G) L: e
<h2>在哪裡可以找到教程</h2>
% B" n% |/ X8 A1 k6 F. T<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>
+ O) d& e; P& G<h2>一些隨意的表單</h2>
. C4 ~5 m" Q, _6 N<table border="1">7 Z# }- V* M5 l% v* }0 X7 r. [
<tr>
G8 X/ l. u' A<td>Row 1, cell 1</td>0 H5 @2 b) K/ j. H5 {2 F! e
<td>Row 1, cell 2</td>
% `6 Y( m5 _$ P0 y3 Y! h# q<td>Row 1, cell 3</td>
- q4 g& O: G& Y/ J6 d! y</tr>
5 L$ f* Z* b! k- _! B<tr>6 f5 E5 O" b; g+ L; g
<td>Row 2, cell 1</td>
2 s, S9 c$ E% q5 H' {; q4 f" X<td>Row 2, cell 2</td>
9 u4 m2 C6 J! y; @. T<td>Row 2, cell 3</td>6 R- t3 l' T* t% @ N
</tr>
9 l. N' F" t3 ^$ j3 D3 J<tr>
; |2 V' r& a* @! @4 E<td>Row 3, cell 1</td>
0 [% w* F! R/ E( G<td>Row 3, cell 2</td>. u7 l) i. v) a9 w7 z; P) q; M& q8 s
<td>Row 3, cell 3</td>
) X1 F; \6 m' v6 X- J1 J& H</tr>
" ?/ M* l1 d1 @- f7 K: p& S<tr>2 M) r7 x1 D7 y
<td>Row 4, cell 1</td>
2 e7 k- W. S$ ^( ~<td>Row 4, cell 2</td># y1 h- m0 L; G
<td>Row 4, cell 3</td>
. r* O( o+ T6 T# Q3 g* B$ w! [& B</tr>( V1 q6 P7 `+ Y2 E& @& y: w! E. Z
</table>( c+ }* o0 `0 Y0 ~
<h2>一些隨意的表單</h2>
* Q9 m2 D3 n6 i<p><strong>注意:</strong> 看起來似乎很重要的部分,但實際上什麼都不做</p>
# U7 H: `8 K* \' }; s: v2 e<form action="somescript.php" method="post">, }' x4 b/ [4 ~' Q: |. h7 g
<p>名字:</p>
8 [0 ^) ^2 A! `# E2 l) _* e4 _. a<p><input type="text" name="name" value="你的名字" /></p>" @3 H8 z! r' L# b% b% I8 l8 r
<p>評論:</p>
* x& `8 w; s* }<p><textarea rows="10" cols="20" name="comments">在這裡寫下你的評論</textarea></p># e7 b$ b% g8 N9 {' `- S# |; w3 f
<p>你是:</p>
0 W* M8 }0 ]( M* [1 x" d<p><input type="radio" name="areyou" value="male" /> 男性</p>
* C1 Y* m% q% t5 i, I<p><input type="radio" name="areyou" value="female" /> 女性</p>
% a; y% U8 R& K<p><input type="radio" name="areyou" value="hermaphrodite" /> 雙性</p>+ v$ ]9 M- }6 I; y: i
<p><input type="radio" name="areyou" value="asexual" checked="checked" /> 無性</p>
( ^" j5 H5 c U: S" S<p><input type="submit" /></p> <p><input type="reset" /></p>8 @* ^+ t5 C1 S/ j
</form>5 m/ e/ K* {9 f8 }' |
</body>
4 m' h r% I/ n% T& K/ [</html>
/ X. z4 x \% f: Y( H6 p8 D2 u; \# R2 \# z$ G
就這樣。保存文件,然後在瀏覽器中查看──這是理解所有工作原理的最好方法。繼續吧!
3 D! I; P: m& ]& T3 ~1 \. ~" v5 r( E8 Q ]# w
感到滿意的話,你可以繼續學習CSS中級教程了。 |