HTML超链接标签——a标签、锚点、base标签、假链接标签

最新推荐文章于 2024-09-16 14:51:13 发布

Ariel_欢

最新推荐文章于 2024-09-16 14:51:13 发布

阅读量8.2k

点赞数 1

分类专栏： B/S # HTML学习

本文链接：https://blog.csdn.net/Ginny97/article/details/112415338

版权

B/S 同时被 2 个专栏收录

9 篇文章 1 订阅

订阅专栏

HTML学习

7 篇文章 2 订阅

订阅专栏

3.要想实现通过a标签跳转到指定的位置分为两步：（重点！！！）

一、超链接标签——a标签

什么是超链接？

HTML文本之所以被称为超文本，就是因为它具有普通文本所不具有的超链接功能。我们在浏览HTML文档时，可以通过点击关键字（一个超链接），来跳转页面。
要让超链接能够正常工作，就需要有一种方法来定位Internet上的资源，这是通过URL来实现的。URL全称是Uniform Resource Locator，统一资源定位符。URL由三部分组成：协议，主机名称，文件目录和文件名。例如：http//www.sunxin.org/video/video.asp,http即表明用的是超文本传输协议，从主机名（域名）为vwvw.sunxin.org的服务器上访问video目录下的video.asp文件。
建立一个链接的语法如下：<a href="URL">…</a>
属性href用于指定链接的目标，目标地址由URL定位，在开始标签<a>和结束标签</a>之间输入的文本将作为浏览器中显示的链接文本。

1.什么是a标签？

a标签的作用：用于控制页面与页面之间跳转的

a标签的格式：<a href="URL">需要展现给用户查看的内容</a>

示例：<a href="http://www.w3school.com.cn">This is a link</a>

注释：在 href 属性中指定链接的地址。

2.a标签中的属性：

a标签中有一个target的属性：专门用于控制如何跳转

target属性值：

_self:用于在当前选项卡中跳转，不新建界面跳转，默认就是_self

_blank：用于在新的选项卡中跳转，新建界面。

_parent:这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中，那么它与目标 _self 等效。

-top:这个目标使得文档载入包含这个超链接的窗口，用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。

提示：这些 target 的所有 4 个值都以下划线开始。任何其他用一个下划线作为开头的窗口或者目标都会被浏览器忽略，因此，不要将下划线作为文档中定义的任何框架 name 或 id 的第一个字符。

a标签中还有一个title属性：a标签中的title和img标签中的title一样，都是用来控制鼠标悬停时显示的提示文本的。

3.注意点：

1.a标签不仅可以让文字点击，还可以让图片也能够被点击

如：文字：

<a href="https://www.baidu.com/">百度</a>

图片：

<a href="https://baike.baidu.com/item/%E5%8D%8E%E6%99%A8%E5%AE%87/6064097?fr=aladdin">

   <img src="花花.jpg"width=" 150">

</a>

2.一个a标签必须有一个href属性，给href属性赋值，否则a标签不知道要跳转到什么地方

3.通过a标签的href属性指定一个URL地址，那么必须在地址前面加上http://或者https://

4.a标签的href属性除了可以指定一个网络地址以外，还可以指定一个本地地址（找本地的.html文件）。有相对路径和绝对路径两种方式：

例如：

<a href="img标签.html">img标签</a>       <!--相对路径-->
<a href="../img标签.html">img标签</a>    <!--相对路径-->


<a href="iF:\学习资料\计算机学习资料\BS\10 BS实践\02 HTML\HTML学习\代码\img标签.html">img标签</a>       <!--绝对路径-->

需要注意的是：

由于绝对路径是自己电脑上的路径，是固定的，在别人的电脑上不一定有此相同的路径，因此用绝对路径的方式可能导致找不到相应的链接而出问题，所以在实际应用中要避免使用绝对路径，尽量使用相对路径。

二、锚点

1.什么是锚点？

锚点：是网页制作中超级链接的一种，又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接，运用相当普遍。
英文名：anchor
锚点用法：锚点用id属性来设置，一个a标签如果设置id属性(或者name属性--现在较多不支持），那么就是页面的一个锚点。

简单理解：前边说到a标签是用于界面间跳转的超链接，那么锚点就是通过a标签的id属性，实现当前界面内部位置的跳转。

2.如何实现锚点？

要想通过a标签跳转到指定的位置，那么必须告诉a标签一个独一无二的身份证号码，这样a标签才能在当前界面中找到需要跳转到的目标位置。

简单理解即：（1）需要一个标记；（2）跳转到标记

如何给HTML中的标签绑定一个独一无二的身份证号呢？

在HTML中，每一个标签都有一个名称叫做id的属性，这个属性就是用来给标签指定一个独一无二的身份证号码的。

3.要想实现通过a标签跳转到指定的位置分为两步：（重点！！！）

3.1给目标位置的标签添加一个id属性，然后指定一个独一无二的值

3.2告诉a标签你需要跳转到的目标标签对应的独一无二的身份证号码是多少

4.格式：

<!--在需要跳转的地方，对应独一无二的目标位置id-->

<a href="#center">跳转到中部</a>



<!--给目标位置添加一个id属性，唯一标识这个位置-->

<h2 id="center">我是中部</h2>

5.注意点：

1.通过我们的a标签跳转到指定的位置，是没有过渡动画的，直接一下子就跳转到指定位置。如果需要有滚动过渡动画的，就不能用a标签做

2.a标签除了可以跳转到当前界面的指定位置之外，还可以在跳转到其他界面的时候直接跳转到其他界面的指定位置。

三、base标签

1.base标签是什么？

base标签：专门用来统一的指定当前网页中所有的超链接（a标签）需要如何打开：

例如： <base target="_blank"> 就表示让所有的超链接都新建一个页面打开。

2.注意点：

1.base标签必须写在head标签的开始标签和结束标签之间；

2.如果既在base中指定了target又在a标签中指定了target，那么浏览器会按照a标签中指定的来制定。

代码示例：

<head>

    <base target="_blank">

</head>


<body>

<!--这俩在a标签中没有指定target属性，会按照base标签中的_blank来执行，也就是会新建一个界面-->

    <a href="https://www.baidu.com/">百度</a>

    <a href="https://www.baidu.com/s?ie=UTF-8&wd=%E6%B7%98%E5%AE%9D">淘宝</a>



<!--这个在a标签中指定了target属性，会按照a标签中的_self来执行，也就是不新建一个界面-->

    <a href="https://www.baidu.com/"target="_self">百度</a>



</body>