【2024】前端学习笔记3-外部链接-内部链接-锚点链接
在HTML中，超链接起着能够将不同的页面、文档、资源等连接在一起，为用户提供便捷的导航和信息访问途径的作用。
学习笔记
- 内、外部链接
- 锚点链接
超链接使用<a>标签来表示。具体链接对象可通过href属性来设置。
href：定义了链接标题所指向的目标文件的URL地址target：属性指定用于打开链接的目标窗口title：为超链接提供一个提示文本。当用户将鼠标悬停在链接上时，会显示这个提示信息download：点击链接资源时，提供下载而不是打开文件
target属性打开方式：
| 属性 | 释义 |
|---|---|
| self | 在同一窗口打开，默认 |
| parent | 当前窗口的上级窗口 |
| blank | 在新窗口打开 |
| top | 在浏览器整个窗口打开，忽略任何框架 |
超链接又分为外部链接、内部链接和锚点链接。
内、外部链接
示例：点击链接跳转到百度首页，设置为打开新的标签页
<body>
<!--超链接够将不同的页面、文档、资源等连接在一起，为用户提供便捷的导航和信息访问途径-->
<a href="https://www.baidu.com" target="_blank">跳转到百度</a>
</body>
内部链接与外部链接相似，即为项目内相对路径。
锚点链接
有的网页内容特别多，页面特别长，需要不断翻页才能看到想要的内容，这时，可以在页面中（一般是页面的前部）定义一些锚点链接，点击就会跳到相应的内容上。
示例：
<body>
<h2><a href="#section1">跳转到章节一</a></h2>
<p>这里是一些常规的文本内容。</p>
<p>继续一些文本描述。</p>
<h2 id="section1">章节一</h2>
<p>这是章节一的具体内容。这里有详细的介绍和说明。</p>
<h2>章节二</h2>
<p>这里是章节二的具体内容。</p>
</body>
展示效果：内容太少不明显
示例：在特定位置设置回到顶部功能
<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>
展示效果：
