《HTML之锚点》

来源：互联网发布：移动有网络机顶盒吗编辑：程序博客网时间：2024/06/11 00:25

【一】先不说什么是锚点，先看一段例子：

打开京东官网，鼠标往下滑，滑到一定程度，请往左边看，诶，每个都点击一下，是不是每点一次，都会和滚动到相应的地方，而且还是在同一个页面，没有跳转，这是怎么做到的呢？

【二】别让我看见，不然我都给你仿出来

1、要想通过a标签跳转到指定的位置，那么必须告诉a标签一个独一无二的身份证号码，这样a标签才能在当前界面中找到需要跳转到的目标位置。

2、如何和HTML中的标签绑定一个独一无二的身份证号码？

在HTML中，每一个标签都有id属性，这个属性就是用来给标签指定一个独一无二的身份证号码的。

3、要想实现通过a标签跳转到指定的位置分为两步：

（1）给目标位置的标签添加一个id属性，然后指定一个独一无二的值

格式：

<h2 id="middle">2、这里是中部</h2>

（2）告诉a标签你需要跳转到的目标标签对应的独一无二的身份证号码是多少，一个#号后面加上id值

格式：

<a href="#bottom">点击一下到底部</a>

注意点：

通过a标签跳转到指定的位置，是没有过度动画的，不像京东那样有滚动的效果，而是直接跳到指定的位置。

4、开始仿照，为了让效果更明显点，这里加了个表单里的组合元素：

<fieldset>    <legend>顶部</legend>    <h2 id="top">1、这里是顶部</h2>    <a href="#middle">点击一下到中部</a></fieldset>

【示例代码】

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>HTML之锚点</title></head><body><fieldset>    <legend>顶部</legend>    <h2 id="top">1、这里是顶部</h2>    <a href="#middle">点击一下到中部</a></fieldset><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><fieldset>    <legend>中部</legend>    <h2 id="middle">2、这里是中部</h2>    <a href="#bottom">点击一下到底部</a></fieldset><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><fieldset>    <legend>底部</legend>    <h2 id="bottom">3、这里是底部</h2>    <a href="#top">点击一下到顶部</a></fieldset></body></html>

【演示效果】

【三】跳转到其他页面的指定位置

1、首先要知道你要跳转的页面的地址（本地文件名.html和网页网址URL）

2、然后要知道你要跳转的页面的指定位置，也就是id

3、格式：

页面地址#id

<p><a href="HTML之锚点.html#top">Top</a></p>

利用上面已经创建好了的HTML之锚点.html文件，再新建一个文件，代码如下：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>HTML之锚点练习</title>    <base target="_blank"></head><body><p><a href="HTML之锚点.html#top">Top</a></p><p><a href="HTML之锚点.html#middle">Middle</a></p><p><a href="HTML之锚点.html#bottom">Bottom</a></p></body></html>

【效果图】

点击上面的Top、Middle、Bottom就会跳转到另一个页面的指定位置。

-------------------------------1--------------------------------------

-------------------------------2--------------------------------------

-------------------------------3--------------------------------------

阅读全文

0 0