11、綜合應用__把上面所有的要素堆積起來. y, U% ?3 C# K# g2 P$ \' V3 ?" w
6 k( M. g8 }6 @. U如果你業已全部瀏覽HTML初級指南的全部頁面,學習完畢初級指南,你事實上已經是一個能幹的HTMLer了。
5 @9 L' H: C( B! n2 j) |% B# j+ _5 l8 K6 w0 w/ o5 {: P( \* ~
實際上,基於許多人編寫HTML都相當差勁的事實,你應該做得比他們更好。
& R3 a7 l3 I7 Y. ~! h2 m0 |6 |* `5 s! s* o" s
下面的代碼把前面所教授的綜合在一起了:5 q4 V+ h$ S& O% n
9 m7 N' b# q! x: i# m/ J% u4 y# F4 X" K" T# z. C+ Y
# n0 M7 J1 g) F, j: C1 H
Example Source Code [www.cn-webmaster.cn]( z5 ~5 `- s; b1 u8 @& q% I
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+ F8 ?3 Q) G- W"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
" x1 s w6 C' }3 L( H' t* J<html>
- j w+ L% V7 D) J+ z<head>2 s! M) q! Z% ]4 W q3 h) a% O: {6 U
<title>我的第一個網頁</title>, T# x. l3 X$ Q+ k, ?' u1 b6 F
<!-- 順便說一下,這是註釋 -->0 o( Q% r) V/ h9 S8 _8 X5 ?
</head>+ i! v2 j) y) p: U- V
<body>
/ ]' l2 |2 ?5 y9 H8 d" [<h1>我的第一個網頁</h1>
# n! M2 j! ? w/ O8 Z8 B/ h6 W( A4 O: K<h2>這是什麼</h2>. l- _5 M0 W( E) q. \' I1 b
<p>用HTML組合起來的簡單網頁。 <strong>A用HTML組合起來的簡單網頁。</strong> 用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。</p>* _8 w7 `. E4 i" x) ~$ I
<h2>目的</h2>2 ?" V8 b% i/ L, N. J( J
<ul>
# R: H1 H- K* ^& `3 F/ i, N<li>學習HTML</li>
5 r! G) y" j& q# o9 n9 w0 n<li> 顯擺,炫耀
( Y( c! g4 m0 F3 w3 c) v: W1 v <ol>
6 L/ m: T0 F- I+ z# V, C/ R0 ` <li>向老闆</li>; T4 J2 \# [5 L2 i5 q' {
<li>向朋友</li>
( c3 c' P! H: e8 r <li>向我的小貓</li>
5 B; k3 C! A, V( E2 v d* O <li>給我腦中多嘴的小鴨子</li>( X) h9 q8 T9 P
</ol></li>
. a3 p" J$ S6 { z8 d* H<li>因為我已經愛上了我的電腦,我想給她點HTML愛情調料。</li>, h3 ^* \, G: R) G; p5 h8 ]% b, i: J
</ul>& R& Z* C$ L, e4 ?) ?. V
<h2>在哪裡可以找到教程</h2>
/ N" V5 j" d) Z0 t<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>
; M; o: ^6 `5 B$ {/ D" T% c! g+ G* N<h2>一些隨意的表單</h2>
3 ~1 k3 |1 ?- j9 w1 @( G9 h. p% a<table border="1">0 l9 s5 W: @) V6 q
<tr>% N2 Y, l- J) n
<td>Row 1, cell 1</td> k) ~% q% H' e+ E8 d+ J. `: L
<td>Row 1, cell 2</td>
2 I: T9 a+ a5 O5 l J! w9 @1 m9 ^<td>Row 1, cell 3</td>
2 C& r! ?. t y# G4 h</tr>, W* s) U+ O( p
<tr>. S% j2 @$ J' w3 A9 M+ j
<td>Row 2, cell 1</td>4 j5 y6 q1 o5 m& m7 L2 Y0 d
<td>Row 2, cell 2</td>
s N3 }% J6 B7 `0 Y$ f<td>Row 2, cell 3</td>. a; V: @( J2 h/ J0 {
</tr>+ {) s/ m# Z% q/ ^% A
<tr>
- _9 w8 o: F3 Q9 }' f+ K<td>Row 3, cell 1</td>
2 d. e& D* _. Q8 d/ u7 Q o" B: y8 W; H<td>Row 3, cell 2</td>1 w! n9 ]2 _9 b) `! A3 f
<td>Row 3, cell 3</td> q8 j+ U6 B: C- H1 S, p
</tr>
& Z: D) ?+ T( ~<tr>) i# e( n$ j6 ]2 N: N0 m
<td>Row 4, cell 1</td>
. Z' j/ x5 f1 y<td>Row 4, cell 2</td>
& _' ~. z0 r7 A; I @, z, K<td>Row 4, cell 3</td>
, ], {0 L6 R+ b& |/ H# X" X9 G</tr>
- e! l% K1 \) V7 Q, n7 W1 z# _- q</table>
1 D8 R+ h* Y) U1 O<h2>一些隨意的表單</h2>
4 b! V3 R! S+ c0 }8 ]+ s$ o. V<p><strong>注意:</strong> 看起來似乎很重要的部分,但實際上什麼都不做</p>& p9 Y e& y, Q( A8 D/ v
<form action="somescript.php" method="post">. d5 O8 K) v% S$ X0 Z
<p>名字:</p>
' L/ T+ g( h* a4 O& a<p><input type="text" name="name" value="你的名字" /></p>
5 H) v6 a) ]9 t( j/ {<p>評論:</p>
4 u. b0 ]% D0 Z! I3 o# h<p><textarea rows="10" cols="20" name="comments">在這裡寫下你的評論</textarea></p>
; C: n3 l7 P9 y& j8 t9 h<p>你是:</p>% R- {) c9 @7 U" c0 h: A: F, f1 r
<p><input type="radio" name="areyou" value="male" /> 男性</p> C+ x4 C% n7 g" j/ V! d
<p><input type="radio" name="areyou" value="female" /> 女性</p>0 v/ i9 ]7 R( D; R: k$ F% z
<p><input type="radio" name="areyou" value="hermaphrodite" /> 雙性</p>4 T+ f% p3 e# p, h# B6 g
<p><input type="radio" name="areyou" value="asexual" checked="checked" /> 無性</p>0 S$ D# \; v. E! k
<p><input type="submit" /></p> <p><input type="reset" /></p>
6 }5 b1 ]; W! L, \! S</form>0 a. C1 k2 i9 s& q
</body>
) F" _/ e) Y, R; ]6 V5 u</html> ' T) q+ T+ ~. s2 a& O
# L; j1 b, @' w) g& q就這樣。保存文件,然後在瀏覽器中查看──這是理解所有工作原理的最好方法。繼續吧!
' o! o+ D2 J+ O0 Q
" W2 H! t' i7 d3 S9 U感到滿意的話,你可以繼續學習CSS中級教程了。 |