谈谈我对html语义结构与div+css布局的看法
2012-08-10 10:09
489 查看
最近看到很多博客及资深前端开发大牛在批判很多网站的布局,宣告初学者,盲目推崇DIV+CSS只会让小白误入歧途,各个标签要各尽所用,纯DIV+CSS的网站的代码的可读性无疑是非常差的,一堆DIV堆砌在一起,如果没有注释,你根本不知道某个部分是做什么用的,结构很混乱,阅读时间也长且再次改版时他人修改很困难。
首先,我不否认以上的观点的正确性,但是我觉得一味的推崇,恪守规矩是行不通的。
如果是经常浏览电子商务方面网站的读者,你会发现,一个图文并茂的商业网站,需要大量的图片来支撑,有各种的浮动,定位特效,穿插着各种JS效果,这种情况下,去恪守html标签语义,你觉得这样很合理?能做到这种效果?就算能做到,也是重置了标签的原有默认定义,改变它的display等不是很兼容各种浏览器的属性,这也是不合算的。
再者,div+css不过是通俗易的讲法,事实上,没有那个前端开发人员,真的用纯div+css布局,如果真能找到一个网站,里面的标签全部用div来布局,我只能说,这个人不是2了,就是傻了,div是一个区块,我们建设网站,一般也是需要很多行级元素的,且针对SEO优化这块,也是需要各种标签结构来配合的。
最后,我们来看看div的通用性。其实同种标签多重嵌套是不合理的,结构上混乱不说,还容易发生兼容性的问题,div也是一样的,我一般的做法是div中嵌套p标签、UL标签等等,div是个大框架,里面什么元素都可以放,也可以div嵌套div,这对于做Ajax组件、客户端局部动态功能是很方便的,div+css只是布局,不是所有标签都用div代替。
就像我们一直批评tabel布局,但是tabel还是大量的存在着,因为尽管他有种种不如div+css布局的地方,但是table在处理网页数据的表现上,是其他标签无法替代的, 这也是Div+Css布局经久不衰的原因,这都是有不可替代的理由的。
首先,我不否认以上的观点的正确性,但是我觉得一味的推崇,恪守规矩是行不通的。
如果是经常浏览电子商务方面网站的读者,你会发现,一个图文并茂的商业网站,需要大量的图片来支撑,有各种的浮动,定位特效,穿插着各种JS效果,这种情况下,去恪守html标签语义,你觉得这样很合理?能做到这种效果?就算能做到,也是重置了标签的原有默认定义,改变它的display等不是很兼容各种浏览器的属性,这也是不合算的。
再者,div+css不过是通俗易的讲法,事实上,没有那个前端开发人员,真的用纯div+css布局,如果真能找到一个网站,里面的标签全部用div来布局,我只能说,这个人不是2了,就是傻了,div是一个区块,我们建设网站,一般也是需要很多行级元素的,且针对SEO优化这块,也是需要各种标签结构来配合的。
最后,我们来看看div的通用性。其实同种标签多重嵌套是不合理的,结构上混乱不说,还容易发生兼容性的问题,div也是一样的,我一般的做法是div中嵌套p标签、UL标签等等,div是个大框架,里面什么元素都可以放,也可以div嵌套div,这对于做Ajax组件、客户端局部动态功能是很方便的,div+css只是布局,不是所有标签都用div代替。
就像我们一直批评tabel布局,但是tabel还是大量的存在着,因为尽管他有种种不如div+css布局的地方,但是table在处理网页数据的表现上,是其他标签无法替代的, 这也是Div+Css布局经久不衰的原因,这都是有不可替代的理由的。
相关文章推荐
- html中DIV+CSS与TABLE布局方式的区别及HTML5新加入的结构标签(转)
- 一个CSS上中下三行三列结构的Div布局
- 网页简单布局之结构与表现原则(HTML/CSS)
- 一个CSS上中下三行三列结构的Div布局
- 10032---div+css布局教程之div+css常见布局结构定义
- Div+CSS布局应该注重语义、注重代码的重用性!
- DIV+CSS布局入门示例(二)写入整体层结构与CSS
- HTML布局之计算器(div+css)
- HTML CSS + DIV实现局部布局
- html DIV+CSS 页面布局
- HTML,使用div+css实现自适应table布局
- 谈谈div+css布局命名、语义化、结构化的开发经验?
- html之div+css布局
- <转载>div+css布局教程之div+css常见布局结构定义
- Div+CSS布局入门教程--写入整体层结构与CSS
- 一、HTML和CSS基础--网页布局--网页简单布局之结构与表现原则
- HTML CSS + DIV实现整体布局
- .使用 HTML+CSS 实现如图布局,border-widht 5px,一个格子大小是 50*50,hover时候边框变为红色(兼容IE6+,考虑语义化的结构)
- Div+CSS布局之写入整体层结构与CSS
- HTML结构化:实践DIV+CSS网页布局入门指南