HTML超链接概述

在HTML中，我们点击一段文本(超链接默认情况是一个“行内标签”)，或者一个按钮（该标签内能包含任意类型的HTML元素，当它包含的内容不仅仅为文本，或不含文本时，它会表现得像一个按钮），当前页面会跳转到另外一个页面，或在一个新的页面中打开，我们将这个文本或按钮叫做“超链接”。超链接的必要属性是“href”（Hypertext Reference，超文本引用。如果没有这个属性，<a>标签会类似于一个<span>一样的文本标签，且不会给文字设置颜色和下划线），它的属性值决定它将跳转到的文件的URL。文件类型可以是一个“http/https”协议的网站，也可以是一个站内网页，一个电子邮件地址，一张图片、一个文本文件等可以显示内容的文件，甚至还可以是一个应用程序。

运行效果：

除此之外，超链接<a>标签还有一个比较实用的属性“target”，它规定“href”属性中指定的网页或文件以何种方式行进跳转或打开，他们有以下属性值：

_blank: 在一个新的浏览器窗口或标签页中打开页面或文件
_self: 在当前浏览器窗口打开页面或文件
_parent: 在框架的父级打开页面或文件
_top: 在框架的最顶层打开新的页面或文件（若包含多个框架的嵌套）
“iframe”的“name”属性的值: 通过将<a>标签的href属性设置为需要打开的文件，并将“target”的值设为页面中一个嵌入式框架<iframe>的“name”属性的值，使文件内容在这个<iframe>内打开

利用超链接制作“锚点”

“锚点”是网页制作中超级链接的一种，又叫命名锚记。使用命名锚记可以在文档中设置标记，这些标记通常放在文档的特定主题处或顶部。然后可以创建到这些命名锚记的链接，这些链接可快速将访问者带到指定位置。

将<a>标签的“href”属性设置为“#”+“指定元素的ID值”后，该超链接不再是进行页面间的跳转或是文件的打开了，而是将页面滚动到本页面中ID属性值和“href”属性值“#”后的值所对应的值的地方，页面滚动的目标元素的上边缘将和浏览器内容窗口上边缘重合。可以通过下面这样一个例子进行理解：

运行效果：

打开新窗口查看

利用超链接下载指定文件

<a>标签除了能跳转到页面、文件，跳转页面位置，指定<iframe>内嵌框架打开指定页面、文件，在HTML5中还能够定义一个文件的下载，并设置下载文件的名字。要具有这个功能，我们需给它加上“download”属性，并指定一个文件下载后的名称。

运行效果：

超链接的回到顶部按钮

在页面中加入<a href="#top">回到顶部</a>按钮，通过“固定定位”属性将它定位到页面合适位置（这是比较常用的做法，实际上该按钮放置于<body>标签对内的任何地方都是没问题的，但除了一些特殊情况，下面会提到），在点击该按钮后会让页面立刻回到滚动条的顶部。而且在页面中是不需要定义一个id名为“top”的锚点的，“#top”这个值是浏览器对HTML的“href”属性的自带功能。所以若页面中使用了这种方式让页面回到顶部的话，当前页面的所有元素都要避免使用“top”这个id值，否则该功能会失效。

除此之外，还有两点需要注意：

用<a href="#top">这种方式回到页面顶部它只对当前页面最顶层生效，对<iframe>标签内通过“src”属性指定的页面是无效的
通过Ajax异步加载外部内容到当前页面内的某个高度不大于当前窗口的元素，并在该元素内部生成滚动条的，这种回到顶部的方式也不能生效（因为滚动条出现在元素内部，而body没有产生滚动条）

如果自己开发的页面出现了以上阐述的两种情况及类似情况，想实现回到页面顶部的功能，就得通过JS去显示了。

超链接的rel属性

该属性规定当前文档与被链接文档之间的关系，仅当超链接中包含“href”属性时可用。在新的W3C规范当中，为该属性增加了一些用于在网络安全、隐私安全和搜索引擎优化（SEO）方面的属性值，使得该属性开始成为网页规范审核（Audits）中的一个必要项。

在新的“JSHint”规范中，如果超链接含有“target="_blank"”而没有“rel="noopener noreferrer"”这样的属性“JSHint”就会报出错误。

该属性可以同时设置多个值，每个值中间用空格进行分割。目前可用的值有：

alternate: 链接到文档的替代版本（例如打印页、翻译或镜像）
help: 链接到帮助文档
prev: 链接到集合中的上一个文档
next: 链接到集合中的下一个文档
archives: 链接到文档集或历史数据
author: 链接到文档的作者
bookmark: 用作书签的永久URL
external: 链接到外部文档
first: 链接到集合中的第一个文档
last: 链接到集合中最后一个文档
index: 链接到文档的索引
license: 链接到文档的版权信息
search: 链接到文档的搜索工具
sidebar: 链接到应该在浏览器边栏中显示的文档
tag: 当前文档的标签名
up: 提供指向一个文档的链接。该文档提供当前文档的上下文关系
nofollow: 链接到未认可的文档，比如付费链接。现在，以Google为首的公司使用该值来规定其搜索引擎不跟踪该链接
noopener: 阻止浏览器读取访问来源信息。可以用来防止“钓鱼网站”利用安全漏洞来进行攻击
noreferrer: 阻止浏览器发送访问来源信息

这个属性的大部分值是不被浏览器使用的，只是搜索引擎可以利用该属性获得更多有关链接的信息。而新规范中指出的“noopener”和“noreferrer”是在指定情况，即当超链接的“target”值为“_blank”的时候是必须使用的。

另外，升级到HTML第5版之后，原来版本的一些值已经被删除，由于不再被推荐使用只需要作了解即可。它们是：appendix、chapter、contents、copyright、glossary、section、start、subsection。

嵌入式框架<iframe>

严格意义上讲<iframe>并不属于“超链接”这一讲的的范畴，但它通常不会以独立的形式存在于页面内（课件中的示例运行效果就是<iframe>，它们之所以独立出来，是为了使其代码独立于主页面，以便于各种类型代码的维护），而很多时候它们所显示的页面是超链接中的“href”指定的，而超链接中的“target”属性值指向为该<iframe>的id（有些浏览器不支持id值这种方式）或者name。

该标签具有很多属性，但这些属性最好都是在学习CSS后，用CSS进行设置，这里只要作了解即可。它有一些通用属性，也有一些专用属性，具体如下：

name: 用于设置<iframe>的名称。
width: 用于设置<iframe>的宽度，值可以为像素（不用添加“px”单位）和百分数。
height: 用于设置<iframe>的高度，值可以为像素（不用添加“px”单位）和百分数。
src: 用于设置<iframe>元素内需要显示页面或文件的URL地址，该属性的值可以由与之关联的<a>标签点击设置（通过将<a>标签的“target”属性的值设置为该<iframe>的“name”属性的值进行关联）。
frameborder: 是否显示边框，它只有两个值：
marginwidth: 用于设置<iframe>内容的左侧和右侧的距离，值为像素（不用添加“px”单位），若<iframe>内的页面设置有CSS的“margin”属性，则<iframe>设置的“marginwidth”属性将无效。
marginheight: 用于设置<iframe>内容的顶部和底部的距离，值为像素（不用添加“px”单位），若<iframe>内的页面设置有CSS的“margin”属性，则<iframe>设置的“marginheight”属性将无效。（不过通常也不建议设置“marginwidth”和“marginheight”这两个属性，因为基本上都会被<iframe>所关联网页的CSS样式所覆盖，除非<iframe>所关联的文件并非一个Web页面，而是文本文件、图片文件及其它多媒体文件等）
scrolling: 是否在<iframe>中显示滚动条，有三个可用值：

先来看一个不包含超链接控制的<iframe>的演示示例：

运行效果：

再来看一个含有超链接控制的<iframe>的运用示例

运行效果：

<章节练习>

新建一个文件目录，根目录包含一个“index.html”文件，一个“img”文件夹，一个“html”文件夹和一个“doc”文件夹。“img”文件夹包含一张任意图片，“html”文件夹包含一个叫做“home.html”的文件，“doc”文件夹包含一个叫做“readme.txt”的文件。具体要求如下：

“index.html”文件需要具有两组超链接标签，每组包含三个超链接文本。每组超链接单独占据一行，并且每组超链接内的超链接文本标签之间需要两个“ ”进行分割。另外该页面还需包含一个<iframe>标签对，它需要单独占据一行，宽度为100%，高度为560像素
点击第一组中的超链接文本分别跳转到“html”文件夹内的"home.html"文件、“img”文件夹内的那张图片、“doc”文件夹内的“readme.txt”文件
点击第二组中的超链接文本分别让页面内<iframe>内的页面跳转到“html”文件夹内的"home.html"文件、“img”文件夹内的那张图片、“doc”文件夹内的“readme.txt”文件
通过点击第一组超链接跳转到“html”文件夹内的"home.html"文件需从本窗口打开，“img”文件夹和“doc”文件夹内的文件需在一个新窗口打开
“html”文件夹内的"home.html"文件内容包含一个超链接标签，用于在本窗口（无论是单独的页面还是<iframe>框架内的页面）跳转到“index.html”文件
“doc”文件夹内的“readme.txt”文件的内容为“我是这个网站的自述文件Readme”