前端学习第三章——a标签（超链接）

最新推荐文章于 2024-05-09 07:31:20 发布

小简(JanYork)

最新推荐文章于 2024-05-09 07:31:20 发布

阅读量5.1k

点赞数 11

分类专栏：前端学习入门到精通 HTML5基础知识文章标签：前端 html css html5 前端开发

本文链接：https://blog.csdn.net/qq_60750453/article/details/121214549

版权

HTML5基础知识同时被 2 个专栏收录

14 篇文章 10 订阅

订阅专栏

前端学习入门到精通

7 篇文章 3 订阅

订阅专栏

a标签（超链接）

超链接的本地跳转

功能性链接

a标签（超链接）

我们浏览一个网页，比如京东、天猫、腾讯视频、csdn、掘金，这些网站，我们总是可以看到一些按钮或者图片或者文字，点击之后可以跳转到其他页面或者其他网站，这是怎么做到的呢？在HTML中，有一个标签，可以设置点击文字跳转的效果—— a 标签

看看我们a标签的效果

<!DOCTYPE html>
<html lang="Zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="https://baidu.com">百度</a>
    <a href="https://taobao.com">淘宝</a>
</body>
</html>

我们这里写了两个a标签，分别是跳转百度与淘宝，我们来分析分析a标签的格式
a标签是双标签，也就是说他是这样的:

由<a>开头，以</a>结尾
<a href="填跳转链接">填显示文字</a>

我们的a标签的开始标签里面，有一个属性，用于指定跳转的链接，这个是必写的属性哦！
我们通过href来指定需要跳转的链接，然后再开头标签和结尾标签的中间写显示的文字，然后点击文字就可以跳转了！
效果是这样的:

仔细看还会发现一个问题，这两个链接显示的文字颜色不一样，这是因为什么？

因为第一个链接，也就是百度，是我点击过浏览过的网站，而淘宝是没有进入过的网站，这里是一个小常识，记住一些就可以！

当我进入一次淘宝链接后，颜色自然会变得和百度一样

这里我提出一个知识点——一个网站的前端是由许多个HTML文件一起构成的，那当我们点击随意一个网站上的某些点击框或按钮（比如注册/登录）就是通过超链接跳转到本地的其他HTML页面（有一个HTML文件专门负责注册页面，当我们点击注册，就是页面跳转到了注册的HTML页面），当然，也有使用不同二级域名绑定不同页面的！

这里不懂没有关系，慢慢就会知道了，我们主要是要学习超链接怎么跳转本地HTML文件！

超链接的本地跳转

先看图：

再看代码：

<!DOCTYPE html>
<html lang="Zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <a href="/index.html">点击跳转</a>
</body>
</html>

我们超链接是跳转到一个http或者https开头的链接，也就是其他网站的地址，而我这个代码的href属性的值并不是链接，而是使用/开头，并且接上了我同文件夹中另一个HTML文件的文件名，这样这个超链接是什么作用呢？

这个超链接自然就是我们上面所讲的跳转本地文件的超链接了，这个链接可以跳转到本地的其他HTML页面

小提示：必须要在一个文件夹哦！

这个应该很容易理解吧！！但是你们也没有看到许多网站上有一个回到顶部的按钮，点一下，直接就回到页面顶部了
那这个是怎么做的呢？像这种可以跳转的一看也是我们超链接的功劳了！

当我们的href指定的不是链接也不是本地文件地址时，它还可以指定一个位置，这个位置使用#号替代，就像这样

   <a href="#">点击跳转</a>

这样，点击这个超链接就可以回到页面顶部了

那有人就问了:可不可以回到底部呢？当然可以，不仅可以回到底部，还可以到这个页面的任何位置

此时我们要使用一个几乎可以用在任何body标签里面的标签的属性——id属性

id属性是干什么的呢？我们要知道一个人的信息就必须得知道他的姓名或者证件号，那我们的HTML中，有两个属性，分别形象的对应了姓名与证件号——id属性与class属性

id属性就像我们的身份证，是每个标签的唯一标识，HTML规范中我们id的属性值（相当于身份证号）是不重复的，当然要重复也是可以的，最好不要！！！，而class属性的值就像我们的姓名，是可以重复的，我们这里先初步了解id属性！

我们在需要跳转的页面位置用id（可以使用name属性，用法一样，但是一般都是建议用id）属性给这个位置做一个标记，属性值自定义

比如，这样：

<!DOCTYPE html>
<html lang="Zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<a href="#a">点击跳转</a>
<h2>1</h2>
<h2 id="a">2</h2>
<h2>3</h2>  
</body>
</html>

我们想跳转到第二个H2标签，我们在第二个H2标签的开始标签里面写一个id属性，属性值为a这样我们就做了一个记号！我们使用a标签和href属性指定我们做标记的位置（格式：#开头+属性值），这样就可以跳转到id属性值所在的位置

我们还可以试试组合方法，多尝试创新，将本地超链接与id属性结合，来跳转到指定HTML文件的页面的指定位置
直接看代码吧！很简单：

<!DOCTYPE html>
<html lang="Zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<a href="/index.html#index">点击跳转</a>
</body>
</html>

那个index.html的页面代码我就用图片形式展示了！

功能性链接

除了我们这些跳转的超链接，还有一种超链接，有特殊的使用效果——功能性超链接
因为这是一个死板的样式，我就不做演示了实现特殊功能的链接

1.下载图片

<a href="img/qq.jpg">点击下载图片</a>

2.发送邮件

<a href="mailto：747945307@qq.com">联系我们</a>

3.引用脚本语言

<a href="javascript:alert('哈哈哈哈')"></a>

好了，我们的超链接就到此结束了，应该很好理解，超链接很重要！

小简(JanYork)

关注

11
点赞
踩
17

收藏

觉得还不错? 一键收藏
打赏
4
评论
前端学习第三章——a标签（超链接）

a标签（超链接）我们浏览一个网页，比如京东、天猫、腾讯视频、csdn、掘金，这些网站，我们总是可以看到一些按钮或者图片或者文字，点击之后可以跳转到其他页面或者其他网站，这是怎么做到的呢？在HTML中，有一个标签，可以设置点击文字跳转的效果——a标签看看我们a标签的效果<!DOCTYPE html><html lang="Zh-cn"><head> <meta charset="UTF-8"> <meta http-..
复制链接

扫一扫