最新消息: 关于Git&GitHub 版本控制你了解多少?
您现在的位置是:群英 > 服务器 > 系统运维 >
什么是HTML锚点?怎么设置锚点?
CSDN发表于 2020-09-03 18:24 次浏览

锚点是什么?

在W3C标准字“Anchor”一词即为锚点,其解释为:资源中的某个区域可以是零个、一个或多个链接的目标或源。锚点可以引用整个资源,或者的特定部分,或者资源的特定表现形式。
通俗的理解:锚点是一种超链接,只是它是页面内部的超链接。比如我们有一个网页很长很长,而且里面的内容,可以分为N个部分。这样的话,我们就可以在网页的顶部设置一些锚点,这样便可以方便浏览者点击相应的锚点,到达本页内相应的位置,而不必在一个很长的网页里自行寻找。
 
锚点的基本使用场景

当一个网页很长的时候,那么我们在翻阅这个网页的时候可能会有些不方便,比如我们已经翻阅到了底部之后想返回到顶部,那么只能拖动滚动条到顶部(或者刷新页面,但这个不是专业的做法),效果比较好的方法就是设置锚点来处理这个问题。

那么锚点如何设置呢?见如下代码:


 
  1.  
    <!DOCTYPE html>
  2.  
    <html lang="en">
  3.  
    <head>
  4.  
    <meta charset="UTF-8">
  5.  
    <title>Document</title>
  6.  
    </head>
  7.  
    <body>
  8.  
    <a href="#bottom" name="top">去底部</a>
  9.  
    <div style="height: 5000px; width: 300px; background-color: #123"></div>
  10.  
    <a href="#top" name="bottom">回到顶部</a>
  11.  
    </body>
  12.  
    </html>

这里就有两个锚点,一个名字叫做top,一个名字叫做bottom,其实a标签比较特殊,可以用name属性值来指定锚点的名称(当然也可以通过id值来指定锚点名称),其他标签只能通过id值来指定锚点名称,当id值为空的时候,默认锚点名称为#,即点击之后就是定位到本网页。

在以上代码中,锚点的使用可能不够合适,正确的做法是把锚点的position属性设置为fixed, 代码如下:


  1.  
    <!DOCTYPE html>
  2.  
    <html lang="en">
  3.  
    <head>
  4.  
    <meta charset="UTF-8">
  5.  
    <title>Document</title>
  6.  
    <style>
  7.  
    #control {
  8.  
    position: fixed;
  9.  
    left: 310px;
  10.  
    width: 100px;
  11.  
    height: 65px;
  12.  
    background-color: #ffa;
  13.  
    }
  14.  
    </style>
  15.  
     
  16.  
    </head>
  17.  
    <body>
  18.  
    <div id="control">
  19.  
    <li><a href="#top">top</a></li>
  20.  
    <li><a href="#mid">mid</a></li>
  21.  
    <li><a href="#bottom">bottom</a></li>
  22.  
    </div>
  23.  
    <div id="top"></div>
  24.  
    <div style="height: 1000px; width: 300px; background-color: yellow"></div>
  25.  
    <div id="mid"></div>
  26.  
    <div style="height: 1000px; width: 300px; background-color: red"></div>
  27.  
    <div id="bottom"></div>
  28.  
    </body>
  29.  
    </html>

锚点的知识拓展

可以定位到本地其他html文件的一个锚点,也可以定位到外部网站的某个html文件的一个锚点(有ID属性的标签),代码示例如下: 01.html


  1.  
    <!DOCTYPE html>
  2.  
    <html lang="en">
  3.  
    <head>
  4.  
    <meta charset="UTF-8">
  5.  
    <title>Document</title>
  6.  
    </head>
  7.  
    <body>
  8.  
    <a href="02.html#bottom">点击跳转到本地网页的一个锚点</a>
  9.  
    <a href="http://www.sohu.com#god_1">点击跳转到外部网页的一个锚点</a>
  10.  
    </body>
  11.  
    </html>

在转到外部网站的界面的时候,这里选择了转到搜狐主页的一个锚点god_1,通过实验可以发现,右边滚动条确实不在最顶端,证明发生了定向。

02.html


  1.  
    <!DOCTYPE html>
  2.  
    <html lang="en">
  3.  
    <head>
  4.  
    <meta charset="UTF-8">
  5.  
    <title>Document</title>
  6.  
    </head>
  7.  
    <body>
  8.  
    <a href="#bottom" name="top">去底部</a>
  9.  
    <div style="height: 5000px; width: 300px; background-color: #123"></div>
  10.  
    <a href="#top" name="bottom">回到顶部</a>
  11.  
    </body>
  12.  
    </html>

 

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
相关信息推荐