11、綜合應用__把上面所有的要素堆積起來5 b- q, |( g6 b2 w4 b* D$ R" C
: X+ p% v$ R5 ?# q- w) [( y& H( {
如果你業已全部瀏覽HTML初級指南的全部頁面,學習完畢初級指南,你事實上已經是一個能幹的HTMLer了。
0 N# e+ v( u1 v8 K- B" Y0 W+ s* A# l8 T
實際上,基於許多人編寫HTML都相當差勁的事實,你應該做得比他們更好。
0 Q; o8 b& m# A9 r5 J& R; T' f2 f {9 t" a9 e6 ?0 c
下面的代碼把前面所教授的綜合在一起了:- u5 c; i, N5 [+ _) i4 J: A3 [
6 |) C' k8 a; i3 F
4 r4 o9 ]1 P0 I5 p. j$ j
- d6 y) H( d4 Q Example Source Code [www.cn-webmaster.cn], K% p5 E" }9 l0 w/ s* M d
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" & L; k2 [" }! y
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">8 N9 F3 ~" X4 U2 q+ b
<html>( A" t0 k [+ X0 Q# Y, r g: ?3 _
<head>. S9 q+ B, C. z E
<title>我的第一個網頁</title>' p4 }' R7 F! L, @
<!-- 順便說一下,這是註釋 -->
" q$ u) u0 n' t" `4 a/ t& F</head>( ]2 I6 J2 g* G6 Y9 y3 X3 Q( b+ g
<body>
/ w, L$ o0 d( {8 w& |' {<h1>我的第一個網頁</h1>
2 v: u% |) ~; T2 Q0 v<h2>這是什麼</h2>0 o4 B! u3 m; f
<p>用HTML組合起來的簡單網頁。 <strong>A用HTML組合起來的簡單網頁。</strong> 用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。</p>% {7 G4 r+ H4 R) [8 b' B1 B
<h2>目的</h2>/ w+ u v8 g6 t. R& p% P- y8 j5 f5 q
<ul>
' c2 _9 e# J$ R e<li>學習HTML</li>
- _( o2 k( _, P<li> 顯擺,炫耀
. v2 W. ~8 X, Y( L5 P/ I! r7 J <ol>
, g, q4 H. W8 ~# Y+ R4 O <li>向老闆</li>/ e! u) E0 r5 e* f7 D# L
<li>向朋友</li>
7 U0 g$ l$ p! N& b! e3 C6 ^ <li>向我的小貓</li>
' ]+ t0 E8 [1 W2 T9 ^3 T0 d5 W <li>給我腦中多嘴的小鴨子</li>/ g6 y; U% Z, t' C7 j
</ol></li>0 c+ w, q+ w* d4 z
<li>因為我已經愛上了我的電腦,我想給她點HTML愛情調料。</li>/ S4 l6 ?, g4 H5 `2 k
</ul>
3 i# d* m5 e# `' L/ @; Q; D<h2>在哪裡可以找到教程</h2>
/ J8 e) U0 d( i) ?( o; p! m, ~. R' Z<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>
. Z% u, A0 z1 @* ^' N! C% w( l/ U<h2>一些隨意的表單</h2>
* Z0 G& X, W/ R0 z, C$ }5 b- x<table border="1">
~! a0 q8 I0 T% Y) @" b' i<tr># b; `& C$ g y9 _2 B
<td>Row 1, cell 1</td>( V; a! t3 B8 O$ f, A, w
<td>Row 1, cell 2</td>
8 J1 ^' x0 H; R<td>Row 1, cell 3</td>
4 R- A8 k7 v- t4 d9 u</tr>
7 N+ p5 E8 L/ A<tr>5 I! j! [$ U4 t" r
<td>Row 2, cell 1</td>
& s: Z G) M# r<td>Row 2, cell 2</td>. w. }2 ]: t& x2 H3 Y: ~: K1 h
<td>Row 2, cell 3</td>6 s. c" Z; C4 f) C( u) @0 Z2 e$ f
</tr>; K8 H! [& E( |, v+ S) j5 [
<tr>
' X1 q* c: @! e p. q! h. {9 D3 g<td>Row 3, cell 1</td>
3 {% N( s5 a* K0 p9 e) b9 E4 p<td>Row 3, cell 2</td>3 ~6 Q/ `0 i( L* y& s7 F& S3 E! k
<td>Row 3, cell 3</td>
7 |4 C1 c) K# |</tr>
* i4 T/ ]) r/ D4 i2 G<tr>8 r3 ~8 J% @; l. x' `1 a& B; n5 b
<td>Row 4, cell 1</td>, M) \9 R, {& `& q+ H' L
<td>Row 4, cell 2</td>
% t1 C J: I4 H% _5 f3 f<td>Row 4, cell 3</td>( s( u) D7 F2 @+ @9 M" ?: E: [) [" W4 C
</tr>
: }0 k$ w) T' q</table>
; U7 m' s6 }% o9 C<h2>一些隨意的表單</h2>
7 F* {9 \, H6 `2 v' ]9 R) _/ i3 S3 B<p><strong>注意:</strong> 看起來似乎很重要的部分,但實際上什麼都不做</p>
+ Y: P1 d6 c0 n8 g0 y }" I<form action="somescript.php" method="post">
4 ]2 s j( Q4 V4 \$ T i3 Q<p>名字:</p>
0 [0 W+ X4 S$ N$ I0 Q" _. a9 z<p><input type="text" name="name" value="你的名字" /></p>4 ]7 h4 e, |) ~, M# o
<p>評論:</p>0 {/ K7 ?) \( V6 T7 S" E6 k5 z! T
<p><textarea rows="10" cols="20" name="comments">在這裡寫下你的評論</textarea></p>
3 f5 g) @% s7 [% u<p>你是:</p>7 U9 A5 o3 {* }! {$ B
<p><input type="radio" name="areyou" value="male" /> 男性</p>. Y% g. h% D- @
<p><input type="radio" name="areyou" value="female" /> 女性</p>
% c( l* ]% A0 s<p><input type="radio" name="areyou" value="hermaphrodite" /> 雙性</p>! L* l A" S! y" ]2 v- S; X
<p><input type="radio" name="areyou" value="asexual" checked="checked" /> 無性</p>
: E% e( p6 g. s8 |) n, I<p><input type="submit" /></p> <p><input type="reset" /></p>
: V, _ @# \$ k8 A. Z/ L3 M7 y2 q</form>
& L3 A2 j. x. g- _; n</body>
; A% S& o% O( y</html> , E8 A9 q \) u2 w3 u* [! X8 K0 r
8 H# p& L4 K# O" V2 ] N就這樣。保存文件,然後在瀏覽器中查看──這是理解所有工作原理的最好方法。繼續吧!
! V- m0 I# }2 x% S; m$ J
- m1 H/ a! i% z+ k( U' n+ ~. M感到滿意的話,你可以繼續學習CSS中級教程了。 |