写了两篇关于Web标准的文章了,这篇结合我工作中的一些实践历程来与大伙推荐一些网站建设中容易见到误区,与它对网站优化所产生的影响.这也是"说透"系列中最后一篇,期望能对大伙有所帮助.也期望能听到大伙不一样的建议. 误区一: DIV+CSS强迫症 我工作中接触到一些前端开发职员,他们多少从网上也知道了一些网站优化的常识,又或者在学习和从事网站优化.对前端又缺少知道的人.看到页面中用到几个"table"标签,立马就是满脸的不屑,然后一大堆理由说得头头是道.弄得你感觉"table"就是万恶之源,你在页面中用到了table你就看上去非常不专业.你的专业水准在他心里立刻就降了一大半.他再不厌其烦的用了一大堆div和CSS把你的table给改写.这就是Div+CSS强迫症的表现. table不合适用来做整体布局(并不表示不允许),这点已经得到大伙的公认,有过前端经验的朋友都了解布局涉及到层次嵌套.用table嵌套来呈现结构会叫你未来的布局的调整变得非常困难.譬如移动某个块的地方,调整左右块的距离等等,当嵌套的层次越多,你的调整越困难.第三嵌套的层次越深.分析dom所花费的时间越长,增加了推广客户端和搜索引擎的负担,这点我在第二篇文章中说过,但若是用来呈现列表式的数据,譬如数据报表,多列的新闻列表.个人简历等.这个地方用"table"来布局是比较合适不过的了.但不少人遭到了"Web标准"不正确理论的影响.他宁可用很多的div,li和span来操作.也不需要table.给我们的工作导致了不少的困扰.其实"table"在所有html标签中.它的语义化是最强的.它有不少的"子标签"来规范这个表格.比如一个完整表格的概念:1. 2. 新闻列表3. 4. 5. 新闻标题6. 新闻作者7. 占击次数8. 9. 10. 11. 12. 文章总数:213. 作者数:114. 平均点击次数:4015. 16. 17. 18. 19. web标准讲解20. w3c21. 5022. 23. 24. web标准讲解一25. w3c26. 3027. 28. 29. 30. 其中,,分别表示了表格的头部,内容和底部,表示表格标题,表示列标题,在html5中还可以用描述标签.复制代码 总结: 1.table合适用来呈现列表数据 2.table合适用来不需要多层嵌套的简单布局 3.tabel的语义化是很强的.该用的时候得用.不要被误导的"web标准"所困扰.误区二:不正确的嵌套和移位. 网站优化大伙都能理解标题有关的内容或链接假如在html中靠前,那样这个页面所赋于的网站权重也是相对较高的,大伙在不影响浏览者体验的状况或许会用CSS来调整内容实质的地方,俗称"移形换位",这种方法既不影响浏览者的体验.又考虑到了搜引擎,在不少网站中这个方法也被很多用,但在操作的过程中,却有不少操作欠妥的地方.先来看几个简单的例子: 譬如显示一篇文章,有标题,内容.作者等信息,不少人的写法是如此的:1. 2.

新闻标题

3. 4. 5.

新闻段落一

6.

新闻段落二

7. 8. 9. 新闻作者:张三10. 复制代码 这种写法真的不在少数.包含不少较大的网站都在多少的存在这种写法.小网站就更容易见到了.它用"div"块级元素把相应的内容分隔开.然后用CSS来概念不同块的成效.如此即增加了非必须的嵌套,也稀释了内容块与内容块之间的有关性,对排名的影响非常明显也是有负面影响的.其实仔细想一想.大家可以把这段代码写得更标准.更高雅一些.改进后的代码如下:1. 2.

新闻标题

3.

新闻段落一

4.

新闻段落二

5.

作者:张三

6. 7. 在CSS中8. .container h1{属性}9. .container p{公共属性}10. .container .des{属性}复制代码 再来讲"移形换位",这种办法在不少网站中也被常见用到.具体操作办法gsa版主huxinyu写过这方面的文章.可以去Gsa版块查询,我以上面的代码为例:1. 2.

新闻标题

3.4. ......(中间不少其它的内容和标签)5. 6.

新闻段落一

7.

新闻段落二

8.

作者:张三

9. 复制代码 这个的目的非常明显,将

标签提到正文的最前面,以增加页面有关关键字的网站权重.然后借助CSS将

标签的内容移到新闻段落上面的地方.如此浏览者是看不到

标签移位了的. 搜索引擎以一种"看报纸"的方法来理解内容,在这段代码中,与

标签关联性最强的还是里面的正文内容.当它读到了标题,却迟迟找不到标题有关的内容.试想:我在读报纸.标题在报纸在最上面.标题所对应的内容却在报纸的最下面,你一定会感觉这报纸排版的成效特别差.你不会给他一个好的评价.同理,搜索引擎也不可以非常不错的理解这种写法的用意. 假如大家必须要"移形换位",想提升页面网站权重.那样就来得彻底一些.我可以将这个块所有内容移到body正文前面.然后利于CSS来调整这个container在页面上的显示地方.而不是仅仅移动

标签.如此即不会破坏上下文的关系.又兼顾了浏览者的体验.当然我不是特别推崇在网站在很多用这种方法,他会使前端开发变得复杂,可维护性变差.误区三:不正确的js办法应用 有没见过下面这几种写法的代码:1. (1)投票2. (2)好评3. (3)第二页复制代码 含义就不多讲解了.第(1)和(2)种写法在网站中常见存在.这三段代码的一同点就是当点击标签的锚文本时,javascript的dosomething()办法会实行,但对于搜索引擎来讲,他们的意思就大不同了.先来看一些要点: href是标签的规范属性,它表示锚文本所指向的目的页面地址;onclick是标签的事件.它表示单击标签内的内容时所实行的程序代码,从程序角度来讲.程序的实行都要都事件来驱动.而不少前端开发职员都爱把一段js代码放在href属性中.当搜索引擎抓行到标签时,它想顺着herf所指向的页面地址继续去索引.却发现这里是一段js代码.顺理成章.这个地方的链接也就成了死链接.影响了蜘蛛顺利索引网站. 解决方法: 1.假如大家只是想让浏览来实行一段js代码来达成某个功能.最好的方法是用其它标签来替代,而不是用a标签, 譬如:投票,如此就不会有如此的错误.2.假如我想搜索引擎索引锚文本链接.但在用户点击这个锚文本时,又要js代码来达成其它功能,那样第(3)种代码的写法无疑是最好的. 譬如:在ajax分页中.大家想达成无刷新换页.那样第二页就不会有任何问题. 搜索引擎看到的是href中所指向的地址.而用户在点击时实行的是onclick事件.最后返回一个false,不会去实行xx.html.3.假如你的网站中已经很多存在第(1)和第(2)这两种写法.你至少得给你的标签加上rel="nofollow".让它不要去索引.但还是期望在无需链接的状况下,不要用标签来响应事件

期望我的推荐有用.谢谢大伙. 把Web标准化进行得更彻底一点 说起Web标准化，大伙立刻就想到DIV+CSS网站布局。用DIV+CSS做网站布局的优点至少包括以下这类把Web标准与网站优化关系说透之三:实例篇把Web标准与网站优化关系说透之三:实例篇本文来源：