锚链接是一个链接，它允许用户流过页面。
它有助于轻松滚动和浏览。
命名锚点可用于链接到同一页面的不同部分（如快速导航）或者另一个页面的特定部分。
从另一个网页链接到锚点
我们也可以从其他链接到锚链接。
为此，添加后跟 # 和锚值的 URL。
这种用法有两种类型。
链接到同一域中的另一个页面：
<a href="/html/ahref.html#html_links">跳转到另外一个链接的锚点</a>
另一个的链接：
<a href="https://baidu.com/news/home.html#about">跳转到另一个的锚点</a>
如何设置跳跃锚链接的样式
还可以为跳跃锚提供另外的样式。
为此，在 <head> 元素中使用 <style> 标记，并通过使用颜色和背景属性为要跳转的部分提供样式。
设置跳跃锚链接样式的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
.main-content {
height: 100vh;
text-align: justify;
}
h2 {
color: #1c87c9;
}
h2:target {
color: white;
background: #1c87c9;
}
</style>
</head>
<body>
<h2 id="Lorem_Ipsum">Hello World</h2>
<div class="main-content ">
<p>
经历过风雨，才懂得阳光的温暖。 今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
经历过风雨，才懂得阳光的温暖。
</p>
<p>今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
经历过风雨，才懂得阳光的温暖。
今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
经历过风雨，才懂得阳光的温暖。
</p>
</div>
<p>Go to the
<a href="#Lorem_Ipsum">top</a>.
</p>
</body>
</html>
创建锚链接
让我们看看如何使用 <a> 标签跳转到页面的标记部分。
这很简单！
- 将 id 属性添加到锚元素以给页面的部分命名。属性的值可以是单词或者短语（使用短语时记住不要有空格，请改用破折号或者下划线）。
<a id="anchor-name">The name where you want to jump</a>
或者，我们还可以拥有以下类型的锚点：
- 标题中的锚点：<h2 id="anchor-name">部分名称</h2>
- 图像中的锚点：<img id="anchor-name" src="/images/imgname.jpeg"/>
- 段落内的锚点：<p id="anchor-name">段落名称</p>
请记住，每个 id 只能在页面上出现一次。
- 使用链接目标的 id 创建一个超链接，前面是 #。
<a href="#anchor-name">Jump to the part of the page with the “anchor-name” id </a>
现在，只需添加首选文本，我们就可以浏览页面部分。
创建跳跃锚链接的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
.main-content {
height: 100vh;
text-align: justify;
}
</style>
</head>
<body>
<h2 id="helloworld">Hello World</h2>
<p class="main-content">
经历过风雨，才懂得阳光的温暖。今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
经历过风雨，才懂得阳光的温暖。
</p>
<p>跳转到
<a href="#helloworld">顶部</a>.
</p>
</body>
</html>
日期：2020-06-02 22:15:07 来源：oir作者：oir