1:在一个文档中可以创建以下几种类型的链接:
*链接到其他文档或者文件(图像、影片、PDF或者声音文件)
*命名锚点链接,此类链接跳转至文档内的特定位置 <a href="#section1">第二段</a>
*电子邮件链接,此类链接新建一个收件人地址已经填好的空白电子邮件
*空链接和脚本链接,此类链接使用户能够在对象上附加行为,或者创建执行javascript代码的链接
2:通过target定义链接的目标窗口
属性值 | 功能描述 |
_blank | 将链接的文档载入一个新的、未命名的浏览器窗口 |
_parent | 将链接的文档载入包含该链接的框架的父框架集或者窗口。如果包含链接的框架没有嵌套,则相当于_top;链接的文档载入整个浏览器窗口 |
_self | 将链接的文档载入链接所在的同一框架或者窗口,此目标是默认的,所以通常不指定它 |
_top | 将链接的文档载入整个浏览器窗口,从而删除所有框架 |
用a元素定义的连接不可以被嵌套,虽然浏览器仍然会呈现,也就是说,a元素
不能包含其他a元素,link元素也同样不能嵌套
3:title属性定义提示信息
<a href="http://www.w3.org/" title="这将前往W3C官方站点">链结到W3C</a>
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 | 预定用于手持设备 |
| 预定用于分页的,不透明的材料,用于屏幕上的文档打印预览模式 |
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>
<title>第二季</title>
<link rel="index" href="../index.html">
<link rel="next" href="chapters3.html">
<link rel="prev" href="chapters1.html">
</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></title>
<link hreflang="zh-tw"
title="繁体中文文档"
rel="alternate"
href="../index_big5.html"
</head>
下面的代码表示当前文档是简体中文版,链接指向的是该文档的打印版本,还定义了文档的类型
<head>
<title></title>
<link media="print"
title="打印版本"
rel="alternate"
href="../index_big5.html"
</head>
11:链接到版权声明
当rel属性的值为license时,表明该链接指向的文档是当前文档的版本声明,在HTML4时,使用copyright作为属性值来表示版权声明,现在使用license取代之。
<head>
<title>当前文档</title>
<link rel="license" href="../copyright.html">
</head>
12:链接到帮助
当rel属性的值为help时,表明该链接指向的文档是当前文档的帮助文档。
<head>
<title>当前文档</title>
<link rel="help" href="../help/more.html">
</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描述文档的地址