11、綜合應用__把上面所有的要素堆積起來3 ~& }4 V$ }( c) J4 K
' m( c; J7 I: x$ h: P4 D' [/ H如果你業已全部瀏覽HTML初級指南的全部頁面,學習完畢初級指南,你事實上已經是一個能幹的HTMLer了。
1 T$ a+ a* R6 e. [; {( n* P% A
3 H- u; m C3 b' E+ C實際上,基於許多人編寫HTML都相當差勁的事實,你應該做得比他們更好。
( M: d2 ]" l1 B2 h
# x, J$ c+ D' }% p+ @6 `下面的代碼把前面所教授的綜合在一起了:
: L# q7 {; X O# ^ C3 g1 [) K& G% v# O9 p# Y' ^
7 ^6 k0 {; L$ N# c4 _# N9 M: H3 d, E/ A. x' P1 `8 P+ a
Example Source Code [www.cn-webmaster.cn]7 h! Q) g) J" ^
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 7 \- K g; O% b+ v
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"># h1 ~- M- w! `7 B- T
<html>
, d7 A# n( L! ~) {$ n" P<head>' f, _% w" E4 D0 d7 |4 ]
<title>我的第一個網頁</title>5 L8 X) {) k, Q2 r& x' C! H$ K' G
<!-- 順便說一下,這是註釋 --># F) G6 X. m8 S5 W. W& y9 b. p
</head>2 ~/ a( L& G; b7 v9 x4 _0 Z
<body>
1 @# W' H9 f# n0 W& d1 m. Y<h1>我的第一個網頁</h1>) L* Q7 O* g$ T2 n2 u; F6 P
<h2>這是什麼</h2>
8 @* z$ M# ]. o6 Q<p>用HTML組合起來的簡單網頁。 <strong>A用HTML組合起來的簡單網頁。</strong> 用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。</p>
/ Y m. X6 j4 K' P4 [. D+ _2 K! A, }<h2>目的</h2>; u( ?/ X5 s% T7 }; V) q
<ul>
! L% C" N% L6 e0 q<li>學習HTML</li>
( N6 ?' \3 c4 C8 g7 p<li> 顯擺,炫耀 ( @! M, V! x( r( E$ R
<ol>
$ w7 p' p3 I; I" b& _ <li>向老闆</li>
. \- D; J& a! r <li>向朋友</li>
+ p: r5 ~$ }9 U/ E1 | <li>向我的小貓</li>2 y( k( j+ C) O( |7 \
<li>給我腦中多嘴的小鴨子</li>
9 l% A! i; v. I8 { </ol></li>
1 Z1 N* F& o/ l( g; B<li>因為我已經愛上了我的電腦,我想給她點HTML愛情調料。</li>
. `8 E6 g' Y" z0 |. c0 i</ul>% H" m5 }! I" ?- l7 H
<h2>在哪裡可以找到教程</h2>
( d5 x- [1 |2 J, q* i6 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 V# y" \1 t- R, J8 m# V/ m
<h2>一些隨意的表單</h2>0 r5 h: o5 ^: u! j
<table border="1">
5 u6 {3 P1 L7 h3 R<tr>7 Q: m, r( \$ a2 L# l3 d$ k4 h
<td>Row 1, cell 1</td>
2 v5 S7 S0 {: I ^ ]6 X<td>Row 1, cell 2</td>
A* `9 n& L- m) q& _- J<td>Row 1, cell 3</td>/ J" w8 [) h! e
</tr>
5 B; [ N, ~: d# `<tr>! u" n& w+ d( q
<td>Row 2, cell 1</td>5 T. I- A8 b% E9 G$ T
<td>Row 2, cell 2</td>) ~% }- y8 F8 h7 A
<td>Row 2, cell 3</td>
- R5 E H6 K T* |- v' L* s2 X) X</tr>2 n: {) _+ J3 G. z: P
<tr>
7 s3 @" |! n1 Y2 Y/ p7 p% Y<td>Row 3, cell 1</td>
7 w- T1 M3 S u$ R7 K6 _<td>Row 3, cell 2</td>
) x" [8 m2 {% }. A0 m) K! H<td>Row 3, cell 3</td>
! `6 k; [) o/ O</tr>
, `/ U4 z# l* W$ m0 B: P8 i<tr>
" C! V2 M, R3 b% L" Z7 K<td>Row 4, cell 1</td>
+ H8 }. Y3 J7 ?' o<td>Row 4, cell 2</td>
3 z+ C7 ~* H- n. T! D+ e<td>Row 4, cell 3</td>9 J+ u6 L2 [! \" q! ~0 s# R
</tr>
8 P: W1 j5 P+ `4 p* c/ {$ o</table>
" T! a1 K4 k) L<h2>一些隨意的表單</h2>
. O# ~. t1 ~8 ?$ m<p><strong>注意:</strong> 看起來似乎很重要的部分,但實際上什麼都不做</p>6 s+ ~' r8 n) Y7 F1 \2 n# _
<form action="somescript.php" method="post">
+ R$ O" }0 U6 n6 {2 s$ J3 i6 n<p>名字:</p>
8 Q. {! o) e/ [3 a J$ `<p><input type="text" name="name" value="你的名字" /></p>; `) V/ |" K8 M/ {" \8 C
<p>評論:</p>
3 k( ?! D4 p% w9 ] e6 f( j! v<p><textarea rows="10" cols="20" name="comments">在這裡寫下你的評論</textarea></p>
& k' d% i @3 p# N5 |9 }<p>你是:</p>
[9 {) u, K7 W( P0 ?( c8 }& C<p><input type="radio" name="areyou" value="male" /> 男性</p>
# N8 i$ x; S U+ m8 G2 K- A<p><input type="radio" name="areyou" value="female" /> 女性</p>
0 m+ e z, H j% r" g6 I<p><input type="radio" name="areyou" value="hermaphrodite" /> 雙性</p>
) u! B6 A8 m4 B' h: a" M<p><input type="radio" name="areyou" value="asexual" checked="checked" /> 無性</p>
& G9 Q$ ]9 a) Q/ d9 N<p><input type="submit" /></p> <p><input type="reset" /></p>
/ ~4 {( |) [/ A/ a</form>
, j- D7 _# x2 }, z0 t</body>
& W- }: |0 R" z" Y( d$ E+ b</html>
- M k7 W9 B% j8 f( M
: h5 ^& o0 W8 e, x就這樣。保存文件,然後在瀏覽器中查看──這是理解所有工作原理的最好方法。繼續吧!
! d! \4 M( v4 ?9 ^/ g d6 I
9 u! A: i$ S E; j/ }5 I) k( u/ K+ G感到滿意的話,你可以繼續學習CSS中級教程了。 |