【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>

展示效果：