文件结构元素是指那些用于建立HTML文件结构的元素，主要包括HTML、HEAD、BODY。
1 HTML元素
HTML元素表明这个文件是HTML文件。标准的HTML文件都应该以<HTML>标记开头，以</HTML>标记结尾。它包含HEAD和BODY两个子元素。其语法如上例所示。
在具有帧结构的HTML文件中，FRAMESET元素将代替BODY元素，有关帧结构元素的详细内容将在后面介绍。
2 HEAD元素
HEAD元素用来描述HTML文件本身的信息，比如网页标题，关键字，该网页的制作工具和样式表等，这些信息被称为HTML文件的头部信息。这些信息中，除了标题会在浏览器的标题栏中显示外，其他信息都不会显示在浏览器中。其语法如上例所示。
HEAD可包含的子元素 有TITLE、META、BASE、LINK、STYLE等。
2.1 <TITLE>
网页标题是由TITLE元素来设置的。网页标题出现在浏览器最上方的标题栏内。TITLE嵌套在HEAD元素中，有且仅有一个TITLE的语法很简单，它没有子元素，只需要将标题的内容放在起始标记<TITLE>和结束标记</TITLE>之间。如例1-1.htm所示。
2.2 < META >
META元素通常用来定义与Web页有关的一些信息。如文件作者，网页的关键字和说明等。它可重复地出现在HEAD元素中，每一个META标记指明一条信息。
除描述网页外，META元素另一项功能是用来创建HTTP响应头，以便让浏览器知道如何去处理这个网页，例如网页何时过期，隔多少时间自动刷新等。
META标记通常使用三个属性：name、http-equiv和content。其语法如下：
< META name=”……”(或http-equiv=”……”) content=”……”>
其中name和http-equiv不能同时出现，可任选一个与content配合使用，content属性给出的是name或http-equiv属性给定项目的内容。
1) name属性。
Name属性的取值通常有keywords、description、author和generator。
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响应的头信息。其属性值常用的有expires、refresh、content-type和event(事件)。
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元素有三个属性：rel、href和type。其中：
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>元素有两个基本的属性：href和target。Href用来指明根URL，target用来指明用于打开链接的目标窗口，这个窗口可以是某个浏览器的窗口或某个帧窗口。其语法如下：
<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属性可以为网页设置背景颜色，有两种表示颜色值的方法：
一种是使用颜色的英文名称，如red，white等。
另一种是使用RGB值来定义颜色，格式是”#RRGGBB”。其中RR，GG，BB分别表示红，绿和蓝成分的两位十六进制值。也就是说，可以通过指定颜色的红，绿和蓝含量来自定义一种颜色。
众所周知颜色是由 "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 |
扫一扫
592
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
