您的位置: 首页 > 技术文档 > 网页制作 > 标记语言——锚点
HTML5 第二份草案发布 回到列表 WEB前端开发经验总结 Ⅰ
 标记语言——锚点

作者:zergine 时间: 2008-06-16 文档类型:翻译 来自:蓝色理想

第 1 页 标记语言——锚点 [1]
第 2 页 标记语言——锚点 [2]
第 3 页 标记语言——锚点 [3]
第 4 页 标记语言——锚点 [4]
第 5 页 标记语言——锚点 [5]

方法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:

  • 应该能在大多数浏览器上正常运作.
  • 内容空白,因此无法为标签提供结构,语义.
  • 需要额外的标签.
  • 由于XHTML1.0不推荐使用name属性,因此必须考虑向后兼容.

方法B:

  • 应该能在所有浏览器上正常运作.
  • 需要额外的标签.
  • 必须留意<a>的全局样式有可能会覆盖外层标签的样式.
  • 由于XHTML1.0不推荐使用name属性,因此必须考虑向后兼容性.

方法C:

  • 标签较少.
  • 可以使用已经具备的id属性.
  • 能够向后兼容.
  • 需要最近的浏览器才能正常运作.

方法D:

  • 同时具备向前兼容和向后兼容.
  • 必须留意<a>的全局样式有可能覆盖外层标签的样式设定.
  • 需要额外的标签.
  • 看来方法C与D是比较好的选择,具备向后兼容,较少的标签,与额外标签,完全兼容型形成对比,我的建议是考虑读者群,并且以此进行适当的决定.

举例来说,如果你正在构建一套需要最新浏览器才能使用的网络应用程序或是内部网站,那么方法C大概是最棒的选择.这个方法不需要额外的标签,但是已知某些4.X版本的浏览器无法正常处理这个方法.

如果你设计一个会被任何人,在任何时间浏览的网站,你或许会选择方法D,这个方法能够确保向前兼容以及向后兼容,但是必须背负锚点标签的些许包袱.

选择权在你,希望在看过每个方法后,能在适当时机选择适当的方法使用.

出处:蓝色理想
责任编辑:bluehearts

上一页 标记语言——锚点 [1] 下一页 标记语言——锚点 [3]

◎进入论坛网页制作WEB标准化版块参加讨论,我还想发表评论

相关文章 更多相关链接
标记语言——应用CSS
标记语言——精简标签
标记语言——再谈清单
标记语言——短语元素
标记语言——表单
作者文章 更多作者文章
标记语言——应用CSS
标记语言——精简标签
标记语言——再谈清单
标记语言——短语元素
标记语言——表单
关键字搜索 常规搜索 推荐文档
热门搜索:CSS Fireworks 设计比赛 网页制作 web标准 用户体验 UE photoshop Dreamweaver Studio8 Flash 手绘 CG
站点最新 站点最新列表
周大福“敬•自然”设计大赛开启
国际体验设计大会7月将在京举行
中国国防科技信息中心标志征集
云计算如何让安全问题可控
云计算是多数企业唯一拥抱互联网的机会
阿里行云
云手机年终巨献,送礼标配299起
阿里巴巴CTO王坚的"云和互联网观"
1499元买真八核 云OS双蛋大促
首届COCO桌面手机主题设计大赛
栏目最新 栏目最新列表
浅谈JavaScript编程语言的编码规范
如何在illustrator中绘制台历
Ps简单绘制一个可爱的铅笔图标
数据同步算法研究
用ps作简单的作品展示页面
CSS定位机制之一:普通流
25个最佳最闪亮的Eclipse开发项目
Illustrator中制作针线缝制文字效果
Photoshop制作印刷凹凸字体
VS2010中创建自定义SQL Rule
>> 分页 首页 前页 后页 尾页 页次:2/51个记录/页 转到 页 共5个记录

蓝色理想版权申明:除部分特别声明不要转载,或者授权我站独家播发的文章外,大家可以自由转载我站点的原创文章,但原作者和来自我站的链接必须保留(非我站原创的,按照原来自一节,自行链接)。文章版权归我站和作者共有。

转载要求:转载之图片、文件,链接请不要盗链到本站,且不准打上各自站点的水印,亦不能抹去我站点水印。

特别注意:本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有,文章若有侵犯作者版权,请与我们联系,我们将立即删除修改。

您的评论
用户名:  口令:
说明:输入正确的用户名和密码才能参与评论。如果您不是本站会员,你可以注册 为本站会员。
注意:文章中的链接、内容等需要修改的错误,请用报告错误,以利文档及时修改。
不评分 1 2 3 4 5
注意:请不要在评论中含与内容无关的广告链接,违者封ID
请您注意:
·不良评论请用报告管理员,以利管理员及时删除。
·尊重网上道德,遵守中华人民共和国的各项有关法律法规
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·本站评论管理人员有权保留或删除其管辖评论中的任意内容
·您在本站发表的作品,本站有权在网站内转载或引用
·参与本评论即表明您已经阅读并接受上述条款
推荐文档 | 打印文档 | 评论文档 | 报告错误  
专业书推荐 更多内容
网站可用性测试及优化指南
《写给大家看的色彩书1》
《跟我去香港》
众妙之门—网站UI 设计之道
《Flex 4.0 RIA开发宝典》
《赢在设计》
犀利开发—jQuery内核详解与实践
作品集 更多内容

杂⑦杂⑧ Gold NORMANA V2