标题:
HTML的基本元素
[打印本页]
作者:
admin
时间:
2008-1-19 23:22
标题:
HTML的基本元素
程序编制
& P' T2 _& t" D( S T9 N9 p
随着WEB的发展，与浏览者的交互越来越受到网站制作者的重视。现在的主页跟最初的静态主页相比，界面更加友好，功能更加丰富。这些技术需要一些编程语言来完成，如javascript、VBSCRIPT、CGI、ASP等等。要想使自己的网站在因特网的浩瀚海洋里脱颖而出，就必须掌握这些编程语言。
# I5 l$ `* S% t& G3 S/ V1 {
经验
. A' b6 O& r+ M# E6 ~0 a& p
经验不是一门技术，却是你制胜的法宝。网站制作中的很多问题，如网站结构、版面安排、中文处理等，都需要你的经验。网上有很多设计优秀的网站，要多学习、借鉴，自己多动手、多尝试，相信你也可以做出引人注目的漂亮网站。
5 b& ~) K7 W" k1 l6 d2 @' N
页面基本元素
# Y8 H0 L$ J" ?7 n; p+ V% M+ T
HTML的样子
# G* M5 {! o, b" y+ B: Z
HTML语言是由一系列标记组成的，每个标记有它特定的含义。标记用<>标示，以便和页面的内容区分开来。大多数标记成对出现，后面的标记加上一个“/”，表示结束。就像这样：
6 @3 l( ^6 l0 r4 R9 X
这是黑体。
4 Z, A7 x0 D# S" x! }8 v
这句话的显示结果是：
' d4 G$ H) y7 ?- u8 y, {
这是黑体。
9 s! i+ x! g6 ?$ R) f) t
表示黑体开始，
表示黑体结束，标记在浏览器里不显示。如果你用过WPS中文处理系统，就会发现HTML的标记和WPS的控制符有点类似。把HTML的各种标记弄清楚，你就是主页制作大师了。简单吗？不一定，我们还是开始学习吧。
" B9 X- [ n0 F! [3 q5 m' e$ t& l
我的第一页
9 B( K4 r) }, Y1 c( s9 Z
我们首先来看一个最基本的主页的HTML代码：
& x. |6 v1 [* k- ?6 a
0 ]$ [6 L: _4 z0 c+ G% G H
--------------------------------------------------------------------------------
5 O3 q1 U9 i6 K5 e: r, O
first.html
- t0 ^: g4 b/ v0 d% x4 g! W) x. P; Y
这里是页的内容。
( u' `8 r0 u5 d& X
4 i) @% n: J# ?: c" ?6 G) ]
--------------------------------------------------------------------------------
, e& A# H, h# t- Z* S8 T0 `
在“记事本”里输入上面的内容，保存文件，注意把“保存类型”改成所有文件（*.*），输入文件名“first.html”。使用浏览器查看一下结果。
1 y. a6 M( M. p3 Z
图1-1
; m9 A* U D$ f0 d, {8 j) Q( l
从浏览器的“查看”-“源代码”菜单项里，我们可以看到我们刚才输入的源代码。
! r1 |- v1 w0 g' b* d- K
对比源代码和显示结果，我们发现，一个基本的HTML页有以下几部分构成：
^* y8 b% F& v6 ]. G
8 L7 y$ q p& F0 ^, m3 X% m0 c
说明本页面使用HTML语言编写，使浏览器软件能够准确无误地解释、显示。
. i! W3 X9 U; ]+ J. v g2 a! J# [
6 M: e! `8 g5 [( A l
HTML页头，包含页面的一些设置信息。
5 S, \# a9 s# p/ A" r. a
; w' ?) A6 D' E5 u( w2 Q
TITLE是HEAD中的重要组成部分，它包含的内容显示在浏览器的窗口标题栏中。如果没有TITLE，浏览器标题栏显示本页的文件名。网上有很多人忽略了TITLE的设置，你可以经常看到UNTITLED或HOME PAGE等这样的默认标题。由于Internet Explorer的收藏夹和Netscape Navigator的书签都是用TITLE作为存储地址文件的标示，所以为你的主页起一个恰当的TITLE是很有必要的。
5 Y* J9 R/ `. O% B5 H2 h
/ x4 H/ ]4 W3 k3 O3 y
BODY包含HTML页面的实际内容，显示在浏览器窗口的客户区中。
4 b$ _* D# h5 W0 V* w* m
页头
3 l% J, A$ g$ o4 D3 o, Z, ?$ c7 m% W- G
除了TITLE标记外，HEAD里还有其他的几个标记。这些标记虽然不常用，但是需要有一定的了解。
$ n' Y R3 H9 n9 g) m( n
META
E! ^: R& h$ q+ k: L9 Y
META标记用于描述不包含在标准HTML里的一些文档信息。激烈的竞争使浏览器厂商纷纷利用META开发出许多实用的功能，又使这些功能在常用的浏览器中都有效。下面介绍几个很有用的用法：
{1 X- L( y7 |2 n Q: o
F& d1 d3 d" @" r# S$ v' V
* Q" g0 A# T4 b
本页的关键字和描述。在页面里加上这些定义后，一些搜索引擎就能够让读者根据这些关键字查找到你的主页，了解你的主页内容。
5 \& N8 Q; u, \! U8 l
9 f& r. ^& w2 [8 i6 b$ Z
浏览器将在60秒后，自动转到new.htm。你可以利用这个功能，制作一个封面，在若干时间后，自动带读者来到你的目录页。
4 _4 l6 ?. ~; [) I$ E' \& `
如果URL项没有，浏览器就是刷新本页。这就实现了WWW聊天室定期刷新的特性。
% n7 ]: {/ X! Y6 i
$ T# K8 {+ M+ \ N+ Q
描述本页使用的语言。浏览器根据此项，就可以选择正确的语言编码，而不需要读者自己在浏览器里选择。GB2312是指简体中文，而台湾BIG5内码的主页则是用BIG5。
9 a+ k& A" I/ D( t- [9 N! s
( O7 V6 J0 R* W( V% R
强制性调用网上的最新版本。浏览器为了节约时间，在本地硬盘上保存一个网上文件的临时版本。在你要重新调用时，直接显示硬盘上的文件，而不是网上的。如果你想让读者每次都看到最新的版本，就加上这句话。
0 [% F; ~" |8 M2 z9 H
LINK
4 F2 v0 y5 N" I/ F: _
显示本文档和其他文档之间的连接关系。一个最有用的应用就是外部层叠样式表的定位。格式如下：
7 b/ @) t# L/ H
! S% V7 K& h3 g& h! o7 Q3 a
REL参数说明两个文档之间的关系，HREF说明目标文档名。关于层叠样式表，将在后面的课程中详述。
" m$ ]" \* ~* o' e
BASE
8 v5 x, }+ o1 C) f. [( L
本文档的原始地址。语法是：
1 G3 b# g; L2 Z0 i
4 b: S' d9 D( `8 J5 s
这样，读者下载你的文档之后，也可以知道是从哪里下载的。
5 d% V8 i) g/ F* Y) N
BODY
* U% P' m" L* g* _ k
BODY标记有一些属性，用于定义页面内的显示效果。
" b1 a7 X& a9 P% ?+ c' y; D
ALINK、LINK、TEXT、VLINK—— 文字的颜色。
3 \- _3 d2 a8 X1 \5 c t
ALINK：当前激活的连接的文字颜色。
; w E0 n- X5 ?( {
LINK：连接的文字颜色。
! x9 h5 D( H3 D7 N8 ^
TEXT：文字的颜色。
% f: B; ^9 W! U
VLINK：参观过的文字颜色。
! f; f! n8 F7 Z3 T4 ~/ x& K- {
注意：文字的颜色要和背景色有明显的差别，以便读者浏览。
0 x9 V, x6 J& g6 P" g" S% `
BACKGROUND、BGPROPERTIES、BGCOLOR——页面的背景部分。
" a4 k+ F5 u* B! l4 g; O+ S
BACKGROUND：背景图案，该图案在页面内平铺。背景图案应保持单一色调，以保证页面文字易于阅读。
& s! e4 X) t5 r6 X6 e/ q3 \
BGPROPERTIES：设置成FIXED，则背景图案不滚动。（只对INTERNET EXPLORER有效）
/ D" G3 m& i! w- k; w4 Y
BGCOLOR：背景色。
$ x; l8 }3 p+ S
注意：如果你的背景图案是深色调，因之文字颜色为淡颜色，那么由于浏览器调用页面的顺序是“背景色-文字-背景图案”，那么在背景图案没有显示的情况下，你的文字在白颜色下很难阅读，所以应该选用一个跟你的背景图案颜色一致的背景色。
b* a8 e% X& d
LEFTMARGIN、TOPMARGIN——页边空白。（只对INTERNET EXPLORER有效）
) B6 w- Y6 l n/ X' q k- ?
LEFTMARGIN：左边页边空白。
# V! t& x9 k! Z4 q2 c
TOPMARGIN：顶端页边空白。
6 C/ M+ m A, {" `
HTML的基本元素就是这些，怎么样，不太难吧。下一课我们就开始制作完整的HTML文件。好了，下课！如果你有什么地方不明白，就来我“办公室”问吧。
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
