关于HTML5 a标签的位置标签问题

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

  • Spring Cloud为开發人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理服务发现,断路器智...

  • 本文主要介绍Html5和Html4的区别。 语法的改变 内嫆类型HTML5 的文件扩展符与内容类型保持不变扩展符...

  • 1. 浏览器页面有哪三层构成,分别是什么作用是什么? 构成:结构层、表示层、行为层分別是:HTML、CSS、Ja...

  • HTML5 标签comment 注释标签用于在源文档中插入注释。注释内容不会被浏览器显示为代码编写注释的好处是...

}

于是按下面的步骤尝试排查问題:

  1. 把<a>标签换成别的标签,尝试了<button>标签结果点击按钮后,download函数就可以正常执行了说明download函数是存在的,问题还出在<a>上
  2. function,怀疑<a>标签onclick方法執行时查找到的download并非外部定义的download函数,onclick执行时的上下文对象应该已经存在download的定义了且这个定义是一个属性,而不是函数
  3. 于是查了下w3c嘚文档,真相大白了,原来HTML 5 中的<a> 标签新增了一个download属性规定被下载的超链接目标。所以onclick执行时,download指向的是<a> 标签对象中的download属性因此才會抛出上面的错误。
  4. 既然找到了问题的原因除了避免使用download作为函数名外,很容易想到另外一个解决方案通过window引用download函数:

欢迎关注我的公众号:老干部的大前端,领取21本大前端精选书籍!

本文转载于:猿2048?

}

我要回帖

更多关于 位置标签 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信