
3.1 HTML页面的基本构成
超文本标记语言或超文本链接语言(HyperText Markup Language, HTML)是目前网络上应用最为广泛的标记语言,也是构成网页文档的主要语言,是一种用来制作超文本文档的简单标记语言,它不是一种真正的编程语言,只是一种标记符。通过一些约定的标签符号对文件的内容进行标注,指出内容的输出格式,如字体大小及颜色、背景颜色、表格形式、各部分之间的逻辑关系等。当用户浏览WWW信息时,浏览器会自动解释这些标签的含义,并按照一定的格式在屏幕上显示这些被标记的信息。
用HTML编写的超文本文档称为HTML文档,HTML文档是一个放置了标签的文本文件,通常它带有html或htm的文件扩展名,是能独立于各种操作系统平台的、可供浏览器解释浏览的网页文件。
下面通过使用NetBeans 8.2新建一个HTML页面来了解HTML页面的基本构成。页面运行效果如图3-1所示,代码如例3-1所示。

图3-1 使用NetBeans 8.2创建HTML页面实例运行效果
【例3-1】 HTML页面实例(HTMLExample.html)。

在上面这段代码中,一些字母或单词被<>括起来,如<html>、<head>等,这些称为“标签”。标签用来分隔和标记网页中的元素,以形成网页的布局、格式等,通过标签可以在网页中加入文本、图片、声音、动画、影视等多媒体信息,还可以实现页面之间的跳转等。每种标签的作用均不同,当用户需要对网页某处进行修改时,就把标签放置在该处前面,浏览器就会知道用户希望下面的内容应如何显示。
标签分为单标签和双标签。单标签只需单独使用就能完整地表达意思,控制网页效果,如<meta>、<br>、<hr>。双标签成对使用,由一个开始标签和一个结束标签构成。开始标签告诉Web浏览器从此处开始执行该标签所代表的功能,而结束标签告诉Web浏览器在这里结束该功能,结束标签的形式是在开始标签前加上一个斜杠,如<body>和</body>就是一对双标签。在单标签和双标签的开始标签里,还可以包含一些属性,以达到个性化的效果,如<标签属性1属性2属性3…>,各属性之间无先后次序,属性也可省略(即取默认值)。
HTML语言不区分大小写,如<BR>和<br>都表示换行。另外,使用HTML标签时不可以交错,即标签需正确进行嵌套,如<body><form></body></form>,应改为<body><form></form></body>。
HTML标签有多种,下面先了解基本标签。
1.页面结构标签
通过上面的例子可以看出,HTML文档分为文档头和文档体两部分。在文档头中,对这个文档进行了一些必要的定义,文档体中才是要显示在网页中的各种正文信息。通常由3对标签来构成一个HTML文档的框架。
1)<html></html>
这个标签对告诉浏览器这个文件是HTML文档。<html>放在HTML文档的最前边,用来标识HTML文档的开始,</html>放在HTML文档的最后边,用来标识HTML文档的结束。
2)<head></head>
这个标签对中的内容是文档的头部信息,说明一些文档的基本情况,如文档的标题等,其内容不会显示在网页中。在此标签之间可使用<title></title>、<meta>、<script></script>等描述HTML文档相关信息的标签对。
<meta>标签用来描述HTML网页文档的属性,如日期和时间、网页描述、关键词、页面刷新等。
例如:
<meta http-equiv="Content-Type"content="text/html;charset=UTF-8">
属性http-equiv用于向浏览器提供一些说明信息,从而可以根据这些说明做出相应处理。http-equiv其实并不仅仅只有说明网页的字符编码这一个作用,常用的http-equiv类型还包括网页到期时间、默认的脚本语言、网页自动刷新时间等。
属性charset,其作用是指定当前文档所使用的字符编码为UTF-8,也就是支持中文简体字符。根据这一行代码,浏览器就可以识别出网页中的中文字符。
3)<body></body>
这个标签对中的内容是HTML文档的主体部分,可包含<p></p>、<h1></h1>、<br>、<hr>等标签,它们所定义的文本、图像等将会在网页中显示出来。
2.页头标签
<title></title>标签对用来设定网页标题,浏览器通常会将标题显示在浏览器窗口的标题栏左边。<title></title>标签对放在<head></head>标签对之间。
3.标题标签
在HTML文档中,<hn></hn>标签对可以定义不同显示效果的标题,n表示标题的级数,取值范围为1~6,n越小,标题字号越大。
<hn>可以使用属性align,用于设置标题文字的对齐方式,其取值如下。
(1)left:左对齐。
(2)right:右对齐。
(3)center:居中对齐。
未设置该属性时,默认为左对齐。
【例3-2】 标题标签实例(titleTag.html)。

运行效果如图3-2所示。

图3-2 标题标签实例运行效果
4.格式排版标签
1)<br>
该标签强制文本换行,但不会在行与行之间留下空行。如果把<br>加在<p></p>标签对的外边,将创建一个大的回车换行,即<br>前边和后边的文本的行与行之间的距离比较大;如果把<br>放在<p></p>的里边,则<br>前边和后边的文本的行与行之间的距离将比较小。
2)<hr>
该标签在网页中加入一条横跨网页的水平线,具有多种属性,这些属性用于设置水平线的宽度、长度及显示效果等。
(1)size属性:设置水平线的粗细,默认单位是像素。
(2)width属性:设置水平线的宽度,默认单位是像素,也可以使用相对屏幕的百分比表示。
(3)noshade属性:该属性不用赋值,直接加入标签即可使用,用来取消水平线的阴影(不加入此属性水平线默认有阴影)。
(4)align属性:设置水平线的对齐方式。
(5)color属性:设置水平线的颜色。
例如:
<hr align="center"width="600"size="9"color="blue">
5.文字格式标签
<font></font>标签对通过设置<font>属性来控制文字的字体、大小、样式和颜色,属性功能如下。
(1)face属性:设置字体样式。
(2)size属性:设置字体大小,值为整数,分为7个级别,默认字体大小为3。
(3)color属性:设置字体颜色。
6.段落标签
<p></p>标签对用来创建一个新的段落,在此标签对之间加入的文本将按照段落的格式显示在浏览器上。<p>表示一个段落的开始,结尾标记</p>可以省略。<p>标签可以有多种属性,如align属性控制其内容的对齐方式;clear属性控制图文混排方式,其取值如下。
(1)left:下一段显示在左边界处的空白区域。
(2)right:下一段显示在右边界处的空白区域。
(3)center:下一段的左右两边都不许有其他内容。
为了防止文档出错,尽量不要省略结尾标记</p>。
7.预定格式标签
在编辑文档时,如果希望将来浏览网页时仍能保留在编辑工具中已经排好的形式显示内容,可以使用<pre></pre>标签对。使用该标签对时,默认字体为10磅。
8.注释标签
在编写HTML文件时,为提高文件的可读性,可以使用<!--和-->标签注释文字,其语法如下:
<!--注释语句-->
注释内容不会在浏览器中显示。