标题:
HTML的基本元素
[打印本页]
作者:
admin
时间:
2008-1-19 23:22
标题:
HTML的基本元素
程序编制
, v, z, U" Y J- d) m& h5 D* e8 D+ ?# C
随着WEB的发展,与浏览者的交互越来越受到网站制作者的重视。现在的主页跟最初的静态主页相比,界面更加友好,功能更加丰富。这些技术需要一些编程语言来完成,如javascript、VBSCRIPT、CGI、ASP等等。要想使自己的网站在因特网的浩瀚海洋里脱颖而出,就必须掌握这些编程语言。
; |% v, I$ {1 I5 T3 ]
经验
: C8 T3 k1 k& d2 W! B
经验不是一门技术,却是你制胜的法宝。网站制作中的很多问题,如网站结构、版面安排、中文处理等,都需要你的经验。网上有很多设计优秀的网站,要多学习、借鉴,自己多动手、多尝试,相信你也可以做出引人注目的漂亮网站。
8 e. B& r, K1 H# t3 u+ t' D
页面基本元素
, f% T- V) _# O2 o$ N
HTML的样子
6 J( C0 r. ^6 G/ y4 e
HTML语言是由一系列标记组成的,每个标记有它特定的含义。标记用<>标示,以便和页面的内容区分开来。大多数标记成对出现,后面的标记加上一个“/”,表示结束。就像这样:
5 w2 X" w% V& A6 G) _/ D/ I
这是黑体。
. Z2 h4 {( z7 L9 w4 z; d8 A9 @
这句话的显示结果是:
3 p- X3 d$ P2 K/ e6 _
这是黑体。
9 [& _+ ^% P8 u; x7 P
表示黑体开始,
表示黑体结束,标记在浏览器里不显示。如果你用过WPS中文处理系统,就会发现HTML的标记和WPS的控制符有点类似。把HTML的各种标记弄清楚,你就是主页制作大师了。简单吗?不一定,我们还是开始学习吧。
5 a8 Z! u; u0 F6 G6 B
我的第一页
/ Q. q( ^+ S) u1 |) ~$ S
我们首先来看一个最基本的主页的HTML代码:
* S# Y8 ] u. K; P# Q
: n9 @/ c4 V* ?! X
--------------------------------------------------------------------------------
3 ?% d- E$ o k6 x7 ]
first.html
: p1 |5 G9 W2 k* g6 E, y- F
这里是页的内容。
4 \; m$ _) P3 D! [' d
% w& \3 q' S2 m' z4 l
--------------------------------------------------------------------------------
, U7 M+ ]+ G4 o+ q; x
在“记事本”里输入上面的内容,保存文件,注意把“保存类型”改成所有文件(*.*),输入文件名“first.html”。使用浏览器查看一下结果。
# g {0 ~' l+ L* \/ F; u0 [+ U; ^' t- g
图1-1
8 Y1 C9 [! U; _# w: Y0 h
从浏览器的“查看”-“源代码”菜单项里,我们可以看到我们刚才输入的源代码。
0 b( D2 Z6 B$ L7 u: O4 W* e" u. j
对比源代码和显示结果,我们发现,一个基本的HTML页有以下几部分构成:
6 `- a$ d k$ h/ `( o' t
7 i. }1 Y/ L' |# |3 j
说明本页面使用HTML语言编写,使浏览器软件能够准确无误地解释、显示。
1 c& n" ~. m- T/ i# ~- N! ^. {8 I" u9 ^
+ j) i; \1 ?5 ^
HTML页头,包含页面的一些设置信息。
1 w; W& o. r. [ i
6 F' P; W7 e5 U' n: @7 q
TITLE是HEAD中的重要组成部分,它包含的内容显示在浏览器的窗口标题栏中。如果没有TITLE,浏览器标题栏显示本页的文件名。网上有很多人忽略了TITLE的设置,你可以经常看到UNTITLED或HOME PAGE等这样的默认标题。由于Internet Explorer的收藏夹和Netscape Navigator的书签都是用TITLE作为存储地址文件的标示,所以为你的主页起一个恰当的TITLE是很有必要的。
& C5 b2 G; ~- y
2 s- c3 _* `" Y" A) r' ^* ?3 J4 N
BODY包含HTML页面的实际内容,显示在浏览器窗口的客户区中。
; @" a$ B$ `' \8 J
页头
+ S! `3 ?0 B9 M8 Z% l
除了TITLE标记外,HEAD里还有其他的几个标记。这些标记虽然不常用,但是需要有一定的了解。
' @% `3 T- X! K; G2 z0 w
META
" ` }5 }: U5 t, y V6 b
META标记用于描述不包含在标准HTML里的一些文档信息。激烈的竞争使浏览器厂商纷纷利用META开发出许多实用的功能,又使这些功能在常用的浏览器中都有效。下面介绍几个很有用的用法:
* F' |) [; i5 c8 \. m# S
) r+ a+ R+ m5 b" z1 L; S
& L0 M$ H+ y+ E
本页的关键字和描述。在页面里加上这些定义后,一些搜索引擎就能够让读者根据这些关键字查找到你的主页,了解你的主页内容。
% E% _4 {; b. ]* K# D
8 T* G+ D, R8 @$ O# i" O- E- o
浏览器将在60秒后,自动转到new.htm。你可以利用这个功能,制作一个封面,在若干时间后,自动带读者来到你的目录页。
' f5 P6 ~9 N5 T
如果URL项没有,浏览器就是刷新本页。这就实现了WWW聊天室定期刷新的特性。
1 k+ C& Q- l; I0 H7 i6 o) A
/ A+ \4 h, F N0 Y6 i
描述本页使用的语言。浏览器根据此项,就可以选择正确的语言编码,而不需要读者自己在浏览器里选择。GB2312是指简体中文,而台湾BIG5内码的主页则是用BIG5。
- [( { _( T) F, f" A5 R0 k
]3 a B5 D- |: P: Y( r
强制性调用网上的最新版本。浏览器为了节约时间,在本地硬盘上保存一个网上文件的临时版本。在你要重新调用时,直接显示硬盘上的文件,而不是网上的。如果你想让读者每次都看到最新的版本,就加上这句话。
% g% ]6 n+ }- B' L h; c
LINK
2 @ R, t0 ?; M2 D4 z/ `% O) Y
显示本文档和其他文档之间的连接关系。一个最有用的应用就是外部层叠样式表的定位。格式如下:
, e5 I0 k, O8 P8 P ^ A
, Q `: w: g! g& m' Q! \
REL参数说明两个文档之间的关系,HREF说明目标文档名。关于层叠样式表,将在后面的课程中详述。
: k/ B; {% Y/ U* O
BASE
; r, u% {* w$ u3 v
本文档的原始地址。语法是:
$ a! F6 K7 G; i+ b4 h
/ I0 M9 e G+ h+ Q9 Y( @
这样,读者下载你的文档之后,也可以知道是从哪里下载的。
: U) G6 U8 m* L( R* e
BODY
: @, e: t5 R; H. M. t5 v
BODY标记有一些属性,用于定义页面内的显示效果。
4 \$ }9 L% Y2 F
ALINK、LINK、TEXT、VLINK—— 文字的颜色。
9 F4 V% y8 f9 t* A
ALINK:当前激活的连接的文字颜色。
4 W4 Z5 ?1 _( Y
LINK:连接的文字颜色。
& r& s6 H7 m6 T% O' F* @
TEXT:文字的颜色。
5 s+ v% V/ Y0 e9 E { D
VLINK:参观过的文字颜色。
! @2 E( h" c' Z5 Q0 w" o0 _
注意:文字的颜色要和背景色有明显的差别,以便读者浏览。
; ~5 n! n! [9 o! N" F% C: e
BACKGROUND、BGPROPERTIES、BGCOLOR——页面的背景部分。
9 ~: F" ^& c# S/ ?, U( n3 X8 T, r
BACKGROUND:背景图案,该图案在页面内平铺。背景图案应保持单一色调,以保证页面文字易于阅读。
0 L$ M5 F/ ?( A" |4 n- X
BGPROPERTIES:设置成FIXED,则背景图案不滚动。(只对INTERNET EXPLORER有效)
2 c! g$ H0 f8 Q" A: f. J, L
BGCOLOR:背景色。
2 _2 s+ k* z9 q! X$ r8 p
注意:如果你的背景图案是深色调,因之文字颜色为淡颜色,那么由于浏览器调用页面的顺序是“背景色-文字-背景图案”,那么在背景图案没有显示的情况下,你的文字在白颜色下很难阅读,所以应该选用一个跟你的背景图案颜色一致的背景色。
9 Y, P! m* x, A* B. W
LEFTMARGIN、TOPMARGIN——页边空白。(只对INTERNET EXPLORER有效)
! `$ b# y1 Q4 a' p; x, o; j
LEFTMARGIN:左边页边空白。
, M! `/ O5 ~4 d2 L5 d% ?
TOPMARGIN:顶端页边空白。
, p# w2 a7 n" s; y4 ~( V7 J
HTML的基本元素就是这些,怎么样,不太难吧。下一课我们就开始制作完整的HTML文件。好了,下课!如果你有什么地方不明白,就来我“办公室”问吧。
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2