注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

——挨踢民工 Playkid——

一个搞IT的人!也是一个被IT搞的人!因为迷恋互联网而一网情深、最后落网为虫!

 
 
 

日志

 
 
 
 

锚点链接  

2012-03-29 23:59:23|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |



<a> 标签可定义锚。锚 (anchor) 有两种用法:
通过使用 href 属性,创建指向另外一个文档的链接(或超链接)
通过使用 name 或 id 属性,创建一个文档内部的书签(也就是说,可以创建指向文档片段的链接)


第一步
在要到的playkid.html页面位置加上<a name="123"></a>

第二步
要链接的playkid.html页面地方:<a href="playkid.html#123">链接到PlayKid的123</a>



html添加的锚点



能指向页面里的特定段落,更能当作"精准链接"的便利工具,让链接对象接近焦点.,便于浏览者查看网页内容





书签不会以任何特殊方式显示,它对读者是不可见的。当使用命名锚(named anchors)时,我们可以创建直接

跳至页面中某个节的链接。


分为两步:创建命名锚记和链接到命名锚记。


第一种:


...一些文字...

<a href="#leifeng">关于雷锋的传说</a>

...一些文字...

<a name="leifeng"></a>

<h2>雷锋同志做好事不留名的故事</h2>

...更多文字...


创建锚点链接,首先要设置一个命名锚点(<a name="leifeng">),然后建立到命名锚点的链接(<a 

href="#leifeng">)。当页面包含了很长的内容时,我们能通过这个方法十分方便的连到特定的字段。

这里浪费一个内容空白的标签(<a name="leifeng"></a>)来标识链接位置,不利于SEO。


第二种:


...一些文字...

<a href="#leifeng">关于雷锋的传说</a>

...一些文字...

<h2><a name="leifeng">雷锋同志做好事不留名的故事</a></h2>

...更多文字...

我们仍然使用<a>标签配上name属性,但这次我们把它包在我想要链接的标题外面。

如果你为所有的<a>元素指定了全局的CSS样式的话(颜色、文字大小、文字装饰等等),这些样式就会覆盖你为

<h2>元素指定的样式。


第三种:使用id属性来创建链接锚


<a href="#leifeng">关于雷锋的传说</a>

...一些文字...

<h2 id="leifeng">雷锋同志做好事不留名的故事</h2>

...更多文字...



id属性的功能就像name属性,同样能为页面指定锚点;另外,消除了使用name属性是需要的额外<a>标签,我们

不需要为仅仅设定锚点而加上额外的代码。

<div>、<form>、<p>、<ul>都可以添加id属性来创建锚点;注意id命名必须以字母A-Z或 a-z 开头。

锚点链接
创建命名锚点(简称锚点)就是在文档中设置位置标记,并给该位置一个名称,以便引用。通过创建锚点,可以

使链接指向当前文档或不同文档中的指定位置。锚点常常被用来跳转到特定的主题或文档的顶部,使访问者能够

快速浏览到选定的位置,加快信息检索速度。 

 






第四种:合而为一

<a href="#leifeng">关于雷锋的传说</a>

...一些文字...

<h2><a id="leifeng" name="leifeng">雷锋同志做好事不留名的故事</a></h2>

...更多文字...


锚点只需name就可以可,加id是为了让它兼容性更好。以上代码在IE6/7及火狐中都可以兼容,但在IE8中就不行

,name属性不支持未来的浏览器。
因为我们锚点的<a></a>值为空,为不影响美观我们加个空格或留空就行了。

ID就像是一个人的身份证号码,而Name就像是他的名字,ID显然是唯一的,而Name是可以重复的。同一个Form里

不能有多个name属性相同的HTML标记,但一个网页中多个不同的Form里可以有同个Name属性的标记。而ID是全局

的,在一个HTML文档里不能有多个节点使用相同的ID,无论它处在哪个Form里。



程序那边说他们要取值,连接中必须要有“?”或“&”,那这样我的锚点就不兼容了…

Anchor

我们将这些标记点称为锚点(Anchor)


另外再说一下,<a name="A0" id="A0"></a>中的name与id,可以只使用一个,但某些情况下,只是用name会造

成锚点无效的错误。建议还是name与id同时使用。 
  评论这张
 
阅读(5141)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2016