常用标记和属性

本节介绍常用的HTML标记和属性，可以使用这些基本的标记和属性制作简单的网页。

1. 段落标记p和换行标记br

p标记用于将文档划分为段落，包括开始标记〈p〉和结束标记〈/p〉，其中结束标记通常可省略。而br标记用于在文档中强制断行，它只有一个单独的标记〈br〉，没有结束标记。p标记与br标记的区别在于，前者是将文本划分为段落，而后者是在同一个段落中强制断行。

2. 水平线标记hr

除了可以用p标记划分段落以外，在HTML中还可以用添加水平线的方法分隔文档的不同部分。使用水平线将文档划分为不同的区块是一种很好的风格。

添加水平线的标记为hr，它与br类似，只有开始标记〈hr〉，没有结束标记。hr标记包括size、width和color等属性。size属性设置水平线的粗细程度，可以设置成一个整数，它表示以像素（pixel）为单位的该线的粗细程度，粗细程度的默认值是2。width属性可用来设置水平线的长度，width的取值既可以是像素长度，也可以是该线所占浏览器窗口宽度的百分比长度。color属性用于控制水平线的颜色，取值可以是颜色名称或#RRGGBB格式。

3. 标题标记hn

在HTML中，用户可以通过hn标记来标识文档中的标题和副标题，其中n是1～6的数字；〈h1〉表示最大的标题，〈h6〉表示最小的标题。使用标题样式时，必须使用结束标记。

浏览器在解释标题标记时，会自动改变文本的大小并将字体设为黑体，同时自动将内容设置为一个段落。注意，由于搜索引擎经常也用标题来对文档进行搜索，因此不要使用标题标记来单独进行文字修饰，而应该确实把它用作文档的标题。

4. 对齐属性align

align属性用于设置段落的对齐格式，其常见取值包括：right（右对齐）、left（左对齐）、center（居中对齐）和justify（两端对齐）。align属性可应用于多种标记，例如前面介绍的p、hn、hr等。

5. 字体控制标记font

font 标记可用于控制字符的样式，包括开始标记〈font〉和结束标记〈/font〉，并且结束标记不可省略。font标记具有3个常用的属性：size、color和face。

size 属性也就是字号属性，用于控制文字的大小，它的取值既可以是绝对值，也可以是相对值。使用绝对数值时，字号属性的值可以从1到7（3是默认值），值越大，显示的文字越大。使用相对数值时，可以用＋号或-号来指定相对于当前默认值的字号，例如＋1表示比当前默认字号大1号。

color属性可用来控制文字的颜色，属性值可以是颜色名称或十六进制值。

face属性用来指定字体样式。字体样式也就是通常所说的“字体”。例如，常用的英文字体有“Times New Roman”、“Arial”等；常用的中文字体有“宋体”、“楷体”等。在编写网页时，通过在font标记中指定face属性，用户可以指定一个或几个字体名称（用逗号隔开），例如：

〈font face=＂楷体_gb2312，黑体，宋体＂〉示例文本〈/font〉

当浏览器解释字体标记的face属性时，它尽量使用列表中指定的第一个字体显示标记内的文字。如果那种字体在浏览器所在的系统中有的话，文字即以该字体显示。如果没有第一种字体，浏览器会尝试使用列表中的下一个字体。这种情况会继续下去，直到找到匹配字体或到达列表的结束。如果找不到匹配字体，浏览器将使用默认字体（默认中文字体是“宋体”，默认英文字体是“Times New Roman”）。

6. 超链接标记a

创建超链接需要使用a标记（结束标记〈/a〉不能省略），它的最基本属性是href，用于指定超链接的目标。通过为href指定不同的值，可以创建出不同类型的超链接。另外，在〈a〉和〈/a〉之间可以用任何可点击的对象作为超链接的源，例如文字或图像。

最常见的超链接就是指向其他网页的超链接，浏览者点击这样的超链接时将跳转到相应的网页。如果超链接的目标网页位于同一站点，则应使用相对URL；如果超链接的目标网页位于其他位置，则需要指定绝对URL。

超链接默认时显示有下划线，并且显示为蓝色。当浏览者将鼠标移动到超链接上时，鼠标指针通常会变成手形，同时在状态栏中显示出超链接的目标文件。

以下HTML代码显示了如何在网页中创建超链接（一定要确保href属性所指定的页面存在于指定的位置，否则会导致无法正确显示网页）。

〈html〉

〈head〉〈title〉超链接示例〈/title〉〈/head〉

〈body〉

〈p〉这是一个〈a href=＂page2.htm＂〉超链接〈/a〉〈/p〉

〈p〉〈a href=＂http://www.baidu.com＂〉百度〈/a〉〈/p〉

〈/body〉

〈/html〉

在指定超链接时，如果href属性指定的文件格式是浏览器能够直接显示或播放的，那么单击超链接时将会直接显示相应文件。例如，如将href的值指定为图像文件，那么单击超链接就可以直接在浏览器中显示图像。如果href属性指定的文件格式是浏览器所不能识别的格式，那么将获得下载超链接的效果。例如，如果我们将超链接的目标文件指定为某压缩文件，那么当浏览者在浏览器中单击相应超链接时，则将弹出一个提示下载的对话框。

除了可以对不同页面或文件进行链接以外，用户还可以对同一网页的不同部分进行链接。例如，可以在长文档的顶部或底部以超链接的方式显示一个目录，并在页面的底部放一个返回顶部的链接。

如果要设置这样的超链接，首先应为页面中需要跳转到的位置命名。命名时应使用a标记的name属性（通常这样的位置被称为“锚点”），在标记〈a〉与〈/a〉之间可以包含内容也可以不包含内容。

例如，可以在页面开始处用以下HTML语句进行标记：

〈a name=＂top＂〉目录〈/a〉

对页面进行标记之后，就可以用a标记设置指向这些标记位置的超链接。例如，如果在页面开始处标记了＂top＂，则可以用以下HTML语句进行链接：

〈ahref=＂#top＂〉返回目录〈/a〉

这样设置之后，当用户在浏览器中单击文字“返回目录”时，将显示“目录”文字所在的页面部分。

如果将href属性的取值指定为mailto:电子邮件地址，那么就可以获得电子邮件链接的效果。例如，使用以下HTML代码可以设置电子邮件超链接：

〈ahref=＂mailto:zhaofengnian@263.net＂〉作者邮箱〈/a〉

当浏览网页的用户单击了指向电子邮件的超链接后，系统将自动启动邮件客户程序，并将指定的邮件地址填写到“收件人”栏中，用户可以编辑并发送该邮件。

7.HTML网页示例

以下两个HTML文件使用了之前介绍的HTML标记和属性，在浏览器中显示的效果如图7.9所示，这两个网页之间可以互相链接。

以下是page1.htm文件中的内容：

〈html〉

〈head〉〈title〉锦瑟〈/title〉〈/head〉

〈body〉

〈h1 align=＂center＂〉〈font face=＂楷体_gb2312＂〉锦瑟〈/font〉〈/h1〉

〈p align=＂center＂〉〈font size=＂-1＂ color=＂navy＂〉李商隐〈/font〉〈/p〉

〈p align=＂center＂〉锦瑟无端五十弦，一弦一柱思华年。〈/p〉

〈p align=＂center＂〉庄生晓梦迷蝴蝶，望帝春心托杜鹃。〈/p〉

〈p align=＂center＂〉沧海月明珠有泪，蓝田日暖玉生烟。〈/p〉

〈p align=＂center＂〉此情可待成追忆，只是当时已惘然。〈/p〉

〈hr width=＂80%＂ size=＂1＂〉

〈p align=＂center＂〉〈font size=＂-1＂〉锦瑟 §〈ahref=＂page2.htm＂〉无题〈/a〉〈/font〉〈/p〉

〈/body〉

〈/html〉以下是用一个目录下的 page2.htm 文件的内容：

〈html〉

〈head〉〈title〉无题〈/title〉〈/head〉

〈body〉

〈h1 align=＂center＂〉〈font face=＂楷体_gb2312＂〉无题〈/font〉〈/h1〉

〈p align=＂center＂〉〈font size=＂-1＂ color=＂navy＂〉李商隐〈/font〉〈/p〉

〈p align=＂center＂〉昨夜星辰昨夜风，画楼西畔桂堂东。〈/p〉

〈p align=＂center＂〉身无彩凤双飞翼，心有灵犀一点通。〈/p〉

〈p align=＂center＂〉隔座送钩春酒暖，分曹射覆蜡灯红。〈/p〉

〈p align=＂center＂〉嗟余听鼓应官去，走马兰台类转蓬。〈/p〉

〈hr width=＂80%＂ size=＂1＂〉

〈p align=＂center＂〉〈font size=＂-1＂〉〈ahref=＂page1.htm＂〉锦瑟〈/a〉§ 无题〈/font〉〈/p〉

〈/body〉

〈/html〉

图7.9 HTML示例