11、綜合應用__把上面所有的要素堆積起來
1 a; c* r8 I0 L% J4 {$ _ i5 W R/ r/ Y: F$ M6 ?5 R, E2 `" J
如果你業已全部瀏覽HTML初級指南的全部頁面,學習完畢初級指南,你事實上已經是一個能幹的HTMLer了。( K. d3 J- m$ E. x' ]5 K: z
2 ~- s, b' O+ G+ r實際上,基於許多人編寫HTML都相當差勁的事實,你應該做得比他們更好。/ B; K5 s5 l# p4 l. C' V0 M
0 d7 S2 W a! s1 j' v6 y; Q5 V3 L下面的代碼把前面所教授的綜合在一起了:( Y- I3 n" v3 Z
" ]# c7 F \9 h% _- |
8 s5 o, B1 ]! ~) M# {
: h( M* G0 Q$ x: p6 y
Example Source Code [www.cn-webmaster.cn]
4 p* H) j: `. z# a5 g<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
0 E O0 J5 @# M2 c* O O, m) k"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">. w% w1 @5 E+ ^# J2 q5 c, l; d, m
<html># d5 a( y ^9 l* n6 [; J" |0 F3 m K
<head>
) F. W- n0 V& {% P/ @2 E<title>我的第一個網頁</title>
7 h6 K% S; V y) d* T& P4 P<!-- 順便說一下,這是註釋 -->
4 c ^* Z% P z+ o</head>1 T9 [! q3 R5 {
<body>8 v0 y' u+ _$ j+ S% s% i
<h1>我的第一個網頁</h1>
: F1 d" \+ V0 p<h2>這是什麼</h2>2 |# _$ ?* r) a) x
<p>用HTML組合起來的簡單網頁。 <strong>A用HTML組合起來的簡單網頁。</strong> 用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。</p>: s! h' V8 r+ f Y
<h2>目的</h2>! r I) p# a& c/ q1 F/ |; a
<ul>
& ] I, ?% T( w<li>學習HTML</li>/ d1 `! A, J' U1 c$ l0 z2 Q
<li> 顯擺,炫耀 ' U! E0 W! {1 u4 C- l7 R1 j
<ol>1 r3 n9 J, _' J
<li>向老闆</li>% I) w7 G. E! l s5 z
<li>向朋友</li>
( R" _3 _9 P% t/ ? <li>向我的小貓</li>
& r, N8 t8 {2 F w! k <li>給我腦中多嘴的小鴨子</li>
2 n3 @% C8 j: W* k( C </ol></li>
3 A$ G! C Z; U. ~. i<li>因為我已經愛上了我的電腦,我想給她點HTML愛情調料。</li>
# w, @. r4 d/ \/ x</ul>
2 v$ Z" b2 o, J' q' F) I0 \<h2>在哪裡可以找到教程</h2>; b( C7 x6 i0 `( q) v% B) m9 U
<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>9 {+ F; p M- b1 z
<h2>一些隨意的表單</h2>
- S& |+ H1 g5 d<table border="1">
( k- X% S) v$ ?& }* V: ~<tr>5 e; u2 u* ?" |+ u/ J) n3 r" _( `; y
<td>Row 1, cell 1</td>; g+ T$ Q) X+ a% ?5 B6 E
<td>Row 1, cell 2</td>
& |' ~- a6 b- S e0 O- c<td>Row 1, cell 3</td>
9 C3 \. l5 |" [; M- M% w$ l8 H* v# ^</tr>, S$ U' F: C9 P
<tr>
# ?3 ?, m, M/ b+ w; ^<td>Row 2, cell 1</td>* Q) c- {' ? @8 S, G
<td>Row 2, cell 2</td>& U# p" W6 o2 k. ?" n9 n
<td>Row 2, cell 3</td># w2 ]+ {1 p5 `
</tr>5 ?" x0 o+ S) y; `# l0 G/ L
<tr>: z; Z5 L$ S! R6 i
<td>Row 3, cell 1</td>0 M( Y& X5 h% X7 g, ]* A6 q
<td>Row 3, cell 2</td>
( O8 z6 s2 W1 G8 \; L! q<td>Row 3, cell 3</td>
! i- ^1 |. s* v; ~</tr>
% y- z9 s/ B" B7 z: O, D<tr>
1 S6 ?9 ^0 T; M. {<td>Row 4, cell 1</td>
2 ]+ {; ]& s7 [+ @<td>Row 4, cell 2</td>1 r- d7 x& f+ X. i9 d+ u
<td>Row 4, cell 3</td>
) g; v: m: K& e</tr>
& t* \( A& F+ w: E+ H5 x6 d8 A0 J2 c</table>
: N3 K i0 g" M' t<h2>一些隨意的表單</h2>8 b: \4 h0 o* h; C7 o% M
<p><strong>注意:</strong> 看起來似乎很重要的部分,但實際上什麼都不做</p>) @' l& ]& e) V& h c: k& P
<form action="somescript.php" method="post">2 q2 L* z; q, y) T k }4 ?
<p>名字:</p>
s, i2 ?& ?, M- q f; }* T7 }<p><input type="text" name="name" value="你的名字" /></p>
- R1 v" y& n |0 l) R1 C& |<p>評論:</p>3 P+ Y1 \. ^$ F- X: O7 @
<p><textarea rows="10" cols="20" name="comments">在這裡寫下你的評論</textarea></p>) f. R9 S, L6 U+ f1 `
<p>你是:</p>! s! J5 x0 m, h2 ~, X' t
<p><input type="radio" name="areyou" value="male" /> 男性</p>
7 v5 ]) {6 {7 ^3 y7 C/ D4 E<p><input type="radio" name="areyou" value="female" /> 女性</p>
- s% a* R& C$ J1 S* v; j4 t<p><input type="radio" name="areyou" value="hermaphrodite" /> 雙性</p>
( ] C& M: ^# p4 w<p><input type="radio" name="areyou" value="asexual" checked="checked" /> 無性</p>
& r1 b( C4 d' b' s) Y W<p><input type="submit" /></p> <p><input type="reset" /></p>
* d4 Z( F; Z; p* ~0 O2 w</form>
6 L8 u9 X% z2 L/ p</body>
1 ^' f& J! i2 L- C8 v: R5 r</html> ' r2 w+ r1 s2 d c0 _
! o9 A& `# }8 @9 H( A9 |( X就這樣。保存文件,然後在瀏覽器中查看──這是理解所有工作原理的最好方法。繼續吧!/ f- b# d/ |1 w2 }( }( ^# U. f( p
, Z: i5 V2 C+ H4 T4 D& l
感到滿意的話,你可以繼續學習CSS中級教程了。 |