HTML+CSS第6章.pptVIP

第6章 网页链接 网站，就是包含许多链接在一起的页面，用户通过主页可以查找到网站中的所有页面。网页之间的链接，称之为页面链接。就像图书的目录一样，用户只要在目录中找到所需资料的页码，然后根据页码就可以找到此页。在网站中，用户只要在页面中单击链接内容，页面就会自动跳转到链接指向的页面。 本章的主要知识点有： 网页链接。 基本的链接形式。 修饰链接的状态。 特殊形式的链接。 6.1 网页链接 所谓的链接是指从一个页面指向一个目标的链接关系，这个目标是多种样式的，可以是一个网页，也可以是相同网页的不同位置，甚至可以是一张图片、一个电子邮件地址、一个应用程序。当用户单击已经链接的页面内容时，链接目标将显示在浏览器上，并根据目标的类型来运行。 可以说，在一个大型网站中，网页的链接已经充斥着网站中的每个角落，如图6.1所示，一家门户网站的主页。在这样的一个主页中，用户可以看到的每一行文本、每一张图片，几乎所有的页面内容，都是页面链接。 6.1.1 初识页面链接 在HTML文档中，使用a标签指引页面中链接的目标点，让设计者创建指向目标点的链接。在链接的属性中，代码的写法为： a href=”链接对象的路径”链接锚点对象 /a 用“a”来表示锚点，“a”也源自于英文中的anchor。“href”属性意思是超文本引用，这个属性的值指定了链接的目标。在一个完整的链接语句中包含2个部分，即链接锚点对象和链接地址，如代码6-1是一个简单的链接页面，6-2是另一个页面。通过链接的方法，将使代码6-1的A页面跳转到代码6-2的B页面。 【本节示例参考：资料光盘\第6章\代码6-1 页面A.html】。 6.1.2 理解链接地址 链接地址指的是链接到锚点对象的路径，这个路径所指的不仅仅只是一个页面地址，也可能是一个文件地址、一个邮箱地址。那么，对于一个页面的链接，该如何去定位这个链接对象的路径呢？如代码6-3是通过一个链接地址跳转到另一个页面，结果如图6.3所示。 【本节示例参考：资料光盘\第6章\6-3 链接内容的路径.html】。 6.2 链接的种种不同 链接的分类有种种不同，使用的方法却是大同小异，创建一个超链接很容易，事实上，设计者使用到的只有a标签这样的一个标签而已。虽然链接的方法类似，但是其展示的形式却自由多变，如链接的方式，链接指向何处等。而从使用者的角度来说，设计者最重要的是保持链接的友好性。 6.2.1 基本的文本链接 文本的链接是页面中最常见的链接形式，也是最基本的一种链接使用。一般文本链接中，最初文字上的超链接呈蓝色，文字下面有一条下划线，如果超链接已经被浏览过了，文本颜色就会发生改变，默认是紫色。设置文本的链接时，在文本的段落中直接使用a标签。如代码6-4是一个文本的链接。 【本节示例参考：资料光盘\第6章\6-4 文本链接.html】。 6.2.2 基本的图像链接 图像链接的使用频率和文本链接一样相当高，设置链接的方法和文本无异，在引用图片的代码前面先放入a标签。如下所示： a href=”…” img src=”…” /a 如代码6-5是图像跳转的链接。 【本节示例参考：资料光盘\第6章\6-5 设置图像链接.html】。 6.2.3 把邮箱留给需要联系你的人 a标签不仅能实现网页之间和网页与文件之间的链接，还可以链接到电子邮箱地址。当然，也可以直接在页面中留下电子邮件地址，但是有时候为了突出友好性，而不是直接留下地址，采用将邮箱链接到页面内容上的方式，使用方法如下： a href=”mailto:邮箱地址”链接锚点对象 /a “mailto”就是“mail to”的连写，指“把邮件发送到”。在这行代码中，还可以给新邮件填好邮件的主题和正文，这样打开电子邮件程序就填好了收信人的新邮件。这通过属性“subject”和“body”来实现，使用的时候有些特别，需要放在两个问号之间，如代码6-6链接到的邮箱地址。 6.2.4 在同一页面中快速查找信息 页面除了和页面之外的文件或者程序链接外，而且也可以和同一页面中的内容进行链接，这种情况通常用于导航，为了是浏览页面的人直接可以跳到自己需要的信息版块上。由于是在同一页面内实现链接，也就是说，页面链接的路径就是在同一页面内，所以在HTML语言中使用a标签中的“id”属性来确定路径位置。通过以下两个步骤可以理解这种代码的用法。 （1）要确定链接的锚点对象，不同于页面和外部文件链接的方式在于，链接的路径由于在同一页面内，这里需要使用“#”来引用同一页面中的内容。代码写为： a href=#... a （2）需要在页面中设定出链接的目标。使用的就是“id”属性。 a id=… 6.3 提高页面链接的友好度 在设置了超链接的文本中，链接的内容都带有下划线，浏览过的字体