HTML中的锚点

最新推荐文章于 2022-07-25 10:23:53 发布

拜拜雪公主zz

最新推荐文章于 2022-07-25 10:23:53 发布

阅读量248

点赞数

分类专栏：前端html系列笔记文章标签： html

本文链接：https://blog.csdn.net/qq_46152483/article/details/119105274

版权

前端html系列笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

HTML中页面跳转有两种一种是页面内跳转，一种是跨页面跳转，两种的锚点设置也不同
一、页面内跳转

设置一个锚点链接<a href="#center">跳转到中部</a>
锚点设置< h2 id ="center">这里是中部</a>
给跳转的标签加一个id属性

二、跨页面跳转

设置一个锚点链接<a href="1-测试页面.html #center">跳转到测试页面</a>
锚点设置< h2 id ="center">这里是测试页面中间</a>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h2>这里是顶部</h2>
<br>
<br>
<a href="#1005">跳转到底部</a>
<a href="#2020">跳转到中部</a><br>
<a href="1-锚点测试页面.html" target="_blank">跳转到锚点测试页面</a><br>
<a href="1-锚点测试页面.html#111" target="_blank">跳转到锚点测试1</a><br>
<a href="1-锚点测试页面.html#222" target="_blank">跳转到锚点测试2</a><br>
<a href="1-锚点测试页面.html#333" target="_blank">跳转到锚点测试3</a>

<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<h2 ID="2020">这里是中部</h2>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

<h2 ID="1005">这里是底部</h2>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h2>锚点测试页面</h2>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<h2 ID="111">锚点测试1</h2>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<h2 ID="222">锚点测试页面2</h2>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<h2 ID="333">锚点测试页面3</h2>
</body>
</html>

拜拜雪公主zz

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML中的锚点

HTML中页面跳转有两种一种是页面内跳转，一种是跨页面跳转，两种的锚点设置也不同一、页面内跳转设置一个锚点链接<a href="#center">跳转到中部</a>锚点设置< h2 id ="center">这里是中部</a>给跳转的标签加一个id属性二、跨页面跳转设置一个锚点链接<a href="1-测试页面.html #center">跳转到测试页面</a>锚点设置< h2 id ="center"&gt
复制链接

扫一扫