11、綜合應用__把上面所有的要素堆積起來
7 E0 E) ]( @( t% s6 g* q7 u1 {$ T" B0 i! [
如果你業已全部瀏覽HTML初級指南的全部頁面,學習完畢初級指南,你事實上已經是一個能幹的HTMLer了。- I/ O W9 E5 ^# Z
* M& i# b0 h' K( Z2 k8 F M
實際上,基於許多人編寫HTML都相當差勁的事實,你應該做得比他們更好。# @, O7 W6 S0 H7 `; D6 O2 M
c: T9 w7 T) L2 E3 d! A下面的代碼把前面所教授的綜合在一起了:
# W. L/ j2 E7 ~. s
5 {; F! q i! W0 J( c
* o9 H, i8 X8 [' c+ z5 m$ n3 y/ E0 e: U. f$ ]9 c8 i: I: j
Example Source Code [www.cn-webmaster.cn]2 z; ~) b+ O5 b- e2 l h$ L
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
" t) Y% d4 Z ~3 }6 ?$ G"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">4 x8 W A- l( u' p5 Z
<html>, ?) p: v2 A0 p+ t. C
<head>
% K; {8 F) O- ~<title>我的第一個網頁</title>* O3 i# g4 \( g6 U8 x( I l
<!-- 順便說一下,這是註釋 -->7 V& b2 `" E7 {
</head>
; n# p5 |4 D/ h! w0 f3 B<body>
8 `4 j5 m( F) V' Y; n6 \1 [4 f<h1>我的第一個網頁</h1>. Z2 G! D6 y. U- l
<h2>這是什麼</h2>; ^; i& H8 ^2 B
<p>用HTML組合起來的簡單網頁。 <strong>A用HTML組合起來的簡單網頁。</strong> 用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。</p>
/ k7 h. v+ p( u* t( R/ y- B<h2>目的</h2>
. e) \* x2 {8 q- {5 C% w! \$ D<ul>9 G$ _9 i, F' @* _9 f8 r
<li>學習HTML</li>
7 ^9 E* X4 k5 J<li> 顯擺,炫耀
) Z9 h/ `$ u8 o1 c$ Y) p1 S$ H <ol>
3 a: T4 Y0 B1 L$ ]# A( j <li>向老闆</li>9 y- U! G: Y- m
<li>向朋友</li>
# F) z* @6 {4 o, E <li>向我的小貓</li>
) j- F. Q4 g7 v4 ~ m0 [. Z <li>給我腦中多嘴的小鴨子</li>
! M2 Y7 |% @9 Y8 ]- Y </ol></li>; C) {: ~: ^' \1 l) q' V9 I
<li>因為我已經愛上了我的電腦,我想給她點HTML愛情調料。</li>! j& O# w" o+ Y
</ul>
. ?1 Q. w- C9 m. {& G/ A8 [" x3 U<h2>在哪裡可以找到教程</h2>5 u+ O, }/ L& \6 j6 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>
; J* X% R, W1 a( }; K# `% c<h2>一些隨意的表單</h2>( p: A6 P' _% e5 p5 l' d( U- F
<table border="1">1 `0 Z$ Y- G4 {
<tr>4 D1 f, P l9 B( g' o. n
<td>Row 1, cell 1</td>
% T/ e! M. `7 U9 Q" T<td>Row 1, cell 2</td>
1 O" H& s( t, U<td>Row 1, cell 3</td>
G% d6 q' } m" `, H4 {3 h2 X& L</tr>
% v; t. T5 E% |# P<tr>
) P5 |% Q! t. [0 D- f; u' R<td>Row 2, cell 1</td>* l: x* `9 k' s4 e9 e4 U
<td>Row 2, cell 2</td>
" \5 H$ X; D: f8 J<td>Row 2, cell 3</td>
6 N0 V, o7 O$ m* U- S0 [: t</tr>
2 b. A- a5 A6 z6 w0 N$ g<tr>
* s! r9 ?- N- n+ {' ^. j& E" b<td>Row 3, cell 1</td>
2 I1 n" O& v" j* |<td>Row 3, cell 2</td>) `7 @ ^5 B% \( ~% b2 {
<td>Row 3, cell 3</td>
# s, w+ W# ? {9 F! ]7 t</tr>
& G2 V- l7 N2 H. ] h<tr>
# ?3 K1 o* h8 W% `<td>Row 4, cell 1</td>
; L: |% x# _ K( H& ^<td>Row 4, cell 2</td>
! }9 w$ g" l! r5 V9 T4 u<td>Row 4, cell 3</td>
2 K; d8 F, U0 @/ R4 ~! J</tr>& k% b; p1 {+ Q0 @4 r
</table>
2 N* V; m. N& l! a<h2>一些隨意的表單</h2>& H( `1 }# R# t) h
<p><strong>注意:</strong> 看起來似乎很重要的部分,但實際上什麼都不做</p>
4 u4 p/ {4 o4 I% c<form action="somescript.php" method="post">
& ?/ O* p9 O5 u& I$ y5 a! @<p>名字:</p>9 J- L; n& P$ |0 @& N" l% I
<p><input type="text" name="name" value="你的名字" /></p>
, j( b) q! p K0 [5 y<p>評論:</p>; v' [4 D7 X& A4 Z/ j+ d
<p><textarea rows="10" cols="20" name="comments">在這裡寫下你的評論</textarea></p>
' S: m ^+ Q0 m) x* ]5 j1 j' N4 U- b<p>你是:</p>: b* F8 w6 O7 b; t! \
<p><input type="radio" name="areyou" value="male" /> 男性</p>
6 @9 x4 N9 j6 K. V3 r<p><input type="radio" name="areyou" value="female" /> 女性</p>3 K, \( e* G) |8 F# Q1 F
<p><input type="radio" name="areyou" value="hermaphrodite" /> 雙性</p>
& u2 [& _' E. p<p><input type="radio" name="areyou" value="asexual" checked="checked" /> 無性</p>
% i+ K+ ^4 n! A2 a5 w# q W3 t+ E/ x<p><input type="submit" /></p> <p><input type="reset" /></p>
& }* J3 e! Z7 x; y" E</form>
7 [. M4 { I2 e( ?* g</body>8 H4 @ [+ g* J* |, a" i
</html> 1 i2 o4 l7 T& j& Q
2 ^) Q3 m/ z1 O, W$ d0 M9 t就這樣。保存文件,然後在瀏覽器中查看──這是理解所有工作原理的最好方法。繼續吧!
. Y; s, n' b B6 J5 ]" e
. c) |* M! ~6 d7 }" P0 ~% k) t感到滿意的話,你可以繼續學習CSS中級教程了。 |