html中的锚点和页面如何跳转？dw网页设计
作者：admin 发布时间：2022-11-27 点击数：
<h2>一、页面内跳转的锚点设置</h2><p>页面内的跳转需要两步：</p><p><strong>方法一：</strong></p><p>①：设置一个锚点链接<a href="#miao">去找喵星人</a>；（注意：href属性的属性值最前面要加#）</p><p>②：在页面中需要的位置设置锚点<a name="miao"></a>；（注意：a标签中要写一个name属性，属性值要与①中的href的属性值一样，不加#）标签中按需填写必要的文字，一般不写内容</p><p><strong>方法二：</strong></p><p>①：同方法一的①</p><p>②：设置锚点的位置 <h3 id="miao">喵星人基地</h3>；在要跳转到的位置的标签中添加一个id属性，属性值与①中href的属性值一样，不加#</p><p>方法二不用单独添加一个a标签来专门设置锚点 ，只在需要的位置的标签中添加一个id即可。</p><h2>二、跨页面跳转</h2><p>①：设置锚点链接，在href中的路径后面追加：#+锚点名，即可</p><p>如：<a href="萌宠集结号.html#miao">跳转到萌宠集结号页面</a></p><p>②：要跳转到的页面中要设置锚点，方法见一种的步骤②，两个方法任选其一。</p><p>以上就是html中的锚点和页面跳转的详细内容~~</p><pre class="brush:html;toolbar:false"><!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DW网页设计：锚点</title>
<style type="text/css">
*{padding: 0; margin: 0; list-style-type: none;}
a{text-decoration: none;}
.nav{position: fixed; left: 20px; top:50%; transform: translateY(-50%);}
.nav ul li a{display: block; width: 200px; height: 60px; color: #fff; line-height: 60px; background: #000; margin: 10px 0; font-size: 26px; text-align: center;}
.nav ul li a:hover{background: #c00;}
section{width: 100%; height: 100vh; text-align: center; background: #eee;}
.one{background: blueviolet}
.two{background: green;}
.three{background: greenyellow;}
</style>
</head>
<body>
<div class="nav">
<ul>
<li><a href="#one">内容一</a></li>
<li><a href="#two">内容二</a></li>
<li><a href="#three">内容三</a></li>
</ul>
</div>
<section id="one" class="one">内容一</section>
<section class="two"><a name="two"></a> 内容二</section>
<section id="three" class="three">内容三</section>
</body>
</html></pre><p><img style="max-width:100%!important;height:auto!important;" src="/uploads/allimg/20221127/1-22112G10434106.jpg" title="html中的锚点和页面如何跳转？dw网页设计(图1)" alt="01.jpg"/></p>
