HTML——超链接、图片及其他常用元素
超链接元素
超链接为Web页面提供了互相跳转的功能，用户在浏览一个网页的时候可以通过超链接跳转到另一个网页，以获取更多的信息。实际上大部分的Web页面就是靠超链接技术联系在一起的，网站也要靠超链接技术引导用户浏览。
1.超链接的基本用法
超链接的HTML元素为<a>,通过元素的href属性指定跳转的地址。在同一个目录下分别创建HTML文件02_1_1.html与02_1_2.html,代码如下：
例02_1_1.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html"; charset=utf-8">
<title>第一个页面</title>
</head>
<body>
<a href="02_1_2.html">跳转到第二个界面</a>
</body>
<html>
例02_1_2.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>第二个页面</title>
</head>
<body>
<p>单击<a href="02_1_2.html">这里</a>跳转到第二个页面</p>
</body>
<html>
浏览器会将<a>元素中的内容显示为带下划线的蓝色文本，单击后页面会进行跳转，如果跳转的页面地址不正确，浏览器会提供一个错误页面。单击过的超链接默认以紫色显示。
2.相对路径与绝对路径
使用href属性引用其他页面时可以通过相对路径或绝对路径指定，相对路径指以当前文件所在位置为参考点而建立的路径，而绝对路径指以硬盘跟目录或站点根目录为参考点而建立的路径。一般而言，在引用其他文件时建议使用相对路径，这样当站点的目录或域名更改时不用修改链接地址。
3.超链接的target属性
超链接元素中提供了target属性以指定目标页面的打开窗口，默认情况下在本浏览器窗口打开，可以通过更改target属性实现在新窗口中打开页面等效果。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html"; charset=utf-8">
<title>在新窗口中打开页面</title>
</head>
<body>
<p>点击<a href="02_1_1.html" target="_blank">这里</a></>
</body>
</html>
上面的代码在执行后单击超链接，会弹出新窗口打开目标页面（如果浏览器支持标签浏览，也可能会在新的标签页中打开目标页面）。target属性的有效值如表2-2所示。
_blank 在新的浏览器窗口（或新的浏览器标签页）中打开目标页面
_self 默认行为，在原浏览器窗口中打开目标页面
_parent 在父窗口中打开目标页面
_top 在顶级窗口中打开目标页面
其他值 如果target属性为其他值，意味在该值的窗口中打开目标页面。如果没有同名窗口，则新建一个窗口，并以target值命名此窗口，然后打开目标页面；如果有同名窗口，则直接在此窗口中打开目标页面。
4.锚链接
锚链接用于跳转到网页的指定部分，这对于篇幅较长的网页尤其有用。很多网站的FAQ都会使用锚链接技术制作。
制作锚链接需要通过<a name="xx"/>的形式为锚命名，并通过<a href="#xx">的形式跳转到对应的锚。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>FAQ</title>
</head>
<body>
<a name="top"/>
<h1 align="center">常见问题解答</h1>
<p><font size="5">问：</font><a href="#faq1">我的手机无法充电了</a></p>
<p><font size="5">问：</font><a href="#faq2">手机有时候没有信号是怎么回事？</a></p>
<p><font size="5">问：</font><a href="#faq3">来电时铃声很小，经常漏接电话怎么办？</a></p>
<p><font size="5">问：</font><a href="#faq4">GPS经常提示无法定位您的位置</a></p>
<p><font size="5">问：</font><a href="#faq5">只能接收短信不能发送短信是怎回事儿啊</a></p>
<a name="faq1"/>
<p>
<font size="5" color="red">回答：</font>
您好，如果您的手机经常出现无法充电的情况，可能是由于以下原因引起的：
<br>1.您使用的电源电压不足，请更改220V的电源
<br>2.您是否使用了非原装的充电器？只有原装的充电器才能保证正常使用。
<br>3.您是否使用了非原装的电池？只有原装的电池才能保证正常使用。
<br>4.检查充电器的线缆是否被损坏。
</p>
<p align="right">[↑<a href="#top">返回顶部</a>]</p>
<a name="faq2"/>
<p>
<font size="5" color="red">回答：</font>
您好，如果您的手机经常出现没有信号的情况，可能是由于以下原因引起的：
<br>1.您的位置是否是高楼的内部？高楼会影响信号传输
<br>2.请确认移动网络覆盖了您所在的区域。
<br>3.请确认您的手机不是处于飞行模式。
<br>4.请确认您的手机没有欠费停机。
</p>
<p align="right">[↑<a href="#top">返回顶部</a>]</p>
<a name="faq3"/>
<p>
<font size="5" color="red">回答：</font>
您好，您的手机来电铃声太小，可能是由于以下原因引起的：
<br>1.您使用的铃声本身音量就很小，请更改您的来电铃声。
<br>2.请检查手机的扬声器没有被杂物堵塞。
<br>3.如果手机离您太远，也会导致没听到铃声，请将手机放近点。
</p>
<p align="right">[↑<a href="#top">返回顶部</a>]</p>
<a name="faq4"/>
<p>
<font size="5" color="red">回答：</font>
您好，您的手机出现无法定位的情况，可能是由于以下原因引起的：
<br>1.请确认您的手机型号，是否包含GPS模块。
<br>2.遇到阴雨天气，GPS信号减弱是正常信号，请耐心等待天晴。
<br>3.在高大建筑物旁或桥下，都无法接收GPS信号。
<br>4.使用A-GPS模块的用户请确认手机开通了GPRS。
</p>
<p align="right">[↑<a href="#top">返回顶部</a>]</p>
<a name="faq5"/>
<p>
<font size="5" color="red">回答：</font>
您好，如果您的手机经常出现无法发送短信的情况，可能是由于以下原因引起的：
<br>1.请确认您没有欠费停机。
<br>2.如果您之前发送了大量短信，可能会被运营商暂停短信发送功能。
<br>3.请确认您编辑完短信按了发送键。
<br>4.请检查您的短信设置。
</p>
<p align="right">[↑<a href="#top">返回顶部</a>]</p>
</body>
</html>
注意：如果锚链接的地址写错了，浏览器一般不会跳转到错误页面，而是不做反应。另外还可以通过将href属性写为“页面地址#锚链接名”的方式直接跳转到某一个页面中指定的锚链接部分。
5.链接到电子邮件和网站
超链接的地址可以是一个电子邮件地址，浏览器会启动邮件程序编辑邮件并将内容发送到改地址。超链接也可以指向其他网站，如下例所示
例02_4.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>网址导航</title>
</head>
<body>
<h1 align="center">网址导航</h1>
<p>
门户网站<hr/>
[ <a href="http://www.qq.com">腾讯</a> ]
[ <a href="http://www.163.com">网易</a> ]
[ <a href="http://www.sina.com">新浪</a> ]
[ <a href="http://www.sohu.com">搜狐</a> ]
</p>
<p>
新闻网站<hr/>
[ <a href="http://www.cctv.com">CCTV</a> ]
[ <a href="http://www.ifeng.com">凤凰网</a> ]
[ <a href="http://www.sina.com.cn">新浪新闻</a> ]
[ <a href="http://www.usatoday.com">今日美国</a> ]
</p>
<p>如果有疑问，请<a href="mailto:webmaster@google.com">发送邮件</a>给管理员</p>
</body>
</html>
单击“发送邮件”超链接，系统将调用本节的邮件程序。
注意：如果客户端没有安装电子邮件收发程序则无法发送邮件，如果安装了多个电子邮件收发程序，可以在浏览器的设置中指定哪一种程序发送邮件。
图片元素
1.图片格式介绍
- BMP格式：Windows系统下的标准位图格式，未经过压缩，生成的图像文件比较大，用于网页显示会增加用户的下载时间，不建议大家使用。
- GIF格式：CompuServe公司在1987年开发的图像文件格式，GIF图像文件的数据是经过可变长压缩的，支持2~256中色彩的图像，并且支持北京透明和动画，在Web开发中应用很广。但因为GIF格式只支持256种色彩，故不适合保存图片。
- JPEG格式：由软件开发联合会组织制定的有损压缩格式，压缩比较高，支持24bit色彩，适合保存图片。
- PNG格式：比较新的图像格式，能提供长度比GIF格式小30%的无损压缩图片，也支持背景透明，并且支持Alpha通道调整图像的透明度。因为PNG格式推出时间不长，不是所有的浏览器都能很好的支持PNG，如IE6浏览器不支持背景透明的PNG图片。
2.图片元素的基本用法
图片元素为<img>,通过src属性指定图片地址就可以将图片显示在页面上。注意：<img>元素只是引用了此图片，并未将图片本身的内容复制到HTML文件中。如果引用的图片不存在或格式不正确，一般浏览器会显示出错符号。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>图片元素</title>
</head>
<body>
<p>正确的引用图片：</p>
<p>不正确的引用图片：</p>
</body>
</html>
3.图片元素的常用属性
图片元素的常见属性如下：
- width/height:设置图片的宽度或高度，如只设置其中一个值，浏览器会自动根据图片的横纵比决定另一个值。如果宽和高没有设置，图片将按照原始大小显示。该属性支持使用像素或百分比作为单位。
- border：图片边框的宽度，默认为0.
- alt: 当图片无法加载时，用于替换图片内容的文字
- align:图片与文字的对齐方式、可选值。
top：上对齐 middle：居中对齐 bottom：下对齐 right：右对齐 left：左对齐。
