专注Java教育14年
全国咨询/投诉热线：444-1124-454
更新时间：2022-02-16 09:07:56 来源：赢咖4 浏览674次
1.向锚元素添加一个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在页面上只能出现一次。
2.使用链接目标的id创建超链接，前面带有 #。
<a href="#anchor-name">Jump to the part of the page with the “anchor-name” id </a>
现在，只需添加首选文本，您就可以浏览页面部分。
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.main-content {
height: 100vh;
text-align: justify;
}
</style>
</head>
<body>
<h2 id="Lorem_Ipsum">Lorem Ipsum</h2>
<p class="main-content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.
</p>
<p>Go to the
<a href="#Lorem_Ipsum">top</a>.
</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</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">Lorem Ipsum</h2>
<div class="main-content ">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</p>
</div>
<p>Go to the
<a href="#Lorem_Ipsum">top</a>.
</p>
</body>
</html>
您也可以从其他网站链接到您的锚链接。为此，添加 URL 后跟 # 和锚值。这种用法有两种类型。
链接到同一域中的另一个页面：
<a href="/learn-html/html-links.html#html_links">Go to the HTML Links in our website.</a>
来自另一个网站的链接：
<a href="https://en.wikipedia.org/wiki/Main_Page#wikipedia">Go to the main page of Wikipedia .</a>
从另一个网页链接到锚点的示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2 id="Lorem_Ipsum">Lorem Ipsum</h2>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>
<a href="/learn-html/html-links.html#html_links">Go to the HTML Links in our website.</a>
</p>
<p>
<a href="https://en.wikipedia.org/wiki/Main_Page#wikipedia">Go to the main page of Wikipedia.</a>
</p>
</body>
</html>
通过上述介绍，相信大家对创建HTML跳转链接代码已经有所了解，大家如果对此比较感兴趣，想了解更多相关知识，不妨来关注一下赢咖4的Java赢咖4在线学习，里面的课程内容细致全面，从入门到精通，对大家的学习一定会有所帮助。
Java实验班
0基础 0学费 15天面授
Java就业班
有基础 直达就业
Java夜校直播班
业余时间 高薪转行
Java在职加薪班
工作1~3年，加薪神器
Java架构师班
工作3~5年，晋升架构
提交申请后，顾问老师会电话与您沟通安排学习
官方微信
官方抖音
