网页标签之超链接标签

超链接标签 a+tab


1、文字和图像超链接

<body>
<!--a标签
href : 必填，表示要跳转到哪个页面
target : 表示页面在哪里打开，默认为self
    _blank : 在新标签中打开
    _self : 在当前网页中打开
-->
        
<h2>文字超链接</h2> <br/>
<a href="https://www.baidu.com" target="_blank">点击跳转到百度页面</a>（在新标签中打开）<br/>
<a href="1.我的第一个网页.html">点击跳转到自写网页一</a>（在当前网页中打开） <br/>
        
<h2>图像超链接</h2> <br/>
<a href="1.我的第一个网页.html">
    <img src="/com/xy/HTML/resource/image/1.jpg" alt="索隆图片" title="悬停文字" width="1000" height="600">
</a>
        
<body/>

知识点总结：

  • 超链接标签格式为
<a href="path" target="开启位置">链接文本或图片</a>
  • 其中path为要跳转到哪个网址或网址上的某个锚点，是必填的
    • 需要注意的是跳转到锚点的格式为href="锚点网址+#+锚点id"，如下代码举例
<a href="4.超链接标签学习.html#down">跳转</a>

这行代码意为跳转到网页"4.超链接标签学习.html"的id为"down"的锚点处

  • target表示页面在哪里打开

    • _blank : 在新标签页打开
    • _self : 在本页面打开
    • 默认为_self

  • 在两个超链接标签中间放置链接文本或者链接图片，表示点击这行文本或图片就会跳转网页

2、锚链接

大致上和文字超链接一样，不过href部分不是填写跳转网址，而是填写跳转锚点

<body>
<!--锚链接 : 默认跳转到顶部
1.需要一个锚标记 : 使用id作为标记名
2.跳转到标记 : #+标记名
-->
<h2>锚链接</h2>
<a href="#top">回到顶部</a> <br/>
<a id="down">down</a>
<body/>

不同于文字链接的是：

  • 锚链接需要一个锚标记，也就是要跳到哪里。如果没有锚标记，就是默认跳转到当前页面的顶部
<a id="top">top</a> <br/>

这就是一个id为top的锚标记

  • 通过href="#+标记id"跳转到该锚点

3、功能性链接

邮件链接 ：mailto

<body>
<h2>邮件链接</h2> <br/>
<a href="mailto:1031857036@qq.com" target="_blank">点击此处联系我</a> <br/>
<body/>

href部分填写"mailto:邮箱地址"

QQ推广 ： 了解即可

<body>
<h2>QQ推广链接</h2> <br/>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:1031857036:53" alt="点击咨询我详细信息" title="点击咨询我详细信息"/></a>
<br/>
<body/>
posted @   无关风月7707  阅读(438)  评论(0)  编辑  收藏  举报
相关博文：
· 网页标签之网页基本标签
· 网页标签之图像标签
· 超链接标签
· 超链接标签
· HTML5-超链接标签及应用（页面链接、锚点链接：跳转其他页面的任意位置/或者跳转回顶部、功能性链接：邮箱链接、qq链接）
阅读排行：
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
点击右上角即可分享
微信分享提示