html的锚链接具体怎么用

html-css010

html的锚链接具体怎么用,第1张

当网页内容太长或要导航到其它页面的一个具体位置时,可以使用  Html 中书签。具体使用方法如下:

1、同一个web页面链接首先设计书签、<a name=”top”></a>在不同位置定义,<a href=”#top”>返回到top位置</a>。

2、不同的页面之间转接,如果是在不同的页面之间链接时要在href属性中加上网页名称,First.html中定义了书签,<a name=”top”>Top的位置</a>。

3、现在要从Second.html中转入First.html并且将位置定到top所在的位置,可以设置,<a href=”first.html#top”>return first Top</a>。

拓展资料:

HTML 超链接(链接)介绍:

超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

当您把鼠标指针移动到网页中的某个链接上时,箭头会变为一只小手。

我们通过使用 <a>标签在 HTML 中创建链接。

有两种使用 <a>标签的方式:

1、通过使用 href 属性 - 创建指向另一个文档的链接

2、通过使用 name 属性 - 创建文档内的书签

参考资料:HTML链接_W3Cschool

01

右击桌面,新建一个文本文档。

02

打开文档,输入需要写的HTML代码,如下图所示:

<html>

<head>

<title>简单html页面</title>

</head>

<body>

<a href="url">明天,你好!</a>

</body>

</html>

03

点击文件中的保存文档。

04

选择用浏览器的方式打开文档,就可以看到我们刚刚编辑的锚点链接了。

在网页中经常用到锚点,特别是在比较长的页面中锚点的使用会增加用户体验,现在php中文网介绍html 锚点三种实现方法

1) . 在同一页面中

<a name="add"></a>或者 <a id="add"></a>(ps:用id兼容性好些)

<a href="#add">跳转到add</a>

2) . 在不同页面中,锚点定位在a.html中,从另外一个页面的链接跳转到这个锚点

<a href="a.html#add">跳转到a.add</a>

3) . 点击链接触发js事件,同时跳转到锚点,有两种处理方式:

第一种:

<a href="#add" onclick="add()">触发add函数并跳转到add锚点</a>

第二种:

<p id="pNode"></p>

<a href="#" onclick="document.getElemetnById('pNode').scrollIntoView(true)return false">通过scrollIntoView实现锚点效果</a>

scrollIntoView()的用法

scrollIntoView 是一个与页面(容器)滚动相关的API( 官方解释 ),该API只有boolean类型的参数能得到良好的支持(firefox 36+都支持),所以在这里只讨论参数Boolean类型的情况

调用方法为 element.scrollIntoView() 参数默认为true。

参数为true时调用该函数,页面(或容器)发生滚动,使element的顶部与视图(容器)顶部对齐;

参数为false时,使element的底部与视图(容器)底部对齐。

TIPS:页面(容器)可滚动时才有用!