方法C:丢掉名称
<p><a href="#oranges">About Oranges</a></p> ...一些文字... <h2 id="oranges">Oranges Are Tasty</h2> ...更多文字...
啊哈,id属性的功能就像name属性,同样能为页面指定锚点,除此之外,方法C还消除了方法A,B使用name属性是需要的额外<a>标签,我们减少了源代码,这向来是好事.
由于id属性可以加到任何标签里,因此我们能轻易地在页面内任意为需要的元素加上锚点.在这个例子中,我们选择为标题加上锚点,但我们也能同样轻易的为<div>,<form>,<p>,<ul>...还有其他所有标签加上锚点.
一石二鸟
事实上,在大多数情况下,我们都能为先前存在id属性添加样式或者scripting,这是方法C的另一个好处.由于这个缘故,我们不需要为仅仅设定锚点而加上额外的代码.
举例来说,让我们假设你在很长的页面底部有一个用来留下评论的表单,而你想在页首加上链接,这个表单已经为了指定独特样式而设了id="comments".这是我们能直接把id当作锚点进行连接,而不必再加上有name属性的<a>标签.
代码看起大概类似这样:
<p><a href="#comments">Add a Comment!</a></p> ...很多文字... <form id="comments" action="/path/to/script"> ...表单元素... </form>
同时,如果你的页面很长,那么你在底部加上链接到顶部锚点的链接,以便用户"回到顶部".
值得一提的是:虽然看起来十分合适,但最好避免在指定锚点名称时使用"top",有些浏览器保留这个名称做为特殊用途,那么使用这个名称可能会造成不一致的结果,最好选择一个类似,但又不会造成问题的名称,或许用#gemesis?还是用#utmost?你自己拿主意了.
古老浏览器与id属性
只使用id属性当作锚点时,有个重要的缺点值得一提,那就是某些古老的浏览器并不支持这个方法.哦喔,在标识你自己的锚点时这的确是个必须考虑的问题,同时这也是向前兼容的不幸示例.让我们看看最后一个实例,方法D.
方法D:合而为一
<p><a href="#oranges">About Oranges</a></p> ...一些文字... <h2><a id="oranges" name="oranges">Oranges Are Tasty</a></h2> ...更多文字...
如果在标记锚点时,你希望达到向前兼容和向后兼容,那么你大概会喜欢这种方法.不管是古老的或是未来的浏览器都能正确的辨识具名锚点标签,但是由于W3C在XHTML1.0建议书中不推荐使用name属性(http://www.w3.org/TR/xhtml1/#C_8),因此你也用id属性支持未来的浏览器.
与方法B相同,我们必须留意对<a>标签造成影响的全局样式.
共享名称
如果你选择使用方法D的话,为id与name属性选用相同名称完全可以被接受(可能也十分便利),但是只在它们位于相同标签时才能这样.此外,也只有几个特定的标签允许这么做,精确来说,包含了<a>,<applet>,<frame>,<img>,<map>.因此,我们把id="oranges"从<h2>移到锚点标签之内.
现在我们已经看过了四种建立锚点的方法,让我们归纳一下每种方法的优劣.
归纳
虽然我觉得有两种方法略占优势(C和D),但是这一章里头大概没有明显的优胜者,每个方法都有用各自的优缺点,让我们回顾一下每种方法:
方法A:
方法B:
方法C:
-
标签较少.
-
可以使用已经具备的id属性.
-
能够向后兼容.
-
需要最近的浏览器才能正常运作.
方法D:
-
同时具备向前兼容和向后兼容.
-
必须留意<a>的全局样式有可能覆盖外层标签的样式设定.
-
需要额外的标签.
-
看来方法C与D是比较好的选择,具备向后兼容,较少的标签,与额外标签,完全兼容型形成对比,我的建议是考虑读者群,并且以此进行适当的决定.
举例来说,如果你正在构建一套需要最新浏览器才能使用的网络应用程序或是内部网站,那么方法C大概是最棒的选择.这个方法不需要额外的标签,但是已知某些4.X版本的浏览器无法正常处理这个方法.
如果你设计一个会被任何人,在任何时间浏览的网站,你或许会选择方法D,这个方法能够确保向前兼容以及向后兼容,但是必须背负锚点标签的些许包袱.
选择权在你,希望在看过每个方法后,能在适当时机选择适当的方法使用.
出处:蓝色理想
责任编辑:bluehearts
上一页 标记语言——锚点 [1] 下一页 标记语言——锚点 [3]
◎进入论坛网页制作、WEB标准化版块参加讨论,我还想发表评论。
|