前几天有个用户问我关于在线手册功能里的锚点问题。因为他通过代码发现,在编辑手册内容时,锚点的设置是通过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中是如何实现锚点链接的,如果大家在平时网站开发运营过程中遇到其他问题,欢迎一起分享交流,我们共同学习,共同进步。

最新文章

  1. Thoughtful function is also good for investigation
  2. history对象的一些知识点
  3. HDU 4777 Rabbit Kingdom --容斥原理+树状数组
  4. UVA 11795 七 Mega Man&#39;s Mission
  5. 如何设置BIOS使服务器断电后再来电能自动开机
  6. impdp的一些实际问题解决方法
  7. iOS 8 Xcode6 设置Launch Image 启动图片&lt;转&gt;
  8. 【Linux】鸟哥的Linux私房菜基础学习篇整理(七)
  9. 瑞柏匡丞谈中国移动app的国际进阶路
  10. Linux 计算器
  11. WEB认证模式:Basic &amp; Digest
  12. JavaScript学习日志(四):BOM
  13. 正负样本比率失衡SMOTE
  14. codeforces 983A Finite or not?
  15. xmlString和map互转Util
  16. CentOS7配置mailx使用外部smtp服务器发送邮件
  17. selenium之选项卡管理
  18. vue 安装之路
  19. Hdoj 1064 Financial Management
  20. c#关于字符串格式化

热门文章

  1. python小工具:用python操作HP的Quality Center (二)----- 用异步方式提高速度
  2. Java之枚举----小试牛刀练习
  3. JavaScript实现单击全选 ,再次点击取消全选
  4. nginx安装文档
  5. docker dead but pid file exists 问题
  6. Unity3d简单的socket通信
  7. ex3多类问题和NN中的前向传播
  8. java 实例变量的初始化
  9. 【LeetCode】125. Valid Palindrome
  10. 【Android Developers Training】 23. 序言:保存数据