【2024】前端学习笔记3-外部链接-内部链接-锚点链接

在HTML中,超链接起着能够将不同的页面、文档、资源等连接在一起,为用户提供便捷的导航和信息访问途径的作用。

学习笔记

超链接使用<a>标签来表示。具体链接对象可通过href属性来设置。

  • href:定义了链接标题所指向的目标文件的URL地址
  • target:属性指定用于打开链接的目标窗口
  • title:为超链接提供一个提示文本。当用户将鼠标悬停在链接上时,会显示这个提示信息
  • download:点击链接资源时,提供下载而不是打开文件

target属性打开方式:

属性 释义
self 在同一窗口打开,默认
parent 当前窗口的上级窗口
blank 在新窗口打开
top 在浏览器整个窗口打开,忽略任何框架

超链接又分为外部链接、内部链接和锚点链接

内、外部链接

示例:点击链接跳转到百度首页,设置为打开新的标签页

html 复制代码
<body>
   <!--超链接够将不同的页面、文档、资源等连接在一起,为用户提供便捷的导航和信息访问途径-->
   <a href="https://www.baidu.com" target="_blank">跳转到百度</a>
   
</body>

内部链接与外部链接相似,即为项目内相对路径。

锚点链接

有的网页内容特别多,页面特别长,需要不断翻页才能看到想要的内容,这时,可以在页面中(一般是页面的前部)定义一些锚点链接,点击就会跳到相应的内容上。

示例:

html 复制代码
<body>
   <h2><a href="#section1">跳转到章节一</a></h2>
   <p>这里是一些常规的文本内容。</p>
   <p>继续一些文本描述。</p>
 
   <h2 id="section1">章节一</h2>
   <p>这是章节一的具体内容。这里有详细的介绍和说明。</p>

   <h2>章节二</h2>
   <p>这里是章节二的具体内容。</p>
</body>

展示效果:内容太少不明显

示例:在特定位置设置回到顶部功能

html 复制代码
<body>
   <h2><a href="#section1">跳转到章节一</a></h2>
   <p>这里是一些常规的文本内容。</p>
   <p>继续一些文本描述。</p>
 
   <h2 id="section1">章节一</h2>
   <p>这是章节一的具体内容。这里有详细的介绍和说明。</p>

   <h2>章节二</h2>
   <p>这里是章节二的具体内容。</p>

   <a href="#">回到顶部</a>
</body>

展示效果:

相关推荐
国家不保护废物5 小时前
多模态模型数据传输的秘密武器:html5对象Blob深度解析
前端·面试·html
学长学姐我该怎么办5 小时前
从零开始学前端html篇2
前端·html
程序员秘密基地6 小时前
基于html,css,vue,vscode,java,springboot,mysql数据库,在线考勤,管理系统
java·vue.js·spring·html·web app
杨超越luckly8 小时前
HTML应用指南:利用GET请求获取全国山姆门店位置信息
信息可视化·数据分析·html·argis·门店
尘心cx8 小时前
前端-HTML-day2
前端·html
Kyln.Wu9 小时前
【python实用小脚本-131】Python 实现 HTML 到 PDF 转换:解决文档处理痛点的高效工具
python·pdf·html
知识分享小能手21 小时前
Bootstrap 5学习教程,从入门到精通,Bootstrap 5 表单验证语法知识点及案例代码(34)
前端·javascript·学习·typescript·bootstrap·html·css3
iphone1081 天前
一次编码,多端运行:HTML5多终端调用
前端·javascript·html·html5
一天睡25小时1 天前
一款减轻前端图片命名工作量的图片转换器
前端·javascript·html
梅纳德1 天前
如何发现一个网站的全部页面?7种方法
html