跳转定义_HTML中的超级链接和锚点跳转

最新推荐文章于 2021-07-16 11:40:48 发布

水天姬

最新推荐文章于 2021-07-16 11:40:48 发布

阅读量1.2k

点赞数

文章标签：跳转定义

本文链接：https://blog.csdn.net/weixin_33542589/article/details/112516781

版权

本文介绍了HTML中超级链接的使用，包括<a>标签、href、target和title属性，以及锚点跳转的基本概念，包括如何设置锚点和进行跨页面锚点跳转。

摘要由CSDN通过智能技术生成

好好学习，天天向上

本章主要是HTML标签中，超级链接和锚点跳转的基础使用

一、超级链接

HTML 使用超级链接与网络上的另一个文档相连。超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，可以点击这些内容来跳转到新的文档或者当前文档中的某个部分

Ⅰ、超级链接标签

在 HTML 中使用 <a> 标签可以创建连接
a 全称 anchor，锚的意思
<a> 为双标签
作用：在指定的位置添加超级链接，提供用户进行点击和跳转
<a> 标签可以实现两种跳转：跨页面跳转、页面内跳转。实现跳转的方式需要用到一些标签属性

<a> 链接内容 </a>

Ⅱ、href属性

href 全称 hypertext reference，超文本引用，用于规定链接的目标地址
属性值：链接目标的路径地址。可以使用相对路径或网址形式的绝对路径
href 属性非常重要，<a> 标签要想实现点击跳转，必须设置该属性，拥有这个属性 <a> 标签在鼠标移上时才会显示一个小手指针状态

<a href = "www.xxx.com"> 超级链接 </a>

Ⅲ、target属性

使用target 属性，可以定义被链接的文档在何处跳转显示
属性只有两种：

_self: 默认值，表示跳转的页面在当前窗口打开，不会打开新的窗口
_blank: 空白的，表示跳转的页面在新窗口打开

<a fref = "www.xxx.com" target= "_blank" > 超级链接并打开新的窗口 </a>

Ⅳ、title 属性

title设置的是鼠标悬停时的提示文本，与 <img> 标签类似
属性值：自定义的文字内容
该属性用于给用户进行提示，该链接的功能是什么，提高用户的体验

<a href="拉勾教育 - 拉勾旗下教育平台" target="_blank" title="点击跳转到源网页">
    <img src="lagou.jpg" width="100px" height="100px">
</a>

示例图：

二、锚点跳转

这种跳转方式实现的是从某个位置跳转到同页面的另一个位置
制作方法分为两种步骤，分别是设置锚点、添加链接
设置锚点，也就是设置跳转目标位置，有两种设置方式

在目标位置找到任意一个标签，给它添加 id 属性， id 属性值必须唯一性
在目标位置添加一个空的 <a> 标签，只设置一个 name 属性， name 属性设置必须唯一性

<h1 id= "h2">目标位置</h1>

<a name= "maodian"> </a>

添加链接到锚点，在需要点击的位置设置 <a> 标签，给 a 的 href 属性设置属性值为 #id 属性值或者 # 加 a 的 name 属性值完整的跨页面锚点路径

 <a href="#mb"> 页面内跳转文件的纯文本 </a>

Ⅰ、跨页面锚点跳转

这种跳转方法综合了跨页面跳转和锚点跳转
制作方法也分为两个步骤，分别是设置锚点、添加链接

设置锚点，方式与页面内锚点跳转一致，在目标网页的指定位置设置使用 id 或 name 属性
链接到锚点，添加超级链接时 href 属性需要更改，属性值写为页面的路径 #id

<a href="a.html#text"> 页面内跳转文件的纯文本 </a>

示例：

index.html

<html>
    <head>
        <title> 超级链接和锚点跳转 </title>
    </head>

    <body>
        <a name="dingbu" ></a>

        <!-- 超级链接跳转  target="_blank" 打开新的窗口 -->
        <a href="https://www.lagou.com" target="_blank"> 拉勾网 </a>
        <a href="https://www.baidu.com" title="点击跳转到百度"> 百度 </a>

        <br>

        <!-- 锚点跳转 -->
        <a href="#h1">11</a>
        <a href="#maodian">22</a>

        <br>

        <!-- 跨页面锚点跳转 -->
        <a href="demo.html#demo" target="_blank"> 点击跳转到 demo页面 </a>

        <!-- 设置空白高度 以方便测试 -->
        <div style="height: 1000;"></div>

        <h1 id="h1"> 这是第一个跳转的位置 </h1>
        <a href="#dingbu" > 返回顶部 </a>

        <!-- 设置空白高度 以方便测试 -->
        <div style="height: 1000;"></div>

        <a name="maodian" ></a>
        <p> 第二个跳转到这里 </p>
        <a href="#dingbu" > 返回顶部 </a>

    </body>

</html>

demo.html

<html>
    <head> 
       <title> 跨页面跳转在这里 </title>
    </head>

    <body>
        <p id="demo" >跳转过来了呀</p>
    </body>
</html>

水天姬

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫