第 8 课：链接
在这一课，你将学习如何在网页之间做链接。
如何做链接？ 如何做链接？
做链接也是通过元素（element）实现的。做链接只需一个元素和一个属性就行 做链接只需一个元素和一个属性就行 了。下面是一个例子，它是一个指向 HTML.net的链接：
例 1： ：
这是一个指向 HTML.net的链接
该例在浏览器中将显示如下：
这是一个指向 HTML.net的链接
元素 a 代表“链接（anchor）”；属性 href 代表“超文本引用（hypertext reference）”，它用于指定链接指向何处——通常是一个因特网地址或者一个 文件名。 在上例中，属性 href 的值为“http://www.html.net”，这是 HTML.net网站的 完整地址，也被称作 URL（统一资源定位符）。注意，在 URL 里必须包含 “http://”。“这是一个指向 HTML.net的链接”是这个链接在浏览器中显示出 来的文本。记得在元素结尾处写上。
如何在同一网站的网页之间添加相互链接？ 如何在同一网站的网页之间添加相互链接？
如果你要在同一网站的不同网页间做链接，那就不必拼写出网页的完整 URL。举 个例子，假如你有两个网页（比如说 page1.htm 和 page2.htm），而且它们被存 放在同一个文件夹中，那么你在做链接的时候，只要写出文件名就行了。这样， page1.htm 到 page2.htm 的链接将如下所示：
例 2： ：
点击这里转到第 2 页
如果 page2.htm 被放在下一级文件夹中（比如“subfolder”），那么链接将是 这样：
例 3： ：
点击这里转到第 2 页
反过来，从 page2.htm（在下级文件夹中）到 page1.htm 的链接将是这样：
例 4： ：
转到第 1 页
“../”代表当前位置（即该链接所在文件所处的文件夹）的上一级文件夹。同 理，当前位置的上上级文件夹可用“../../”表示。 明白其中的规则了吗？当然，如果给出完整 URL 也行。
如果要在一个网页内做链接怎么办呢？ 如果要在一个网页内做链接怎么办呢？
你也可以在一个网页的内部做链接——比如在网页开始处提供一个目录，在其中 列出指向下面各章的链接。这可以通过使用 id 属性和“#”符号来实现。 用 id 属性标出要被指向的元素。例如：
标题 1
然后通过在链接中利用“#”来指向那个元素。 “#”后面必须紧跟着一个 id 属性的值，表明链接指向该 id 属性被定义的地方。例如：
转到标题 1
来看一个例子就明白了：
例 5： ：
<p>转到标题 1</p> <p>转到标题 2</p> 标题 1 <p>一些文字。。。。</p> 标题 2 <p>一些文字。。。。</p>
该例在浏览器中将显示如下（你可以试试看点击这两个链接）： 转到标题 1 转到标题 2
标题 1
一些文字。。。
标题 2
一些文字。。。 （注：id 属性必须以字母开头）
除了网页，链接还能指向什么？ 除了网页，链接还能指向什么？
你还可以为 e-mail 地址做链接，方法跟为网页做链接差不多：
例 6： ：
给 nobody@html.net发电子邮件
该例在浏览器中将显示如下： 给 nobody@html.net发电子邮件 与指向网页的链接的唯一区别在于：指向 e-mail 地址的链接必须以 mailto:开 头，然后紧接着写 e-mail 地址。当点击这个链接的时候，缺省的 e-mail 程序将 新建一封邮件，其中的收件人地址为链接中指定的 e-mail 地址。注意：这一功 能仅当你的计算机安装了 e-mail 程序后才起作用。试试看吧！
有其他我需要知道的属性吗？ 有其他我需要知道的属性吗？
创建链接总要用到 href 属性。另外，你也可以在链接上使用 title 属性：
例 7： ：
HTML.net
该例在浏览器中将显示如下： HTML.net
title 属性用于为该链接输入一个简短 描述。 描述。当你把鼠标光标停留在该链接上 别点击它） 提示文字“上 HTML. 第 （别点击它） ， 时 提示文字“ 9 课：图像
假如能把影歌两栖传奇人物 David Hasselhoff 的图像放到自己的网页上，那就 太好了。
这貌似有点难度。。。 这貌似有点难度。。。
也许是有点难度，但其实也不难，一个元素就可以搞定： 例 1：
该例在浏览器中将显示如下：
你要做的只是：首先告诉浏览器你要插入一张图片（img），接着给出这张图片 的存放位置（src，代表“来源（source）”）就行了。准备好图片了吗？ 注意：img 元素没有尾标签，它与一样，不与特定的文本相关。 “david.jpg”是要插入的图片的文件名，其中的“jpg”表明图片类型。就像后 缀名“htm”代表文件是 HTML 文档一样，后缀名“jpg”表明文件是一个图片文 件。有三种类型的图片文件可被插入网页中：
GIF（Graphics
interchange Format，图形交换格式） JPG或 JPEG（Joint Photographic Experts Group，联合图像专家组） PNG（Portable Network Graphics，可移植网络图像）
一般来说， 是图形和图画的最佳格式， 格式则更适合存放照片。原 一般来说，GIP 是图形和图画的最佳格式，而 JPEG 格式则更适合存放照片 因有二：第一，GIF 格式只支持 256 色，而 JPEG 格式支持数百万色；第二，GIF 格式擅长于压缩简单图像，而 JPEG 则更适于压缩复杂图像。压缩率越高，图像 文件就越小，页面加载速度就越快。也许你也有同感，包含太多无用内容的网页 是很不受欢迎的。
过去，GIF 和 JPEG 是两大主要的图像格式，但是最近 PNG 格式也开始流行起来 （主要是在取代 GIF 格式）。PNG 格式拥有许多 JPEG 与 GIF 的共同优点：支持 的共同优点： PNG 数百万色，且压缩效果好。 数百万色，且压缩效果好
图片从何处获得？ 图片从何处获得？
要制作自己的图像，需要有一个图像编辑程序。图像编辑程序是从事美观的网页 图像编辑程序是从事美观的网页 制作所需的重要工具之一。 制作所需的重要工具之一 不幸的是 Windows 或其他操作系统都没有自带比较好的图片编辑程序。所以，也 许你得买一个 Paint Shop Pro、PhotoShop 或者 Macromedia Fireworks，这三 个是目前市场上最好的图像编辑
软件。 不过还是那句话，完成本教程的学习不需要购买任何昂贵的软件。你可以先下载 一个 Irfan View 用，这是一个很不错的图像编辑软件。因为是自由软件，所以 你可以免费使用它。 或者，你也可以从我们HTML.net网站下载一些图片来用，但请注意不要违反有 关版权规定。具体下载方法如下：
1. 右击网页中的图像。 2. 在菜单中选择“图片另存为...”。 3. 选择图片的存放位置，然后点击“保存”。
按此方法将下面的图片保存到你的 HTML 文档所在目录。 （注意：将它保存为 PNG 文件，文件名为 logo.png）：
现在你可以把这个图片插入到自己的网页里。自己试试看。
关于图像就这么多吗？ 关于图像就这么多吗？
关于图像，还有一些是需要介绍的。 首先，你可以轻易地把存放在其他文件夹、甚至其他网站的的图片插入到自己的 网页中。 例 2：
例 3：
其次，图片也可以作为链接： 例 4：
该例在浏览器中将显示如下（你可以试试看点击这个图像）：
有什么属性需要了解的吗？ 有什么属性需要了解的吗？
你总要用 src 属性来告诉浏览器图片的存放位置。除此以外，还有一些有用的属 性。 alt 属性用于给出图像的替用描述，假如由于某些原因该图像未能显示出来，浏 览器就通过显示这个描述来替代图像。对于有视力障碍的人士来说，或者当网页 打开很慢的时候，这一特性显得尤为重要。所以说，始终记得写 alt 属性： 例 5：
有些浏览器会在鼠标光标移到图像上时显示出 alt 属性的文本。但是，在使用 alt 属性时请注意，该属性的目的是为图片提供一个替用描述，有视力障碍的人 士会利用 alt 属性来听取有关图片的描述，所以不要将该属性用于显示文本提 示——那是title 属性的功能。 例 6：
该例在浏览器中将显示如下：
如果你把鼠标光标停留在该图片上（别点击它），提示文字“上 HTML.net网站 学习 HTML”便会出现。 另外两个重要的属性是 width 和 height： 例 7：
该例在浏览器中将显示如下：
width 和 height 属性分别用于设置图像的宽度和高度，以像素为单位。像素 （pixel）是用于测量屏幕分辨率的计量单位。（目前大多数屏幕分辨率是 1024 ×768 或更高）。像素跟公分不同，像素是一种相对计量单位，一个像素的实际 大小跟屏幕分辨率有关。在高分辨率显示模式下，差不多 25 个像素等于 1 公分； 而在低分辨率显示模式下，同样的 25 个像素大约等于 1.5 公分。 如果你没有为图像设置宽度和高度，它将按原始尺寸显示。但是如果设置了的 话，你就可以控制它的显示尺寸： 例 8：
该例在浏览器中将显示如下：
但是值得注意的是，虽然可以通过设置高度和宽度来控制图片的显示尺寸，但图 片文件的实际大小不会因此而发生变化。所以，不要指望通过设置图片的宽度和 不要指望通过设置图片的宽度和 高度来减小图片文件的大小。相反，你应该在图像编辑程序中来调整图片文件的 高度来减小图片文件的大小 大小，以加快页面加载速度。
不过 width 和 height 属性还是有用的，它们可以在图片被完全下载之前令浏览 器知道该用多大的空间来显示图片。这令浏览器可以更快显示出美观的页面。 关于图像就说这么多了。 net 网站学习 HTML”便会出现。
