标题:
HTML的基本元素
[打印本页]
作者:
admin
时间:
2008-1-19 23:22
标题:
HTML的基本元素
程序编制
2 {0 `6 [+ K2 _' E I
随着WEB的发展，与浏览者的交互越来越受到网站制作者的重视。现在的主页跟最初的静态主页相比，界面更加友好，功能更加丰富。这些技术需要一些编程语言来完成，如javascript、VBSCRIPT、CGI、ASP等等。要想使自己的网站在因特网的浩瀚海洋里脱颖而出，就必须掌握这些编程语言。
2 q5 U; T) L; \4 c( t
经验
3 i6 [8 D6 B8 y( r) P5 J6 F" | D
经验不是一门技术，却是你制胜的法宝。网站制作中的很多问题，如网站结构、版面安排、中文处理等，都需要你的经验。网上有很多设计优秀的网站，要多学习、借鉴，自己多动手、多尝试，相信你也可以做出引人注目的漂亮网站。
2 s# w: W Z6 M' s+ |& ^# b* ?
页面基本元素
2 ~3 j- k1 X4 M" i
HTML的样子
3 Y4 s. H s) ?' `7 O
HTML语言是由一系列标记组成的，每个标记有它特定的含义。标记用<>标示，以便和页面的内容区分开来。大多数标记成对出现，后面的标记加上一个“/”，表示结束。就像这样：
5 s% X1 U# x2 e1 \0 F3 o
这是黑体。
; w+ U+ F- V8 E, C" C
这句话的显示结果是：
' M: D$ i) u% d" T
这是黑体。
9 \- O4 y5 }% b( @$ b) W" T
表示黑体开始，
表示黑体结束，标记在浏览器里不显示。如果你用过WPS中文处理系统，就会发现HTML的标记和WPS的控制符有点类似。把HTML的各种标记弄清楚，你就是主页制作大师了。简单吗？不一定，我们还是开始学习吧。
+ Y ~, J. C0 ?. p, ^6 {9 ?
我的第一页
2 h! p& S7 Y/ |0 j0 D: W* d) R; U
我们首先来看一个最基本的主页的HTML代码：
; T7 X# i$ c0 ], A. e* C
) w7 U6 M! t6 l0 r
--------------------------------------------------------------------------------
3 R1 ]; {; w1 Y2 D2 @% w
first.html
" Y1 ]; t9 w* o$ L+ q
这里是页的内容。
; t* s6 ]2 Y( d( x' ]% B. @% S. y
- o7 {1 f1 v, m
--------------------------------------------------------------------------------
2 b- {9 ^9 l2 n" s% _$ `
在“记事本”里输入上面的内容，保存文件，注意把“保存类型”改成所有文件（*.*），输入文件名“first.html”。使用浏览器查看一下结果。
6 G6 l8 D& c' m; m
图1-1
, W- B% [" X: H4 U
从浏览器的“查看”-“源代码”菜单项里，我们可以看到我们刚才输入的源代码。
' D0 k! d4 V5 [ i
对比源代码和显示结果，我们发现，一个基本的HTML页有以下几部分构成：
$ m; ~, N, j X: ]: j$ R7 E
" q' {3 a3 v' t' H
说明本页面使用HTML语言编写，使浏览器软件能够准确无误地解释、显示。
3 i, g; U. ~( \
% a9 {' R5 K/ V, R$ O$ } E# w
HTML页头，包含页面的一些设置信息。
$ Z5 K# U1 Q+ O9 b$ r
: N/ F! F* F# _2 N }
TITLE是HEAD中的重要组成部分，它包含的内容显示在浏览器的窗口标题栏中。如果没有TITLE，浏览器标题栏显示本页的文件名。网上有很多人忽略了TITLE的设置，你可以经常看到UNTITLED或HOME PAGE等这样的默认标题。由于Internet Explorer的收藏夹和Netscape Navigator的书签都是用TITLE作为存储地址文件的标示，所以为你的主页起一个恰当的TITLE是很有必要的。
B3 Z% e' Y" p x5 |
# M, `! |5 G9 m0 i1 I$ m
BODY包含HTML页面的实际内容，显示在浏览器窗口的客户区中。
0 I1 E- G5 }& A
页头
- ^; j: `* Z9 b8 c' K
除了TITLE标记外，HEAD里还有其他的几个标记。这些标记虽然不常用，但是需要有一定的了解。
( P, P/ q% r: g; ^3 ^* C% F# |: k
META
' x1 I/ m9 R7 Q# n0 A8 Z
META标记用于描述不包含在标准HTML里的一些文档信息。激烈的竞争使浏览器厂商纷纷利用META开发出许多实用的功能，又使这些功能在常用的浏览器中都有效。下面介绍几个很有用的用法：
+ l6 j" {) I* c: h5 i& a3 _" w! |) \
7 F/ O0 ^5 {+ j. f
R) y ^; { o. a. X' l
本页的关键字和描述。在页面里加上这些定义后，一些搜索引擎就能够让读者根据这些关键字查找到你的主页，了解你的主页内容。
- i& n* t: p @& f4 i
1 M/ w& t3 Z/ g8 }0 N% _" D7 `
浏览器将在60秒后，自动转到new.htm。你可以利用这个功能，制作一个封面，在若干时间后，自动带读者来到你的目录页。
4 P; K8 ` W3 k$ r
如果URL项没有，浏览器就是刷新本页。这就实现了WWW聊天室定期刷新的特性。
7 q' P0 m! {) n" o
2 c7 j5 N; i! n8 K0 P
描述本页使用的语言。浏览器根据此项，就可以选择正确的语言编码，而不需要读者自己在浏览器里选择。GB2312是指简体中文，而台湾BIG5内码的主页则是用BIG5。
' U# Y+ _3 `! y8 H+ p8 g
# _! f$ j4 ]( ^
强制性调用网上的最新版本。浏览器为了节约时间，在本地硬盘上保存一个网上文件的临时版本。在你要重新调用时，直接显示硬盘上的文件，而不是网上的。如果你想让读者每次都看到最新的版本，就加上这句话。
" \; o4 J3 |3 v, o
LINK
2 a# l7 [) J: \% ~/ ?( D
显示本文档和其他文档之间的连接关系。一个最有用的应用就是外部层叠样式表的定位。格式如下：
; Y/ O4 s. u: @ Z
/ E- l* u& o; h2 n$ k6 Q0 C
REL参数说明两个文档之间的关系，HREF说明目标文档名。关于层叠样式表，将在后面的课程中详述。
( `4 B! i( F$ N5 e2 V& u3 c
BASE
. h, C0 C; y* B' ?& \) o$ C
本文档的原始地址。语法是：
. q" Y, k) Z) }
- H5 A: _$ u( y, T( ~, X2 g/ v' w$ o+ M
这样，读者下载你的文档之后，也可以知道是从哪里下载的。
1 ]' q9 s" C6 l9 D' q
BODY
4 ]7 n3 e+ T4 P) [# Z4 ?
BODY标记有一些属性，用于定义页面内的显示效果。
6 g6 x) {, L7 u
ALINK、LINK、TEXT、VLINK—— 文字的颜色。
$ A0 I0 F/ s3 ]7 _' `2 z& o9 q9 `+ s
ALINK：当前激活的连接的文字颜色。
4 s9 q* K* f) B" t2 ]* S1 K2 ~% h* u
LINK：连接的文字颜色。
2 U1 G. z( I3 M9 S) ?: J- L2 e L
TEXT：文字的颜色。
9 V0 ~9 w3 h9 @: T6 J
VLINK：参观过的文字颜色。
$ P8 W3 J2 ]- v# o" C& y U
注意：文字的颜色要和背景色有明显的差别，以便读者浏览。
9 I' W( I/ v7 L P
BACKGROUND、BGPROPERTIES、BGCOLOR——页面的背景部分。
; h3 R' v4 f' v- I% X1 f
BACKGROUND：背景图案，该图案在页面内平铺。背景图案应保持单一色调，以保证页面文字易于阅读。
3 |" o; ^1 _5 ^ j5 n7 j
BGPROPERTIES：设置成FIXED，则背景图案不滚动。（只对INTERNET EXPLORER有效）
# F3 L3 Y3 X0 F6 a* a
BGCOLOR：背景色。
5 S3 s( u8 Y# e- Y3 b
注意：如果你的背景图案是深色调，因之文字颜色为淡颜色，那么由于浏览器调用页面的顺序是“背景色-文字-背景图案”，那么在背景图案没有显示的情况下，你的文字在白颜色下很难阅读，所以应该选用一个跟你的背景图案颜色一致的背景色。
& M- U" I4 D+ e! j4 f
LEFTMARGIN、TOPMARGIN——页边空白。（只对INTERNET EXPLORER有效）
6 C9 p; Y2 ^2 B/ p0 F \
LEFTMARGIN：左边页边空白。
* i$ W. L# P; _$ X% g( u
TOPMARGIN：顶端页边空白。
5 D6 ]1 a% v1 K; O2 b
HTML的基本元素就是这些，怎么样，不太难吧。下一课我们就开始制作完整的HTML文件。好了，下课！如果你有什么地方不明白，就来我“办公室”问吧。
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
