6锚点链接

雪花酥01

已于 2024-08-12 11:48:35 修改

阅读量96

点赞数 1

分类专栏：大前端 # html 文章标签：前端 html css

于 2024-08-08 10:09:04 首次发布

本文链接：https://blog.csdn.net/shuozai1204/article/details/141019262

版权

大前端同时被 2 个专栏收录

164 篇文章 0 订阅

订阅专栏

html

20 篇文章 0 订阅

订阅专栏

主要作用：主要用于页面内跳转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>锚点链接</title>
</head>
<body>
<!--
    实现页面内跳转的方式
        href里面的内容: #加上想要跳转到的标签的id名
 -->
<a href="tz.html#center">我想跳转到tz.html页面的中间位置</a>
<p>
    <a href="#syz">syz</a>
</p>
<p>
    <a href="#sqa">xqa</a>
</p>
<p>
    <a href="#zpq">zpx</a>
</p>
<p>
    <a href="#shm">shm</a>
</p>
<!-- id就相当于给这个标签起了一个小名 id是唯一的不能重复 -->
<h1 id="syz" style="height: 1000px;background-color: red">香港的</h1>
<h1 id="xqa" style="height: 1000px;background-color: green">台湾的</h1>
<h1 id="zpq" style="height: 1000px;background-color: pink">澳门的</h1>
<h1 id="shm" style="height: 1000px;background-color: hotpink">西安的</h1>
</body>
</html>

跳转到tz页面内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tz</title>
</head>
<body>
hello
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p id="center">我在中间</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>