文件结构元素

文件结构元素是指那些用于建立HTML文件结构的元素,主要包括HTMLHEADBODY

1 HTML元素

HTML元素表明这个文件是HTML文件。标准的HTML文件都应该以<HTML>标记开头,以</HTML>标记结尾。它包含HEADBODY两个子元素。其语法如上例所示。

在具有帧结构的HTML文件中,FRAMESET元素将代替BODY元素,有关帧结构元素的详细内容将在后面介绍。

2 HEAD元素

HEAD元素用来描述HTML文件本身的信息,比如网页标题,关键字,该网页的制作工具和样式表等,这些信息被称为HTML文件的头部信息。这些信息中,除了标题会在浏览器的标题栏中显示外,其他信息都不会显示在浏览器中。其语法如上例所示。

HEAD可包含的子元素 TITLEMETABASELINKSTYLE等。

2.1 <TITLE>

网页标题是由TITLE元素来设置的。网页标题出现在浏览器最上方的标题栏内。TITLE嵌套在HEAD元素中,有且仅有一个TITLE的语法很简单,它没有子元素,只需要将标题的内容放在起始标记<TITLE>和结束标记</TITLE>之间。如例1-1.htm所示。

2.2 < META >

META元素通常用来定义与Web页有关的一些信息。如文件作者,网页的关键字和说明等。它可重复地出现在HEAD元素中,每一个META标记指明一条信息。

除描述网页外,META元素另一项功能是用来创建HTTP响应头,以便让浏览器知道如何去处理这个网页,例如网页何时过期,隔多少时间自动刷新等。

META标记通常使用三个属性:namehttp-equivcontent。其语法如下:

< META   name=”……”(http-equiv=”……”)  content=”……”>

其中namehttp-equiv不能同时出现,可任选一个与content配合使用,content属性给出的是namehttp-equiv属性给定项目的内容。

1)      name属性。

Name属性的取值通常有keywordsdescriptionauthorgenerator

Keywords用于指明网页的关键字,description用于描述网页,它们通常就是搜索引擎所需要检索的信息。

例如:

<META name=”keywords” content=”网页制作教程,特效脚本,素材下载”>

<META name=”description” content=”飞翔网页制作是一个面向初学者的教程网站。”>

    author描述的是文件的作者,generator描述的是网页制作工具的名称。

例如:

<meta name=”author” content=”东方网络”>

<meta name=”generator” content=”Microsoft FrontPage 5.0” >

2)      http-equiv

用来构造HTTP响应的头信息。其属性值常用的有expiresrefreshcontent-typeevent(事件)

Expires用于表明这个网页过期的时间,如果设为0,则表示立即过期。

< META http-equiv=”expires” content=”Thu,20 May 2005 03:00:00GMT”>

此例子表明该文件在 2005 5 20 3 过期。

Refresh用以指明该网页的刷新周期,即隔多少时间自动刷新一次。这对于内容更新频繁的网页来说非常重要。例如实时新闻,动态股票行情,聊天室网页等。时间的单位为秒。

< META http-equiv=”refresh” content=” 120” >

此例子设定一个网页2分钟自动刷新一次。

另外利用refresh属性还可指示隔多少时间后自动跳转到另一个网页,需要在时间后面添加那个网页的URL,时间与URL隔开。这一特性经常被网站利用来做广告封面网页。

< META http-equiv=”refresh” content=” 30” ;URL=”index.htm”>

此例子设置在本网页停留30秒后,自动跳转到index.htm页面

content-type用来指明网页文字的编码方式,以便浏览器能使用正确的字符集来显示网页。每一种字符集都有标准的命名,如简体中文字符集使用GB2312,繁体中文字符集使用Big5或者不设编码也可,纯英文网页建议使用iso-8859-1当编写一个中文网页时,需要使用下面的代码来指明网页使用简体中文字符集。

< META http-equiv=”content-type” content=”text/html”;charset=”gb 2312” >

2.3 <LINK>

<LINK> 用来将目前文件与其它URL作链结,但不会有链接按钮,<LINK>最常用的就是用来链接一个外部的CSS文件,当一个网页需要使用一个外部文件中的CSS样式时,就需要link元素来链接这个CSS文件,然后再使用其中的样式。

<LINK rel=”stylesheet” href=”mystyle.css” type=”text/css”>

此例子是link元素链接一个CSS文件的例子。

这个例子中,link元素有三个属性:relhreftype。其中:

rel指明的是文件的类型,该例中的stylesheet表明所链接的是一个样式表文件;

href指明所链接文件的URL,如在同一目录中,仅给出文件名即可;

type具体说明这个文件属于何种类型,例如例子中的text/css就标明该文件是一个层叠样式表文件。

2.4 <STYLE>

<style>标记用来内嵌一个样式表。其语法也很简单,只有一个type属性,同<link>中的type一样,当为层叠样式表时,其值为text/css

例如:

<STYLE type=”text/css”>

<!—

A:link{color:”# 003399” ;}

A:visited{color:”# 800080” ;}

A:hover{color:”#ff 3300” ;}

-->

</STYLE>

此例子中,定义了超链接(A元素)的各种样式,以指示不同状态的超链接分别显示何种颜色。这里给出的代码仅是为了说明style标记的用法,关于CSS的详细知识将在以后章节中介绍。

2.5 <BASE>

<base>用来指明该网页的根URL。指定之后,网页中所有的相对URL都基于这个根URL。如用BASE指明根为”http://www.myname.com/”, 那么在网页中出现相对URL,如”index.htm”时,其实际的URL就指的是”http://www.myname.com/index.htm”

<base>元素有两个基本的属性:hreftargetHref用来指明根URLtarget用来指明用于打开链接的目标窗口,这个窗口可以是某个浏览器的窗口或某个帧窗口。其语法如下:

<BASE href=”URL” target=”windowname”>

通常情况下,使用网页默认的根URL就可以了,无须使用BASE标记来指定网页的根URL

3 BODY元素

<body>元素用以标明HTML文件的正文,所有要在浏览器中显示的内容都应该放在<body>标记和</body>标记之间。

该元素有很多属性,通过这些属性不仅可以设置网页的背景(背景色或者背景图片),还可以设置文字的颜色,超链接颜色,网页打开时发生的事件等多项内容。

<body>的语法结构通常为:

<body background=”背景图案文件的URL” bgcolor=”颜色值

text=”颜色值” link=”颜色值” vlink=” 颜色值” alink=”颜色值

topmargin=”像素值” leftmargin=” 像素值”……>

    </body>

3.1 设置网页背景颜色

使用bgcolor属性可以为网页设置背景颜色,有两种表示颜色值的方法:

一种是使用颜色的英文名称,如redwhite等。

另一种是使用RGB值来定义颜色,格式是”#RRGGBB”。其中RRGGBB分别表示红,绿和蓝成分的两位十六进制值。也就是说,可以通过指定颜色的红,绿和蓝含量来自定义一种颜色。

众所周知颜色是由 "red" "green" "blue" 三原色组合而成的,在 HTML 中对于彩度的定义是采用十六进制的,对于三原色,HTML分别给予两个十六进位去定义,也就是每个原色有 256 种彩度,故此三原色可混合成一千六百多万个颜色。

使用RGB值表示颜色时,FF表示包含100%的该种颜色;B0表示包含75%的该种颜色;80表示包含50%的该种颜色;40表示包含25%亮度的该种颜色;00表示不包含该种颜色。

例如,#FF0000表示纯正的红色;#8000B0表示浅蓝紫色;#808080表示灰色。

如想设置网页的背景颜色为红色,可以使用如下代码:

<BODY bgcolor=”red”><BODY bgcolor=”#ff 0000” >

1-2.htm

<html>

<head>

<title>背景颜色</title>

</head>

<body bgcolor="#008000">

<pre>

<font size="+2">

王维:送别

下 马饮 君酒,问君何所之。

君言不得意,归卧南山陲。

但去莫复闻,白云无尽时。

</font>

</pre>

</body>

</html>

在指定颜色时,有16种标准颜色可供选择,见表1-3所示。

常用颜色:

Color

Value

Name

 

Color

Value

Name

 

#00FFFF

aqua

 

 

#808080

gray

 

#000080

navy

 

 

#C 0C 0C 0

silver

 

#000000

black

 

 

#008000

green

 

#808000

olive

 

 

#008080

teal

 

#0000FF

blue

 

 

#00FF00

lime

 

#800080

purple

 

 

#FFFF00

yellow

 

#FF00FF

fuchsia

 

 

#800000

maroon

 

#FF0000

red

 

 

#FFFFFF

white

其他常用颜色:

Color

Value

Name

 

Color

Value

Name

 

#F 0F 8FF

aliceblue

 

 

#A00000

antiquewith

 

#7FFFD4

aquamarine

 

 

#F0FFFF

azure

 

#F 5F 5DC

beige

 

 

#FFE 4C 4

bisque

 

#000000

black

 

 

#FFEBCD

blanchedalmond

 

#0000FF

blue

 

 

# 8A 2BE2

blueviolet

 

#A 52A 2A

brown

 

 

#DEB887

burlywood

 

# 5F 9EA0

cadetblue

 

 

#7FFF00

chartreuse

 

#D2691E

chocolate

 

 

#FF 7F 50

coral

 

#C 0F 000

cornfloewrblue

 

 

#FFF8DC

cornsilk

 

#00FFFF

cyan

 

 

#00008B

darkblue

 

#008B8B

darkcyan

 

 

#B8860B

darkgoldenrod

 

#A 9A 9A 9

darkgray

 

 

#006400

darkgreen

 

#DA0000

darkhaki

 

 

#8B008B

darkmagenta

 

#556B 2F

darkolivegreen

 

 

#DA000E

darkorenge

 

#9932CC

darkorchid

 

 

#8B0000

darkred

 

#E 9967A

darksalmon

 

 

#8FBC 8F

darkseagreen

 

#483D8B

darkslateblue

 

 

# 2F 4F 4F

darkslategray

 

#00CED1

darkturquoise

 

 

#9400D3

darkviolet

 

#FF1493

deeppink

 

 

#00BFFF

deepskyblue

 

#696969

dimgray

 

 

#1E90FF

dodgerblue

 

#B22222

firebrick

 

 

#FFFAF0

floralwhite

 

#228B22

forestgreen

 

 

#DCDCDC

gainsboro

 

#00000E

gostwhite

 

 

#FFD700

gold

 

#00E00D

golenrod

 

 

#808080

gray

 

#008000

green

 

 

#ADFF 2F

greenyellow

 

#F0FFF0

honeydew

 

 

#FF69B4

hotpink

 

#CD 5C 5C

indianred

 

 

#FFFFF0

ivory

 

#F0E 68C

khaki

 

 

#E6E6FA

lavender

 

#FFF 0F 5

lavenderblush

 

 

#7CFC00

lawngreen

 

#FFFACD

lemonchiffon

 

 

#ADD8E6

lightblue

 

#F08080

lightcoral

 

 

#E0FFFF

lightcyan

 

#0000E0

lightgodenrod

 

 

#0000E0

lightgodenrodyellow

 

# 0000A 0

lightgray

 

 

#90EE90

lightgreen

 

#FFB 6C 1

lightpink

 

 

#FFA 07A

lightsalmon

 

#20B2AA

lightseagreen

 

 

#87CEFA

lightskyblue

 

#0000EB

lightslateblue

 

 

#778899

lightslategray

 

#B 0C 4DE

lightsteelblue

 

 

#FFFFE0

lightyellow

 

#32CD32

limegreen

 

 

#FAF0E6

linen

 

#FF00FF

magenta

 

 

#800000

maroon

 

#66CDAA

mediumaquamarine

 

 

#0000CD

mediumblue

 

#BA55D3

mediumorchid

 

 

#ED0000

mediumpurpul

 

#3CB371

mediumseagreen

 

 

#7B68EE

mediumslateblue

 

#00FA 9A

mediumspringgreen

 

 

#48D1CC

mediumturquoise

 

#C71585

mediumvioletred

 

 

#191970

midnightblue

 

#F5FFFA

mintcream

 

 

#FFE4E1

mistyrose

 

#FFE4B5

moccasin

 

 

#FFDEAD

navajowhite

 

#000080

navy

 

 

#A0B0E0

navyblue

 

#FDF5E6

oldlace

 

 

#6B8E23

olivedrab

 

#FFA500

orange

 

 

#0E0EED

orengered

 

#DA70D6

orchid

 

 

#A00D00

palegodenrod

 

#98FB98

palegreen

 

 

#AFEEEE

paleturquoise

 

#DB7093

palevioletred

 

 

#FFEFD5

papayawhip

 

#FFDAB9

peachpuff

 

 

#CD 853F

peru

 

#FFC0CB

pink

 

 

#DDA0DD

plum

 

#B0E0E6

powderblue

 

 

#800080

purple

 

#FF0000

red

 

 

#BC 8F 8F

rosybrown

 

#4169E1

royalblue

 

 

#8B4513

saddlebrown

 

#FA8072

salmon

 

 

#F 4A 460

sandybrown

 

#2E8B57

seagreen

 

 

#FFF5EE

seashell

 

#A0522D

sienna

 

 

#87CEEB

skyblue

 

# 6A 5ACD

slateblue

 

 

#708090

slategray

 

#FFFAFA

snow

 

 

#00FF 7F

springgreen

 

#4682B4

steelblue

 

 

#D2B 48C

tan

 

#D8BFD8

thistle

 

 

#FF6347

tomato

 

#40E0D0

turquoise

 

 

#EE82EE

violet

 

#00E0ED

violetred

 

 

#F5DEB3

wheat

 

#000E00

hite

 

 

#F 5F 5F 5

whitesmoke

 

#FFFF00

yellow

 

 

#9ACD32

yellowgreen

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值