HTML与CSS教学-第七章 创建超链接

 

第七章 创建超链接
本章要点
超链接的概念
连接标记
使用CSS样式设置书签格式
图片连接
图片映射

目录：
  7.1 超链接概述
  7.2 超链接标记a及其属性
  7.3 利用CSS样式设置书签格式
  7.4 图片链接
  7.5 图片映射链接
 

7.1 超链接概述
  超链接是一个网站的灵魂。一个网站是由多个页面组成的，创建超链接有利于页面与页面之间的跳转，从而将整个网站中的页面有机地连接起来，它是网页中至关重要的元素。一般情况是将鼠标光标移至超连接处时显示为下划线，单击鼠标即可跳转到超链接的相应页面。
 每一个网页都有独一无二的地址，即URL。

7.2 超链接标记a及其属性
超链接标记虽然在网页设计制作中占有不可替代的地位，但是其标记只有一个，那就是<a>标记。本章介绍的超链接应用都是基于<a>标记基础上的。
<a href=”file_url” >链接文字</a>

href指定链接地址
name给链接命名
title给链接提示文字
target指定链接的目标窗口
accesskey链接热键

 每一个文件都有自己的存放位置和路径，理解一个文件到要链接的文件之间的路径关系式创建超链接的根本。 
 URL——统一资源定位器，指的就是每一个网站都具有的独立的地址。同一个网站下的每一个网页都属于同一个地址下，但是，当创建网页时，不可能也不需要为每一个链接都输入完全的地址。我们只需要确定当前文档同站点根目录之间的相对路径关系。因此，链接可以分为以下3种：
  
  绝对路径
  相对路径
  根路径

1.绝对路径
  
  绝对路径为文件提供完全的路径，包括适用的协议，如http,ftp,rtsp等。一般常见的有：
  http://www.163.com
  ftp://202.136.254.1
  当链接到其他网站中的文件时，必须使用绝对链接。

2.相对路径
  相对路径是最适合网站的内部链接的。只要是属于同一网站之下的，即使不在同一个目录下，相对链接也非常适合。
  相对链接的使用方法为：
  如果链接到同一目录下，则只需输入要链接文档的名称。
  如链接到下一级目录中的文件，只需先输入目录名，然后加“/”，再输入文件名。
  如链接到上一级目录中的文件，则先输入“../”，再输入目录名、文件名。

3.根路径  
  根目录相对地址同样适用于创建内部链接，但大多数情况下，不建议使用此种地址形式。它在下列情况下使用：
    当站点的规模非常大，放置于几个服务器上时
    当一个服务器上同时放置几个站点时
  根目录相对地址的书写形式也很简单，首先以一个斜杠开头，代表根目录，然后书写文件夹名，最后书写文件名。

7.2.1 内部链接
  所谓内部链接，指的是在同一个网站内部，不同的HTML页面之间的链接关系。在建立网站内部链接的时候，要考虑到使链接具有清晰的导航结构，使用户方便地找到所需内容的HTML文件。

7.2.2 书签链接
  建立书签链接分为两步，一是建立书签，二是为书签制作链接。
  建立书签：<a name=”name”>文字</a>
  书签链接：<a href=”#name”>文字链接</a>
7.2.3 外部链接
  所谓外部链接，指的是跳转到当前网站外部，与其他网站中页面或其他元素之间的链接关系。这种链接在一般情况下需要书写绝对地址。
  制作外部链接的时候，使用URL统一资源定位符来定位万维网信息，这种方式可以简洁、准确地描述信息所在的地点。
  常见的URL格式如表所示。
www http://  进入万维网
ftp ftp://  进入文件传输服务器
news news:// 启动新闻讨论组
email mailto: 启动邮件

1.链接外部网站
 <a href=”http://”>文字链接</a>

2.链接FTP
 <a href=”ftp://”>文字链接</a>

3.链接到news新闻组
 <a href=”news://”>文字链接</a>

4.发送e-mail
 <a href=”mailto:a@b.c”>发送邮件</a>
 <a href=”mailto:a@b.c?subject=content”>邮件主题</a>
 <a href=”mailto:a@b.c?cc=a@b.c”>抄送</a>
 <a href=”mailto:a@b.c?bcc=a@b.c”>密件抄送</a>

7.2.4 文件（非HTML页面）链接
  
  除了链接到HTML页面的超链接外，还可以制作提供文件下载的链接。如果希望制作下载文件的链接，只需在链接地址处输入文件所在的位置即可。当浏览器用户单击链接后，浏览器会自动判断文件的类型，以做出不同情况处理。
  <a href=”file_url”>文字链接</a>
  file_url代表文件所在的路径，可以写下相对路径，也可以写下绝对路径。

7.3 利用CSS样式设置书签样式
  超链接在默认情况下，链接被显示为带下划线，未被查看过时为蓝色，访问过的为紫色。我们可以通过CSS来设置链接不同状态中的样式 。链接分为5个状态，它们的视觉外观根据当前状态而改变。这些状态如下：
  link链接在没有任何操作之前的标准状态
  visited链接被单击之后的状态
  hover鼠标指针悬停在连接上时的状态
  focus链接获得焦点时的状态
  active链接正在被单击时的状态
  在默认外观中，link为蓝色，visited为紫色，active为红色，三者都带有下划线。
  使用CSS可以调节不同状态下链接的字体、大小、颜色、加粗斜体、下划线等格式。

7.4 图片连接
虽然链接主要是基于文本的，但是可以用一个链接来包装一个图像，从而使其变成一个链接。图像的链接标记和文字是相同的。都是<a>标记。
 区别在于，文本的链接在超链接标记<a></a>之间输入文本
 <a href=”file_url” >链接文字</a>
 图片的链接在<a></a>之间输入的是图片的代码。
 <a href=”file_url” ><img src=”img_url”></a>
 另外，图片默认情况下没有边框，一旦添加链接后会有蓝色边框，想要去掉边框，可在<img>标记中将border属性值设为0，如<img src=”img_url” border=”0”>，或者在CSS样式表中将图片标记img的样式统一设成img{border:0;}。

7.5 图片映射链接
图像映射（image map）使你可以在一个单独图像中定义多个链接。例如，如果你有一个气象图，可以使用一个图像映射链接到各个地区的气象预报。图像映射中可单击的范围可以是基本形状（矩形或者圆形），也可以是复杂的多边形。