11、綜合應用__把上面所有的要素堆積起來2 p7 C9 k' S, D* J0 ^) g p" S
/ q- S0 k# @* c" {如果你業已全部瀏覽HTML初級指南的全部頁面,學習完畢初級指南,你事實上已經是一個能幹的HTMLer了。3 W E0 f% p/ k* e9 x3 g: \0 n
G' j2 Z/ k+ t3 Y! A+ _$ w) {6 f5 ]$ Z
實際上,基於許多人編寫HTML都相當差勁的事實,你應該做得比他們更好。
; O% o. x1 \/ a6 n
# O7 }% G% j% @1 _% x" u U下面的代碼把前面所教授的綜合在一起了:8 x8 g6 z% s" M5 R
, }( K+ i q3 q
M2 N" P+ m8 N8 ]( L9 B
# `+ v, {# ~" I k8 E Example Source Code [www.cn-webmaster.cn]6 g' U2 M9 Q1 V0 j
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
n0 O2 b$ P+ C; L% S"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">2 N3 F) [- \% |$ r& u& J
<html>
! o( [6 r$ k7 |" e. B5 Q8 D<head>
( j( X: [2 g* F<title>我的第一個網頁</title>) i' ]) i" H5 F& z( g( P
<!-- 順便說一下,這是註釋 -->% a) B2 z4 a8 m4 W9 i
</head>
4 K% k! |- h" |<body>
' v# J, H' q. c7 S2 u5 V% u<h1>我的第一個網頁</h1>9 m+ Q- n* b. Y7 l8 b
<h2>這是什麼</h2>. o9 z- _8 l4 c3 W; k
<p>用HTML組合起來的簡單網頁。 <strong>A用HTML組合起來的簡單網頁。</strong> 用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。</p>
I7 c% f, q5 ]/ t4 ^1 ]6 x( n<h2>目的</h2>
5 S, |+ d I! B<ul>
6 J) o' T' U; h2 Y% g<li>學習HTML</li>
! z- Y6 g6 h% J1 p% B7 o# c% Z- _<li> 顯擺,炫耀
) j8 D4 f' k2 n( E4 U) p/ e <ol>+ |3 ^) T* z+ }5 y- e, O! {
<li>向老闆</li> p3 n& N0 `, }; ?
<li>向朋友</li>. \% V' N6 v/ Q1 |$ r7 a0 Y+ v
<li>向我的小貓</li>- d8 g! d+ ? J* [3 Z) B* |& N
<li>給我腦中多嘴的小鴨子</li>
% q, g3 L8 h' v </ol></li>/ p% F4 x4 V# h9 a# M
<li>因為我已經愛上了我的電腦,我想給她點HTML愛情調料。</li>
Y7 b# @+ _2 b4 i" J! B$ {& k</ul>
* Q2 w4 `+ Y' y- M6 N% ~: Y9 N6 z<h2>在哪裡可以找到教程</h2>! s5 y& _5 c( X& o6 X% A. D: |* G
<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>
# V2 a, H; w S: y/ m f<h2>一些隨意的表單</h2>( B7 e# r9 @* S/ B
<table border="1">( c, A8 E! y" K
<tr>, a6 T, ^1 l/ `+ d. y y$ K
<td>Row 1, cell 1</td>
" G1 s( G$ Y$ h8 r/ e. z' ?<td>Row 1, cell 2</td>
W/ H8 p. A: P' o& e% z<td>Row 1, cell 3</td>8 U* H8 k$ a5 d& @; e' F: t
</tr>
+ j4 G' t; C" D6 w0 r3 `( l$ I<tr>
@' ~- }3 I) @& K3 ?- | h<td>Row 2, cell 1</td>2 G; y! T! L9 O
<td>Row 2, cell 2</td>
0 w$ a! W* x- ?; l+ L<td>Row 2, cell 3</td>& v% j3 }/ S4 r }+ m! [
</tr>; ?0 j4 L N4 h1 K
<tr>
' ?; c8 n r7 {5 c$ N9 D<td>Row 3, cell 1</td>9 |: {+ x* B3 b" Q9 y' C: _4 }$ Y& m
<td>Row 3, cell 2</td>3 I0 o- j" l6 F1 L. O% `/ U3 X: u
<td>Row 3, cell 3</td>7 e; W. ^" E Y1 P8 t2 d0 R
</tr>' V/ b' T' {/ p8 B5 S( t
<tr>8 x' s, d9 V: P
<td>Row 4, cell 1</td>9 b5 Q: R* ?5 }' C( V
<td>Row 4, cell 2</td>$ [, ]! o0 ]% z5 a
<td>Row 4, cell 3</td>1 H7 s3 b" B6 t$ R9 s6 h$ I& {/ J' t
</tr>
- B3 L& L: u% b4 i* s</table>
?; n2 S+ v$ s0 P2 _ a9 p: @# A<h2>一些隨意的表單</h2>
2 `8 E q+ H) v" c; `4 X<p><strong>注意:</strong> 看起來似乎很重要的部分,但實際上什麼都不做</p>
' G1 d- ~/ v# @1 S5 a<form action="somescript.php" method="post">
c! n# d8 |7 o6 M% @. o* L<p>名字:</p>- W0 i2 E6 c8 w" h$ z
<p><input type="text" name="name" value="你的名字" /></p>
1 b7 z- N6 j0 W3 U<p>評論:</p>* S2 J# v0 D1 X, P" S' S
<p><textarea rows="10" cols="20" name="comments">在這裡寫下你的評論</textarea></p>0 l: d, ~; { C5 e) V: ^ B" z
<p>你是:</p>
8 V$ [. @" p3 F F; b6 f, ~6 @<p><input type="radio" name="areyou" value="male" /> 男性</p>6 |8 Y M( c: ]1 ]9 _
<p><input type="radio" name="areyou" value="female" /> 女性</p>
1 e* d7 ^/ }, V3 ?<p><input type="radio" name="areyou" value="hermaphrodite" /> 雙性</p>/ M# {4 u ~0 l: D( g
<p><input type="radio" name="areyou" value="asexual" checked="checked" /> 無性</p>
/ j5 O7 @" X/ Q9 j n<p><input type="submit" /></p> <p><input type="reset" /></p>& ^& `0 b: D- N( d% \7 Q9 r% P! V' y' ?0 @% p
</form>5 [9 b3 }! K* ?5 X1 W3 p) \- _& o
</body>
1 R) v4 X! ]9 V+ {0 I S. Z- d7 G</html>
; j1 f5 b+ A: p' Z* q( j$ ~1 N& x
: I3 T' ^) h7 i$ D: a, l( q' p7 q就這樣。保存文件,然後在瀏覽器中查看──這是理解所有工作原理的最好方法。繼續吧!
1 x0 a: V' E1 R f. b# k; d4 p# U/ n4 D
感到滿意的話,你可以繼續學習CSS中級教程了。 |