HTML5中a标签的锚点使用

2017-07-13 14:19:00
admin
原创
2240

前几天有个用户问我关于在线手册功能里的锚点问题。因为他通过代码发现,在编辑手册内容时,锚点的设置是通过id选择器来制定的,而不是带有name属性的a标签。其实这是HTML5和HTML4(XHTML)等之前版本之间的一个差异,也可以说是一个升级改进。本文我们一起来分享学习下HTML5中是如何实现锚点链接的以及与HTML4相比,做了哪些改进和优势。

HTML4锚点链接实现示例:


<body>
  <a href="#d3">我在找OA系统</a><br/>
  <a name="d1">禅道项目管理软件</a>
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  <a name="d2">蝉知企业门户系统</a>
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  <a name="d3">然之协同办公系统</a>
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>


在之前HTML版本中,a标签通name属性实现锚点的定位,再通过href属性指向具体锚点。注意,这里name属性只是针对a标签,其他标签不可随意添加name属性,而且其余诸如表单之类的name属性的意义作用是不同的。所以a标签的锚点链接有局限性,如果你想吧在其他元素中设置锚点,需要在其他标签中添加一层带有name属性的a标签。比如上面的示例中,把a标签改为h3。



<body>
  <a href="#d3">我在找OA系统</a><br/>
  <h3><a name="d1">禅道项目管理软件</a></h3>
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  <h3><a name="d2">蝉知企业门户系统</a></h3>
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  <h3><a name="d3">然之协同办公系统</a></h3>
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>


可见如此操作,影响代码美观,略显繁琐。


HTML5锚点链接的实现示例

相比HTML4,HTML5做了很大的改进,摒弃之前a标签嵌套的繁琐,而是废除了name属性,改用id来定位锚点。就如同CSS,Jquery中的ID选择器定位页面DOM元素一样,通过ID快速跳转到指定锚点位置。同样的示例:


<body>
  <a href="#d3">我在找OA系统</a><br/>
  <a id="d1">禅道项目管理软件</a>
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  <a id="d2">蝉知企业门户系统</a>
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  <a id="d3">然之协同办公系统</a>
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>


HTML5这样修改最大的好处就是方便用户跳转任意元素,因为每个元素都可以设置ID属性,而无需再去嵌套a标签。也就是说,HTML5中所有设有id属性的标签元素都可直接当作锚点。使用选择器定位,这样也很符合前端人员书写CSS,Jquery的习惯。而且各大主流搜索引擎都已兼容该功能。


现在再回过头来看用户提问的关于蝉知系统手册功能里锚点问题,就迎刃而解了。本文我们一起分享了HTML5中是如何实现锚点链接的,如果大家在平时网站开发运营过程中遇到其他问题,欢迎一起分享交流,我们共同学习,共同进步。




版权声明

版权声明:本站原创文章,转载请注明作者和出处。

本站点采用 知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议  

发表评论
评论通过审核后显示。
关注【小薛建站】

扫一扫,分享更多技术干货

热门文章
近期留言

memory2018-08-27

不错不错。。。虽然我一直用nginx.但是这篇apache的配置ssl介绍的还是蛮详细的

http://www.tbztc.top/2018-07-31

科目三,我第一把输在直线行驶了,因为对面刚好来了一张出租车,有点心慌

智宇2018-07-27

小程序是不是就是html套个外壳? www.shenhuangji.com

游客2018-07-25

好文

达龙2018-07-24

换个友链吧 哥哥 www.zzr2.com