【九月打卡】第12天超级链接相关知识点总结

一、课程概述

1、学习课程名称：前端工程师2022版

2、章节名称：HTML5多媒体与语义化标签第二章2-6-2-16

（2-6 超级链接（1）-慕课网体系课 (imooc.com)）

3、讲师名称：一阶段老师

二、内容分享

超链接标签a

1、概念：是将网页和网页连结到一起的方法，是互联网成“网”的原因

2、使用：

（1）<a>标签，a是anchor（锚）的首字母，属性href（hypertext reference超文本引用）表示去的第二个网页的地址，在<a>标签中的href属性位置填入链接地址（要跳转的网页要提前做好）即可完成网页的跳转，在地址后使用#锚点（必须是h系列标签）可以滚动到锚点的位置

（2）给图片设置超级链接：只需要用<a>标签包裹img标签即可

3、href属性支持相对路径和绝对路径

4、常见属性：

（1）href：链接地址

（2）title：鼠标悬停的信息提示

（3）target：值为blank将另打开一个新的网页，而不是在原页面变化，如果沿用了HTML4代的习惯会多一个下划线：target="_blank"

5、其他种类的链接

（1）下载链接：如果链接指向exe、zip、rar等文件格式的链接，将自动成为下载链接

<a href="1.zip">下载</a>

（2）邮件链接、电话链接

1）有mailto：前缀的链接时邮件链接，系统将自动打开Email相关软件

<a href="mailto;me@test.com">给小编发邮件</a>

2）有tel：前缀的链接是电话连接，系统将自动打开拨号盘

<a href="tel:12306">打电话买火车票</a>

6、页面内锚点

（1）较长的页面，可以适当的给h系列标签添加id属性，它将称为页面的“锚点”

<h1 id="wuxi">无锡美景</h>

当网址后面添加#+锚点id名（如wuxi）时，页面将自动滚动到锚点所在的位置

（2）其他页面的超链接，可以链接到指定锚点

<a href="lvyou.html#wuxi">看无锡美景</a>

（3）返回顶部：页面尾部添加#top

<p><a href="#top">返回顶部</a></p>

三、学习心得

因为超级链接可以包裹很多东西，所以在实战过程中使用较多，练习的多了，掌握相关知识还是相对容易的。