zoukankan      html  css  js  c++  java
  • HTML的假链接、锚点

    一、假链接

    1、含义:点击之后不会跳转的链接我们称为假链接

    2、作用:在企业开发前期,要跳转的链接界面内容还没有写出来时,会使用假链接替代;当项目和后期界面内容写出来了,再用真链接替代假链接

    3、格式:有2种

        1)#

         2)javascript

    两者的区别:

    # 假链接会自动跳回到网页的顶部,javascript 只会在当前位置,不会有任何跳转

    代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>假链接使用</title>
    </head>
    <body>
        <p>我是顶部</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>
        <a href="#">点我试试,我要跳到顶部</a>
        <a href="javascript">点我我也不跳转</a>
    </body>
    </html>

    二、锚点

    1、要求通过a标签跳转到当前页面的指定位置,则需要给a标签要跳转位置的标签的 id属性,这样a标签才能跳转到指定位置

    2、在 html中,每一个标签都有一个名称叫做id属性,这个属性用来给标签指定一个独一无二的身份

    3、通过a标签跳转到指定位置分为两步:

    3.1  给目标位置的标签添加一个id属性,然后指定一个独一无二的值

    3.2  告诉a标签你需要跳转到的目标标签对应的id值

    4、格式:

    跳转到当前页的某个指定位置:    <a href="#center">点我,我要跳到本页的中部</a>

    跳转到其他页面的某个指定位置:<a href="04_锚点.html#bottom" target="_blank">点我,我要跳去锚点网页的底部</a>

    5、注意点:

    5.1 通过a标签跳转到指定的位置,是没有过度动画,是直接一下子跳到指定位置

    5.2  a标签除了可以跳转到当前界面的指定位置以外,还可以再跳转到其他界面的某个指定位置

    举例1:跳转到本页的某个指定位置

         <a href="#center">点我,我要跳到本页的中部</a>
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>假链接使用</title>
    </head>
    <body>
        <h2 id="top">我是顶部</h2>
        <a href="#center">点我,我要跳到本页的中部</a>
        <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>
        <h2 id="center">我是中部</h2>
        <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>
        <h2 id="bottom">我是底部</h2>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
    </body>
    </html>

    举例2:下面代码演示从假连接.html跳转到锚点.html的底部文字位置

    假连接.html  代码(运行本文件)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>假链接使用</title>
    </head>
    <body>
        <p>我是顶部</p>
        <a href="04_锚点.html#bottom" target="_blank">点我,我要跳去锚点网页的底部</a>
    
    </body>
    </html>

    锚点.html 代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>锚点测试</title>
    </head>
    <body>
        <h2 id="top">我是锚点顶部</h2>
        <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>
        <h2 id="center">我是锚点中部</h2>
        <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>
        <h2 id="bottom">我是锚点底部</h2>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
    </body>
    </html>
  • 相关阅读:
    项目依赖库列表文件requirements.txt生成和使用
    pymysql执行sql语句无效问题
    Prometheus
    关于在安装wampserver出现“由于找不到msvcr110.dll”的问题的解决办法
    安装centos8和Window10出现的一些问题和解决方法
    LeetCode833题:字符串中的查找与替换
    Pycharm中github的使用(只有链接供自己学习使用)
    机器学习《西瓜书》的学习笔记——机器学习使用的领域
    机器学习中数理统计与参数估计的相关基础概念
    怎样在Anaconda中的某一个环境中安装Python的相关包(pypyodbc)
  • 原文地址:https://www.cnblogs.com/wodexk/p/10284578.html
Copyright © 2011-2022 走看看