HTML语言的结构

第一章：HTML语言的结构

html文件是标准的ASCII文件，它看起来象是加

入了许多被称为链接签(tag)的特殊字符串的普遍文

本文件。

从结构上讲，html文件由元素(element)组成，

组成html文件的元素有许多种，用于组织文件的内

容和指导文件的输出格式。绝大多数元素是“容

器”，即它有起始标

记和结尾标记。元素的起始标记叫做起始链接签

(starttag)，元素结束标记叫做结尾链接签(end

tag)，在起始链接签和结尾链接签中间的部分是元素

体。每一个元素

都有“名称”和可选择的“属性”，元素的名称和

属性都在起始链接签内标明。比如体元素(body)

demo

Thisismyfirsthtmlfile.

第一行是体元素的起始链接签，它标明体元素从

此开始。因为所有的链接签都具有相同的结构，所以

我们将仔细分析这个链接签的各个部分，以便读者对

链接签的写法

有一大概了解。

<起始链接签开始

body元素名称，由于元素和链接签一一对

应，所以元素名也叫链接签名。需要注意的是<和body

之间不能有空格。元素名称不分大小写。

background属性名。一个元素可以有多个属性，

属性及其属性值不分大小写。本属性指明用什么方法

来填充背景。

＝指明属性值

“”属性值，表示用

文件来填充背景。

属性名,＝,属性值合起来构成一个完整的

属性，一个元素可以有多个属性，各个属性用空格分

开。

>起始链接链结束。

第二行和第三行是body元素的元素体，最后一行是

body元素的结尾链接签。结尾链接签用

是元素名，然后是大于号>。

从上面的例子中，我们可以看出，一个元素的

元素体中可以有另外的元素。(上例中第二行的标题

元素

…

。实际上，

html文件仅由一个html元素组成，即文件以

开始，以结尾，文件其部分都是html的元素

体。html元素的元素体由两大部分，即头元素

..和体元素…

和一些注释组成。头元素和体元素的元素体

又由其它的元素和文本及注释组成。也就是说，一个

html文件应具有下面的结构：

html文件开始

文件头开始

文件头

文件头结束

文件体开始

文件体

文件体结束

html文件结束

一般来讲，html的元素有下列三种表示方法：

1)<元素名>文件或超文本<／元素名>

2)<元素名属性名＝“属性值…>文本成超文

本<／元素名>

3)<元素名>

第三种写法仅用于一些特殊的元素,比如水平线

html文件中，有些元素只能出现在头元素中，绝

大多数元素只能出现在体元素中。在头元素中的元素

表示的是该html文件的一般信息，比如文件名称，

是否可检索等等。这些元素书写的次序是无关紧要

的，它只表明该html有还是没有该属性。与此相反，

出

现在体元素中的元素是次序敏感的，改变元素在html

文件中的次序会改变该html文件的输出形式。

第二章：构成网页的基本元素

2.1网页主题(TITLE)

Title元素是文件头中出现的元素，

title元素的格式为：

title标明该html文件的题目，是

对文件内容的概括。一

个好的题目应该能使读者从中判断

出该文件的大概内容。

文件的题目一般不会显示在文本窗

口中，而以窗口的名

称显示出来。

title的长度没有限制，但过长的题

目会导致折行，

一般情况下它的长度不应超过64个

字符。由于title的作

用是标明文件内容，所以太短的

title也是不可取的，比

如："introduction"这个题目，读

者不可能根据它判断出

本文介绍的是什么。一个好的例子

是：

AnIntroductiontoHTML

4.0

在头元素中还可以出现其他元素，

如，

等等。这些元素都不是必须

的，而且也不常用。

这些元素的用法和它们的含义可以

参考有关文献。

下面是一个最简单的html文件

Thisismyfirsthtmlfile.

§2.2段落格式标题(hn)

标题元素有6种，分别为h1,

h2,…h6，用于表示文章中的各种标

题。标题号越小，字体越大。一般

情况下，浏览器对标题作如下解释：

h1黑体，特大字体，居中，上下各

有两行空行。

h2黑体，大字体，上下各有一到两

行空行

h3黑体(斜体)，大字体，左端微缩

进，上下空行

h4黑体，普通字体，比h3更多缩

进，上边一空行

h5黑体(斜体)，与h4相同缩进，

上边一空行

h6黑体，与正文有相同缩进，上边

一空行

hn可以有对齐属性，align＝#，

#表示

left标题居左

center标题居中

right标题居右

例:Chapter2

下面给出hn的例子及其输出：

Todayisfine!<／h1>Todayis

fine!

Todayisfine!<／h2>Todayisfine!

Todayisfine!<／h3>Todayisfine!

Todayisfine!<／h4>Todayisfine!

Todayisfine!<／h5>Todayisfine!

Todayisfine!<／h6>Todayisfine!

§2.3分段

html的浏览器是基于窗口的，

用户可以随时改变显示

区的大小，所以html将多个空格以

及回车等效为一个空格，这是和绝

大多数字处理器不同的。html的分

段完全依赖于分段元素

。

ThisisalevelTwoHeading

paragraphyone

paragraphtwo

…………………………

也可以有多种属性，比较常用的

属性是：

aligh＝

##可以是left,center,right,其含

义同上文。

例Thisisa

centered

paragraph<／p>

§2.4项目列表（清单）List

清单用于列举事实，常用的清单

有2种格式，即

无序清单(unorderedList)，

有序清单(orderedlist)

2.4.1无序清单(ul)

无序清单用(ul)开始，每一个清单

条目用

。输出时每一清单条目缩进，

并且以黑点标示。例：

源文件

输出为

●Today

●Tommorow

2.4.2有序清单

有序清单与无序清单相比，只是在

输出时清单条目用数

字标示，下面是一个例子及其输出：

输出为：

ow

2.4.4改变条目标记

1.改变无序清单条目标记

无序清单输出时，每一条目前都有

一个黑色圆点，

用户可以用type序性修改条目的标

记。type可以是

disc实心圆点cirde圆圈

square实心方点

ONE

TWO

THREE

输出为：

●ONE

○TWO

■THREE

2.改变有序清单条目标记

有序清单条目标记的缺省值是

阿拉伯数字，可以用

type属性修改。方法为

#=A,大写字母

a,小写字母

I,大写罗马数字

i,小写罗马数字

l,缺省,阿拉伯数字

-ONE

-TWO

-ONE

-TWO

<／ol>

Ⅰ.ONE-ONE

Ⅱ.ONE-TWO

-ONE

-TWO

-ONE

-TWO

3.改变有序清单条目的起始数字

有序清单的条目数字在缺省

情况下是从1开始的，用

start属性可修改这一值。方法为

#是条目

起始号

ONE-ONE

TWO-TWO

-ONE

-TWO

-ONE

-TWO

§2.7居中

很多元素都有对齐方式属性，如

hn、p等。也可以直接

用居中链接签

center>

Wonderful!!

Thismustbemydream.

Wonderful!!

Thismustbemydream.

第三章：超文本链接指针

超链接是html最吸引人们优点之一。使用超文

本链接指针可以使顺序存放的文件具有一定程度上

随机访问的能力，这更加符合人类的思维方式。人的

思维是跳跃的、交叉的，而每一个链接指针正好代表

了作者或者读者的思维跳跃。因而组织得好的链接指

针不仅能使读者跳过他不感兴趣的章节(比如一些枯

燥的数据)，而且有助于更好地理解作者的意图。

一个超文本链接指针由两部分组成。一是被指向

的目标，它可以是同一文件的另一部分，也可以是世

界另一端的一个文件，还可以是动画或音乐；另一部

分是指向目标

的链接指针。

§3.1统一资源定位器URL

统一资源定位器(uuiformResourceLocator)是文件

名的扩展。

§3.2指向一个目标

在html文件中用链接指针指向一个目标。其基本格

式

为：字符串

href属性中的统一资源定位器(url)是被指向的目

标，随

后的“字符串”在html文件中充当指针的角色，它

一般

显示为蓝色。当读者用鼠标点这个字符串时，浏览器

就会

将url处的资源显示在屏幕上。例如：

中央电视台

用户用鼠标点取"中央电视台"，即

可看到关于中央电视台的介绍。在这个例子

中，充当指针的是"中央电视台"，后面我们将

看到用图象做为指针的例子。

§3.3标记一个目标（锚点）

上节提到的链接指针可以使读者在整个Interner网

上方

便地链接。但如果你编写了一个很长的html文件，

从头

到尾地读很浪费时间，能不能在同一文件的不同部分

之

间也建立起链接，使用户方便地在上下方之间跳转

呢？

答案是肯定的。前面曾提到过一个超文本链接指针包

括

两个部分，一个指向目标的链接指针，另一个是被指

向

的目标。对于一个完整的文件，我们可以用它的url

来

唯一地标识它，但对于同一文件的不同部分，我们

怎

样来标识呢？下面的内容将介绍链接指针元素的另

外的

一个用途，标识目标。

标识一个目标的方法为：

text<／a>

name属性将放置该标记的地方标记为“name”，name

是

一个全文唯一的标记串，text部分可有可无。这样，

我

们就把放置标记的地方做了一个叫做“name”的标

记。

做好标记后，可以用下列方法来指向它，

text

url是放置标记的html文件的urlname是标记名，

对于同

一个文件，可以写为

text

这时就可以点取text跳转到标记名为name的部分

了。

§3.4目标窗口

如果希望被指向的目标在一个新的窗口中显示，可以

使

用target属性来修饰链接指针元素。

text

将url代表的资源显示在一个新的窗口中。

§3.5图象链接指针

图象也可以做为链接指针。格式为：

可以看出，上例中用取代了链接指

针中

text的位置。

是图象元素，它表明显示url代表

的

图象文件，参见图象一章。

下面是一个简单的图象链接指针。

Chinahomepage

src="">

第四章：版面风格控制

§4.1字体大小

html有七种字号，1号最小，7号最大。缺省字

号为3

，可以用设置缺省字号。

设置文本的字号有两种办法，一种是设置绝对字

号

，；另一种是设置文本的相对字号；

。用第二种方法时“＋”号表示字

体变

大，“－”号表示字体变小。

Todayis

fine!

Todayisfine!

Todayisfine!

Todayisfine!

Todayisfine!

Todayisfine!

Todayisfine!Todayisfine!

§4.1.2字体风格

字体风格分为物理风格和逻辑风格。物理风格直接指

定字

体，物理风格的字体有黑体，斜体，下划

线，

逻辑风格指定文本的作用。

强调特别强调源代码

例子键盘输入变量

定义引用较小

较大上标下标

§4.1.3字体颜色

字体的颜色用指定

#可以是6位16进数，分别指定红、绿、兰的值，也

可以是

black,olive,teal,red,blue,maroon,navy,gray,li

me,

fudrsia,white,green,purple,sliver,yellow,aqua

之一。

§4.2水平线(hr)

横线，一般用于分隔同一文体的不同部分。在窗口

中划一条横线非常简单，只要写一个

的

宽度用指定，width=#>指n是线宽，单

位是

象素。例：。

指

定绝对线长，也可以指定横线长度占窗口宽度的百分

比

。例、。

横线的位置用指定。

#是left成right之一，left表示左端与左边界对齐，

right是右端与右边界对齐，缺省，横线出现在窗口

正中。

4.3使用图象

使用图象使你的页面更加漂亮，但是使用图象会导致

网络通讯量急剧增大。使访问时间延长。所以在主页

不宜采用很大的图象。如果确实需要一些大

图象，最好在主页中用一个缩小的图象指向原图，并

标明

该图的大小。这样读者可以快速地访问您的主页，自

己选

择看还是不看那些图象。

图象的基本格式为：

或

alt="text">

image-url是图象文件的url。目前，大部分

浏览器支持.gif和.jpg文件。

alt属性告诉不支持图象的浏览器用text代替该图。

4.3.2图象与文本的对齐方式

图象在窗口中会占据一块空间，在图象的左右可能会

有空

白，不加说明时，浏览器将随后的文本显示在这些空

白中

，显示的位置由align属性指定。

用align=left,righr时，图象是一个浮动图象。比

如

align=left，图象必须挨着左边框，它把原来占据该

块

空白的文本“挤走”，或挤到它右边，或挤到它上下。

4.4分行



表示在此处分行。

§4.5背影和文本颜色

窗口背景可以用下列方法指定

前者指定填充背景的图象，如果图象的大小小于窗口

大

小，则把背景图象重复，直到填满窗口区域。

后者指定的是16进制的红、绿、兰分量。

bgcolor背景颜色

Text文本颜色

Link链接指针颜色

alinik活动的链接指针颜色

vlinik已访问过的链接指针颜色

例大红背景色.

注意，此时体元素必须写完整，即用结束

4.6转义字将与特殊字符

html中<,>，&有特殊含义，(前两个字符用于链

接签，&用于转义)，不能直接使用。使用这三个字符

时

，应使用它们的转义序列。

&的转义序列为&s或&；

<的转义序列为≪<；

>的转义序列为>>；

前者为字符转义序列，后者为数字转义序列。

例如≪font&Lgt;显示为

若直接写为则被认为是一个链接签。

需要说明的是：

a.转义序列各字符间不能有空格；

b.转义序列必须以“；”结束；

c.单独的&不被认为是转义开始。

如“&Lt；”被解释为“&Lt；”而不是<

“>；”被解释为“<；”而不是>

另一个需要转义的字符是引号，它的转义序列为

""

"或"""，例如

example">

第五章：表格(Table)

§5.1表格的基本形式

一个表由

容由

,和定义。说明表的一个行，表有

多少

行就有多少个；说明表的列数和相应栏目的

名

称，有多少个栏就有多少个；则填充由

和

组成的表格。是否用表格线分开为部分内容用

border属性说明。

5.2有通栏的表

1、有横向通栏的表用属性说明

colspan表示横向栏距，#代表通栏占据的网格数，它

是

一个小于表的横向网格数的整数。

2、有纵向通栏的表用rowspan=#属性说明。

rowspan表示纵向栏距，#表示通栏占据的网

格数

，应小于纵向网络数。需要说明的是有纵向通栏的表，

每一行必须用明确给出一横向栏目结束,这是

和表

的基本形式不同的。

5.3表的大小，边框宽度，表格间距

1、表的大小用width=#和height=#属性说明。

前者

为表宽，后者为表高，#是以象素为单位的整数。

2、边框宽度由border=#说明，#为宽度值，单位

是

象素。

3、单元格间距即划分表格的线的粗细用

cellspacing=#表示，#的单位是象素，将

表格间距定义为10个象素，它看起来象用很粗的线

划分的

表格。

5.4单元格边距

1、文本与表框的距离用cellpadding=#说明。

2、表格的宽度大于其中的文本宽度时，文本在其中

的输

出位置与用align=#说明。

#是left，center和right三者之一，分别表示

左对

齐，居中和右对齐，align属性可修饰,和

链接签。

3、表格的高度大于其中文本的高度时，可以用

valign=

#说明文本在其中的位置。#是top,middle,bottom,

baline之一。分别表示上对齐，文本中线与表格中

线对齐，下对齐，文本基线与表格中线对齐。

5.6表格颜色

表格的颜色用bgcolor=#指定。

#是16进制的6位数，格式为rrggbb，分别表示

红、

绿、兰三色的分量。或者是16种已定义好的颜色名

称，参

见文本颜色。

Food

Drink

AB

第六章：框架Frame

6.1分框的基本格式

分框将流览器的窗口分成多个区域，每个区域可

以

单独显示一个html文件，各个区域也可相关连地显

示某

一个内容，比如可以将索引放在一个区域，文件内容

显

示在另一个区域。

分框的基本结构如下

...

...中的内容显示在不支持分

框的浏

览器窗口中,因而这里指向一个普通版本的html文

件，以便

使用不支持分框浏览器的用户阅读。

分框由指定，并且可以嵌签，分区中

种部

分显示的内容用指定。

6.2横向分框

横向分框用指定，#可以是一

个百

分数，也可以是一整数。前者规定各框占窗口的百分

数，

后者指定各框的绝对大小。例如，下面的例子将窗口

分成

30%、20%、50%的几个区域，各区域的内容分别为

,,.

6.3纵向分框

纵向分框用指定，参见下例：

6.4混合分框

将窗口分成横纵几个区域时，用代替

链

接至即可将原的分好的区域再次分框，下面

的例

子先将窗口分成20%,80%，然后将右边的区域再分成

分别

占40%和60%的上下两个区域。

6.5分框与框中文本的间距

分框与其中的文本间距可以用Marginwidth=#和

marginneigh

=#来指定，前者指定文本与分框的边缘的横向距离，

后者为

纵向距离，其单位都为象素，下面的例子中，将右边

分框的

左右边距，上下空白都设为50个象素。

6.6分框间的关联

分框之间可以有特定的关联，比如将某一框的内容输

出到

另一个框，这样我们就可以把其中一个框作为输出

框，另

一个框作为选择框。实现这种关联需要做下列的事

情。

①在分框的hrme文件中标记各个框，标记的方

法是在

中加入name属性，比如上例，定义左边的框

为输

出，右边框为象引。

②在文件中指定输出到哪个框方法是在

文件

中加入下列一行。

这便得用鼠标点取中的链接指针，它的输出

会显示

在左边的框中。