zoukankan      html  css  js  c++  java
  • 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%

  • 相关阅读:
    汉语-谚语:条条大路通罗马
    汉语-词语:缱绻
    几何-对称图形:中心对称图形
    java解析获取Excel中的数据--同时兼容2003及2007
    如何使gcc输出搜索到的头文件路径?
    如何使tmux可以像vi一样操作(如快速跳转到某一行)?
    如何使tmux能够使用鼠标上下滚动?
    ID3v2: 为aac格式的音频文件添加ID3v2 Header
    FFmpeg: 利用FFmpeg提取音频文件中的metadata
    C语言:变长结构体
  • 原文地址:https://www.cnblogs.com/dafei4/p/13056659.html
Copyright © 2011-2022 走看看