我爱电脑技术论坛 » 网站建设 » 从HTML语言到网上家园 第二章 构成网页的基本元素

麦迪 发表于 2008-1-26 00:50

从HTML语言到网上家园 第二章 构成网页的基本元素

　在本章中，我们仅介绍部分常用的 html 标记，其它常用标记将分别在以后的各章节中介绍。
S1S$a-z3q:R:d,C|e9bo 　　2.1 标题 (Hn) ;KGG!g"mr`
p/u#X1DL
　　标题元素有 6 种，使用 H1 到 H6 规定文章中的各种标题。标题号越小，字体越大。
*t o5tH;p4J&s]4p.X 3m"t\)l9b;@X y
　　标题的基本格式为：
-ckJ)qB7v7t)| _7V X0vID^u(p
　　<Hn> …… </Hn> E6?;FaqX3]$LD
i/DF0j]5Wu%H
　　一般情况下， IE 浏览器中标题的解释如下：
0jq:XU7v| P
4{N(w)W;D(WIa 　　h1 黑体，特大字体，居中，上下各有两行空行。 s}i'@ts4D.Bf2@I

&r6Fr#iL*K3mT 　　h2 黑体，大字体，上下各有一到两行空行
bBWO9|7nUv(}E
[0mW!M*]N4Y 　　h3 黑体 ( 斜体 ) ，大字体，左端微缩进，上下空行
8E [#L#Ra9r'h8p -`m;M
J6Rnx r4?
　　h4 黑体，普通字体，比 h3 更多缩进，上边一空行
6au's z9Ka$A+k -S ]Sp+Tu-T/P
　　h5 黑体 ( 斜体 ) ，与 h4 相同缩进，上边一空行 E-],n^(G;Yns5w

&@o{_8@6O 　　h6 黑体，与正文有相同缩进，上边一空行
^7s],aq(U/a
epr${b3SAx&Sp
　　Netscape 对 Hn 的解释为，一律黑体，字体越来越小。 d6o3dNhV
B_/L{r'k*l$AT
　　Hn 可以有多种属性，其中最常用的是对齐属性， align ＝ left | center |right ，分别表示标题居左、居中或者居右，默认情况下标题均居左。
:h1J*L^;L ]1m}Q4r WR1`.ptq.d;t
　　例 : 下面的 html 代码的显示效果如图所示
&^^-h5p d1n
#Z2c
e a)c8Z*e u6z0^ 　　<h1> 我的第一个网页！ </h1> *V8q6]iK

/BY*g{Wa+yI+@.}J 　　<h2> 我的第一个网页！ </h2>
U7Wi-Z'E
R}6M
R 0ct'FNy7x
　　<h3> 我的第一个网页！ </h3> $pb)y"@'D/IP.a!I\

v/d/k_{T!{6}2w~ 　　<h4> 我的第一个网页！ </h4>
2~ ugfb4fN(ZE /n+NZ)~;i"qt&V#ir
　　<h5> 我的第一个网页！ </h5>
"P#F_|aQv%H7~8A %bl7O/l6^/{i:J
　　<h6> 我的第一个网页！ </h6>
~'x.dh(C/X
S7wG;j5}{E7W 　　<h1 align="center"> 我的第一个网页！ </h1>
n%TY(}Ju E;i+G6W,^E
　　<h1 align="right"> 我的第一个网页！ </h1 >
'Z,l'M+S*u,D ~ m-ms"M_%Ax
　　说明： 这个元素是块元素，开始标记和结束标记都是要求的。
p0R_#w_ 　2.2 分段 <P> lH)]"cI4M

1u:Ow^/h 　　网页中的分段完全依赖于分段元素 <P> 。段落的基本格式为： G bEoP5~:C/s(^!E d
d.I6dm+s%I o
　　<P> …… </P> 在浏览器中的显示效果为跳下一行并加一行空白。
g,|m!~G\j n#G
J2Q+maB&onl'n4ZG 　　<P> 可以有多种属性，比较常用是 align ＝ left | center |right 。
B"pLq8L WQ6Ak G9fpD8IY|p:K
　　例： <p align＝center > 这是一个段落。 </p>
e]&tn'gG![#Q ImBl6NsUf
　　当 html 文件中有图形，图形可能占据了窗口的一端，图形的周围可能还有较大的空白区。这时， <p> 可以用 clear 属性来确定图片周围文字的环绕格式。 clear 属性的含义为： -|;].W8s_s$|3FG|

'?2N6acvWoK\4w 　　left 下一段显示在左边界处空白的区域
/S"X-vW*R`M x(e -eH2n*DV@
　　right 下一段显示在右边界处空白的区域 X*fK%X5@e
Z@${P'o
　　all 下一段的左右两边都不许有别的内容 \vr,I Tb"@

@_:}%b}FwJ 　　说明： <P> …… </P> 中的 </P> 可以省略)w%fi.d+T!B
　[b]2.3 列表List[/b] qL5BQ6l+TV*n bt5c
　　列表用于列举事实，常用的列表有无序列表 ul(unordered List) ，有序列表 ol(ordered list) 和定义列表 dl(definition list)3 种格式。 )l"W,|uB1@E%h5Zm
　　无序列表用 <ul> 开始，每一个列表条目用 <li> 引导，最后是 </ul> ，其基本格式为： L
q_
Y0WX
　　<ul>
V.{.X(^)f[ 　　<li> *uch.@eU
　　……
`3n-f&{4S1Vs 　　<li> 6ak,P [5e'F
　　</ul> k8bI-la
　　列表条目不需要结尾标注 </li> 。输出结果为每一列表条目缩进，并且以黑点标示。 F \LQ wyV{U6A
　　与无序列表相比，有序列表 <ol> 只是在输出时列表条目用数字标示。基本格式如下： vlBR;O;T/s
　　<ol> 8|:L`NN,Np v
　　<li> "q,^r&Am{O
　　……
g:s[!b8Z:Q6U ^ 　　<li>
L;`2@G2}^H]#b 　　</ol> y:VWj#aP g-_
　　定义列表 <dl> 用于对列表条目进行简短说明，用 <dl> 开始，列表条目用 <dt> 引导，它的说明用 <dd> 引导，基本格式如下： f'K&_!D7@9}:]D
　　<dl> x B+sON7TR b5g
　　<dt> *b/G)@ I N
　　<dd> )gBX"e+a8A
　　…… Btgbb$S
　　</dl>
d"fA
QRT7X0O 　　下边我们用例子来说明无序列表、有序列表和定义列表的输出效果和区别。
iM&y it5F4n$c [align=center][table=90%,#cccccc][tr][td=1,1,91]　　类别 .o3iup\/_lTZV
[/td][td=1,1,144]　　无序列表 -[1H-\;Gs%NH_T0~
[/td][td=1,1,144]　　有序列表
4wh`'R\ dm [/td][td=1,1,189]　　定义列表 j:?$HF0lM
[/td][/tr][tr][td=1,1,91]　　Html 代码 0^5w+X0G'i
[/td][td=1,1,144]　　[color=#0000ff]<ul>[/color]
f|3m0Vj5uv_F 　　[color=#0000c0]<li>[/color] 无序列表
O$Pp[7C.k 　　[color=#0000c0]<li>[/color] 有序列表 !cGt#^4n
　　[color=#0000c0]<li>[/color] 定义列表 v{!l}1K j/H7EJg+z
　[color=#0000c0]　</ul>[/color] +hDt_.T
[/td][td=1,1,144]　　[color=#0000c0]<ol>[/color]
K}vT@2h 　　[color=#0000c0]<li>[/color] 无序列表 nO8F JX2m%{Q
　　[color=#0000c0]<li>[/color] 有序列表 ywl \lQ(r
　　[color=#0000c0]<li>[/color] 定义列表
8?8yTU{g1Op 　　[color=#0000c0]</ol>[/color] %{(Ua|.Xunn'oq
[/td][td=1,1,189]　　[color=#0000c0]<dl>[/color]
GW/n5e~m4X
　　[color=#0000c0]<dt>[/color] OL
7t_f&\/y;P 　　[color=#0000c0]<dd>[/color] 无序列表
*n0ps ]h)s.c.N l:FIPZ 　　[color=#0000c0]<dt>[/color] UL :^5r}M;^D2}yK w \\
　　[color=#0000c0]<dd>[/color] 有序列表 4MW,S%M4}
\K&]
　　[color=#0000c0]<dt>[/color] DL
Q M%?'Gdc/C9` 　　[color=#0000c0]<dd>[/color] 定义列表
'|V"Zfs2Dp 　　[color=#0000c0]</dl>[/color]
Xy] SEJ4W^} [/td][/tr][tr][td=1,1,91]　　显示效果 "M!tb3~(e
[/td][td=1,1,144]　　· 无序列表 X.G"O*h4s-QF!Y!b
　　· 有序列表
~1T;~6o{1~D 　　· 定义列表
$q-@ok6V1o7N&{YMh [/td][td=1,1,144]　　1. 无序列表 +N/O-\,{MUA%g
　　2. 有序列表 D`)t f*]oYl
　　3. 定义列表 DxJ_t_K:r
[/td][td=1,1,189]　　OL
w#Vb'w&|z/ah)y%BX\ 　　无序列表
+s4}iDW3V 　　UL
7c{,bg O6gq 　　有序列表 #K4y;j1O#|SUo
　　DL
(Dp|.VPv-KT 　　定义列表

sz9l@@"Na5Az m4u [/td][/tr][/table][/align]　　[b]说明： [/b]列表标记是块元素，其中 <ul> 、 <ol> 和 <dl> 要求开始标记和结束标记都有， <li>,<dt> 和 <dd> 可以没有结束标记。 {Y3D^5I l3I5[}0VY
　用户可以用 type 序性修改条目的标记。对于无序列表， type ＝ disc | circle | square ，（ disc 实心圆点　 cirde 圆圈 square 实心方点），缺省值为 type ＝ disc 。有序列表 type=A | a | I | i | 1 （ A, 大写字母； a, 小写字母； I, 大写罗马数字； i, 小写罗马数字； l, 缺省 , 阿拉伯数字），缺省值为阿拉伯数字。 /DF#Ep
z+yn
[align=center][table=90%,#cccccc][tr][td=1,1,568]　　例： html 代码：
/Z}F3Aq$U:Zn2o 　　[color=#0000c0]<ul>[/color]
k6D&FQS&a/O 　　[color=#0000c0]<li> [/color]无序列表
}x|{;ul1n7z` 　　[color=#0000c0]<li type= "circle" >[/color] 有序列表 kv.gh:u ]2X2W
　　[color=#0000c0]<li type= "square" >[/color] 定义列表
mL9I&I
lR6Wg 　　[color=#0000c0]</ul>[/color] _[s:V[&UC~
[indent]　　[color=#0000c0]<ol>[/color]
${CwRTY%zM0{"lf
l`$t [/indent]　　[color=#0000c0]<li> [/color]有序列表
$tf9b9fYj['y 　　[color=#0000c0]<li type= "I" value= "1" > [/color]有序列表
-zzu3@&uEe,h%l 　　[color=#0000c0]<li type= "A" value= "1" >[/color] 有序列表 5Ts1XwP;Z'\q U[
　　[color=#0000c0]<li type= "a" value= "1" >[/color] 有序列表
^\+M um 　　[color=#0000c0]<li type= "i" value= "1" > [/color]有序列表
{(}3m~Zp-{ 　　[color=#0000c0]</ol>[/color]
(Azgr6y/_4|&x8Y 　　显示效果： 'Z f+m T)\:r$}(XG
　　· 无序列表 A'GbT$dK(a'i
　　o 有序列表 Z#fbcZ*q
　　§ 定义列表
q-V3[V {*~7U 　　1. 有序列表
d-zzh*QxW 　　I. 有序列表
k|E](hX_m 　　A. 有序列表 X1I8Jy?
　　a. 有序列表 +ar-j"x)zK
　　i. 有序列表 ,v-W*eeP }!s
[/td][/tr][/table][/align]　　缺省情况下有序列表的条目数字是从 1 开始的，我们可以用 value 属性修改条目起始号。
v{$Qi/@@ [align=center][table=90%,#cccccc][tr][td=1,1,568]　　例：
i{ `@6HT u"C 　　[color=#0000c0]<ol>[/color]
)[%G3s/p4X 　　[color=#0000c0]<li value= "3" type= "i" >[/color] 无序列表 [color=#0000c0]</li>[/color] M{){%Bu(p Y
　　[color=#0000c0]<li>[/color] 有序列表 [color=#0000c0]</li>[/color] "P6Fp^rqT1B-L
　　[color=#0000c0]<li>[/color] 定义列表 [color=#0000c0]</li>[/color] k/I'@^F-e4}
　　[color=#0000c0]</ol>[/color]
7A7\7pssh.@!a 　　显示效果： :U$JgY,~{
　　iii. 无序列表
i8QJv#E3^ 　　iv. 有序列表
;~4y*E,N _'}w 　　v. 定义列表
$o[v8R$D-QDs'Q4L [/td][/tr][/table][/align]　　[b]说明： [/b]各种列表可以相互嵌套，每一个列表条目都可以是一个单独的列表。

麦迪 发表于 2008-1-26 00:51

2.4 横向标尺<Hr>
0PD8gPYtAb 1p_ie3x"b
　　通常我们会看到网页中用一条横线来分开上下两段的内容，画出这一横向标尺的最简单的方法就是使用 Hr 标记。该元素的基本格式是：
Y9L3]5Xlu^:]"S R$g_R Yp!|F:r2D^4f6H$v
　　<hr>…</hr> %G7wSO
h-t
uQ#N HH3Zj
　　其中 </hr> 可以省略。

_CI~'G7?
NKT%G)KK%JS*E 　　我们可以使用 hr 的多个属性对其加以修饰：
1zf|prEJ@ U
)zp
k\Gu| 　　align=left | center | right 对齐属性，定义了横向标尺的位置，默认值为 center ；
d]n] K@0L0zLJ6c
}-N*{0JB:km 　　color 定义横向标尺的颜色；
(r%z9g/SP:Uz)U r#{_T(f(ZQ
　　size=n 设置 <hr> 元素的高度，单位是相素； e]&f#C4?2Lw&yMoZ

O|s8HS.O7b$z@ 　　width=n 规定元素初始宽度，可以是像素或者百分数。 2x!v,|~5C'l4Pi
.NU)zO5? M+A%__
　　例： <hr width= "50%" size= "3" color= "#000080" noshade align= "left" > [l-Jk;@*i5iaE
N]y

C3DxvY0^!H 　　显示效果如下：

麦迪 发表于 2008-1-26 00:52

2.5居中<center>
{Uc3k'@#K$Y X&JPgSFj8GIX
　　很多元素都有对齐方式属性，如 <Hn> 、 <p> 等，但这些元素的对齐属性只对本标记内的文档负责，如果想要让整个网页或者网页中的大块文档居中，可以直接用居中标注 <center>…< ／ center> 。 .N.\R8y2xnE
gR*TcT"~-jt
　　例：
F"F6Y5~r ^OAB{C
/?Ul7JfjZ/f 　　<center>
}d#nm%TzU6k U!|X;v.~7]B.J
　　<h1> 从 HTML 语言到网上家园 </h1>
2e%khM/p1\7q
H*m+Z7y6b'a@P 　　<p> 我的第一个网页 </p> \ f'j%z qA[P)t
At.K6j:cO{\ uo TQs
　　</center> ?D `5O8w/D

4~JKYtpM,xM-v6X.p 　　显示效果： 9X8?5gWc

,?;hltBK]0oT 从 HTML 语言到网上家园 1X,Z0us)lD$d#N#oU4i
我的第一个网页
| SQ CH3be %JW@m.NU]
3N8c+Gd1K4_
　　说明： <center> 是块标记，因而开始标记和结束标记都需要。该元素的作用与 <div align=center> 等同。
(H$G9m.E5mD!rmC 2.6 DIV
_nd#^(G*YI^H _0O$SB!Jb{g S
　　DIV 元素用来表示一个文档中不同类型的元素，例如章、节、文摘和附录等。基本格式为 <div>…</div> ，其最常用的属性是 align 属性。该元素的结束标记 </div > 不可缺少。 `$^6f+wqE
,j,T6P\%lW0|_ cy;S
　　2.7脚本<script>
@`sC!sbK
(okf6F
V8{6d 　　要想制作丰富多彩、功能强大的网页，仅凭 html 语言是远远不够的，往往还需要嵌入一些用其它语言编写的脚本， <script> 的作用就是为页面指定一个教本，并由脚本引擎解释为 html 语言。常用格式为： RA'?sy5@7t
'Ih0O7b [f'u9t Y0L
　　<script language= 脚本语言名称 > 脚本代码 </script> "Q!L4N!TvWS
?(^#i*Vmn+rJZ
　　language 属性规定当前脚本编写使用的语言，或调用相应脚本引擎的语言。常用的脚本语言有 JAVASCRIPT ， JSCRIPT ， VBSCRIPT ， VBS ，默认值是 JAVASCRIPT 。
BxKZm$Nz
D 5Q?;epyK)j.`,B w}
　　说明： 包含在 SCRIPT 块中的脚本代码在网页打开时立即执行。该元素是块元素，开始标记和结束标记必须成对出现。

查看完整版本: 从HTML语言到网上家园 第二章 构成网页的基本元素