欢迎您访问 最编程 本站为您分享编程语言代码,编程技术文章!
您现在的位置是: 首页

理解 HTML 中的链接元素:a 标签、锚点、base 标签和伪链接标签

最编程 2024-08-02 14:45:15
...

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标签除了可以跳转到当前界面的指定位置之外,还可以在跳转到其他界面的时候直接跳转到其他界面的指定位置。

 

推荐阅读