HTML5中a标签的锚点使用

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

HTML4锚点链接实现示例:


   
   
1
2
3
4
5
6
7
8
9
< 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。七彩新闻网http://www.qicainews.cn/


   
   
1
2
3
4
5
6
7
8
9
< 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" > <span class="ace_cjk" style="word-wrap: break-word; box-sizing: border-box; margin: 0px; padding: 0px; display: inline-block; text-align: center; widt
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值