Board logo

标题: HTML的基本元素 [打印本页]

作者: admin    时间: 2008-1-19 23:22     标题: HTML的基本元素

程序编制8 g! K# @1 z5 z% l; n! [, w, i3 O
    随着WEB的发展,与浏览者的交互越来越受到网站制作者的重视。现在的主页跟最初的静态主页相比,界面更加友好,功能更加丰富。这些技术需要一些编程语言来完成,如javascript、VBSCRIPT、CGI、ASP等等。要想使自己的网站在因特网的浩瀚海洋里脱颖而出,就必须掌握这些编程语言。( C7 @7 _& L+ |  `
    经验
$ a! ~- H/ _/ ?& L2 o    经验不是一门技术,却是你制胜的法宝。网站制作中的很多问题,如网站结构、版面安排、中文处理等,都需要你的经验。网上有很多设计优秀的网站,要多学习、借鉴,自己多动手、多尝试,相信你也可以做出引人注目的漂亮网站。
1 a& S  c6 L& s% g    页面基本元素* W* A' x+ m) d2 G8 u: [
   HTML的样子
. A8 ~1 G- _" {! m# ]" U  j    HTML语言是由一系列标记组成的,每个标记有它特定的含义。标记用<>标示,以便和页面的内容区分开来。大多数标记成对出现,后面的标记加上一个“/”,表示结束。就像这样:
8 g" M1 t0 I( B# x    这是黑体。
* H; O8 ?% M3 a; `: H4 u    这句话的显示结果是:
4 g- g0 k' W. A) ^/ A4 k    这是黑体。
+ a& o; `0 C* u. A    表示黑体开始,表示黑体结束,标记在浏览器里不显示。如果你用过WPS中文处理系统,就会发现HTML的标记和WPS的控制符有点类似。把HTML的各种标记弄清楚,你就是主页制作大师了。简单吗?不一定,我们还是开始学习吧。2 q9 D5 z0 k% X1 `' W: a8 i5 ]" \
    我的第一页 0 P+ N+ U9 @; A% M& K
我们首先来看一个最基本的主页的HTML代码:4 Q, O: z4 e. E( t% x1 O) j/ \
# M2 P5 V1 J  F
--------------------------------------------------------------------------------4 ?& x" H2 v' D8 C  a1 m! ?
first.html
4 j8 K# t5 V" l; ?5 I# m5 D* y这里是页的内容。
  A3 e/ }- h0 K. \1 r6 ~% {" O5 y% n
--------------------------------------------------------------------------------
* O* z: l# a3 {2 O3 o& l    在“记事本”里输入上面的内容,保存文件,注意把“保存类型”改成所有文件(*.*),输入文件名“first.html”。使用浏览器查看一下结果。
. G$ P3 O4 _% p+ a; A2 B, a* r! t图1-1# I# _5 q/ ~6 T
    从浏览器的“查看”-“源代码”菜单项里,我们可以看到我们刚才输入的源代码。5 ^) B* E: O. ?% k- {
    对比源代码和显示结果,我们发现,一个基本的HTML页有以下几部分构成:
1 H, O& {0 b" r+ _3 M) m! i3 ?9 O
    说明本页面使用HTML语言编写,使浏览器软件能够准确无误地解释、显示。5 J# A9 f( J" Y$ S, c6 b2 C% G/ Q

$ a( z" k7 x' [$ _( W6 H    HTML页头,包含页面的一些设置信息。
: h4 }! C- j- w* r6 A) o$ f3 v7 m! e- n8 i1 ?
    TITLE是HEAD中的重要组成部分,它包含的内容显示在浏览器的窗口标题栏中。如果没有TITLE,浏览器标题栏显示本页的文件名。网上有很多人忽略了TITLE的设置,你可以经常看到UNTITLED或HOME PAGE等这样的默认标题。由于Internet Explorer的收藏夹和Netscape Navigator的书签都是用TITLE作为存储地址文件的标示,所以为你的主页起一个恰当的TITLE是很有必要的。" T2 q2 |- o7 j# S
1 s' H' I0 \" C/ G1 \$ `* {
    BODY包含HTML页面的实际内容,显示在浏览器窗口的客户区中。$ o7 e/ Y, d4 M) P/ |- p
    页头
: Q2 d4 W1 m2 a+ R) G# H6 N( Q" F    除了TITLE标记外,HEAD里还有其他的几个标记。这些标记虽然不常用,但是需要有一定的了解。
& {' b$ j7 t# f  {+ X+ \1 ZMETA
( t# I0 E' P3 C: y1 P! p5 S    META标记用于描述不包含在标准HTML里的一些文档信息。激烈的竞争使浏览器厂商纷纷利用META开发出许多实用的功能,又使这些功能在常用的浏览器中都有效。下面介绍几个很有用的用法:1 ]" R6 r4 [# p2 _
7 i8 J4 z0 r. P
$ ^& h. ^- k" ^& r6 ~
    本页的关键字和描述。在页面里加上这些定义后,一些搜索引擎就能够让读者根据这些关键字查找到你的主页,了解你的主页内容。
: W3 k! q$ Z5 f1 r! y& B/ d3 X/ L5 `* `
    浏览器将在60秒后,自动转到new.htm。你可以利用这个功能,制作一个封面,在若干时间后,自动带读者来到你的目录页。
6 v* g! A/ L  d1 h* M# I    如果URL项没有,浏览器就是刷新本页。这就实现了WWW聊天室定期刷新的特性。0 _/ l# L5 H  i0 Y

4 a/ p; \/ b' L$ Z1 u4 @% n    描述本页使用的语言。浏览器根据此项,就可以选择正确的语言编码,而不需要读者自己在浏览器里选择。GB2312是指简体中文,而台湾BIG5内码的主页则是用BIG5。$ y" v) @6 `: a: p7 L
( K% E$ k& R: d" ]- B
    强制性调用网上的最新版本。浏览器为了节约时间,在本地硬盘上保存一个网上文件的临时版本。在你要重新调用时,直接显示硬盘上的文件,而不是网上的。如果你想让读者每次都看到最新的版本,就加上这句话。
, Y% @1 M6 U9 T4 n  |LINK
' A) X3 p) G, l    显示本文档和其他文档之间的连接关系。一个最有用的应用就是外部层叠样式表的定位。格式如下:
" U' g4 H2 I2 o+ b& E" {/ Y5 y7 N( P    + l4 G8 ?% R, M) w# M7 _1 r1 T+ `
    REL参数说明两个文档之间的关系,HREF说明目标文档名。关于层叠样式表,将在后面的课程中详述。1 B; y) F; O, c" ?/ v8 R! T+ E& i
BASE
& A4 i1 L4 F) e* q# ~& _    本文档的原始地址。语法是:
7 v& R. H  O+ T    ) I0 b0 k! t( g# H- q
    这样,读者下载你的文档之后,也可以知道是从哪里下载的。0 r. o/ P1 ]9 M" }; Z- L1 j
BODY
8 U6 t9 ~3 d8 p% e0 R& ]    BODY标记有一些属性,用于定义页面内的显示效果。# P3 y3 I8 z& G: G2 C; a* v) n9 E
    ALINK、LINK、TEXT、VLINK—— 文字的颜色。; G: X  r. \# S5 m: ]
    ALINK:当前激活的连接的文字颜色。
! {# O! P# w5 ~    LINK:连接的文字颜色。/ p* l# m! C2 [0 z; }
    TEXT:文字的颜色。
+ L6 T1 ~4 ~2 a: z  N    VLINK:参观过的文字颜色。
3 B1 b; |, I4 q) D! A    注意:文字的颜色要和背景色有明显的差别,以便读者浏览。# J9 ]% N4 i: U3 p5 r
    BACKGROUND、BGPROPERTIES、BGCOLOR——页面的背景部分。( X0 b8 Z; O2 b% c  _' B
    BACKGROUND:背景图案,该图案在页面内平铺。背景图案应保持单一色调,以保证页面文字易于阅读。
. O& h& |5 B9 T6 \+ e5 B    BGPROPERTIES:设置成FIXED,则背景图案不滚动。(只对INTERNET EXPLORER有效), ~! e' S% J7 _* E* C: d
    BGCOLOR:背景色。, B0 K' F) T, D9 i: s6 k
    注意:如果你的背景图案是深色调,因之文字颜色为淡颜色,那么由于浏览器调用页面的顺序是“背景色-文字-背景图案”,那么在背景图案没有显示的情况下,你的文字在白颜色下很难阅读,所以应该选用一个跟你的背景图案颜色一致的背景色。$ e4 ~- j1 ]# \/ k
    LEFTMARGIN、TOPMARGIN——页边空白。(只对INTERNET EXPLORER有效)
$ q$ k( G+ O, [& L& a    LEFTMARGIN:左边页边空白。
3 q0 E! V9 ~/ I' T) \    TOPMARGIN:顶端页边空白。! X0 H, k0 M! |& K$ _; ]
    HTML的基本元素就是这些,怎么样,不太难吧。下一课我们就开始制作完整的HTML文件。好了,下课!如果你有什么地方不明白,就来我“办公室”问吧。




欢迎光临 捌玖网络工作室 (http://89w.org/) Powered by Discuz! 7.2