WEB前端

web前端包括广泛,有设计、开发,这里也关注互联网行业。

html中链接地址的重要性

十月 25th, 2010 by 裕波

也许这个标题已经没有什么吸引力了,大家可能都已经沉静在高深的技术方面的研究了。

也有很多人认为今天已经进入了一个高速互联网时期,也有人曾经说过,如果你的浏览器没有开启支持javascript,那是你活该,但是当我今天在次访问国外一家知名网站的时候,突然发现了我在两年前犯过的一个错误。这个错误从表面上来看,的确算不了什么,因为其实这与交互设计师有关系。因为作为前端工程师的我根本不知道怎么办了嘛,这是托辞。

那究竟是什么问题呢?的确,有人曾经说过我,你说事情就说重点嘛,为什么先要来一段,才把重点说出来呢?的确只说重点,可以提高沟通的效率,但是有时候并非如何。好了,问题是什么呢?现在告诉大家:

就是在你书写html的时候,链接地址为井号(#),就这样的一段代码:<a href=”#” title=”例子”>例子</a>。

肯定你会说,这有什么问题呢?难道不是这样吗?是的,如果你不接触后端模板(php的smarty)的话,只需要向后端工程师提交静态的页面的话,这样做我觉得真的没有什么问题。但是作为一名前端工程师不管你是否会接触到后端模板,但是你在还原设计稿的时候,一定要做到心里有数,这里的心里有数是什么意思呢?其实就是你的链接将指向什么地方,这一点非常重要。

这时候有人又会说了,这屁大一点的事,为什么要拿出来说,但是我觉得这真的很重要。

其实一个真正的网站是靠链接将所有的网页链起来,形成的网站,给我的感觉是,如果没有链接,就根本没有网站这么一说,嘿嘿,那有人会说,你究竟想说什么?好吧,其实我们经常会发生上面说的这种事情主要体现在什么地方呢?其实就是用javascript来代替链接实现某些功能的时候,或者说用javascript来实现某些功能的时候,而我们操作的标签是a,当然不排除这是属于滥用a标签造成的,我们先排除滥用的可能,那其实造成这种原因的有两种情况:

1、前端工程师对整个网站(产品)架构不熟悉;

2、交互设计师对整体架构设计考虑不周全,前端工程师在实现时也未考虑

正因为这两个原因造成了在链接的地址中为#的现象。为什么我会这样说呢?在这里举一两个最简单的例子来说明情况:

1、tab选项卡:这是我们经常会见到的,其实tab选项卡就是将一个一个的分类中的一些值得推荐的信息在一个有限的区域,而经常大家会看到一个更多链接,指向这个分类的页面,而大多前端工程师在实现这个tab选项卡这个交互功能的时候,每一个tab可能是一个li,但是里面一般情况下会有一个a,那么这人a的href是#,其实这个地方完全是可以给他一个这个分类的链接,为什么给#不行,要给链接的,其实就是我最开始说的,如果遇到网络条件不好的情况下,可能这时候js还没有加载完成,用户又去点击这个tab的时候。

2、下拉式城市选择:这种效果其实现在随处可见了,就拿QQ团购来说(http://tuan.qq.com/),在logo的右侧是有一个城市选择的,因为这个地方的城市选择是用js实现的下拉效果,但是如果当我的网速过慢,js未加载的时候,这个下拉菜单其实是不起作用了,但是因为QQ团购这里给选择城市的这个功能中用的a,而给a的链接地址是#,就造成了,我无法选择城市,如果这里他给我一个另外的网页,那么这样我就可以跳转到其他页面选择我需要的城市,虽然这样也许给用户体验感觉不好,但是总比用户点很多次无效好吧?这个问题有几种情况,就是交互设计师根本没有考虑,根本没有单独的一个页面用来选择城市的,还有就是交互交互设计师考虑了这个页面,前端工程师并没有将链接指向过去,还有就是交互设计师没有考虑到这一点,前端工程师也没有考虑这一点,所有人全部忽略。

也许还是有很多人觉得这并没有什么?但是我觉得这种一个比较小的细节,还是比较重要的。虽然有时候全局比细节重要,其实这就是因为全局考虑不周,而却又在细节上体现出来了。

15 Responses to “html中链接地址的重要性”

  1. 美瑞网 说道:

    细节性动作对于用户体验很重要,有时候是很致命的体验
    但实际上,咱们再做的时候,却总是很容易忽略

  2. lan 说道:

    顾此失彼,自己权衡好了也就自然了。
    标准更多的是让人养成一个统一的习惯。
    并非一定要神马行为,神马结构区分的那么明显。不能太抽风。

  3. Leo 说道:

    @康康:

    这个帖子的重点不是“要不要彻底分离结构与行为”,而是平稳退化。

  4. 上海礼品网 说道:

    除了#号还有 alt属性, 有的说图片一定要加 文字最好也加一个! 个人观点

  5. electronics 说道:

    想的挺深入的

  6. 裕波 说道:

    to frogsky:我是web标准的深度拥护者,所以我对你所的表示不支持。在现实工作中呢,我也不表示强烈反对意见。任何历史遗留问题需要来改变。

  7. frogsky 说道:

    赞同博主观点,以前我也是直接写“#”的,但后来才改成javascript,其实这还是考虑到多方面的缘故,而很多前端开发工程师并不知道其中的缘由,只是别人叫你写你就跟着写。。。至于你说的“to 康康:但是这样的话,就违背了结构与行为相分离的原则,同时也影响了后期的维护。不妥之。”此言差矣!如果框架合理分工执行,封装好方便调用的情况下,在HTML里写部分JS更方便维护及灵活性更好,正如里面所说的选项卡,表单验证,如果不频繁的话个人很推荐写在HTML里,写代码不要太死脑筋,不能从片面看全面,得从多方面考虑,而这个时候可以牺牲一些小的方便!波哥以为然否?

  8. ivan 说道:

    这个#号同时对seo影响很大,搜索引擎会认为是死链接。

  9. Robin 说道:

    四个字:预留退路

  10. 裕波 说道:

    to 康康:但是这样的话,就违背了结构与行为相分离的原则,同时也影响了后期的维护。不妥之。

  11. 康康 说道:

    “优化是魔鬼”
    不得不承认这是一个可以改进的地方,但是其实最好的方式就是把tab选项卡的js代码部分写在HTML里,毕竟这段代码并不长,并不会导致页面太大

  12. supersha 说道:

    可用性的问题,说大点就是用户体验的问题。
    目前国内很多网站都是存在这些细节的问题的,太依赖于Javascript来实现各种各样的页面的功能了。
    但是,当某天js没有加载进来的时候,是否考虑过页面的功能还能够稳步退化呢,毕竟国内的宽带还是50KB所占的比例还是挺多的

  13. 裕波 说道:

    我觉得他可以增加一个页面的嘛

  14. 强哥仔 说道:

    个人觉得qq团购那个跳转菜单应该用select来做,再用js隐藏

Leave a Reply

功能列表

关于我

裕波 周裕波,web前端开发从业者,互联网爱好者。

导航

关于博客

博客属于我的个人博客,由于我爱好互联网,从事web前端开发相关工作,建议此博客的目的:积累经验,与行业内的朋友分享,相互讨论。

Powered by WordPress 备案号:京ICP备09046089号