11、綜合應用__把上面所有的要素堆積起來: V7 u( e3 `" G+ E6 \
9 @9 H! I# a; W! B# d, R如果你業已全部瀏覽HTML初級指南的全部頁面,學習完畢初級指南,你事實上已經是一個能幹的HTMLer了。: x( C b: k; h8 d, p+ s
; k# `( h8 Z: f實際上,基於許多人編寫HTML都相當差勁的事實,你應該做得比他們更好。
) E/ Q2 A4 t% | u. @6 P
3 Z) i) q, _1 {# N下面的代碼把前面所教授的綜合在一起了:
3 w9 l x! p: P b! s
: N# N! ~0 {* @9 z5 L4 _# O1 z" o! Z4 @) d
: ^: W9 ]/ Q, s" U. v: y t) s
Example Source Code [www.cn-webmaster.cn]$ o' x4 s& @ f7 a
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" % v# ~% V, d; M8 }! }& \
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">1 d! K- R0 h* X2 X
<html>
/ N5 E" T _$ u6 b: ?& ~1 t. r+ g<head>) e9 {% ^0 j; I# b9 ~
<title>我的第一個網頁</title>, p2 k5 T; m: h( C) H8 c, K/ y
<!-- 順便說一下,這是註釋 -->
+ O c$ L7 k% o6 H9 w: n6 S</head>+ R# k; C: Y2 i' X
<body>$ E0 S4 u7 J0 o! R3 T
<h1>我的第一個網頁</h1>3 t& G+ c: L- P8 R" V! _
<h2>這是什麼</h2>. [$ n% a! [* S1 L0 Q. L
<p>用HTML組合起來的簡單網頁。 <strong>A用HTML組合起來的簡單網頁。</strong> 用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。用HTML組合起來的簡單網頁。</p>
. V7 u( |$ D# i& I; M<h2>目的</h2>
G. \- o$ ` |+ l% |<ul>; _3 X9 R7 {: D n t/ ^
<li>學習HTML</li>8 l/ i8 B9 q1 K$ {" x. a! c( j
<li> 顯擺,炫耀 7 G' g X: R5 G) d; R! W# i
<ol>9 n, r6 ]" v5 N7 k" K
<li>向老闆</li>
# P1 ]+ y; a, x2 A4 [ <li>向朋友</li># l! |3 i' r. i) w; w! d7 O9 }
<li>向我的小貓</li>: E6 j* W; Y- ?6 v8 A" @
<li>給我腦中多嘴的小鴨子</li>
/ S, H! q6 ?' |4 {2 @( u8 V+ ~ </ol></li>& m9 ]7 d4 j9 O, U7 b
<li>因為我已經愛上了我的電腦,我想給她點HTML愛情調料。</li>, `6 P6 J+ ?+ S5 n8 M# M
</ul>8 A; N; n# i, y6 `2 H5 [/ |
<h2>在哪裡可以找到教程</h2># V# @ i# {: l6 r3 _6 {
<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>
: l, O0 g+ G! k: [4 x0 c& }<h2>一些隨意的表單</h2>, d( n) V* `; T. }$ a8 \- C# n
<table border="1">
' t5 o6 T) O& |2 k( v; O- j1 r8 y<tr>9 H0 p& Q6 \: O& e" S) I! ]
<td>Row 1, cell 1</td>) e* ?& |1 k2 B5 q
<td>Row 1, cell 2</td>3 y' u2 G7 J& F. y7 `* d; V/ K
<td>Row 1, cell 3</td>
# x/ _$ A; V3 O! e</tr>& Q9 F( R T6 g3 w6 Y( m6 R
<tr>, O' g- X8 i' k+ K6 _
<td>Row 2, cell 1</td>% a8 y' |; n) X# o' j" n- Y, P3 k
<td>Row 2, cell 2</td>) O) j) d/ g& s9 `$ r
<td>Row 2, cell 3</td>$ X8 f' U+ f5 \
</tr>- _2 T, k, @3 J
<tr>4 l! n4 M6 Y, x% {, |% I1 P
<td>Row 3, cell 1</td>
2 W/ Q ~3 F" z4 J" ]+ Y<td>Row 3, cell 2</td>9 x* w: r. C9 B7 H+ D2 L [
<td>Row 3, cell 3</td>9 i/ k. [' |/ i6 ^0 A# X# v
</tr># u+ f$ T v& u2 d# J
<tr>: m+ }; a, t! p4 I& r
<td>Row 4, cell 1</td>
6 M6 O+ M- G7 r2 N, O<td>Row 4, cell 2</td>: i, j/ i6 n$ n1 q' W
<td>Row 4, cell 3</td>4 L# N' }1 C1 ]- h: b
</tr>
& T( s1 i3 Z( {" ~</table>
! b! o, N* P# Z# @<h2>一些隨意的表單</h2>
# p) h5 o* T. z( g9 O! E& m<p><strong>注意:</strong> 看起來似乎很重要的部分,但實際上什麼都不做</p>, k4 `7 y" x x3 ]0 v' a: Z" V
<form action="somescript.php" method="post">
N9 X/ { g, T0 k<p>名字:</p>
9 C4 ^# L9 l- C<p><input type="text" name="name" value="你的名字" /></p>
( n7 D! H% @7 W<p>評論:</p>+ s. |+ C' h X7 ]5 i [
<p><textarea rows="10" cols="20" name="comments">在這裡寫下你的評論</textarea></p>
+ g2 l @2 ?5 x7 S2 R3 c$ t4 L$ w" X<p>你是:</p>
4 \8 N- O4 {, N/ X$ o<p><input type="radio" name="areyou" value="male" /> 男性</p>8 H& E5 p( s, W# W2 K0 d0 O$ r8 d
<p><input type="radio" name="areyou" value="female" /> 女性</p>5 L' t5 }1 _0 f9 n0 U& m2 M
<p><input type="radio" name="areyou" value="hermaphrodite" /> 雙性</p>
. f6 C# Z: B1 ~- T' M<p><input type="radio" name="areyou" value="asexual" checked="checked" /> 無性</p>+ g7 {0 ~ I+ S8 X( L
<p><input type="submit" /></p> <p><input type="reset" /></p>
* w# T0 k$ I+ e2 u</form>
; }) \ b0 j' |8 `1 V( N</body>
! V6 R& ?/ f; v. w& d: E- H& T</html> 7 E) B: y! K8 ]" x( I, k3 Q8 J
) d3 b Y5 N5 o/ `
就這樣。保存文件,然後在瀏覽器中查看──這是理解所有工作原理的最好方法。繼續吧!
7 Z+ k8 L' I {+ ~2 f) ^ U8 }, W. B6 d' |+ }2 B- `$ L1 [
感到滿意的話,你可以繼續學習CSS中級教程了。 |