The role of named anchors: Jump to different positions within the same page.
Popular understanding: You can jump to other locations on the page through anchor points. When the page is too long, you can divide the page into several parts, set some anchor points at the top, and click to facilitate the viewer to quickly locate the corresponding location.
Make an anchor mark:
1)给元素定义命名锚记名
语法：<标记 id="命名锚记名"> </标记>
2)命名锚记连接
语法：<a href="#命名锚记名称"></a>
note:
- Add **#** (href="#id名) to the top of the attribute value of the href attribute
- The id attribute is added to the label of the location to jump to
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
/* 自适应窗口高度 */
html,
body {
height: 100%;
}
p {
height: 100%;
text-align: center;
line-height: 600px;
font-size: 100px;
font-family: "宋体";
color: #fff;
}
p:nth-of-type(1) {
background-color: rgb(32, 59, 4);
}
p:nth-of-type(2) {
background-color: rgb(11, 10, 31);
}
p:nth-of-type(3) {
background-color: rgb(77, 83, 20);
}
p:nth-of-type(4) {
background-color: rgb(58, 9, 34);
}
a {
display: block;
width: 100px;
height: 40px;
border: 1px solid rgb(105, 36, 36);
text-align: center;
line-height: 40px;
font-size: 14px;
color: #fff;
margin-bottom: 10px;
}
div {
position: fixed;
right: 0;
top: 200px;
}
</style>
</head>
<body>
<!-- 1.作用：同一页面不同位置快速跳转 -->
<!-- 2.语法 -->
<div>
<a href="#p1">春晓</a>
<a href="#p2">悯农</a>
<a href="#p3">静夜思</a>
<a href="#p4">鹅鹅鹅</a>
</div>
<p id="p1">
春眠不觉晓，处处闻啼鸟
</p>
<p id="p2">
锄禾日当午，汗滴和下土
</p>
<p id="p3">
窗前明月光，地上鞋两双
</p>
<p id="p4">
白毛浮绿水，红掌拨清波
</p>
</body>
</html>
Jump to a fixed location on another page
<a href="practice.html#one"></a>
<!-- 跳转到practice.html页面中id名为one的标签的位置-->
Small exercise:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>电子相册</title>
<style>
*{
margin: 0px;
padding: 0px;
}
.box1{
width: 421px;
height: 325px;
border: 1px solid #CDCDCD;
background-color: #666666;
position: relative;
margin: 200px auto;
}
h1{
color: #fff;
height: 48px;
line-height: 48px;
text-align: center;
font-size: 18px;
width: 100%;
}
.box2{
width: 280px;
height: 196px;
border: 1px solid #fff;
margin-left: 20px;
overflow: hidden;
}
.box3{
width: 80px;
height: 196px;
position: absolute;
right: 0px;
top: 48px;
overflow: auto;
/* overflow-y:scroll;也可以 */
}
.box3 img {
vertical-align: top;
/* 用来解决图片把外层容器多撑开3px的问题 */
}
.box3 a{
display: block;
margin-bottom: 5px;
}
</style>
</head>
<body>
<div class="box1">
<h1>电子相册</h1>
<div class="box2">
<!-- 快捷键生成：img[src="../images/mn$.ipg"]*8 按回车 -->
<img src="../images/mn1.jpg" alt="" id="photo1">
<img src="../images/mn2.jpg" alt="" id="photo2">
<img src="../images/mn3.jpg" alt="" id="photo3">
<img src="../images/mn4.jpg" alt="" id="photo4">
<img src="../images/mn5.jpg" alt="" id="photo5">
<img src="../images/mn6.jpg" alt="" id="photo6">
<img src="../images/mn7.jpg" alt="" id="photo7">
<img src="../images/mn8.jpg" alt="" id="photo8">
</div>
<div class="box3">
<!-- 快捷键生成：a[href="#photo$"]*8>img[src="../images/c$.ipg"] 按回车 -->
<a href="#photo1"><img src="../images/c1.jpg" alt=""></a>
<a href="#photo2"><img src="../images/c2.jpg" alt=""></a>
<a href="#photo3"><img src="../images/c3.jpg" alt=""></a>
<a href="#photo4"><img src="../images/c4.jpg" alt=""></a>
<a href="#photo5"><img src="../images/c5.jpg" alt=""></a>
<a href="#photo6"><img src="../images/c6.jpg" alt=""></a>
<a href="#photo7"><img src="../images/c7.jpg" alt=""></a>
<a href="#photo8"><img src="../images/c8.jpg" alt=""></a>
</div>
</div>
</body>
</html>