11、綜合應用__把上面所有的要素堆積起來 M5 s& z- B9 l8 y$ t
* Y7 q; n8 S& h/ g7 y/ @
如果你業已全部瀏覽HTML初級指南的全部頁面,學習完畢初級指南,你事實上已經是一個能幹的HTMLer了。
h) t. d/ Z# ^! e: j4 ~6 Z% T: m3 M" b( }0 W8 e
實際上,基於許多人編寫HTML都相當差勁的事實,你應該做得比他們更好。% X7 ^/ c! \. V! I
+ o3 u1 L! f. O/ Z& m' }下面的代碼把前面所教授的綜合在一起了:
% C* ?2 n8 B5 ^$ i; ], F" d& ]& O0 v1 r; f! A& H& t
: T2 ]9 _' }4 {# Y K3 F8 f6 P! \& B, ?1 |, T3 |. B$ E
Example Source Code [www.cn-webmaster.cn]
9 P) [: v& ^1 }. j( l" H<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" {0 C4 F, \. X, p
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
$ H6 n6 i% j7 R. ?* v2 j7 \% h# Q: l<html>. Z9 c8 H0 k6 f. I% }, ^
<head>
' Q( Y2 R9 D4 H# r+ Y<title>我的第一個網頁</title>
; h; ~; W" F* f y- U% u2 o<!-- 順便說一下,這是註釋 -->! I7 T: x9 n% Q9 C9 a) \5 D
</head>, b1 ~, R. t0 B/ D% o
<body>2 u$ |4 c+ s9 Y7 n' U6 d# o
<h1>我的第一個網頁</h1>3 P. J4 O: h. E4 m! K2 M6 M
<h2>這是什麼</h2>
/ ~% S) g8 ?' J% d- Z: O<p>用HTML組合起來的簡單網頁。 <strong>A用HTML組合起來的簡單網頁。</strong> 用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。</p>
+ ]7 ]; C- o: A7 T: K5 ?$ e6 x<h2>目的</h2>
& \* C/ b. l! C/ q5 a<ul>( t5 n8 ?# l" y1 q8 |, ^+ _% x
<li>學習HTML</li>/ l+ V- N" ^# X: R4 O' X" ]
<li> 顯擺,炫耀 . f6 o3 t) \1 E$ K6 v( G
<ol>- r- W( n9 A3 _4 }
<li>向老闆</li>+ C: _$ d" x' f- m8 Y9 q
<li>向朋友</li>
; u3 ?$ y; E0 B# l6 j' ^' V$ ^2 C <li>向我的小貓</li>
. e& F7 Z# x2 L# C' } <li>給我腦中多嘴的小鴨子</li>
9 \8 z4 [* V1 K: h* i </ol></li>
2 _$ C( U% a' r0 T3 v0 S<li>因為我已經愛上了我的電腦,我想給她點HTML愛情調料。</li>1 W2 a" `! T* O9 v) e7 q8 K
</ul>
' O- R$ C3 A2 L. u1 r/ q, P6 p<h2>在哪裡可以找到教程</h2>
: j+ K% `* L- i: U& r+ X. j7 x; O<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>( D1 Q& U S& P$ e- q. m
<h2>一些隨意的表單</h2>; k9 W6 X) i0 I$ `
<table border="1">
9 w4 G% a# e2 P0 y0 t<tr>+ J1 K; c5 S! L# A; Y# Y' i/ {
<td>Row 1, cell 1</td>! m8 m# ?# `7 h# X. l
<td>Row 1, cell 2</td># `0 r8 T) U, Y4 _/ v2 _
<td>Row 1, cell 3</td>
1 j) p% ^4 r* J2 Q9 a: o</tr>
7 M( g# d8 |* o. A<tr>
- A6 t' E3 [# I( u% t$ \<td>Row 2, cell 1</td>
6 B% N# v% e; {5 T0 W<td>Row 2, cell 2</td>
% @) Y0 H3 I" _" x1 ^* U: ~7 \<td>Row 2, cell 3</td>
/ d9 ?( [" m z+ \! C7 }</tr>
7 v) q1 h& U, u! ~( u% Q, Y<tr>7 n' J _5 W e6 c. a
<td>Row 3, cell 1</td>0 |9 A$ K8 Z1 U9 d3 S- e
<td>Row 3, cell 2</td>
/ A5 c9 x: _& o5 r. N y/ O4 F, L<td>Row 3, cell 3</td>
8 d8 V" Q T: O9 I( O" Y& T</tr>
0 E( a8 t) o! v2 W5 i<tr>
, B* B, d1 K+ i5 N% c. t<td>Row 4, cell 1</td>4 d- ^4 Y- y0 G' r5 R, y9 n
<td>Row 4, cell 2</td>$ x1 d1 W- L, G: Z0 p
<td>Row 4, cell 3</td>- O# W% l7 ?( F" o5 t
</tr>" W4 D1 ?9 y1 n2 p
</table>3 e" ~5 _. g8 J1 Q3 {6 X- d
<h2>一些隨意的表單</h2>
5 B- x+ [5 O4 F<p><strong>注意:</strong> 看起來似乎很重要的部分,但實際上什麼都不做</p>
1 }7 Q% c$ E. f& m3 r. l/ Y; G) G9 o<form action="somescript.php" method="post">
$ Z* g- I7 n- a; b( X+ p$ J<p>名字:</p>2 c9 w5 O( }' j6 a( t
<p><input type="text" name="name" value="你的名字" /></p>
1 f+ u/ U* a9 T0 X3 z<p>評論:</p>" ]- H$ v, u* Y8 Y# d' S, N! ]3 q
<p><textarea rows="10" cols="20" name="comments">在這裡寫下你的評論</textarea></p>
9 q$ A$ |, W: \0 ?7 w5 s+ ~ z<p>你是:</p>
2 Y. N5 j$ h5 G b& {7 i' l<p><input type="radio" name="areyou" value="male" /> 男性</p>. q) @' m3 f7 O0 K/ L5 A8 r: K2 b
<p><input type="radio" name="areyou" value="female" /> 女性</p>% J% A+ b7 I7 ]5 k/ G
<p><input type="radio" name="areyou" value="hermaphrodite" /> 雙性</p>* w1 q3 }$ a( G6 W% T7 u
<p><input type="radio" name="areyou" value="asexual" checked="checked" /> 無性</p>
* A6 ]7 Q% n% C9 |7 ^- }<p><input type="submit" /></p> <p><input type="reset" /></p>
2 j2 |, B) W5 V. ?</form>6 i, |3 p1 O6 z8 j6 R( W+ G% V* o4 D
</body>
7 `# k4 t/ b* S z- T4 K; s</html> . Y- \% k) j+ U3 q* W: e& V
( A7 R, N. W1 T9 v B. y就這樣。保存文件,然後在瀏覽器中查看──這是理解所有工作原理的最好方法。繼續吧!
" F' w/ j$ c4 r6 T G( i$ l& x Q, B! A% e8 Q0 ^7 c' T/ a
感到滿意的話,你可以繼續學習CSS中級教程了。 |