HTML超链接的大致种类 [复制链接]

帖子链接已复制到剪贴板
懋和道人 (UID: 1319) 3月前
帖子已经有人评论啦,不支持删除!

188 0

HTML超链接(Hyperlink)是指从一个网页跳转到另一个网页或资源的功能,在网络中起着非常重要的作用。超链接的形式多样,应用广泛,除了你列出的七种类型,还有其他形式。以下是更加全面、深入的HTML超链接分类及说明:

基础链接

这些链接主要用于导航,不论目标是外部站点、内部页面或本地文件,都是通过 href 属性实现的。

简单链接(外部链接):最常见的超链接,用于跳转到外部或内部的网页。

<a href="https://www.dao.js.cn/">懋和道人</a>

相对链接:指向网站内部其他页面。

<a href="/me">懋和道人简介</a>

协议相对链接:省略协议部分,根据当前页面的协议自动选择 httphttps

<a href="//www.dao.js.cn">懋和道人</a>

文件协议链接:用于链接本地文件(通常只在本地环境有效)。

<a href="file:///C:/Users/username/Documents/maohe.txt">打开本地文件</a>

下载链接:用户点击后,直接下载目标文件而不是浏览它。

<a href="file.zip" download>下载文件</a>

外部链接(新窗口打开):通过 target="_blank" 实现点击后在新窗口或新标签页打开链接。

<a href="https://www.dao.js.cn" target="_blank">懋和道人</a>

target 的所有可选值

_blank:在新窗口或新标签页中打开链接。

_self:在当前窗口/标签页中打开链接(默认值)。

_parent:在父级框架中打开链接。

_top:在顶级框架中打开链接,覆盖所有 iframe。

自定义名称:在指定名称的窗口或标签页中打开链接,或者创建新窗口/标签页。

不同的 target 值为网页设计者提供了更多控制链接打开方式的灵活性,尤其是在处理 iframe 时可以更好地管理内容的显示逻辑。

锚点链接

锚点链接用于页面内跳转,可以实现返回页面顶部或跳转到页面特定位置。

返回页面顶部:链接到页面顶部。

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

跳转到页面特定位置:链接到指定的页面内元素或标题(通过 id 定位)。

<a href="#section1">跳转到 Section 1</a>
<div id="section1">这是 Section 1</div>

媒体链接

媒体资源(如图片、音频、视频)可以用作链接目标或链接到相关文件。

图片链接:点击图片后跳转到指定的目标。

<a href="https://www.dao.js.cn/">
  <img src="https://img.dao.js.cn/zb_users/upload/2021/10/202110151634246697912592.png" alt="懋和道人">
</a>

HTML5 媒体链接:链接到音频或视频资源,可以嵌入播放器。

音频

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  <source src="audio.wav" type="audio/wav">
  您的浏览器不支持音频播放。
</audio>

视频

<video controls width="600">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <source src="video.ogg" type="video/ogg">
  您的浏览器不支持视频播放。
</video>

这些链接用于触发特定功能,例如拨打电话、发送邮件等。

电话链接:为移动设备提供拨号功能。

<a href="tel:+8617778737273">拨打电话</a>

SMS 链接:打开短信应用并自动填写号码。

<a href="sms:+8617778737273">发送短信</a>

Email 链接:打开邮件客户端并自动填写收件人等信息。

<a href="mailto:wulintang@wulintang.net">发邮件并填写内容</a>

FTP 链接:链接到FTP服务器,用于文件上传或下载。

<a href="ftp://ftp.example.com">访问FTP服务器</a>

JavaScript链接

javaScript 链接:点击后执行JavaScript代码,而不是导航到新页面。

<a href="javascript:alert('Hello World')">点击弹出提示</a>

无链接符号:阻止链接的默认跳转行为,常用于绑定事件。

<a href="javascript:void(0)">无跳转链接</a>

CSS链接伪类

使用CSS的伪类来改变链接的外观,根据链接的不同状态(如未访问、已访问、悬停等)应用样式。

伪类样式:为链接的不同状态定义样式。

a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: red; }
a:active { color: green; }

按照功能将超链接整理后,整体看起来更加清晰。基础链接包含了绝大部分常见的超链接形式,不论是外部链接、相对链接还是下载链接,它们的核心都是通过 href 指向资源。锚点链接、媒体链接、功能性链接、JavaScript链接、CSS伪类则是其他更加具体的超链接应用。这样分类后,超链接的作用和用途一目了然,小道也就不一一举例,总体能让大家认识a标签,就是好的。

米表,www.dao.js.cn/mi
已有评论 (0)
提示:您必须 登录 才能查看此内容。
创建新帖
广告推广点击空位自助购买