11、綜合應用__把上面所有的要素堆積起來
0 K, \. `6 ~" Z( z# u, {7 f
: t: l5 Z* {; G, U( c0 {, Q如果你業已全部瀏覽HTML初級指南的全部頁面,學習完畢初級指南,你事實上已經是一個能幹的HTMLer了。
8 m2 Z B2 v" R3 y
5 c! g0 K* I+ N5 B實際上,基於許多人編寫HTML都相當差勁的事實,你應該做得比他們更好。3 [/ L* B+ @5 }' ]0 B! i; ~3 f! n
0 v7 @6 e& r: ~' `' I" @; x下面的代碼把前面所教授的綜合在一起了:9 H& b; p8 ~ Y
2 r3 T, J2 Z& ~+ d8 w) M/ p, E3 l
$ A+ e$ z8 F# e" S3 W' F1 o# h) I7 |; E. J0 U3 O9 L
Example Source Code [www.cn-webmaster.cn]- [0 A: }1 b$ h( L: C2 b
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" D2 i& j. R, L9 l
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
5 H1 y3 z2 z0 K<html>% s) [/ P: ]& T+ _
<head>
2 B% p2 Y/ [# w* g! [<title>我的第一個網頁</title>
$ _& A, I, }) k# e( T$ q# O<!-- 順便說一下,這是註釋 -->/ o3 e% e3 D9 j! t5 B
</head>, o9 a; f$ t$ W1 a
<body>7 ~' r! d; C) c8 \
<h1>我的第一個網頁</h1>
1 Y1 ^4 ]5 t5 G5 t# R<h2>這是什麼</h2>% L. L4 z/ H; ~7 T5 \4 y
<p>用HTML組合起來的簡單網頁。 <strong>A用HTML組合起來的簡單網頁。</strong> 用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。</p>* L! W- Z* G) x# N! P; a
<h2>目的</h2>/ y" @3 [7 C- Z# A5 [
<ul>" }0 J; T) o7 K" U6 P" g
<li>學習HTML</li>
2 [- F6 b" |! H8 _) e# s8 G<li> 顯擺,炫耀
* g0 P" I5 H' @# N <ol>3 W" j4 ~1 L+ k8 N) K% l$ V* c. U
<li>向老闆</li>, w5 y) ~. U* Q3 v# u1 P! }
<li>向朋友</li>
) M$ M# P. v: X% a <li>向我的小貓</li>1 s9 [0 S! O {' f9 P* W
<li>給我腦中多嘴的小鴨子</li>4 N k* d4 U R8 E# s3 ]. Q8 O
</ol></li>
$ f5 i6 A. T. r: }5 ~7 Q% _, w$ G<li>因為我已經愛上了我的電腦,我想給她點HTML愛情調料。</li>
) z" n4 _% C! @4 \4 j</ul>
, @ c" V2 o e) y<h2>在哪裡可以找到教程</h2>
e% y) m9 @$ l- @) @. Q7 |<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>
* m# a, h9 [ J+ e/ J' g0 t<h2>一些隨意的表單</h2>
. `, a0 u& n6 y% n0 ^<table border="1">8 @7 h' ]+ {- R6 q r1 S' J
<tr>
! G Q" o; ~4 g0 H<td>Row 1, cell 1</td>' x+ i$ S7 R1 Y' p0 Z
<td>Row 1, cell 2</td>
6 z2 N+ L* l' Z<td>Row 1, cell 3</td>( r# B5 q& j& g: p
</tr>, B: A8 u; u$ b* h6 E/ ~: ]
<tr>. o" s: P5 Y, r
<td>Row 2, cell 1</td>
* n. t) D. R1 t! I3 t& ?2 u7 r<td>Row 2, cell 2</td>
# Y6 }- k) r" ^( M<td>Row 2, cell 3</td>
3 H8 N, z, n7 U6 l6 O% l# ` a' t: B</tr>
% X( b; d' l! y5 P+ R<tr>
+ m: }) Z: a5 \$ ~<td>Row 3, cell 1</td>0 e k+ O) u- K
<td>Row 3, cell 2</td>
6 L X7 |- y1 ?6 h% V0 u$ f8 s<td>Row 3, cell 3</td>
: Z' Y& S1 c+ Q9 X4 M' p2 `% M3 b</tr>( y6 t G4 ?0 M' o, F
<tr>" n" K _& P& F+ P+ e3 |! E; }
<td>Row 4, cell 1</td>
: c$ T6 Q. W! {( l9 p<td>Row 4, cell 2</td>
, z% N/ i9 @# z<td>Row 4, cell 3</td>
+ {9 K$ g3 ~& I9 Z+ X( V5 O* k</tr>" b0 j: ]% z9 P6 F
</table>
) k' a% }) U6 \) j( k ]<h2>一些隨意的表單</h2>& r- Q& A6 E1 h* j! m0 F: b3 {
<p><strong>注意:</strong> 看起來似乎很重要的部分,但實際上什麼都不做</p>( Z- J B; i6 t+ c1 {
<form action="somescript.php" method="post">
- k8 H: K: ~8 s% e! V<p>名字:</p>' r) q4 |- Q' ]% P ], H6 `
<p><input type="text" name="name" value="你的名字" /></p>
) c8 f+ O! e4 [! N" w<p>評論:</p>
/ o0 Z" ^# F' `: q) q6 [! ]) R<p><textarea rows="10" cols="20" name="comments">在這裡寫下你的評論</textarea></p>
- | K1 [% C5 k5 j1 p8 v' E b- Z<p>你是:</p>; Y; t; f) x+ |: Q0 [& \
<p><input type="radio" name="areyou" value="male" /> 男性</p>
" H& p9 v! N5 B# n9 Z) _$ H<p><input type="radio" name="areyou" value="female" /> 女性</p>) L T5 S5 y: O* o# _1 m
<p><input type="radio" name="areyou" value="hermaphrodite" /> 雙性</p>
" L1 Z9 E9 V2 I9 i: r<p><input type="radio" name="areyou" value="asexual" checked="checked" /> 無性</p>
- }7 @9 W$ ^8 N% N<p><input type="submit" /></p> <p><input type="reset" /></p>
S) s5 d W, v</form>
& s1 P* f7 X% c# N</body>% S7 x* n+ ?3 k0 S8 E$ G; g/ v+ a. ~
</html> , q: [! n# t Y& z: ^
1 ^+ x9 h L( G O& E7 D5 }2 ~: _
就這樣。保存文件,然後在瀏覽器中查看──這是理解所有工作原理的最好方法。繼續吧!
2 p% ^; {- I: ?+ P; N
9 [( [+ [. S) h感到滿意的話,你可以繼續學習CSS中級教程了。 |