11、綜合應用__把上面所有的要素堆積起來
. b! C; V: v, M' |2 w, i2 ]2 Y
如果你業已全部瀏覽HTML初級指南的全部頁面,學習完畢初級指南,你事實上已經是一個能幹的HTMLer了。
1 {& w' D5 J3 ?* h A, _
# U+ D% c% ?# v) a0 f實際上,基於許多人編寫HTML都相當差勁的事實,你應該做得比他們更好。
: D/ w8 v) |' P& b, y# h2 \8 k7 h; u/ H
下面的代碼把前面所教授的綜合在一起了:
, z1 ?3 V# F- t; j8 C
- [! a2 S) Q" E4 e8 t/ j5 x; @
1 m" k0 ^/ n0 a% {3 J5 M/ q" W7 w) h# j" O( d
Example Source Code [www.cn-webmaster.cn]
! }8 L2 z E: r, q1 ~<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
2 ~) }5 @' C# |' R* X: ]"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
" d6 t9 y+ D) b4 f: ^+ ?<html>
& z' w; d; c. _5 F<head> s& i3 G8 W" x' E. w" d
<title>我的第一個網頁</title>
/ T+ x E: J# j2 e: Z: J<!-- 順便說一下,這是註釋 -->
9 y. D5 F9 y$ |</head>
( C; X5 I" ?7 v3 ]* `<body>! J7 ?7 j9 ], V5 O
<h1>我的第一個網頁</h1>7 H( d2 T( u* |) H2 S8 n* N% ]. \: ?
<h2>這是什麼</h2>: l& R# n9 ~( A1 _+ {# z! \4 m
<p>用HTML組合起來的簡單網頁。 <strong>A用HTML組合起來的簡單網頁。</strong> 用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。</p>' y$ @) U0 E3 o8 J- j
<h2>目的</h2>% X- {7 g4 {2 ?$ q; c& _
<ul>
$ d" E/ Y/ i* a0 y# T. D2 a0 D4 |<li>學習HTML</li>
! L+ m% ?( v/ H0 C' R% ]<li> 顯擺,炫耀 ' P- g e7 X( V: t- M( C
<ol>3 p7 E9 Y# ]* o% Q
<li>向老闆</li>
) H z+ b; G# w <li>向朋友</li>0 T! z r6 F: s; \
<li>向我的小貓</li>
3 E- }* L5 ~4 l) k& s4 v <li>給我腦中多嘴的小鴨子</li>* I" T7 q9 q$ I [, t
</ol></li>- k0 c; `$ b- ^3 e: l2 g' H
<li>因為我已經愛上了我的電腦,我想給她點HTML愛情調料。</li>
2 i" F8 [- i+ P9 |8 H, N# N! [* k</ul>$ R f) n' u3 u
<h2>在哪裡可以找到教程</h2>
/ Q0 P- J% r% y8 ~" {<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>
& q/ D k3 \# ]0 _( z<h2>一些隨意的表單</h2>! b# d6 V$ P# T$ y
<table border="1">3 {2 R# @: b! B+ S8 l8 f+ q4 ^
<tr>
1 T! v1 D& O7 r5 M; Y) X0 K<td>Row 1, cell 1</td>2 k! ~0 T$ R7 z3 s$ g; Q3 r
<td>Row 1, cell 2</td>
' G& Y' i7 _8 t# D. O. H( s) n<td>Row 1, cell 3</td>
& x5 x+ @/ B7 _</tr>0 Z1 N, @; p( N/ i6 u. Q
<tr>
) o4 M- ^8 ]5 F" a6 N* ?0 N<td>Row 2, cell 1</td>3 C& n Y2 R/ b% q' w; w
<td>Row 2, cell 2</td>
p; V. G& j) t& W7 D<td>Row 2, cell 3</td>
& H3 U0 M2 x! D9 u. U( I</tr>1 v- {% v3 l$ o) z7 w
<tr>
: S& Q7 \$ p8 s9 A) l) W<td>Row 3, cell 1</td>( [, r- w% z2 M: M( z \( x7 W1 J
<td>Row 3, cell 2</td>
u' H* B+ g+ z0 L, F$ ]<td>Row 3, cell 3</td>2 ]5 v3 x' c2 u( S. ^' ^! ]1 P1 o
</tr>
' ?" B; I, G4 ^. F<tr>
! J# N4 ?' i5 |+ B/ @<td>Row 4, cell 1</td>
) a+ a2 x# H4 [* B9 q8 I5 {<td>Row 4, cell 2</td>+ l- v! ~6 Y( e" G3 ?
<td>Row 4, cell 3</td>
5 u+ u! y8 Y4 D# D</tr>
- H @& w3 m% O6 r8 O</table>' s6 ~* l" J3 _! |2 H6 [
<h2>一些隨意的表單</h2>
4 R$ F* \& Q% k& @6 N" v$ D<p><strong>注意:</strong> 看起來似乎很重要的部分,但實際上什麼都不做</p>5 t2 @5 n( s! \
<form action="somescript.php" method="post">+ E6 H ~5 b/ Z7 i
<p>名字:</p>' a. J, z5 J5 S" E# D8 M
<p><input type="text" name="name" value="你的名字" /></p>
1 O C+ @, E) }0 I<p>評論:</p>, W5 _8 f! Q+ R0 W3 ]
<p><textarea rows="10" cols="20" name="comments">在這裡寫下你的評論</textarea></p>6 z. J2 Y' @$ N; q/ ~& |7 k7 p% j: ]- Q& S
<p>你是:</p>+ p0 ^2 K7 d! t& R9 y+ G
<p><input type="radio" name="areyou" value="male" /> 男性</p>* `* i" X. H$ g2 N) a
<p><input type="radio" name="areyou" value="female" /> 女性</p>
# w0 r7 x: F/ z% u: @<p><input type="radio" name="areyou" value="hermaphrodite" /> 雙性</p>
& A7 }+ v0 I9 {, l<p><input type="radio" name="areyou" value="asexual" checked="checked" /> 無性</p>
+ W# @9 }( h7 e8 R z<p><input type="submit" /></p> <p><input type="reset" /></p>8 D. }( P3 H, g x1 h
</form>
! @9 v! A+ }. u1 P( {</body>
& j# G z$ ]) |- Y0 J</html>
; |8 p% B: q2 D
) |0 x7 W% D8 p; R- R4 t就這樣。保存文件,然後在瀏覽器中查看──這是理解所有工作原理的最好方法。繼續吧!
" e/ A- N. E# ?6 I" S9 F4 [
4 k8 N7 n5 q' I: a$ \感到滿意的話,你可以繼續學習CSS中級教程了。 |