超链接-CFANZ编程社区

1：在一个文档中可以创建以下几种类型的链接：

*链接到其他文档或者文件(图像、影片、PDF或者声音文件)

*命名锚点链接，此类链接跳转至文档内的特定位置 <a href="#section1">第二段</a>

*电子邮件链接，此类链接新建一个收件人地址已经填好的空白电子邮件

*空链接和脚本链接，此类链接使用户能够在对象上附加行为，或者创建执行javascript代码的链接

2：通过target定义链接的目标窗口

属性值	功能描述
_blank	将链接的文档载入一个新的、未命名的浏览器窗口
_parent	将链接的文档载入包含该链接的框架的父框架集或者窗口。如果包含链接的框架没有嵌套，则相当于_top；链接的文档载入整个浏览器窗口
_self	将链接的文档载入链接所在的同一框架或者窗口，此目标是默认的，所以通常不指定它
_top	将链接的文档载入整个浏览器窗口，从而删除所有框架

用a元素定义的连接不可以被嵌套，虽然浏览器仍然会呈现，也就是说，a元素
不能包含其他a元素，link元素也同样不能嵌套

3：title属性定义提示信息

4：链接到电子邮件地址

<a href="mailto:zhang-yafei@hotmail.com">给我发邮件</a>

5：链接到任何类型的文件以供下载

<a href="../docs/myWord.doc" type="application/msword">链结到Word档</a>

当点击这个超链接时，浏览器就会下载myWord.doc文件，下载完毕后就会启动word打开。

6：链接介质(media属性)

使用media属性可以向浏览器提示链接所指向的文档适用的介质，例如，指示浏览器文档可以适用于显示器、打印、语音合成器

<a media="print"

title="打印版本"

type="application/postscript"

rel="alternate"

href="../index.ps"

>下载可打印版本</a>

介质描述符	功能描述
screen	预定用于非分页的计算机屏幕
tty	预定用于显示固定宽度字符、终端仿真设备以及仅具有有限显示能力的便携设备
tv	预定用于电视类型的设备(低分辨率、彩色的、有限的滚动能力)
projection	预定用于投影机
handled	预定用于手持设备
print	预定用于分页的，不透明的材料，用于屏幕上的文档打印预览模式
braille	预定用于布莱耶盲文设备，这种设备使用触点作为反馈
embossed	预定用于分页的布莱耶盲文设备
speech	预定用于语言合音器，通常是为了视力有残疾的用户准备的
all	适用于所有设备

7：定义锚点

<!DOCTYPE HTML>
<html>

<head>
<meta charset="gb2312">
<title>Sample</title>
</head>

<body>
<h2 id="section1">1.1.1什麽是WWW(万维网)</h2>
……  一些其他的内容，假定很长  ……<br/>
……  一些其他的内容，假定很长  ……<br/>
……  一些其他的内容，假定很长  ……<br/>
……  一些其他的内容，假定很长  ……<br/>
……  一些其他的内容，假定很长  ……<br/>
……  一些其他的内容，假定很长  ……<br/>
……  一些其他的内容，假定很长  ……<br/>
……  一些其他的内容，假定很长  ……<br/>
……  一些其他的内容，假定很长  ……<br/>
……  一些其他的内容，假定很长  ……<br/>
……  一些其他的内容，假定很长  ……<br/>
……  一些其他的内容，假定很长  ……<br/>
……  一些其他的内容，假定很长  ……<br/>
……  一些其他的内容，假定很长  ……<br/>
……  一些其他的内容，假定很长  ……<br/>
……  一些其他的内容，假定很长  ……<br/>
……  一些其他的内容，假定很长  ……<br/>
……  一些其他的内容，假定很长  ……<br/>
……  一些其他的内容，假定很长  ……<br/>
……  一些其他的内容，假定很长  ……<br/>
……  一些其他的内容，假定很长  ……<br/>
……  一些其他的内容，假定很长  ……<br/>
……  一些其他的内容，假定很长  ……<br/>
……  一些其他的内容，假定很长  ……<br/>
……  一些其他的内容，假定很长  ……<br/>
……  一些其他的内容，假定很长  ……<br/>
……  一些其他的内容，假定很长  ……<br/>
……  一些其他的内容，假定很长  ……<br/>
……  一些其他的内容，假定很长  ……<br/>
……  一些其他的内容，假定很长  ……<br/>
……  一些其他的内容，假定很长  ……<br/>
……  一些其他的内容，假定很长  ……<br/>
……  一些其他的内容，假定很长  ……<br/>
……  一些其他的内容，假定很长  ……<br/>
……  一些其他的内容，假定很长  ……<br/>
……  一些其他的内容，假定很长  ……<br/>
<br>
<a href="#section1">检视第一部分内容</a>





</body>

</html>

链接到命名锚点：

绝对URI: <a href="http://www.capinfotech.com/ju/index.html#anchor-one">绝对URI</a>

相对URI: <a href="../http://www.capinfotech.com/ju/index.html#anchor-one">相对URI</a>

链接到同一个文档: <a href="#ahchor-one">链接到同一个文档</a>

8：link的rel属性用来定义链接关系

在HTML头部可以使用多个link元素，属性rel指定要链接的文档与当前文档的关系，属性值index, next, pref阐明了链接的意义

<head>

</head>

属性值

alternate -- 定义交替出现的链接
appendix -- 定义文档的附加信息
bookmark -- 书签
canonical -- 规范网页是一组内容高度相似的网页的首选版本
chapter -- 当前文档的章节
contents
copyright -- 当前文档的版权
glossary -- 词汇
help -- 链接帮助信息
index -- 当前文档的索引
next -- 记录文档的下一页.(浏览器可以提前加载此页)
nofollow -- 不被用于计算PageRank
prev -- 记录文档的上一页.(定义浏览器的后退键)
section -- 作为文档的一部分
start -- 通知搜索引擎,文档的开始
stylesheet -- 定义一个外部加载的样式表
subsection -- 作为文档的一小部分

9：使用link元素说明文档集合关系

一系列文档组成的集合可以包含起始页、目录页、索引表、术语表、正文章节以及小节、附录等，并且文档之间还有一定的层级关系

使用link元素可以说明这些文档之间的关系：

*index

index说明当前文档处于一个文档集合中，链接指向的文档位于文档层级最顶层，是为当前文档提供索引的一个文档，也可以和up关键字联合使用

*first

如果当前文档是一系列文档中的一个，该值就表明链接指向的文档是文档的第一个文档，处于向前兼容的考虑，关键字begin和start也可以实现相同的目标。

*last

如果当前文档是一系列文档中的一个，该值就表明链接指向的文档是文档的最后一个文档，处于向前兼容的考虑，关键字end也可以实现相同的目标。

*next

如果当前文档是一系列文档中的一个，该值就表明链接指向的文档是当前文档的下一个文档，浏览器可以使用该值来决定预加载下一个文档，从而可以节约下载的时间

*prev

如果当前文档是一系列文档中的一个，该值就表明链接指向的文档是当前文档的前一个文档。一些浏览器也可以使用关键字previous实现该功能。

*up

up表明当前文档处于一个文档集合中，链接指向的文档是当前文档最近的一个上层。

可以在rel属性值中重复使用up关键字向更顶部的层次导航，up关键字之间使用空格隔开，每个up关键字都是远离当前文档向上一个层级，如果仅是一个up关键字，

就表示当前文档的最近的一个上层

如果和index关键字配合使用，up关键字的数量就表示当前页相对于最顶层的深度。

<!DOCTYPE HTML>
<html>

<head>
<meta charset="gb2312">
<title>Sample</title>
</head>

<body>
<nav>
  <p>
    <a href="/" rel="index up up up">主页</a> >
    <a href="/products/" rel="up up">产品页</a> >
    <a href="/products/washers/" rel="up">洗衣机</a> >
    <a>二手产品</a>
  </p>
  <p>
    <a href="/" rel="index up up">主页</a> >
    <a href="/second-hand/" rel="up">二手产品</a> >
    <a>洗衣机</a>
  </p>
</nav>


</body>

</html>

10：链接打替代版本

当rel属性的属性值为alternate时，表明该链接指向的文档是当前文档的一个替代版本

当和herflang属性配合使用时，表示的是当前文档的另一个语言版本，当和media属性配合使用时，表示的是当前文档的为另一个不同介质设计的版本

下面的代码表示当前文档是简体中文版，链接指向的是繁体中文版

<head>

title="繁体中文文档"

rel="alternate"

href="../index_big5.html"

</head>

下面的代码表示当前文档是简体中文版，链接指向的是该文档的打印版本，还定义了文档的类型

<head>

<link media="print"

title="打印版本"

rel="alternate"

href="../index_big5.html"

</head>

<head>

</head>

12：链接到帮助

当rel属性的值为help时，表明该链接指向的文档是当前文档的帮助文档。

<head>

</head>

13：声明可作为搜索的资源

search关键字指定一个链接资源，使用该资源可以搜索当前文档的内容以及与当前文档相关联的网页

例如，OpenSearch描述文档定义了如何实现autodiscover搜索功能，可以使用下面代码声明：

<link rel="search"

type="application/opensearchdescription+xml"

href="http://example.com/content-search.xml"

title="Content search" >

<link rel="search"

type="application/opensearchdescription+xml"

href="http://example.com/comment-search.xml"

title="Comments search" >

type属性值必须是application/opensearchdescription+xml，href属性值必须指向一个OpenSearch描述文档的地址