- 零基础HTML+CSS+JavaScript学习笔记
- 明日科技编著
- 1021字
- 2025-02-26 15:27:44
3.3 链接标签
链接的全称为超文本链接,也称超链接,是HTML的一个很强大且非常有价值的功能。链接可以实现将文档中的文字或图像与另一个文档、文档的一部分或一幅图像链接在一起。一个网站是由多个网页组成的,网页之间依据链接确定相互的导航关系。当在浏览器中单击这些对象时,浏览器可以根据指示载入一个新的网页,或者转到网页的其他位置。常用的链接分为文本链接和书签链接。下面具体介绍这两种链接的使用方法。
3.3.1 文本链接

在网页中,文本链接是最常见的。文本链接通过网页中的文件和其他文件进行链接,其语法格式如下:

其中,href为链接地址,是Hypertext Reference的缩写;target为打开新窗口的方式。
target属性主要有以下4个属性值。
(1)_blank:新建一个窗口打开。
(2)_parent:在上一级窗口打开,常在分帧的框架网页中使用。
(3)_self:在同一窗口打开,默认值。
(4)_top:在浏览器的整个窗口打开,将忽略所有框架结构。
学习笔记
在上述语法中,链接地址可以是绝对地址,也可以是相对地址。
下面通过一个实例,在网页中添加文字导航和图像,并通过<a>标签为每个导航栏添加链接。具体代码如下:

完成代码编辑后,在浏览器中运行,网页效果如图3.5所示,当单击“手机酷玩”“精品抢购”“手机配件”时,网页会跳转到51购商城的欢迎界面,如图3.6所示。

图3.5 51购商城导航网页

图3.6 51购商城的欢迎界面
学习笔记
在填写链接地址时,为了简化代码,并避免文件位置改变而导致链接出错,一般使用相对地址。
3.3.2 书签链接

在浏览网页时,如果网页的内容较多、网页过长,那么需要不断拖动滚动条,很不方便(如果要寻找特定的内容,那么将更加不方便)。这时如果在该网页或另外一个网页上建立目录,那么浏览者只要单击目录上的项目就能自动跳转到网页相应的位置进行阅读,这样无疑是方便的,并且还可以在网页中设定诸如“返回页首”之类的链接。这就称为书签链接。
建立书签链接分为两步:一是建立书签,二是为书签制作链接。
下面通过一个实例,在网页中添加书签链接,在单击文字时,网页会跳转到相应位置。实现过程如下。
(1)建立书签。分别为每一版块位置后面的文字(如“华为荣耀”“华为p8”等)建立书签。部分代码如下:

(2)给网页导航部分的书签建立链接,代码如下:


完成代码编辑后,在浏览器中打开文件,网页效果如图3.7所示,当单击“华为荣耀”“华为mate8”等文字时,网页会跳转到相应位置。

图3.7 实现在51商城手机网页中添加书签链接
学习笔记
本实例使用了CSS样式,有关CSS的内容,请参照第4章。另外,上述实例的详细代码请参照配套资源中的源码。