2.3　HTML语法

2.3.1　HTML语法基础

1.元素

HTML语言中，所有命令都由元素表示。元素由符号“＜”和“＞”包含的元素名而构成，这些元素名不能随意更改，全部由HTML 4.0规范规定，如＜body＞、＜html＞、＜frame＞等。在编写网页程序时必须使用这些元素。

有的元素必须要与结束标记配对。在符号“＜”和“＞”之间的关键词前加上“/”，就构成了结束标记，如＜/body＞、＜/html＞、＜/frame＞。

有的元素可以独立实现其功能，不需要结束元素，如＜img＞、＜br＞、＜hr＞，这些元素称为空元素。

注意：在XML中是不允许这种无结束标记的元素出现在程序中的，所以XML问世后，所有的HTML程序的编写必须符合XML 1.0关于结构良好性和合格名称的要求来编写。

在书写元素时，在“＜”和关键词之间不能有空格，如＜ body＞是不允许的。

在HTML语言中，所有的显示内容都由元素引出，元素的格式如下：

＜元素名＞显示内容＜/元素名＞

2.属性

大多数元素拥有隶属于自己的若干个属性。每个元素的属性只在元素内发生作用。每个属性使元素在某个方面起作用。如＜body bgcolor="#f0f0f0"＞中，元素＜body＞的属性bgcolor的作用是设置网页显示区的背景颜色；bgcolor后边的等号是给该属性赋值，等号后的双引号中的内容是颜色值。

注意：这对双引号是必须的，也可以用一对单引号，不能忽略。

3.注释

在HTML中注释可以被系统识别，但不被翻译成网页元素显示在网页上。注释由“＜！--”开头，以“--＞”结束，中间放置注释语言。如：

＜！--注释--＞

4.特殊符号的显示

有时需要表示用来作为元素成分的符号，如“＜”和“＞”，这就需要特别的规定，表2.1中给出了特殊字符集的转义表示。

2.3.2　简单网页设计

从一个简单网页开始，然后围绕这个网页展开HTML程序设计的详细讨论。

1.一个简单的网页设计

例2.1　设计一个程序，显示如图2.4所示的网页（ch2-1.htm）。

2.网页程序的结构

一般用HTML语言编写的网页程序的结构如图2.5所示。

所有的网页程序必须把网页语句行包含在＜html＞和＜/html＞之间，并且用.htm或.html作为扩展名。凡是这类文件，系统自动识别为网页文件。

在＜html＞和＜/html＞之间的内容基本分为两大类，一类是浏览器环境设置，一类是显示在浏览器可视区中的信息主体。前者包含在＜head＞和＜/head＞元素内，后者包含在诸如＜body＞＜/body＞一类的块级元素内。块级元素用于显示网页的信息主体，在HTML中，常用的块级元素有＜body＞＜/body＞、＜table＞＜/table＞、＜frame＞＜/frame＞。

＜body＞和＜/body＞之间封装了网页的可视内容，一般来说是不可缺少的。

＜table＞和＜/table＞用于表格设计，可以代替＜body＞和＜/body＞，但习惯上总是把＜table＞和＜/table＞嵌套在＜body＞和＜/body＞内部。今天，用＜table＞来规划网页是一种非常流行的方法。新浪网首页就是用＜table＞来规划的。

＜frameset＞和＜/frameset＞是HTML中专门用于规划网页的元素，使用时代替＜body＞和＜/body＞成为＜html＞下的顶级元素。由于＜frameset＞和＜/frameset＞规划的网页会使网页变得比较复杂，所以它适合于内容较少较简单的网页设计。图2.2的课件就是用＜frameset＞和＜/frameset＞规划的。

3.＜head＞元素

程序ch2-1.htm中使用了头元素＜head＞，这是网页程序中重要的顶级元素。其中嵌套了＜title＞，它还可以包含样式＜style＞、脚本＜script＞、微元＜meta＞、对象＜object＞等。

（1）＜style＞元素

该元素专门用来设置HTML元素的样式，一般使用层叠样式表CSS（Cascsding Style Sheet）作为样式定义语言。下面是＜style＞元素的使用方法：

其中，table、th、td、h2、font都是HTML的元素，在此段代码中对这些元素进行了再定义。定义的内容包括color、font-family、border（边界线）、font-size等。

＜style＞有一个重要的属性type，用来定义样式语言。一般情况下，该属性不能省略。

（2）＜object＞元素

该元素用来定义对象，属于HTML中比较专门和高级的元素。该元素的使用实例如下：

其中，＜object＞定义了一个XML对象，classid定义了对象的唯一类标示符，id作为此对象的id值，被其他应用所引用时用此id值调用该对象。

（3）＜script＞元素

该元素用来定义网页程序使用的是哪个脚本语言。在网页设计中，经常使用的脚本语言有JavaScript和VBScript，前者称为Java脚本语言，后者称为Visual Basic脚本语言。下面是一个使用VBScript的脚本定义：

其中，定义了两个事件pre_onclick（）和next_onclick（），这两个事件在网页中的pre和next按钮被按下时被激活，激活时执行事件中的代码。

＜script＞的language属性定义脚本所使用的语言，定义脚本时不可缺少。

（4）＜meta＞元素

该元素用来定义网页元数据，如文档关键字、描述和作者信息。＜head＞元素中可以有多个＜meta＞元素。

例如，设置网页中的样式语言为CSS：

＜meta http-equiv="Content-Style-Type" content="text/css"＞

设置网页程序的脚本语言为JavaScript：

＜meta http-equiv="Content-Script-Type" content="text/javascript"＞

告诉搜索引擎和其他智能机器不要索引该网页，但跟随网页上的链接：

＜meta name="robots" content="noindex，follow"＞

设置网页的语言为HTML，使用的字符集为GB2312：

＜meta http-equiv="content-type" content="text/html；charset=gb2312"＞

（5）＜title＞元素

＜title＞元素定义的文本显示在浏览器的标题栏上浏览器图标的右边，出现在浏览器的左上角。

4.＜body＞元素

＜body＞是HTML程序中重要的顶级构件，用于控制在浏览器可视区中显示几乎HTML的所有元素，是网页程序中另一个重要的组成部分。

既然是用于整个网页有效信息的显示控制，＜body＞的常用属性有背景颜色（bgcolor）、背景图形（background）、文本颜色（text）等。

（1）bgcolor属性

该属性表示颜色的背景颜色，颜色值有三种表示方法，分别是：颜色关键词，红绿蓝三原色组合，颜色函数rgb（）。

颜色关键词，如red（红色）、green（绿色）、blue（蓝色）、yellow（黄色）、gray（灰色）、silver（银色）等，共有16种。书写时写成bgcolor="silver"。

颜色的红绿蓝三原色组合，每种颜色用两位十六进制数表示，取值为00～ff，与十进制数0～255的整数对应，三种颜色的组合形式为#rrggbb的数字串，其中rr表示红色、gg表示绿色、bb表示蓝色，如红色表示为#ff0000、蓝色表示为#0000ff、白色表示为#fffffff、黑色表示为#000000，任意颜色为#f1984c等。书写时写成bgcolor="#0000ff "，其中的“#”不能舍去。

另外一种颜色表示是使用颜色函数rgb（红色，绿色，蓝色），其中三种颜色的取值用十进制数表示，如红色表示为rgb（255，0，0）、绿色表示为rgb（0，255，0）、白色表示为rgb（255，255，255）等。rgb（123，210，34）表示任意色；rgb（224，224，224）与ch2-1.htm的bgcolor="#e0e0e0"是一种颜色，十进制数224等于十六进制数e0。

每种颜色可以取256（28）种颜色，三种颜色组合后可以取28×28×28=16777216种颜色值。每种颜色取8个二进制位，三种颜色构成24位，这种模式叫真彩色。

（2）background属性

该属性用一个图形表示网页的背景，用法为background="文件名"。

例如，用background属性替换网页的背景颜色bgcolor，作为例2.1网页的背景，修改＜body bgcolor="#e0e0e0"＞语句为＜body background=" image/backgrnd.gif"＞。此时的页面如图2.6所示。

显然，选择色彩适当的图形作为背景图案，可以为网页增彩，但是使用不恰当的背景图形则会成为网页的败笔。另外，用图形作为背景还必须考虑图形文件的大小，越小的文件加载速度越快，越大的文件加载速度越慢。如果一个网页由于背景图片太大，使得网页迟迟不肯露面，这样的网页别人是不会看的。初学者最喜欢用一幅风景优美的照片作为网页背景，这是十分忌讳的，为什么？请读者思考。

（3）text属性

该属性用来设置网页上文字的颜色，网页上的文字是显示在背景前面，否则观众是无法看到文字信息的。用比较专业的话说，文字与背景分布在两个图层上，所以文字颜色又叫做前景色。

＜body＞元素还有其他的一些属性，读者可以参考HTML 4.0规范。

5.＜h1＞～＜h6＞元素

在ch2-1.htm中使用了标题元素＜h2＞＜/h2＞，用于定义文本的标题。HTML文档一共有6级字符，编号从1级～6级，分别用h1，h2…h6表示。

例2.2　使用标题元素显示字号（ch2-2.htm）。

＜h1＞～＜h6＞的align属性表示标题的水平对齐方式，取值为left、center、right、justify。

程序结果如图2.7所示。

6.＜p＞元素

＜p＞元素用于在网页中显示一个段落，段落结束时用＜/p＞，其中使用了属性align，align属性定义段落的对齐方式，与标题元素＜h1＞一样。

例2.3　使用＜p＞元素的示例（ch2-3.htm）。

其中，为了在网页中显示＜p＞符号，在＜h2＞的内容中使用“＜”的转义表示“&lt；”。两个自然段使用了两个＜p＞元素，为了实现段落首行缩进两个字符，使用了四个空格的转义字符“&nbsp；”。另外，为了强调“文字”两个字和双引号的重要性，把“文字”嵌套在＜strong＞元素中，这样网页会把“文字”加粗显示。为了把标题与正文内容分隔开来，特意在标题和正文之间设置了一条横线，这条横线的表示使用了＜hr＞元素。

程序效果显示在图2.8中。

仔细观察图2.8，发现两个自然段之间的间距十分明显。如果网页内容较多，需要在一个网页内展示较多的信息时，希望尽可能表示更多的内容时，这种段落之间的明显分隔是应该避免的。可以用把一个段落分为两个段落的方式删除两个段落之间的明显距离，此时可以使用＜br＞元素。把例2.3的程序中两个段落合并为一个，然后在需要分段的地方插入＜br＞元素。修改后的程序如下：

图2.9是使用＜br＞修改例2.3程序的效果，显然两个段落之间的间距消除了。

7.＜img＞元素

在例2.1中，为了显示图像，使用了图形元素＜img＞。

＜img＞元素用于在网页中插入图片，这个元素是空元素，不需要结束标记，一般格式为：

＜img src=＂＂width=＂＂height=＂＂alt=＂＂＞

（1）src属性

该属性是＜img＞元素的必选属性，用来指定要显示的图形文件的路径。图形文件的路径由统一资源定位器URL（Universal Resource Locator）确定，可以是本地资源，也可以是远程资源。如：

＜img src="http://www.sample.edu.cn/gif/graphics.gif" ＞—远程资源

＜img src="d：\xml\source\chapter6\backgrnd.gif" ＞—本地资源

这些都是合法的src属性的书写形式。

HTML中可以使用的图形文件格式为：

①GIF——图形交换格式。

②JPEG——联合摄影专家组格式。

③XPM——X Pix Map。

④XBM——X Bit Map。

⑤WMF——波形文件。

⑥BMP——位图文件。

GIF文件的特点：文件小，下载速度快，可以保证图像质量，大量使用于网页设计中。有的GIF文件还设计成动画，使用起来非常方便。缺点是只有256种颜色。

JPEG文件的特点：真彩色，224（16777216）种颜色。下载速度慢，图像文件较大。当网页需要显示高品质图形时，常使用这种图形格式的图形。一般情况下不常用该类型的图形文件作为图形元素放在网页上，主要的因素还是文件太大。

WMF文件的特点：文件小，下载速度快，图形多为卡通型的，在网页设计中较少使用。

其他的几种文件不常用，文件很大，由于网速的限制，不容易在网上迅速传输，影响网页的质量。

今天的许多浏览器都支持上述类型的图形文件。

（2）width和height属性

width和height分别表示图形在浏览器窗口中的显示宽度和显示高度，这是两个可选属性。当＜img＞中出现了width和height时，网页中的图形将按照这两个属性值的大小显示图形。当＜img＞中没有width和height时，网页中的图形将按照文件自身的尺寸显示在网页中。

（3）align属性

＜img＞的align属性值及含义如表2.2所示。

（4）alt属性

alt表示图形不能正常显示时的替换性提示文字。元素＜img＞的其他属性请参考HTML 4.0规范。

注意：一个重要的概念是一个图形在网页中与一个文字是等价的，尽管一个图形比一个文字的容量大许多，但是网页程序中等同地对待一个图形与一个文字。

一般情况下，图形作为一个大的字符元素来处理，因而往往在插入一幅图像后，在网页上会有一大片的空白区无法使用，造成网页浏览空间的浪费。为了使用这部分空白区，可以使用文本和图形共同占有同一个页面的方法，对于图形未占据的空间，文字会自动弥补，从而形成图形和文字的环绕。通过＜img＞的align属性来设置图像和文字之间的环绕关系。

例2.4　图文环绕（ch2-4.htm）。

该程序的显示结果如图2.10所示。

8.其他常用元素

下面是一些常用的HTML元素，对网页程序十分有用。

（1）＜hr＞元素

＜hr＞元素在网页上画一条横线，用来分隔网页中的一些内容，譬如标题和正文、标题和表格、正文与正文等。在显示图2.9的程序中，使用了＜hr＞元素。

（2）＜br＞元素

＜br＞元素的作用是把文本内容从中间断开，不影响断点前的内容显示，断点后面的文本内将另起一行。一个网页程序中可以多次使用＜br＞元素。在显示图2.9的程序中，使用了＜br＞元素。

（3）＜center＞元素

该元素使显示的内容在浏览器可视区居中显示。在前面的几个网页程序中使用几个元素的align属性来设置内容的对齐方式，如果每个元素都使用align来设置，程序员自然感到不方便，就会去寻找一次性解决居中对齐的方法，这就是一个很好的元素，一经设定，将在嵌套其中的内容上起作用。

（4）＜div＞元素

该元素定义一个通用的块级容器，内部可以包含任何其他块级元素或行内元素，还可以包含多个＜div＞元素。这样，＜div＞可以用来规划网页。

＜div＞元素的class属性允许使用CSS来修改＜div＞的显示特性。＜div＞元素的id、datasrc、datafld属性在XML编程应用中经常用到。

（5）＜span＞元素

该元素定义一个行内容器，一般可以放置在＜p＞、＜div＞、＜td＞中使用。＜span＞元素的class、id、datasrc、datafld属性在XML编程应用中经常用到。

9.网页程序的编辑与运行

（1）程序的编辑

编辑HTML源程序需要用纯文本编辑器进行编辑，这类编辑器有Microsoft公司的Frontpage、Visual Studio，Macromedia公司的Dreamweaver等专用编程软件，还有常用的EditPlus，也可以使用Windows提供的纯文本编辑器Notepad编辑。在没有学习专用软件时，不妨用记事本（Notepad）编辑。编辑网页程序的步骤为：

①打开“记事本”程序。

②按照上面的程序清单输入源程序。

③以.htm或者.html作为扩展名保存文件，例如把例2.1的程序保存为ch2-1.htm。

④文件保存到需要的文件夹或者磁盘，如以文件名ch2-1.htm保存文件。

（2）程序的运行

网页文件编辑好并保存在磁盘上以后，就可以用微软公司的Internet Explorer或者Netscape公司的Communicator来打开网页了，也可以使用其他网页浏览器。运行网页的方法有以下几种：

①打开保存网页文件的文件夹，双击文件图标。

②打开浏览器，在地址栏中输入存储路径及代表网页的文件名，格式如下：

驱动器名：文件夹\文件名.htm

例如，在浏览器的地址栏中输入“e：\xml\chapter6\ch2-1.htm”，然后按【Enter】键，就可以在浏览器上看到如图2.4的网页。