11、綜合應用__把上面所有的要素堆積起來
! x1 f- q$ G" y8 B7 B; D
7 v9 {) j3 ~ Q: H8 H如果你業已全部瀏覽HTML初級指南的全部頁面,學習完畢初級指南,你事實上已經是一個能幹的HTMLer了。
$ k# W: L; ~' Q5 |1 p# \( Z
! C$ O) L. Y" W實際上,基於許多人編寫HTML都相當差勁的事實,你應該做得比他們更好。
$ A$ w: X" j. I8 L5 j H- l! l; A+ j2 p" O. U
下面的代碼把前面所教授的綜合在一起了:
/ |7 @. r, e3 R: N! `5 k9 g5 M9 `: g. \2 G* z$ I3 B
9 N7 L/ \/ t& T; V7 s2 L- f% T B' z: c# U
Example Source Code [www.cn-webmaster.cn]
: ?. g" R& j. l* Q" \! [. S<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" & x2 R6 t( |! F( p' m% k# s
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
0 `0 p7 U) \) D<html>
0 T# y F& o) |7 u- z8 a<head># P G/ y. @9 U2 b( h
<title>我的第一個網頁</title>- ^) `$ L, ^0 R; y- t* m
<!-- 順便說一下,這是註釋 -->2 J& m d5 F/ I4 K
</head>
7 f2 H. |5 v* S: ~' M<body>
) W a0 ^; g5 ^3 o: e! g n9 \" B<h1>我的第一個網頁</h1>7 z% r$ f) S7 x( l0 k' U
<h2>這是什麼</h2>. h; B( L8 [$ x( `
<p>用HTML組合起來的簡單網頁。 <strong>A用HTML組合起來的簡單網頁。</strong> 用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。</p> ~$ w6 u6 Q9 Y* h* a" B1 g
<h2>目的</h2>) P; l0 h5 _& K7 n
<ul>
' k; s" Y J! ~/ f( B5 B- \<li>學習HTML</li>
4 C# Z/ o: f3 O1 d; @ ? c<li> 顯擺,炫耀
, T+ f! `' O; m9 w: O. L <ol>+ ^3 R$ P- k$ T" ?1 }+ b5 o
<li>向老闆</li>1 _" H; Y c+ w
<li>向朋友</li>' I% `7 e8 W7 g! l% s ]5 v
<li>向我的小貓</li>* q* a7 [( g6 }1 l9 L# \
<li>給我腦中多嘴的小鴨子</li>
6 ~3 i2 t% g9 h8 e, p! a: K& W </ol></li>
% E8 t2 A+ G1 C7 z6 K<li>因為我已經愛上了我的電腦,我想給她點HTML愛情調料。</li>
9 O5 c4 f" F0 H& R" t' i: T9 Z6 @</ul>
( y+ z. E g7 W5 d: [8 N1 f; l% b/ L<h2>在哪裡可以找到教程</h2>" i* X& k/ G% E! a2 r' I7 n
<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>
1 C6 F' x6 u4 B: t' N9 @- r<h2>一些隨意的表單</h2>
% f' R' t/ ?' C+ R2 a) H% q<table border="1">/ \8 z% i4 J3 g# c# W2 S
<tr>
% u- @, T+ G" [, F% \<td>Row 1, cell 1</td>( _6 ~, D1 \& U. J' Z) R4 M
<td>Row 1, cell 2</td>
9 Q6 a/ f* B# l; e) b# ?, h4 ?<td>Row 1, cell 3</td>
8 Q4 s4 T0 N# }; b1 T. q</tr>" t% d$ h6 }; W" @1 E
<tr>% T t+ ]2 L W- p' }
<td>Row 2, cell 1</td>
; Z3 V1 v( k' ?/ V" n H+ v% P<td>Row 2, cell 2</td>
" q* d, ^+ E9 q, x; s<td>Row 2, cell 3</td>
7 P7 p6 G$ X, h$ O' r</tr>+ C! o5 h' L. [. L
<tr>
7 I _5 C9 _! E9 B. c6 L7 c6 v5 b7 r<td>Row 3, cell 1</td>( Q/ ~4 v2 N Z* O7 R/ l! B
<td>Row 3, cell 2</td>2 ^4 A" V; D% K/ h$ |
<td>Row 3, cell 3</td>
7 I' F5 {9 }+ h</tr>
& E' p; V' C3 T+ B<tr>; y5 Y4 z) s. r# S% p
<td>Row 4, cell 1</td>! T% r$ l6 G5 h$ r1 F' R, v
<td>Row 4, cell 2</td># f. G6 V& B+ U* T* D
<td>Row 4, cell 3</td>
. D N) ]0 `9 T/ f</tr>
* |( g5 `7 z: \6 Q</table>
, V0 V. Q5 y4 W, @- m<h2>一些隨意的表單</h2>
, W: F1 y" Q1 f5 J0 {<p><strong>注意:</strong> 看起來似乎很重要的部分,但實際上什麼都不做</p>
. ]& s) B5 Z* x7 _- i- m<form action="somescript.php" method="post">
8 M# K1 x! H7 i' E<p>名字:</p>. r6 K9 E3 s& V6 S6 d" ~) v
<p><input type="text" name="name" value="你的名字" /></p>3 ~3 Q& I+ `4 K* D' \
<p>評論:</p>- b, a! y* _& l: E
<p><textarea rows="10" cols="20" name="comments">在這裡寫下你的評論</textarea></p>+ T- U0 I/ }7 J1 D( i K0 D
<p>你是:</p>$ ?% ?$ s0 m& F" a" D
<p><input type="radio" name="areyou" value="male" /> 男性</p>
+ x2 \# e) `& ^' U3 C, c<p><input type="radio" name="areyou" value="female" /> 女性</p>
1 ]. g! J/ O" [9 i9 r) S<p><input type="radio" name="areyou" value="hermaphrodite" /> 雙性</p>
1 g$ I9 n% d* c; _, u; [" e<p><input type="radio" name="areyou" value="asexual" checked="checked" /> 無性</p>
) C# A! `; f$ y) h2 g3 \- ]( p<p><input type="submit" /></p> <p><input type="reset" /></p>
* r! e& R% i8 N; e</form># t' l3 `/ \( G6 l& J( d
</body>6 z/ J% p' `2 S0 U+ A( j) _! }8 _* I
</html>
1 W' C: o$ O! p/ \0 o, c" E3 t9 ]# A% z
就這樣。保存文件,然後在瀏覽器中查看──這是理解所有工作原理的最好方法。繼續吧!
0 E, F/ b! l5 K, w: j/ p' n! w: p @& C4 R2 ?7 E" z9 E# ^1 w0 ~. f
感到滿意的話,你可以繼續學習CSS中級教程了。 |