11、綜合應用__把上面所有的要素堆積起來9 G% s1 o0 t0 i) ^* n# n/ u) o
3 }# U$ M/ _* {5 M: N2 a如果你業已全部瀏覽HTML初級指南的全部頁面,學習完畢初級指南,你事實上已經是一個能幹的HTMLer了。/ l% B' s. b$ v4 [9 ~' `
/ P: |# o& o" b1 f& }
實際上,基於許多人編寫HTML都相當差勁的事實,你應該做得比他們更好。
# F/ ]6 J. t9 e% p! c, J( n1 Q5 m0 `5 l8 {% }2 r- Q8 Z
下面的代碼把前面所教授的綜合在一起了:
, y( {# x9 r0 {: _
' i. G! `# x6 X0 F# @) `" ]% `" i9 [2 a8 h0 C
{8 l5 w2 L3 V, b3 D/ Y
Example Source Code [www.cn-webmaster.cn]# I. N J. H+ T8 e: d8 Q& [
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
* U; o* Y% A7 Y( h"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- I5 |% _6 m- B<html>
% B' `: M, {' ^: f7 t! K<head>
/ m& i g3 q; v9 ?! u ]<title>我的第一個網頁</title>' [6 x* p7 m) ]' q
<!-- 順便說一下,這是註釋 -->
# p: K; \' R+ ~3 \8 F. j) z</head>
0 Z8 U/ G3 b, S7 b<body>+ d3 y$ d9 s8 f/ q }" n$ p+ Y. n
<h1>我的第一個網頁</h1>
% X' I9 H$ j5 P( P<h2>這是什麼</h2>2 j* t& ?) Y, p+ v& Q- M) A/ O
<p>用HTML組合起來的簡單網頁。 <strong>A用HTML組合起來的簡單網頁。</strong> 用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。</p>
s' m, H; K7 b0 d1 E<h2>目的</h2>
" M& w& t9 W* D<ul>
6 b/ J" L9 {$ I0 R<li>學習HTML</li>
! ]; x* b) H) L1 E<li> 顯擺,炫耀 ; e) x3 h% ]; {% T' h
<ol>6 A) T& c* G( L
<li>向老闆</li>. ^: C2 i+ c; L$ e
<li>向朋友</li>8 R: k9 v: o% ^3 R5 X+ s7 g
<li>向我的小貓</li>7 t# K7 v w4 A1 [. r( z
<li>給我腦中多嘴的小鴨子</li>4 o5 p4 d! e0 f3 u. j. C/ H
</ol></li>
. r' l2 D7 X0 o% M; E: D<li>因為我已經愛上了我的電腦,我想給她點HTML愛情調料。</li>
! O! U4 H4 v8 y: L3 T</ul>
3 ^, j) z7 Y4 n1 A<h2>在哪裡可以找到教程</h2>
T/ M6 U8 C8 [) T! \) f$ P" q8 l<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>* h. h) h5 m" y
<h2>一些隨意的表單</h2>
; Z# i# |+ U) l& s<table border="1">
- n2 V* n4 V7 s& P; x, W6 |5 I<tr>
3 P8 s+ I' z8 f) h6 R3 z- k3 B( I<td>Row 1, cell 1</td>' B0 Q, {" M. T
<td>Row 1, cell 2</td>0 g0 ~0 z8 g4 n t# i. u5 T
<td>Row 1, cell 3</td>
@" z$ [, ?( f5 J* b9 t; b( F7 z2 ^</tr>
" I. H3 a* Z6 q5 F2 e& n<tr>
8 Z7 K2 H8 n3 ~& k4 S<td>Row 2, cell 1</td>
5 C1 k6 N5 P' d9 ~4 w: k# J<td>Row 2, cell 2</td>
7 @2 M" l8 U8 X8 F% A- d7 v: p<td>Row 2, cell 3</td>
' a( s! }, P7 \' F# p; |</tr>
( |, z4 M% P2 I" @, ?4 W+ G) q<tr>
& J7 V: B' ?7 }<td>Row 3, cell 1</td>. s3 T6 x9 [9 A' y
<td>Row 3, cell 2</td>
. J# \9 f) P: K/ |8 V<td>Row 3, cell 3</td>
9 q7 J& B0 ?( t+ W$ @$ M</tr>
; K8 g" [0 h1 J" Y<tr>5 e$ M, H2 N" _3 f& F m6 n2 b) ~
<td>Row 4, cell 1</td>
( r3 x6 W: s0 \& i<td>Row 4, cell 2</td>
' @8 R7 |8 B- v F- u# q<td>Row 4, cell 3</td>
% T k7 X n6 ~</tr> i- ]5 b0 {0 X8 L8 d" D k
</table>, ]: x( ]* K1 {: f+ K/ ~
<h2>一些隨意的表單</h2>
0 c) j! r! N+ z t* i6 @<p><strong>注意:</strong> 看起來似乎很重要的部分,但實際上什麼都不做</p>5 C9 O: s6 G6 C8 J, u7 c
<form action="somescript.php" method="post">
: z+ w/ b0 a+ W<p>名字:</p>
' ]8 f' j: |- `- Q* d<p><input type="text" name="name" value="你的名字" /></p>
' r2 Z) e3 x0 G' d$ k! q<p>評論:</p>
4 A$ i! ]- Y" E; \<p><textarea rows="10" cols="20" name="comments">在這裡寫下你的評論</textarea></p> w+ {! P& C" s" d
<p>你是:</p>
2 B. G& K* C3 R! U) p. @7 U<p><input type="radio" name="areyou" value="male" /> 男性</p>8 A4 C/ |% d1 L" S
<p><input type="radio" name="areyou" value="female" /> 女性</p>
- T5 x1 N8 }5 h5 n$ c0 M<p><input type="radio" name="areyou" value="hermaphrodite" /> 雙性</p>
2 z9 q5 ~' x% N4 r<p><input type="radio" name="areyou" value="asexual" checked="checked" /> 無性</p>( p; B- G" n' w2 r9 }9 z
<p><input type="submit" /></p> <p><input type="reset" /></p>
. X Y: d2 F( z$ L6 T& g! a( p</form>
) y# i; i3 N g/ y+ Y" E6 m4 P- z( e6 f</body>$ `0 l; g! V9 k1 O9 E8 _& g& {
</html> 5 W- v8 Z& z) M+ O5 @3 \
- k$ Z8 m% j, N- u% O( P& A7 C& ~* R就這樣。保存文件,然後在瀏覽器中查看──這是理解所有工作原理的最好方法。繼續吧!
1 m/ y, k0 T3 Y3 K' L
* |* }5 N$ D0 |感到滿意的話,你可以繼續學習CSS中級教程了。 |