2021/9/8大一实训web第三天(超链接)
HTML超链接
修改样式可以直接输代码,也可以窗口,属性,打开属性面板
一:什么是超链接
超链接,英文全称是 hyperlink ,超链接是指从一个网页指向一个目标的连接关系,当浏览者单击已经链接的文字或图片后,链接目标将显示在浏览器上,并且根据目标的类型来打开或运行。在本质上属于一个网页的一部分,它是一种允许我们同其他网页或站点之间进行连接的元素。
二:如何实现超链接
语法
<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 属性
默认情况下,超链接都是在当前浏览器窗口直接打开新页面
一般我们都不希望在原网页界面直接打开新网页,更多的是在一个新窗口打开链接,怎么实现呢 ?
在 HTML 中,我们可以使用 target 属性来改变超链接打开窗口的方式。
语法
<a href="url 地址" target="_blank"></a>
a 标签的 target 属性有四个可取值,如下表格所示
这四个不需要都记住,只需要记住 _blank (不是_black,不是_black,不是_black) 这一个值即可。
四:超链接的种类
在 HTML 中,超链接有两种,分别是 “外部链接” 和 “内部链接”。
4-1:外部链接
上面我们打开的百度首页以及英雄联盟官网,其实都是外部链接,外部链接指的就是其它网站的页面。
4-2:内部链接
内部链接,顾名思义指的就是自身网站的页面。一般使用相对路径
4-2-1:锚点链接
一:什么是锚点链接 ?
在 HTML 中,锚点链接其实是内部链接的一种,它的 href 链接地址 追踪的是当前页面你指定的那一部分。通俗来说,锚点链接就是点击一个超链接,点了它,它就会跳到当前页面的某一区域。
比如我博客中就用到了锚点标签,方便读者更快速的找到需要的内容。
二:什么情况下用锚点链接 ?
当一个页面不仅内容很多,内容的类别也很多时,我们在用浏览器阅读时就会显得很不方便操作以及找到自己想要看的内容,为了优化用户体验,锚点链接诞生了。
三:如何实现锚点链接 ?
想要实现锚点链接,分为两步
设定目标元素的 id;
a 标签的 href 属性需要指向该 id;
好文
五:href="#" 的用途
当我们使用 a 标签时,当不确定链接目标时,通常将链接标签的 href 属性值定义为 “#” ,表示该链接暂时为一个空链接。如下代码所示
<a href="#"></a>