2.2 常用的HTML标记
在介绍了HTML的一些基本知识之后，本节将重点介绍一些常用的HTML标记，熟悉这些标记的用途和使用方法，对学习Web应用程序设计会有很大的帮助。
2.2.1 HTML的文字标记
1.＜title＞＜/title＞标记
该标记在＜head＞＜/head＞标记之间，＜title＞＜/title＞标记之间的内容将显示在浏览器的标题栏上，如图2.1所示。
2.＜p＞、＜br＞和＜hr＞标记
＜p＞是一个段落的开始标记，其使用的一般格式如下：
＜p align="段落对齐方式"＞段落文字
其中，align属性为段落文字的对齐方式，取值为left、right、center等。
＜br＞是换行标记，换行字符（CR、LF）在HTML文件中不起作用，必须使用＜br＞换行标记。
＜hr＞用于插入一条水平线，其使用的一般格式如下：
＜hr size="线的粗细" width="线的宽度"＞
其中，size属性设置线的粗细，属性取值单位为像素数；width属性设置线的宽度，属性取值单位为像素数或百分比。
【例2.2】演示上述标记的示例。ch2_2.html页面效果如图2.2所示。
图2.2 ch2_2.html页面效果
＜html＞
＜head＞
＜title＞这是标题部分，将显示在浏览器窗口标题栏＜/title＞
＜/head＞
＜body text="red" bgcolor="yellow" ＞
＜p align="center"＞这是段落文本,下边插入了一条水平线,段落中间对齐
＜hr size="2" width=80%＞
＜p align="left"＞这里的段落左对齐
＜br＞＜br＞＜br＞
＜p align="right"＞这个段落前加入了三个换行，段落右对齐
＜/body＞
＜/html＞
3.＜hn＞＜/hn＞标记
该标记用来设置网页中标题的文字。标题分为6级，＜hn＞标记中的n用1～6之间的数字取代，＜h1＞是最大的标题，＜h6＞是最小的标题。＜hn＞的一般使用格式如下：
＜hn align="对齐方式"＞标题内容＜/hn＞
其中，align为标题文本对齐属性，取值为left、right、center等。
4.＜font＞＜/font＞标记
该标记用来控制文字的字体、大小和颜色，它的使用格式如下：
＜font face="字体名称" size="字体大小" color="字体颜色"＞显示的文字＜/font＞
其中，face属性取值可以是系统所安装字体的名称，如宋体、幼圆、楷体、黑体等，默认值是宋体；size属性取值是从1～7之间的数字，也可以以3为基准设置，-1代表2，+1代表4，默认值为3；color属性取值可以用常数表示，如red，也可用RGB表示，如#00ff00。
5.＜B＞＜/B＞、＜I＞＜/I＞、＜U＞＜/U＞标记
＜B＞＜/B＞为文字粗体标记，＜I＞＜/I＞为文字斜体标记，＜U＞＜/U＞为文字下画线标记。它们可以组合使用，使用格式如下：
＜B＞粗体字＜/B＞
＜I＞斜体字＜/I＞
＜U＞加下画线字＜/U＞
＜B＞＜U＞粗体+下画线＜/U＞＜/B＞
＜B＞＜I＞粗体+斜体字＜/I＞＜/B＞
6.＜sub＞＜/sub＞、＜sup＞＜/sup＞标记
＜sub＞＜/sub＞是文本下标标记，＜sup＞＜/sup＞是文本上标标记，使用格式如下：
＜sub＞下标文本＜/sub＞
＜sup＞上标文本＜/sub＞
【例2.3】演示标题、文字与段落的示例ch2_3.html，页面效果如图2. 3所示。
图2.3 ch2_3.html页面效果
＜HTML＞
＜HEAD＞
＜TITLE＞演示标题、文字、段落的示例＜/TITLE＞
＜/HEAD＞
＜BODY＞
＜h1＞北京2010世博专题（标题1）＜/h1＞
＜h3＞让城市生活更美好（标题3）＜/h3＞
＜font face="幼圆" size=4 color="red" ＞Better City Better Life.
今日为马绍尔群岛国家馆日，主题:太平洋，城市灵感的源（字体：幼圆，字号4，颜色：红）
＜/font＞＜br＞
＜b＞国家：(粗体）＜/b＞＜br＞
＜i＞马绍尔群岛（斜体）＜/i＞＜br＞
＜u＞主题：（下画线）＜/u＞
＜h1＞城市生活灵感的源（标题1）＜/h1＞
＜h3＞我们的生活更美好！：（标题3）＜/h3＞
＜p＞使用下标表示水的化学分子式：
＜b＞＜i＞H＜sub＞2＜/sub＞O＜/i＞＜/b＞＜br＞
＜h3＞数学函数学习：（标题3）＜/h3＞
＜p＞使用上标表示X的平方：
＜b＞＜u＞X＜sup＞2＜/sup＞＜/u＞＜/b＞
＜/BODY＞
＜/HTML＞
2.2.2 特殊标记和图形标记
1. 和"标记
在HTML文档中，空格并不具备调整间距的功能，当出现连续多个空格时，仅第一个空格有效。HTML使用 表示空格，"表示双引号。HTML中还有其他特殊字符使用字符代码表示，可以查阅有关手册。
2.＜!-- --＞标记
该标记是HTML注释标记，注释标记的内容不会在浏览器中显示出来，只是为了查找或记忆有关的内容。
3.＜img＞标记
该标记用来在网页中显示图形。图形文件与网页文件是分别进行存储的，可以通过＜img＞标记将图形显示在网页中。该标记的使用格式如下：
＜img src="文件名" height="图形显示高度" width="图形显示宽度"
border="边框粗细" alt="说明文字" align="对齐方式" hspace="水平间距"
vlign="垂直间距"＞
其中，src属性取值为图形文件的URL路径，可以用绝对路径或相对路径表示，绝对路径是文件名的完整路径，相对路径是相对当前网页文件名的路径，例如，"http://www.sina. com/logo.gif"是绝对路径，"logo.gif"是相对路径；height属性取值为图形的高度，单位可以是像素数或浏览器窗口高度的百分比；width属性取值为图形的宽度，单位可以是像素数或百分比；alt属性为图形的文字说明；align属性为图像与文字之间的排列属性，可取值有baseline、top、middle、bottom、texttop、absmiddle、absbottom、left、right等，默认值为bottom；border属性取值为边框的宽度数字，单位为像素。
4.＜center＞＜/center＞标记
该标记为对象居中标记，凡在此标记中间的对象都会被居中输出，其使用格式如下：
＜center＞文字居中＜/center＞
或者：
＜center＞＜img src="logo.gif" alt="图形居中" ＞＜/center＞
【例2.4】空格、双引号与网页中显示图形示例，ch2_4.html页面效果如图2.4所示。
＜HTML＞
＜HEAD＞
＜TITLE＞【例2.4】标记示范＜/TITLE＞
＜/HEAD＞
＜BODY＞＜center＞
＜!--这是一个＜img＞标记和 和"＜center＞标记的示范例子--＞
＜p align="left"＞这是一个<img>标记的例子，
（这里有几个空格）显示当前目录下"logo.jpg"
图形文件，显示效果如下图：
＜img src=" mslogo.jpg " alt=" mslogo.jpg文件" width="256"
height="192" hspace="30" vspace="20" border="10"
align="middle" ＞用户登录
＜/center＞
＜/BODY＞
＜/HTML＞
图2.4 ch2_4.html页面效果
2.2.3 超级链接标记
超级链接是因特网的灵魂，通过超级链接标记将因特网上的资源织成了一张巨大的信息网络，极大地方便了用户的访问。作为Web程序设计人员，必须熟练掌握HTML的超级链接技术。＜a＞＜/a＞标记为超级链接标记，一般使用格式如下：
＜a href="资源地址" target="窗口名" title="指向链接时显示的文字" ＞
超链接显示名称＜/a＞
其中，href属性取值为链接的目标地址，可以是绝对路径，也可以是相对路径，绝对路径是URL地 址，如"http://www.sina.com/web/index.html"、"ftp://ftp.hebau.edu.cn/"、"mailto:yxq@163.com ? cc=dkd@163.com & subject=建议 &bcc = yxq@hebau.edu"等，相对路径是相对于当前网页文件所在目录的路径；target属性取值为链接的目标窗名，可以是_parent、_blank（新窗口）、_self、_top（打开浏览器的整个窗口，忽略任何框架）等值，也可以是窗口名称或id，其默认值为原窗口；title属性取值为指向链接时所显示的标题文字；＜a＞与＜/a＞之间的“超级链接显示名称”，可以是文本，也可以是＜img＞图形链接。
【例2.5】超级链接示例，ch2_5.html页面效果如图2. 5所示。
图2.5 ch2_5.html页面效果
＜HTML＞
＜HEAD＞
＜TITLE＞【例2.5】超级链接实例＜/TITLE＞
＜/HEAD＞
＜BODY＞
＜h2 align="center"＞联系我们＜/h2＞
＜p align="center"＞网址：＜a href="http://www.hebau.edu.cn/"
title="登录我们网站" target="_blank"＞
http://www.hebau.edu.cn/＜/a＞＜/p＞
＜p align="center"＞发邮件：＜a title="发送邮件给我们"
href="mailto:bdyxq@163.com.cn ?cc=yxq@hebau.edu.cn&subject=hello
&body=杨老师你好！&bcc=yxq@hebau.edu.cn"＞bdyxq@163.com.cn＜/a＞＜/p＞
＜p align="center"＞下载支持文件：＜a href="ftp://ftp.hebau.edu.cn"
target="_parent" title="下载文件"＞
ftp://ftp.hebau.edu.cn＜/a＞/＜/p＞
＜p align="center"＞相对路径链接，同一目录下的网页：＜a href="ch2_4.html"
title="相对链接同一目录" target="_top"＞ch2_4.html＜/a＞＜/p＞
＜/BODY＞
＜/HTML＞