站内搜索:
首页 >> 前端 >> 内容
html中<a>标签中锚点的用法

时间:2015/11/16 9:29:51

在html中,<a>标签作为超级链接使用频繁,然后我们在日常浏览网页的时候,经常会看到它的另一种作用--锚点。通俗来说就是给页面的某些位置打上“标记”日后便于寻找。

  实际生活中,我们在浏览一个较长的页面时,往往会看一个类似“top”的控件,实际上这就是锚点的作用,当我们触发这个控件时便能回到页面顶部,即回到页面标记的锚点位置。下面看一下具体代码:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>colajia</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
</head>
    <body>
        <a href="maodian.html#j1">p1</a>
        <a href="maodian.html#j2">p2</a>
        <a href="maodian.html#j3">p3</a>
        <a name="j1"></a>
        <p>p1</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 />
         <br />
         <br />   
        <a name="j2"></a>              
        <p>p2</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 />
         <br />
         <br />  
        <a name="j3"></a>             
        <p>p3</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 />
         <br />
         <br />                   
    </body>
</html>

 


  • 上一篇:CSS基础学习十一:选择器的优先级
  • 下一篇:CSS基础学习七:属性选择器
  • 返回顶部