11、綜合應用__把上面所有的要素堆積起來/ d: n ~# G5 u" W6 W% L+ e6 z+ Z
, V1 ?# n6 A& x7 e& i: V8 G* H2 C
如果你業已全部瀏覽HTML初級指南的全部頁面,學習完畢初級指南,你事實上已經是一個能幹的HTMLer了。; `. J' u, s4 I& F
% g# ~, Y* U: V5 S實際上,基於許多人編寫HTML都相當差勁的事實,你應該做得比他們更好。+ s1 Z: A3 \0 I* L1 N% ~) e
8 D6 J" E% W+ q! o; i. x
下面的代碼把前面所教授的綜合在一起了:
# ~. S: G- u0 J: Y8 j) O& h+ w: J4 x6 d) f) i( l7 E
' h' X: G! a& k5 A% A) v( R
: G. h: ^4 Z" f' {. a4 ? U Example Source Code [www.cn-webmaster.cn]7 q+ \6 U2 G, l8 `/ h* }! i
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
- e8 K2 g/ r$ V5 O4 d"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">$ k! o: y$ ^0 b' L% p+ ^9 a( S9 {- q; {
<html>' I# t4 n( O ^ X7 K
<head>2 S$ {( v( B! f8 Y. d) g
<title>我的第一個網頁</title>
3 f% C2 f$ R3 {- u5 j- l<!-- 順便說一下,這是註釋 -->7 z5 D' O$ l1 Q* U# h5 ?
</head> x. u& b* I3 m/ h9 q; \" F
<body>
8 { \1 G6 c0 Z' p. O5 L+ G! B: E( ?<h1>我的第一個網頁</h1>
5 E% [) F* T" H) `<h2>這是什麼</h2># C( c& B6 R' @4 n; k
<p>用HTML組合起來的簡單網頁。 <strong>A用HTML組合起來的簡單網頁。</strong> 用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。</p>5 k% U0 O( O2 r( g! I7 y% i
<h2>目的</h2>% C* e( X3 ]* X4 b/ d
<ul>/ \7 c7 o7 V, ?! B4 y+ M- M
<li>學習HTML</li>% n+ D. `* c& `' P5 @% b
<li> 顯擺,炫耀 0 f, [9 J: p9 Z0 I
<ol>
- C9 o( f6 p" v" p: F, \ <li>向老闆</li>
: @0 l, v3 Y9 {" P <li>向朋友</li>
. s8 a$ _( [8 V. F3 e: } <li>向我的小貓</li>6 g2 e n2 Q' ~! d i
<li>給我腦中多嘴的小鴨子</li>
& M. h- u( o9 S/ j" i( t </ol></li>
0 w9 b' T' @% g2 @<li>因為我已經愛上了我的電腦,我想給她點HTML愛情調料。</li>
& x6 }, H$ X8 g# q, `</ul>
, a" t$ @: s7 h7 }% u( K<h2>在哪裡可以找到教程</h2>4 o$ e% D! U8 t; u8 w
<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>4 g! z: C1 H# Z* r
<h2>一些隨意的表單</h2>9 D% r( K6 o0 `
<table border="1">
. d# ^3 v0 z0 n! s& u<tr>! O/ x+ {" b8 @+ y% b# J% h8 ~
<td>Row 1, cell 1</td>
9 a( v# l- n; {2 j' ]9 e% _3 h; f<td>Row 1, cell 2</td>
' ]+ C8 c# `+ [3 [6 Q0 R<td>Row 1, cell 3</td>+ s( V6 \% N3 e9 x% z1 {
</tr>
* r3 ]. v# c' q6 k! t<tr>& q$ P3 S, V4 B6 R" q- G6 P
<td>Row 2, cell 1</td>, v8 Q9 I; S" Z+ S4 y/ Y
<td>Row 2, cell 2</td>
* h; @5 d2 p/ W<td>Row 2, cell 3</td>& ]1 Z9 [. G3 S2 O: ]) r- ^) H3 v
</tr>. |+ @4 i* m2 V! y& [$ X: i
<tr>, ]1 \$ z7 U2 I0 S) |( A
<td>Row 3, cell 1</td>2 r- e! f2 j v5 D
<td>Row 3, cell 2</td>' K M5 L N5 i N
<td>Row 3, cell 3</td>
4 ^- h( u0 i3 z5 ~ ^2 w ~</tr>
% |+ g2 [: A8 A) i6 g/ a<tr> |3 {* F, N! Y% \6 R0 b0 ~9 ]
<td>Row 4, cell 1</td>- k: N5 J- ?* b7 D8 _
<td>Row 4, cell 2</td>! z5 D/ N J( n9 A U4 c3 K
<td>Row 4, cell 3</td># A# R: L9 B( T9 [2 U
</tr>
; }% b0 f9 g8 M</table>" B! R" q7 _4 o( M- G) h
<h2>一些隨意的表單</h2>
2 o. a5 U9 K' d/ m. l<p><strong>注意:</strong> 看起來似乎很重要的部分,但實際上什麼都不做</p>
" I, m- [2 C% h2 t3 V<form action="somescript.php" method="post">
0 [5 i, p, J" W7 V0 j<p>名字:</p>
% E H7 ~) m. ?: w6 x8 d9 P<p><input type="text" name="name" value="你的名字" /></p>5 l) b& P1 k2 S8 `
<p>評論:</p>$ S) h) q% z$ W& z# m
<p><textarea rows="10" cols="20" name="comments">在這裡寫下你的評論</textarea></p>
0 R# c' ?. K1 B1 ^0 U" Y<p>你是:</p>8 M- |! r0 o; k4 o- i
<p><input type="radio" name="areyou" value="male" /> 男性</p>' u! b7 \1 N% K" B+ t7 w3 B9 F+ o2 C
<p><input type="radio" name="areyou" value="female" /> 女性</p>
6 q2 n Z6 I* J/ ~0 `9 H3 [<p><input type="radio" name="areyou" value="hermaphrodite" /> 雙性</p>: a% B" A! }- h& M( F9 Z8 @
<p><input type="radio" name="areyou" value="asexual" checked="checked" /> 無性</p>$ e- l m, [! U6 I6 X$ I5 f4 z+ h
<p><input type="submit" /></p> <p><input type="reset" /></p>! ?1 x8 ?: h* E5 f1 L
</form>
, p8 J$ s( @- x# X# _</body>
$ K+ g) f0 G- l% J2 j- X# t" U</html> % T- s, G7 n" X4 z; H6 q
- \/ ?6 s6 O7 i5 f4 e, ~
就這樣。保存文件,然後在瀏覽器中查看──這是理解所有工作原理的最好方法。繼續吧!
4 L" y, n; S& L8 `% x( _* ]+ X$ z: W0 V6 W
感到滿意的話,你可以繼續學習CSS中級教程了。 |