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

HTML4锚点链接实现示例：

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

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

HTML5錨点链接的实现示例

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

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

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