前几天有个用户问我关于在线手册功能里的锚点问题。因为他通过代码发现,在编辑手册内容时,锚点的设置是通过id选择器来制定的,而不是带有name属性的a标签。其实这是HTML5和HTML4(XHTML)等之前版本之间的一个差异,也可以说是一个升级改进。本文我们一起来分享学习下HTML5中是如何实现锚点链接的以及与HTML4相比,做了哪些改进和优势。
HTML4锚点链接实现示例:
在之前HTML版本中,a标签通name属性实现锚点的定位,再通过href属性指向具体锚点。注意,这里name属性只是针对a标签,其他标签不可随意添加name属性,而且其余诸如表单之类的name属性的意义作用是不同的。所以a标签的锚点链接有局限性,如果你想吧在其他元素中设置锚点,需要在其他标签中添加一层带有name属性的a标签。比如上面的示例中,把a标签改为h3。七彩新闻网http://www.qicainews.cn/
HTML4锚点链接实现示例:
-
123456789< 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/
-
123456789< 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