《中国计算机报》出版日期:1999-05-03 总期号:819 本年期号:29

唯有源头活水来

网页基本技术

Iris

 

一、html简介

基本上,html文档由纯文本和html元素组成。大部分html元素包括起始标记和结束标记,少数html元素没有结束标记。起始标记的格式如
〈element〉,结束标记的格式如〈/element〉,起始标记和结束标记之间是html元素的内容。个别html元素(如行结束元素br)没有内
容。元素名不区分大小写。

html元素可以具有属性名和相关属性值。属性名和属性值出现在起始标记的结束符“〉”前,属性名和属性值以等号“=”相连,属性值可以使用英文引号括起来。一个元素可以有多个属性,彼此以空格分隔,顺序可以任意。属性名不区分大小写,属性值一般也不区分大小写。

html文档可以包含注释,注释通常以 “〈!”开始,以“〉”结束。html注释只用来表示备注信息,浏览器不处理注释中的内容。

二、html网页总体结构

一个html文档通常由三部分组成:版本信息行、html标题(header)以及文档主体(body),其中主体是html文档的主要部分,包含实际的文档内容。html文档的总体框架是:

〈! html版本信息说明 〉

〈html〉

〈head〉

头部元素、元素属性及内容

〈/head〉

〈body〉

主体元素、元素属性及内容

〈/body〉

〈/html〉

通常html版本信息由html编辑器自动生成,在html文档中可以不包含。

一个html网页,它应该总是以〈html〉开始,以〈/html〉结束,并包括html标题(〈head〉……〈/head〉)和html主体(〈body〉……〈/body〉)两个主要的部分,head和body元素的起始和结束标记之间可插入许多其它标记。

head元素最有意义的元素是title,它用来指定html网页的题目,浏览器会将该题目显示在窗口顶端的标题栏内。它不支持任何属性。

〈body〉的属性可用来设置网页的背景色彩和背景图像、文字色彩、网页边距等。这些属性包括:bgcolor(背景色彩),text(非链接文字的
色彩),link(可链接文字的色彩),alink(正被点击的可链接文字的色彩),vlink(已经访问过的可链接文字的色彩),background
(背景图像,由图像url指定;属性值等于fixed时为非滚动背景图象),leftmargin(左页边距),topmargin(上页边距)。其中,
颜色值可按十六进制值或颜色名给定。

三、文档字体设置

字体设置包括标题、字体、字号、字符颜色及字符变形等。

1.标题元素

html支持六级标题,其元素分别为h1、h2、h3、h4、h5和h6。每对起始标记和结束标记用来指定文档的章节标题。

标题元素会自动在标题前后插入空行,因此不必用换行元素插入空行,同时也不能在一行之内使用不同的标题格式。

标题字体支持align属性。align属性用来指定对象的排版格式,对于标题元素,主要使用left、center和right三种属性值。例如:

〈h1 align=center〉今天天气真好!〈h1〉

2.font元素

font元素用来设置文档的字体。其常用属性是size和color:

font元素的使用示例:

〈font size=7 color=red〉今天天气真好!〈/font〉

3.字符修饰元素

html中规定了大量字符修饰处理的元素,它们能够在不改变字体、字号的基础上对字形进行改变。这些元素分为物理样式和逻辑样式两大类。它们一般都不支持任何属性。

物理样式和逻辑样式字体元素可与font元素组合使用,从而设计出丰富的字符效果。例如:

〈i〉〈font size=+1〉网页〈font size=5〉制作〈b〉讲座〈/b〉

〈/font〉〈/font〉〈/i〉

四、网页版式设置

1.分行控制

浏览器是忽略html文档中的自然分行与分段的,分行和段落设置必须通过html标记来进行。

分行控制元素包括分段元素p和分行元素br。

标记〈p〉可以看作是段落的开始,而标记〈/p〉则可视作段落的结束。单独一个〈p〉事实上会添加一个空行。p元素的结束标记〈/p〉经常可以不写,但当p元素有align属性时需要写出。

换行元素br在html文档中增加一个换行,指示浏览器执行一个断行动作。它与p元素有所不同,它只是进行换行,其它字符和段落设置都不改变。

2.列表元素

列表在文档中占有重要地位,html规定了多种列表元素,可设置无序列表(项目列表)、有序列表和自定义列表等。

ul元素可用于创建一个无序列表,并以圆点等项目符号开始。列表中的每一项目前用li元素加以标识。li元素可以不加结束标记。

无序列表元素的用法如下例:

〈ul〉

〈li〉 apple

〈li〉 pear

〈li〉 grape

〈/ul〉

有序列表元素ol与无序列表类似,但项目符号为序号数字或字母(默认为阿拉伯数字形式)。

3.预格式化文本

预格式化文本主要使用元素pre。pre使文本块以等宽字体显示,并保留预先排列的格式。

4.地址元素

创建html文档时,应该给文档读者提供与作者联系的方法。html规定用address元素来指定作者的所有权、名字、地址(常规地址和e-
mail地址)、电话和传真等。address元素通常放在文档结束处,浏览器多以斜体字来显示address元素的内容,并在其前后各加一个换行。该元
素不支持任何属性。

五、网页修饰

网页修饰的html元素不少。这里仅介绍水平分隔线元素hr。hr可在html文档的不同章节之间插入一个分界标志。不带任何属性的〈hr〉标记显示效果为整个窗口宽度的带阴影的下凹线。

hr元素可用于文档结束处,将正文与地址分开:

〈hr〉

〈address〉february 8, 1995, cern〈/address〉

通过不同的属性,可以设置不同的水平分隔线,包括大小、宽度、颜色和对齐方式等。

六、超链接

超链接的实现主要是通过锚点元素a来实现的。简单地说,a元素标识一些文本,使其成为超文本链接的起点和(或)目的地。a元素支持较多属性,其中最重要的是href属性和name属性。

1.href属性

如果a元素中包含href属性,则该元素的起始标记与结束标记之间的文本就变成超文本。如果此超文本被读者选中,就会移动到另一个文档,或本文档的另
一个位置。另一文档或本文档另一位置的网络地址就由href属性来定义。在浏览器中,超文本通常会以不同颜色且带下划线的字符表示。一般未访问、正选中和
已访问用不同颜色表示,浏览器有默认颜色,但也可以通过body元素的link、alink和vlink属性改变其颜色设置。

使用示例:

see 〈a href=”http://www.bh.com/”〉heart〈/a〉’s information for more details.

href属性还允许使用href=”#identifier” 的格式来指向同一文档或不同文档的另一个锚点。例如可以这样用:

the 〈a href=”document.html#glossary”〉glossary〈/a〉 defines terms used in the document.

在此例中,选中“glossary”后会把读者带到另一个锚点,即由语句

〈a name=”glossary”〉glossary〈/a〉

定义的锚点(name属性下述)。文档document.html可以是同一文档(此时可省略文档的文件名),也可以是不同文档。如果是不同文档,则href属性中可指定相对url地址。

浏览器还允许使用其它几种形式的href属性,它们对应不同形式的url。

2.name属性

如果a元素带有name属性,则意味着此锚点为链接的目标。name属性的值就是锚点的标识。锚点标识可以是任意字符串,但在html文档内必须唯一。name属性所代表的锚点在浏览器中没有任何显示。

name属性与href元素联合使用示例:

〈a name=”coffee”〉coffee〈/a〉 is an exmple of…

an example of this is 〈a href=”#coffee”〉coffee〈/a〉.

注意,href在引用name属性值时前面要加 # 符。事实上,当另一文档引用name所指定的锚点时,引用格式应该是url#name:

〈a href=”drinks.html#coffee”〉