前端——8.超链接标签

news2024/12/23 1:13:48

这篇文章,我们来讲一下超链接标签

目录

1.超链接标签介绍

1.1链接的分类

2.具体案例讲解

2.1外部链接

2.2 内部标签

2.3 空链接

2.4下载连接

2.5网页元素链接

2.6锚点标签

3.小结


1.超链接标签介绍

超链接标签是HTML中一个十分重要的标签,下面,我们一起来看一下

在HTML标签中,<a>标签用于定义超链接,作用是从一个页面链接到另一个页面

在我们日常访问的网页中,有时候我们点击一个文字,他就会跳转到另一个页面,这个就是超链接。

链接的语法格式:

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

注意:a 是单词 anchor 的缩写,意思为:锚

链接标签的两个属性的作用如下:

属性作用
href用于指定链接目标的url地址,是必须属性,当为标签应用属性href属性时,他就具有超链接的功能
target用于指定页面的打开方式,其中_self为默认值,_blank为在新窗口中打开方式

1.1链接的分类

下面看一下超链接的分类:

1.外部链接:就是点击打开外部网页的链接。例如:

    <a href="https://www.baidu.com/?tn=15007414_8_pg" target="_self">
        <img src="https://www.baidu.com/img/pcdoodle_2a77789e1a67227122be09c5be16fe46.png" />
    </a>

2.内部链接:网站内部页面间的相互连接。直接连接网页内部页面名称即可。例如:

    <a href="index.html">登录</a>

3.空连接:如果当时没有确定链接目标时,用 # 来代替链接地址。例如:

<a href="#">没有写完的页面</a>

4.下载链接:如果href里面地址是一个文件或者压缩包,会下载这个文件。

    <a href="../hb.rar">下载文件</a>

5.网页元素链接:在网页中的各种网页元素,如文本、图像、表格、音频、视频等都可以添加超链接

    <a href="https://www.baidu.com/?tn=15007414_8_pg" target="_blank">
        <img src="../hb.jpg" width="300" />
    </a>

6.锚点链接:点击链接,就可以快速的定位到页面中的某个位置

  • 在连接文本的 href 属性中,设置属性值为 #名字 的形式,如<a href="#two" >第二集</a>
  • 找到目标位置的标签,里面添加一个id 属性=刚才的名字,如<h3 id="two">第二集介绍</h3>
    <h3>
        <a href="#Picture">请看图片</a>
    </h3>
    <img id="Picture" src="../hb.jpg" width="300" />

2.具体案例讲解

下面,通过具体案例,具体的讲解一下上面的6大超链接标签

2.1外部链接

这个连接其实是一个很简单的连接,就是在href中输入一个外部的网址,然后点击它就能直接跳转到这个网址了

下面来具体演示一下

解析:这个其实没啥好说的,就是把href中的内容填充为一个网址。

注意:这个网址一定是"http:"或者是"https:"开头的,这都是常识

2.2 内部标签

内部标签,说白了,就是跳转到本机内部的某一处。比如你可以放一张图片的绝对路径,点击它,就显示那张图片;你也可以写一个HTML文件的绝对路径,点击它,即跳转到这个HTML页面

下面,分别演示这两种情况:

解析:这也没啥好说的

注意:一定要写对路径,不管是相对路径还是绝对路径 

2.3 空链接

空链接,说白了,就是一个占位符,它不实现跳转,仅仅是占个位置而已

解析:没啥好说的

注意: 点了也会有新页面产生,但是这个新页面就是这个页面

2.4下载连接

这个链接的作用就是你点击它,你就能下载属性 href 中写的文件

解析:没啥好说的

注意:href 中写的还是文件的路径,所以,路径那里一定要明白

2.5网页元素链接

这个链接的意思是,在网页中的各种网页元素,如文本、图像、表格、音频、视频等都可以添加超链接。也就是说,<a></a>中间,不仅仅可以写文件,还可以放别的元素,如图片、表格、音频、视频等等

解析:其实这个标签更给我们说明了一个道理,在HTML中,是可以标签套标签使用的。标签直接是可以互相嵌套的。同时也从另一方面说明,HTML是比较“死板”的。这里说的标签嵌套使用,一般多指双标签内部套双标签或单标签,而单标签一般是套不了双标签的

注意:这里,初学者很容易将href中的内容和src中的内容弄混淆,单记一个就好,就记src,它是写地址的,用于img标签里面,另一个自然就清楚了

2.6锚点标签

这个标签的作用是点击内容,可以快速定位到页面中的相应位置

代码如下:

<!DOCTYPE html>
<html lang="en">
<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>

    <h1 id="6a">目录</h1>
    <h3 ><a href="#1a">1.外部链接</a></h3><br />
    <h3 ><a href="#2a">2.内部链接</a></h3><br />
    <h3 ><a href="#3a">3.空链接</a></h3><br />
    <h3 ><a href="#4a">4.下载链接</a></h3><br />
    <h3 ><a href="#5a">5.网页元素链接</a></h3><br />

    <h2 id="1a">1.外部链接</h2><br />
    <a  href="https://www.baidu.com/" target="_blank">点击这里,跳转到百度首页</a><br />

    <h2 id="2a">2.内部链接</h2><br />
    <a  href="D:\MyPhotos\BeautifulPhotos\C23.jpg" target="_blank">点击这里,跳转到本机内部的某一张图片</a><br />
    <a href="09-路径演示.html" target="_blank">点击这里,跳转到另一个HTML文档页面</a><br />

    <h2 id="3a">3.空链接</h2>
    <a  href="#" target="_blank">这是空链接,你点了也没什么用</a><br />

    <h2 id="4a">4.下载链接</h2>
    <a  href="../hb.rar" target="_blank">点击它,下载一张图片</a>

    <h2 id="5a">5.网页元素链接</h2>
    <a  href="https://baike.baidu.com/item/%E5%AF%92%E5%86%B0%E5%B0%84%E6%89%8B/74390?fr=aladdin" target="_blank">
        <img src="../hb.jpg" height="500" />
    </a><br />

    <h6><a href="#6a">返回顶部</a></h6>
</body>
</html>

解析:我们在写任何代码之前,脑海中都要认真的分析需求。这个锚点链接比较抽象,所以我们更应该送需求去分析。你要实现的功能是:点击这行文字,它就跳转到该页面的目标地方。那么,这行文字就一个超链接,需要加<a></a>,然后,怎么将彼此联系起来?通过id,所以你要在<a>中加 id 属性。你要跳转到哪里?跳转到目标地方,那么你就要在目标地方的标签里面加上 id 属性。其中,在超链接标签中的id属性有#,而目标地方的id属性中没有#,OK,想清楚这个,你就可以写出来了。

注意:

不仅仅是锚点链接,更涉及到其他的许许多多标签。我们在写HTML文件时,脑子一定要清晰,一定要知道自己需要完成什么,有哪些标签,怎么用这些标签完成这些需求。

3.小结

这篇文章我们学习了超链接,就是一个标签,然后在里面写上相应的地址,然后一点击就跳转。

下面说一下学习的感悟吧。

不管学习什么,最终都是要用所学的知识去解决问题创造价值的。在此过程中,有这样的一个逻辑:当面对一个实际情况时,我们首先要分析我们需要做什么,需要解决什么问题,需要达到什么目的,需要完成什么;然后,我们需要回忆我们手中掌握了哪些工具,我们脑海中掌握了哪些知识;最后,我们需要去思考如何用我们所掌握的内容去解决这个问题。

其实我们可以分为三大块:分析需求,基础知识,解决问题。其实,对于一个初学者而言,基础知识是最重要的,没它,你的一切后续都是空中楼阁。所以,我们一定要掌握,要熟练基础知识。

与诸君共勉!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/404305.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

案例18-面向对象之开门小例子

目录 一&#xff1a;背景介绍 二&#xff1a;思路&方案 1.面向过程 2.面向对象 3.面向对象(反射) 三&#xff1a;过程 1.面向过程&#xff1a;原本何老师的作用交给我了米老师来完成。 2.面向对象&#xff1a;把开门的方法完全交个何老师&#xff0c;米老师不需要有…

k8s 部署 skywalking 并持久化到es

1、k8s中安装部署 skywalking skywalking集群情况下需要保证用同一数据源&#xff0c;这里我们存储方式改为es 1.1 部署elasticsearch docker run -it -d -p 9200:9200 -p 9300:9300 -e ES_JAVA_OPTS"-Xms256m -Xmx256m" -e "discovery.typesingle-node"…

DSRC技术

DSRC(Dedicated Short Range Communication)专用短程通信 定位 是V2X领域存在的两大通信技术之一&#xff08;另一个为LTE-V2X&#xff09;。 所属技术路线 与这两大技术相对应&#xff0c;是V2X无线通信技术的两大技术路线&#xff1a; IEEE 802.11p 本是04年指定的一个通…

一文入门HTML+CSS+JS(样例后续更新)

一文入门HTMLCSSJS&#xff08;样例后续更新&#xff09;前言HTML&#xff0c;CSS和JS的关系HTMLhead元素titlelinkmetabody元素设置网页正文颜色与背景颜色添加网页背景图片设置网页链接文字颜色设置网页边框文字与段落标记普通文字的输入对文字字体的设置 font使用文字的修饰…

代码随想录刷题-数组总结篇

文章目录数组二分查找原理习题题目1思路和代码题目-2移除元素习题我的想法暴力解法双指针有序数组的平方习题暴力排序双指针长度最小的子数组习题暴力解法滑动窗口螺旋矩阵 II习题我的解法别人的解法总结数组 二分查找 本节对应代码随想录中&#xff1a;代码随想录-二分查找 …

java教程--函数式接口--lambda表达式--方法引用

函数式接口 介绍 jdk8新特性&#xff0c;只有一个抽象方法的接口我们称之为函数接口。 FunctionalInterface ​ JDK的函数式接口都加上了FunctionalInterface 注解进行标识。但是无论是否加上该注解只要接口中只有一个抽象方法&#xff0c;都是函数式接口。 如在Comparato…

Makefile的概述

什么是makemake 是个命令&#xff0c;是个可执行程序&#xff0c;用来解析Makefile文件的命令&#xff0c;这个命令存放在 /usr/binmake概述1.GUN make是一种代码维护工具2.make 工具会根据makefile文件定义的规则和步骤&#xff0c;完成整个软件项目的代码维护工作。3.一般用来…

解决Win10图片/文件右键单击自动退出并刷新桌面问题

问题描述 这两天开始不知道怎么回事儿&#xff0c;右键选择图片时候&#xff0c;电脑黑屏且资源管理器自动重启。然后我就开始找很多方法去解决。 我试了很多种复杂的简单的方法&#xff0c;但是只有一种解决了我的问题。 解决方案【解决我的问题】 这个方法如下&#xff1…

VirtualBox的克隆与复制

快照太多&#xff0c;想整合成1个文件怎么办&#xff1f; 最近&#xff0c;我就遇到一个问题。快照太多了。比较占用空间怎么办&#xff1f; 错误做法 一开始&#xff0c;我是这么操作的&#xff0c;选中某个快照&#xff0c;然后选择删除…然后我登录虚拟机后&#xff0c;发…

为什么程序员喜欢这些键盘?

文章目录程序员的爱介绍个人体验程序员的爱 程序员是长时间使用计算机的群体&#xff0c;他们需要一款高品质的键盘来保证舒适的打字体验和提高工作效率。在键盘市场上&#xff0c;有很多不同类型的键盘&#xff0c;但是对于程序员来说&#xff0c;机械键盘是他们最钟爱的选择…

原来CSS 也可以节流啊

Ⅰ、前言 「节流」 是为了减少请求的触发频率&#xff0c;不让用户点的太快&#xff0c;达到节省资源的目的 &#xff1b;通常 我们采用 JS 的 定时器 setTimeout &#xff0c;来控制点击多少秒才能在触发&#xff1b;其实 通过 CSS 也能达到 「节流」 的目的&#xff0c;下面…

LeetCode598. 范围求和 II(python)

题目 给你一个 m x n 的矩阵 M &#xff0c;初始化时所有的 0 和一个操作数组 op &#xff0c;其中 ops[i] [ai, bi] 意味着当所有的 0 < x < ai 和 0 < y < bi 时&#xff0c; M[x][y] 应该加 1。 提示: 1 < m, n < 4 * 104 0 < ops.length < 104 o…

硅谷银行倒闭的几点启示

摘要&#xff1a;本文从公开资料分析一下硅谷银行对信息科技行业的我们有一些什么启示。硅谷银行“拔网线”了&#xff0c;想创业的您&#xff0c;该注意了。1.硅谷银行是谁我们从其官网的说明来看看。The financial partner of the innovation economy.&#xff08;翻译成中文…

买卖股票的最佳时机 I II III IV

121. 买卖股票的最佳时机 自己的思路&#xff1a;采用求最长连续子串和题目的思路 class Solution {public int maxProfit(int[] prices) {if(prices.length 1) return 0;int[] nums new int[prices.length - 1];for(int i 0;i < prices.length - 1;i){nums[i] prices[…

C++STL详解(六)——stack和queue

文章目录空间适配器stackstack的定义方式stack的使用stack的模拟实现queuequeue的定义方式queue的使用queue的模拟实现空间适配器 适配器是一种设计模式&#xff08;设计模式是一套被反复使用的&#xff0c;多数人知晓的&#xff0c;经过分类编目的&#xff0c;代码设计经验的…

Linux下Docker安装mysql-超详细步骤

安装Docker Engine官方参考文档&#xff1a;https://docs.docker.com/engine/install/centos/若之前有安装docker&#xff0c;需要先卸载之前的dockersudo yum remove docker \docker-client \docker-client-latest \docker-common \docker-latest \docker-latest-logrotate \d…

css实现画面转场以及边框线条动画

效果预览 在实现转场效果之前&#xff0c;需要先了解css的clip-path属性&#xff0c;该属性就是实现转场的核心属性&#xff0c;clip-path属性可以使用裁剪方式创建元素的可显示区域。区域内的部分显示&#xff0c;区域外的隐藏。也就是说裁切的大小不会超过实际的大小&#x…

测牛学堂:接口测试基础理论和工具的使用

接口测试流程总结 1 需求分析&#xff0c;看产品经理的需求文档 2 接口文档解析&#xff0c;开发编写的api接口文档 3 设计测试用例 4脚本开发 5 执行及缺陷跟踪 6 生成测试报告 7接口自动化持续集成 测试解析接口文档 接口文档&#xff0c;又称为api文档&#xff0c;是由后…

SpringCloud-高级篇(二)

目录&#xff1a; &#xff08;1&#xff09;限流规格-流控模式 入门案例&#xff1a;直接模式 关联模式&#xff1a; 链路模式&#xff1a; &#xff08;2&#xff09; 流控效果&#xff1a;warm up 排队等待&#xff1a; &#xff08;3&#xff09;热点参数限流&#xff1…

tar和gzip压缩和解压

打包和压缩的区别&#xff1a;打包&#xff1a;将多文件 封装在一起压缩&#xff1a;将多文件 封装在一起 通过特定的算法 将冗余的数据 进行删除tar默认是打包命令&#xff0c;如果想用tar进行压缩 必须加选项1、gzip格式压缩&#xff1a;tar zcvf 压缩包包名 文件1 文件2 文件…