HTML的基本元素

程序编制
& W5 B4 e% F1 y1 l7 P8 m, u8 g+ z    随着WEB的发展，与浏览者的交互越来越受到网站制作者的重视。现在的主页跟最初的静态主页相比，界面更加友好，功能更加丰富。这些技术需要一些编程语言来完成，如javascript、VBSCRIPT、CGI、ASP等等。要想使自己的网站在因特网的浩瀚海洋里脱颖而出，就必须掌握这些编程语言。8 ?' c/ g  y. K' l
    经验! Y0 s+ B  N4 i2 A& L
    经验不是一门技术，却是你制胜的法宝。网站制作中的很多问题，如网站结构、版面安排、中文处理等，都需要你的经验。网上有很多设计优秀的网站，要多学习、借鉴，自己多动手、多尝试，相信你也可以做出引人注目的漂亮网站。
7 r2 i' f3 z7 f  N+ {0 s% p& {    页面基本元素
# g7 f/ D* W) D# X1 v   HTML的样子
$ r3 g$ U3 [) M- ^4 E    HTML语言是由一系列标记组成的，每个标记有它特定的含义。标记用<>标示，以便和页面的内容区分开来。大多数标记成对出现，后面的标记加上一个“/”，表示结束。就像这样：6 A$ F: o' t- Q$ ~9 E) @
    这是黑体。2 e5 n# G! N( N/ |
    这句话的显示结果是：1 Z5 U1 f1 V0 c1 ?5 \$ c
    这是黑体。4 G% ?4 ?* O4 v& Y1 O0 S) Y
    表示黑体开始，表示黑体结束，标记在浏览器里不显示。如果你用过WPS中文处理系统，就会发现HTML的标记和WPS的控制符有点类似。把HTML的各种标记弄清楚，你就是主页制作大师了。简单吗？不一定，我们还是开始学习吧。( ~/ t7 R- h$ W; l* u% f0 H9 e
    我的第一页 : n# r) X% ~9 i/ c3 A7 ]+ }8 [% |% X
我们首先来看一个最基本的主页的HTML代码：* s/ S  I  v/ E) w0 x

4 W' _. E. X* X--------------------------------------------------------------------------------; r; o. C/ H) L) H, N, J: ~$ z
first.html: {5 m: u% e" R" z
这里是页的内容。
; ]8 c( L" n% S; X5 `1 Z' C, ^
: U$ d: Y: r& c: X" K4 |! }--------------------------------------------------------------------------------; ]: Z; K$ C& j. ]1 ?
    在“记事本”里输入上面的内容，保存文件，注意把“保存类型”改成所有文件（*.*），输入文件名“first.html”。使用浏览器查看一下结果。
" h3 D6 h& S/ M! C7 A, d% V图1-1
/ j% @2 q1 J0 b    从浏览器的“查看”-“源代码”菜单项里，我们可以看到我们刚才输入的源代码。
- I) Z4 \8 d& B/ L" I5 _+ E    对比源代码和显示结果，我们发现，一个基本的HTML页有以下几部分构成：
5 z) M( ?: L: K( I- }, k$ \  ^$ C6 g/ S3 P
    说明本页面使用HTML语言编写，使浏览器软件能够准确无误地解释、显示。
# M1 r5 u! D8 h& C7 Q1 Y+ r3 b2 d! Z6 j
    HTML页头，包含页面的一些设置信息。
4 |8 |# R. L4 ~. K- M2 ?4 H% H% j- `' o8 ?2 n3 e! _
    TITLE是HEAD中的重要组成部分，它包含的内容显示在浏览器的窗口标题栏中。如果没有TITLE，浏览器标题栏显示本页的文件名。网上有很多人忽略了TITLE的设置，你可以经常看到UNTITLED或HOME PAGE等这样的默认标题。由于Internet Explorer的收藏夹和Netscape Navigator的书签都是用TITLE作为存储地址文件的标示，所以为你的主页起一个恰当的TITLE是很有必要的。/ G( j. H( R9 X5 O6 h

. l& @0 }  m3 ^- `& @0 X    BODY包含HTML页面的实际内容，显示在浏览器窗口的客户区中。. K" n7 |  e& {/ ]  N
    页头7 ?$ Y. P7 m' L+ d
    除了TITLE标记外，HEAD里还有其他的几个标记。这些标记虽然不常用，但是需要有一定的了解。
/ d/ y1 _% h# \* q; UMETA
$ Q7 `6 a5 Y" a0 D5 _/ \& x0 ]4 ]    META标记用于描述不包含在标准HTML里的一些文档信息。激烈的竞争使浏览器厂商纷纷利用META开发出许多实用的功能，又使这些功能在常用的浏览器中都有效。下面介绍几个很有用的用法：( ]' `# m5 z7 V& \% o
9 y5 i; a8 z  p: _/ g+ N
) W/ X4 e' X# u& j3 g/ J
    本页的关键字和描述。在页面里加上这些定义后，一些搜索引擎就能够让读者根据这些关键字查找到你的主页，了解你的主页内容。7 g" E- P$ T" q- H

6 v5 W" Z5 U0 C% @0 t" H    浏览器将在60秒后，自动转到new.htm。你可以利用这个功能，制作一个封面，在若干时间后，自动带读者来到你的目录页。
: V% }7 y, p% U4 L/ v7 T" O    如果URL项没有，浏览器就是刷新本页。这就实现了WWW聊天室定期刷新的特性。5 w; k1 h* t' R3 e& h2 N  d7 F& V3 v

5 _% o# t% j& w, R+ L3 d) B    描述本页使用的语言。浏览器根据此项，就可以选择正确的语言编码，而不需要读者自己在浏览器里选择。GB2312是指简体中文，而台湾BIG5内码的主页则是用BIG5。
, M' `2 G4 k6 Q4 y( Y. i
* x2 J% A9 R6 ?5 p+ \    强制性调用网上的最新版本。浏览器为了节约时间，在本地硬盘上保存一个网上文件的临时版本。在你要重新调用时，直接显示硬盘上的文件，而不是网上的。如果你想让读者每次都看到最新的版本，就加上这句话。' P( ^  M3 [% c# p# l# d
LINK% B3 m) P  ]! Q( ?. L- z1 U7 J& ~6 `
    显示本文档和其他文档之间的连接关系。一个最有用的应用就是外部层叠样式表的定位。格式如下：
" ?; J; l, z7 _/ D( R! f# h8 D. b   
8 i# Z% t$ ~: `' T9 p    REL参数说明两个文档之间的关系，HREF说明目标文档名。关于层叠样式表，将在后面的课程中详述。0 U2 H6 o* q0 O
BASE
& q" f4 \6 w  f; B    本文档的原始地址。语法是：
9 x% r+ _& q, b/ ]3 I    . Q( M. Y: @( v0 i
    这样，读者下载你的文档之后，也可以知道是从哪里下载的。. K  Q, m& W; N# y
BODY
- c+ F  @/ e, N5 b    BODY标记有一些属性，用于定义页面内的显示效果。' G- o% u1 P7 `+ u3 r, N
    ALINK、LINK、TEXT、VLINK—— 文字的颜色。
1 C% z) n6 X6 V9 E$ x    ALINK：当前激活的连接的文字颜色。4 T# p( Z% Q7 h6 ^
    LINK：连接的文字颜色。
, c2 ~) b) b9 i+ N! c# M    TEXT：文字的颜色。4 b- F( _) ]. a! P4 Z  Q
    VLINK：参观过的文字颜色。
2 l! P  s: \# v$ z6 ]8 e' K; o    注意：文字的颜色要和背景色有明显的差别，以便读者浏览。3 @, d# E" ?& u) z. l
    BACKGROUND、BGPROPERTIES、BGCOLOR——页面的背景部分。5 p2 @* j/ @8 x& C) \) N5 S* [
    BACKGROUND：背景图案，该图案在页面内平铺。背景图案应保持单一色调，以保证页面文字易于阅读。- C2 }- }& c0 q/ p* h; H& S' E/ [
    BGPROPERTIES：设置成FIXED，则背景图案不滚动。（只对INTERNET EXPLORER有效）* m: |# K# i: K6 q7 J
    BGCOLOR：背景色。' j% z" v/ A7 A% @& C3 F" ^- ~- }
    注意：如果你的背景图案是深色调，因之文字颜色为淡颜色，那么由于浏览器调用页面的顺序是“背景色-文字-背景图案”，那么在背景图案没有显示的情况下，你的文字在白颜色下很难阅读，所以应该选用一个跟你的背景图案颜色一致的背景色。
6 @" m5 n" k' ~3 y4 p9 w    LEFTMARGIN、TOPMARGIN——页边空白。（只对INTERNET EXPLORER有效）) G7 G; g0 h) Q$ A0 G% H. g) r
    LEFTMARGIN：左边页边空白。; F8 V8 m( R+ e, L) Z: `) m7 [
    TOPMARGIN：顶端页边空白。; T& Q. v9 E- `# i; z
    HTML的基本元素就是这些，怎么样，不太难吧。下一课我们就开始制作完整的HTML文件。好了，下课！如果你有什么地方不明白，就来我“办公室”问吧。