【HTML 教程系列第 13 篇】HTML 中的超链接标签 a,看这一篇就够了
这是【HTML 教程系列第 13 篇】,如果觉得有用的话,欢迎关注专栏。
关于超链接,大家平常在浏览网页的再熟悉不过了,只要我们点一下鼠标,就会跳转到其它页面,超链接可以说是网页中最常见的元素了。
文章目录
- 一:什么是超链接
- 二:如何实现超链接
- 2-1:文本超链接
- 2-2:图片超链接
- 三:a 标签的 target 属性
- 四:超链接的种类
- 4-1:外部链接
- 4-2:内部链接
- 4-2-1:锚点链接
- 五:href="#" 的用途
一:什么是超链接
超链接,英文全称是 hyperlink ,超链接是指从一个网页指向一个目标的连接关系,当浏览者单击已经链接的文字或图片后,链接目标将显示在浏览器上,并且根据目标的类型来打开或运行。在本质上属于一个网页的一部分,它是一种允许我们同其他网页或站点之间进行连接的元素。
比如淘宝网就是由非常多的网页组成,当你点击 男装
类型的链接时,页面就会跳转到关于男装的网页,点击女装或其它类型链接时同理。
二:如何实现超链接
在 HTML 中创建超链接非常简单,只需用 a 标签环绕需要被链接的对象即可,其基本语法格式如下:
语法
<a href="链接地址">文本或图片</a>
其中,a 是英文 anchor(锚点) 的缩写,href 是 hypertext reference 的缩写,意思是超文本引用。
说明
href:用于指定链接目标的 url 地址,当为标签应用 href 属性时,它就具有了超链接的功能。
超链接的范围很广,在网页中各种网页元素,如图像、表格、音频、视频等都可以添加超链接。
通过文本设置的超链接叫"文本超链接",同理,通过图片设置的超链接叫"图片超链接"
2-1:文本超链接
如下代码所示
<a href="https://www.baidu.com/">点击跳转到百度首页</a>
当我们点击浏览器的超链接标签时,会跳转到百度首页,动态效果图如下
2-2:图片超链接
需要把图片标签 img 写到 a 标签内部,如下代码所示
<a href="https://lol.qq.com/download.shtml?ADTAG=innercop.lol.web.top"><img src="img/下载游戏按钮.png" alt="下载游戏" />
</a>
当我们点击浏览器中"下载游戏"这张图片时,会跳转英雄联盟官网界面,动态效果图如下
不管是哪种超链接方式,我们都需要把文字或图片放到 a 标签内部才能实现超链接功能。
三:a 标签的 target 属性
默认情况下,超链接都是在当前浏览器窗口直接打开新页面,可以注意下上面两个 gif 图的跳转效果。
一般我们都不希望在原网页界面直接打开新网页,更多的是在一个新窗口打开链接,怎么实现呢 ?
在 HTML 中,我们可以使用 target 属性来改变超链接打开窗口的方式。
语法
<a href="url 地址" target="_blank"></a>
a 标签的 target 属性有四个可取值,如下表格所示
这四个不需要都记住,只需要记住 _blank (不是_black,不是_black,不是_black) 这一个值即可。
我们以 _blank 这个属性值为例,代码如下所示
<a href="https://www.baidu.com/" target="_blank">点击跳转到百度首页</a>
然后看一下浏览器的运行效果
可以看到,百度首页是以新窗口方式打开的,你可以回头看看前面的文本超链接,它是在原窗口下打开新窗口的。
四:超链接的种类
在 HTML 中,超链接有两种,分别是 “外部链接” 和 “内部链接”。
4-1:外部链接
上面我们打开的百度首页以及英雄联盟官网,其实都是外部链接,外部链接指的就是其它网站的页面。
4-2:内部链接
内部链接,顾名思义指的就是自身网站的页面。这里我以我测试的 HTML 文件 HTMLDemo 为例
1:在同级文件夹下新建一个名称为 跳转到第二个网页.html 的文件。
2:在同级文件夹下新建一个文件夹 TempHTML,在该文件夹下新建一个名称为 跳转到第三个网页.html 的文件。
如下图所示
虽然这三个 HTML 文件不在同一文件夹下,但它们都位于我的 “html” 文件夹下,即都位于同一根目录下。
在我的 HTMLDeml 这个 html 文件里,代码如下所示
<body><a href="跳转到第二个网页.html" target="_blank">跳转到第二个网页</a><a href="TempHTML/跳转到第三个网页.html" target="_blank">跳转到第三个网页</a>
</body>
当我们点击 “跳转到第二个网页” 链接时,会打开 “网页二”,点击 “跳转到第三个网页” 链接时,会打开 “网页三”,动态效果演示图如下
需要说明的是,内部链接使用的路径都是相对路径,不是绝对路径。
4-2-1:锚点链接
一:什么是锚点链接 ?
在 HTML 中,锚点链接其实是内部链接的一种,它的 href 链接地址 追踪的是当前页面你指定的那一部分。通俗来说,锚点链接就是点击一个超链接,点了它,它就会跳到当前页面的某一区域。
比如我博客中就用到了锚点标签,方便读者更快速的找到需要的内容。
二:什么情况下用锚点链接 ?
当一个页面不仅内容很多,内容的类别也很多时,我们在用浏览器阅读时就会显得很不方便操作以及找到自己想要看的内容,为了优化用户体验,锚点链接诞生了。
三:如何实现锚点链接 ?
想要实现锚点链接,分为两步
- 设定目标元素的 id;
- a 标签的 href 属性需要指向该 id;
这里我在百度百科上搜索"康熙",如下图所示
比如你想看该网页的 “年号纪年” ,不用锚点链接的话你就要滚动到该处才行,而用了锚点链接,只需要点击 “目录” 里的 “序号4 年号纪年” 即可。想体验效果的可以自行百度百科"康熙"。
这里以 “皇帝简介” 为例,说一下锚点链接的用法,代码如下所示
<a href="#简介">1 皇帝简介</a>
<div id="简介"><p>清圣祖爱新觉罗·玄烨(1654年5月4日—1722年12月20日),清世祖爱新觉罗·福临第三子,生母孝康章皇后佟佳氏,清朝第四位、清军入关后第二位皇帝,年号康熙。</p>
</div>
五:href="#" 的用途
当我们使用 a 标签时,当不确定链接目标时,通常将链接标签的 href 属性值定义为 “#” ,表示该链接暂时为一个空链接。如下代码所示
<a href="#"></a>
至此,关于 HTML 中的超链接写完了,休息。
你的问题得到解决了吗?欢迎在评论区留言。
赠人玫瑰,手有余香,如果觉得文章不错,希望可以给个一键三连,感谢。
结束语
技术是一点一点积累的,大神也不是一天就可以达到的。原地不动就是退步,所以每天进步一点点。
最后,附上一句格言:"好学若饥,谦卑若愚",望共勉。
【HTML 教程系列第 13 篇】HTML 中的超链接标签 a,看这一篇就够了相关推荐
- 【HTML 教程系列第 22 篇】 HTML 中的 input 标签,看这一篇就够了
这是[HTML 教程系列第 22 篇],如果觉得有用的话,欢迎关注专栏. 文章目录 一:什么是 input 标签 ? 二:input 标签中 type 属性取值有哪些 ? 1:text 单行文本框 2 ...
- 【CSS 教程系列第 13 篇】什么是 CSS 中的通配符选择器
这是[CSS 教程系列第 13 篇],如果觉得有用的话,欢迎关注专栏. CSS 的选择器有很多,常用的有 元素选择器.id 选择器.class 选择器.后代选择器.子代选择器.并集选择器.交集选择器. ...
- 【IDEA 教程系列第 13 篇】idea 快速搜索类、文件
这是[IDEA 教程系列第 13 篇],如果觉得有用的话,欢迎关注专栏. 快捷键 Mac 和 Windows 系统上都是 Shift + Shift,即按两次 Shift. 更多 idea 中的快捷键 ...
- 【Excel 教程系列第 13 篇】如何使用 VLOOKUP 函数查找指定数据(图文介绍)
这是[Excel 教程系列第 13 篇],如果觉得有用的话,欢迎关注专栏. 文章目录 一:VLOOKUP 函数的功能介绍 二:VLOOKUP 函数中 4 个参数的解释 三:实际案例分析 一:VLOOK ...
- 【Android 教程系列第 13 篇】在小米手机上使用安卓投屏软件 QtScrcpy ,为什么点击屏幕没有反应
这是[Android 教程系列第 13 篇],如果觉得有用的话,欢迎关注专栏. 一:问题描述 众所周知,QtScrcpy 是一款非常好用的安卓投屏软件. 以前用的测试机是一加的,最近换了小米的,发现开 ...
- c++类指针赋值表达式必须是可修改的左值_C++进阶教程系列:全面理解C++中的类...
原标题:C++进阶教程系列:全面理解C++中的类 关注Linux公社 最近刷了一些题,也面试了一些公司,把关于C++中关于类的一些概念总结了一下. 在这里也反思一下,面试前信心满满自以为什么都懂,毫无 ...
- 红米k30 android版本,红米K30系列机型众多,傻傻分不清楚?看完这篇你就懂了
红米K30系列机型众多,傻傻分不清楚?看完这篇你就懂了 2020-10-01 10:51:57 18点赞 33收藏 11评论 红米K30系列 不可否认的是,目前的手机厂商喜欢一次性发布几款新机型,以不 ...
- 在html语言中超级链接使用什么标签,什么是超链接(详解什么是 HTML 中的超链接标签 a)...
大纲1.什么是标签2.标签的几个重要属性3.a标签的运行机制4.a标签常用的协议5.超链接标签的样式问题--a标签的伪类选择器的书写顺序1.什么是标签标签定义超链接,用于从一张页面链接到另一张页面.元 ...
- Selenium实战教程系列(三)--- Selenium中的动作
Selenium中针对元素进行的动作在代码中可以分为两类: Selenium::WebDriver::ActionBuilder类中的动作方法 Selenium::WebDriver::Element ...
- [Gradle中文教程系列]-跟我学Gradle-5.7:依赖-上传与发布番外篇-发布到Jcenter
这是一个使用gradle上传到Jcenter的一个示例 具体步骤 这里写的已经非常明白了 并且提供了多个示例 https://github.com/bintray/gradle-bintray-plu ...
最新文章
- 【有奖辩论】工程师和销售创业谁更有优势?
- 创业公司自曝「被谷歌封杀」,阻断一切访问,上诉只得到机器人回复
- laravel数据库操作
- 查看.Net Framework版本号
- UA MATH564 概率论IV 次序统计量
- springmvc中action跳转
- LeetCode 33 搜索旋转排序数组
- 百度大脑公开课:快速定制、部署高精度深度学习模型!
- sql backup database备份d盘_Oracle-备份与恢复(二)RMAN备份-自动备份计划任务脚本...
- Flutter基础—手势处理
- android: PendingIntent的使用
- uva 10066 LCS
- 如何在 7 分钟内黑掉 40 家网站?
- 行测-判断推理-图形推理-样式规律-黑白运算
- 你不知道的css——4. 基线、中线、x-height、单位ex(含文本与图标对齐技巧)
- C# Excel导出超出65536行报错
- SSM项目秒杀系统---(一)业务分析与Dao层
- 瑞数5药监局js逆向
- 【IT运维小知识】安全组是什么意思?
- Android电阻触摸屏校准