网页设置锚点

来源：互联网发布：2017淘宝店铺复核认证编辑：程序博客网时间：2024/06/03 17:48

HTML 链接 - name 属性

name 属性规定锚（anchor）的名称。

您可以使用 name 属性创建 HTML 页面中的书签。

书签不会以任何特殊方式显示，它对读者是不可见的。

当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。

命名锚的语法：

<a name="label">锚（显示在页面上的文本）</a>

提示：锚的名称可以是任何你喜欢的名字。

提示：您可以使用 id 属性来替代 name 属性，命名锚同样有效。

实例

首先，我们在 HTML 文档中对锚进行命名（创建一个书签）：

<a name="tips">基本的注意事项 - 有用的提示</a>

然后，我们在同一个文档中创建指向该锚的链接：

<a href="#tips">有用的提示</a>

您也可以在其他页面中创建指向该锚的链接：

<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>

在上面的代码中，我们将 # 符号和锚名称添加到 URL 的末端，就可以直接链接到 tips 这个命名锚了。

实例:

 1 <!DOCTYPE html> 2 <html> 3     <head> 4       <meta charset="utf-8" /> 5       <title> 6        锚点      7      </title>     8     </head> 9     <body>10         <a name="top">11</a>11       <br><br/>     12       <br><br/>     13       <br><br/>     14       <br><br/>     15       <br><br/>    16       <br><br/>     17       <br><br/>     18       <br><br/>     19       <br><br/>     20       <br><br/>    21       <br><br/>     22       <br><br/>     23       <br><br/>     24       <br><br/>     25       <br><br/>    26       <br><br/>     27       <br><br/>     28       <br><br/>     29       <br><br/>     30       <br><br/>    <br><br/>     31       <br><br/>     32       <br><br/>     33       <br><br/>     34       <br><br/>    35       36       <br><br/>     37       <br><br/>     38       <br><br/>     39       <br><br/>     40       <br><br/>    41       <br><br/>     42       <br><br/>     43       <br><br/>     44       <br><br/>     45       <br><br/>    46       <br><br/>     47       <br><br/>     48       <br><br/>     49       <br><br/>     50       <br><br/>    <br><br/>     51       <br><br/>     52       <br><br/>     53       <br><br/>     54       <br><br/>    <br><br/>     55       <br><br/>     56       <br><br/>     57       <br><br/>     58       <br><br/>    59       60       <br><br/>     61       <br><br/>     62       <br><br/>     63       <br><br/>     64       <br><br/>    65       <br><br/>     66       <br><br/>     67       <br><br/>     68       <br><br/>     69       <br><br/>    70       <br><br/>     71       <br><br/>     72       <br><br/>     73       <br><br/>     74       <br><br/>    75       <br><br/>     76       <br><br/>     77       <br><br/>     78       <br><br/>     79       <br><br/>    <br><br/>     80       <br><br/>     81       <br><br/>     82       <br><br/>     83       <br><br/>    84       85       <a href="#top" >头部</a>86     </body>87 </html>

阅读全文

0 0