html a标签 href 属性[ 跳转和锚点]

html a标签 href 属性

<a href="https://www.cnblogs.com/" target="_blank">跳转到 https://www.cnblogs.com/ 这个站点</a>
<a href="www.cnblogs.com" target="_blank">跳转到站点内的www.cnblogs.com页面 </a>

a标签 href 的 URL 值

超链接的 URL 可能值:
01) 绝对 URL - 指向另一个站点（比如 href="http://www.cnblogs.com"）
02) 相对 URL - 指向站点内的某个文件（href="index.htm"）
02-2) 相对 URL - 指向站点内的某个文件（href="www.cnblogs.com"）
[ 这里如果没有http:// , 会认为是打开站点内的文件 ]
03) 锚 URL - 指向页面中的锚（href="#top"）

二: 锚点代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>a标签锚点</title>
    <script src="jquery-3.5.1.js"></script>
    <style>
        .btn {
            position: fixed;
            left: 10%;
            top: 20%;
            display: flex;
            flex-direction: column;
        }
        .btn a {
            width: 120px;
            height: 30px;
            color: #ffffff;
        }
        div.content{
            border: 5px solid #000000;
            color: #ffffff;
        }
    </style>
</head>
<body>

<div class="btn">
    <span>a标签锚点</span>
    <a href="#dafei_01">跳转到dafei_01</a>
    <a href="#dafei_02">跳转到dafei_02</a>
    <a href="#dafei_03">跳转到dafei_03</a>
    <a href="#dafei_04">跳转到dafei_04</a>
</div>


<div class="content" id="dafei_01" style="height:100vh;background:#ff9185">我是dafei_01</div>
<div class="content"  id="dafei_02" style="height:100vh;background:#fff94c">我是dafei_02</div>
<div class="content"  id="dafei_03" style="height:100vh;background:#ffc3ca">我是dafei_03</div>
<div class="content"  id="dafei_04" style="height:100vh;background:#8386ff">我是dafei_04</div>

</body>
</html>

View Code

其他:

视窗单位 vw vh

1.vw：1vw等于视口宽度的1%。
2.vh：1vh等于视口高度的1%