跳至主要內容

标签之超链接

刘春龙原创...大约 2 分钟WEB前端HTML教程文档

超文本链接

HTML 使用标签 <a>来设置超文本链接,超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,你可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

超文本链接属性

  • href:路径(描述链接的地址)
  • title:鼠标划上去的提示文字
  • target:以设置点击超链接之后网页打开的方式

target 属性说明

  • _self:这是默认属性,也是用得最多的,表示在当前窗口中打开链接的内容
  • _parent:当等于这个值时候,表示在父级框架中打开连接的内容
  • _blank:当等于这个属性时,表示在新窗口中打开链接的内容
  • _top:表示在顶级框架中,打开链接的内容

默认情况下,链接将以如下形式出现在浏览器中:

  • 一个未访问过的链接显示为蓝色字体并带有下划线。

  • 访问过的链接显示为紫色并带有下划线。

  • 点击链接时,链接显示为红色并带有下划线。

<a href="https://jiameikj.com" title="我是超链接" target="_blank" />

提示

后期我们会通过 CSS 样式修改掉这些效果

当您把鼠标指针移动到网页中的某个链接上时,箭头会变为一只小手

效果展示
<a href="https://jiameikj.com" title="我是超链接" target="_blank">点我跳转</a>

锚点链接

超链接可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

跳转到当前文档的某个部分的形式就是“锚点”

<a href="#hello">跳转到文本信息位置</a>
<p>1</p>
<p>1</p>
<p id="hello">文本信息</p>
<p>1</p>
<p>1</p>

提示

测试锚点链接时,页面高度需要达到一屏的高度才可!

随堂训练

轻松一刻 🎧

音乐
音乐

视频教程 🎥

至此,本章节的学习就到此结束了,如有疑惑,可对接技术客服open in new window进行相关咨询。

上次编辑于:
贡献者: 刘春龙
评论
  • 按正序
  • 按倒序
  • 按热度
Powered by Waline v2.15.7