html锚链接

锚点(anchor):其实就是超链接的一种,一种特殊的超链接

普通的超链接,<a href="路径"></a> 是跳转到不同的页面

而锚点,<a href="路径"></a> 可以在同一个页面中不同的位置间跳转

可以看到,跳转到锚点的超链接跟普通的超链接格式是一样的,

1.使用锚点的步骤:

1.1.先建立锚点目标,

如上所述,锚点可以在同一页面的不同位置间跳转,其实就是在元素间跳转,

常用的场景就是,页面很长,让用户方便在页面不同部分间跳转

建立锚点目标,只需要给目标元素增加id或者name即可,推荐id:

        <div id="test" name="test"></div>

1.2.要创建跳转到id="test"的div的锚点,

           <a href="#test"></a>

注意:1.锚点的超链接路径一定包含"#",而后面紧跟元素的id或者name

(所以id和name必须一样,其实我试了有时name是不生效的)

2.锚点使用总结:

2.1. 建立锚点的元素必须要有id或name属性,最好两个都有

2.2. 锚点超链接一定包含井号"#",锚点超链接都在链接的最末端,具体看后面例子

2.3. 同一个页面不同部分的跳转,锚点的写法

目标元素:<p id="test"></p>     锚点超链接:<a href="#test"></a>

2.4. 不同页面跳转,同时存在锚点

目标元素:a.html页面的<div id="test"/>   锚点超链接:<a href="a.html#test"></a>

           (先跳到a.html页面,然后再寻找id=test的元素)

2.5. 不同页面带参数跳转,同时存在锚点

目标元素:a.php?p=abc页面的<div id="test"/>   锚点超链接:<a href="a.php?p=abc#test"></a>

时间: 2024-07-31 10:04:13

html锚链接的相关文章

img,a,锚链接,超链接

1.图片标签:img,单标签 图片属性: src(source): 图片的来源(路径),可以放置本地图片,也可以放网上的图片的url地址 title: 当鼠标停留在图片上的时候,显示提示的文字 alt:当文件找不到的时候,显示提示文字 width:宽度 height: 高度 2.路径: 绝对路径(一般不用):指的是文件在计算机里面的位置 相对路径(使用):用户工作目录开始的路径(路径的拼接使用/) ./:当前目录 ../:跳出当前目录,到上一目录 3.超链接:点击跳转,a 超链接的属性:href

超链接和锚链接

<a href=" " tarhet=" ">XXXX</a> href:要跳转的文件路径名称 target:_self(目标页面覆盖当前的页面) _blank(目标页面弹出心的框来显示) 锚链接 创建步骤: 第一步:创建锚点 <a name="锚点">XXXX</a> 第二步:访问锚点链接 <a href="#锚点">XXX</a> 功能性作用 <

锚链接

1.同页面锚文本-同页面内上下转到指定位置常常看见我们页面底部点击 “回到顶部”链接就会转到网页顶部实现. 1.在网页添加一个<!--被定位的--> <span id="top" name="top"></span> 2.点击后跳转到被定位的位置(用到a标签)  <!--点击跳转--> <a href="#top">回到顶部</a> 2.多数用于文章标题的跳转 .跳转外部页面

HTML学习笔记——锚链接、pre标签、实体

1>锚链接 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="

平滑滚动-锚链接

老代码了 demo1: var ss = { fixAllLinks: function() { // Get a list of all links in the page var allLinks = document.getElementsByTagName('a'); // Walk through the list for (var i=0;i<allLinks.length;i++) { var lnk = allLinks[i]; if ((lnk.href && ln

JQ 滑动锚链接

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></sc

网站SEO外链中锚文本指向首页还是指向内页?

我们在做外链的时候,我们总会被一个问题所困扰,就是我们是如何做链接的指向呢?我想这个问题特别是那些新手seo与草根站长会常常纠结吧,不知道自己所发的外链到底有没有效果,对网站的排名有没有帮助呢?今天本站针对这个问题就给大家解答一下吧! 做外链的时候,关键词做锚链接,到底是链接到内页还是链到首页?因为锚链接对关键词排名有直接的作用,但是我们在做产品的时候,产品关键词按理来说是链到对应的内页,这样用户体验才是最好的. 但是如果是这样的话对我们首页关键词排名就不利,因为链接到内页,投票就投给了内页而非

锚的神秘面纱

锚(Anchor)是什么? 之前我是这样认为的:锚是一个href="#id"或者“#name”这种a标签,主要用于页面内元素的快速定位,实现书签或者目录的功能. 后来我改变了对锚的看法,才识庐山真面目. 现在我对它的有了全新的认识:锚是一个anchor标签,即<a>标签.锚通过href属性可以链接到其它页面,也可以链接到当前页面的某个位置. 我们平时常说的锚点,或者锚链接,其实都是锚,叫法虽然不同但是本质一样,就像“西红柿”和“番茄”一样,只是一种叫法.网上对锚点或者锚链接

网页设置锚点

锚链接一般用于本页面的跳转,比如页面太长,到了尾部要瞬间到顶部,就可以用锚链接. HTML 链接 - name 属性 name 属性规定锚(anchor)的名称. 您可以使用 name 属性创建 HTML 页面中的书签. 书签不会以任何特殊方式显示,它对读者是不可见的. 当使用命名锚(named anchors)时,我们可以创建直接跳至该命名锚(比如页面中某个小节)的链接,这样使用者就无需不停地滚动页面来寻找他们需要的信息了. 命名锚的语法: <a name="label">