文档章节

DIV+CSS忽悠前端小白

前端老手
 前端老手
发布于 09/18 15:46
字数 997
阅读 12
收藏 0

在大约两年前,DIV+CSS是一对很诱人的组合,会用DIV+CSS制作网页的人,常常会被人赞以大拇指的,记得06年初的时候,我用 div+css布局的一个纯静态网站还拿了学校网页设计比赛的一个奖。

今天,尽管提到DIV+CSS,还会有很多人热情高涨,但是我会对他 摇头了:DIV+CSS不是一切,更不是某些人所谓的“神话”!创造神话的是CSS,不是DIV+CSS。我想,是时候纠正这个问题了。

CSS 的要义,是各个标签要各尽所用。

盲目推崇DIV+CSS只会让小白误入歧途的。

1、DIV只是HTML最常用的标签之一

显 然HTML并不只是一个DIV标签有用,每个标签都有它的用途,只是DIV是其中最有用的一个罢了。如果DIV可以实现所有其它标签的功能,那么W3C早 就把HTML精简了!

Table也不是一无是处,只是用table比较简单、容易上手才在早期被人错误的广泛推广。但是table在处理网 页数据的表现上,是其他标签无法替代的,只是,它不适合用来做整个页面的布局。

2、代码的可读性

纯DIV+CSS的网站 的代码的可读性无疑是非常差的,甚至table还可以通过tr和td来区分行和列,一堆DIV堆砌在一起,如果没有注释,你根本不知道某个部分是做什么用 的。

3、语义化与结构化

现在,在开发CSS的时候,提的越来越多的是语义化,语义化归根到底其实还是代码的可读性问题。 语义化就是让代码更易读,更加易懂,比如,.text_01{color:red} 就没有.text_red{color:red} 容易理解。

HTML 同样如此,比如我们看到<ol>就知道这是个有序列表;看到<p>标签就知道这是一个段落,内容为文字;看 到<span>就知道这个是比<p>还小的文字单位;看到<h1>、<h2>之类的就知道他们是标题。

显 然,全部是div的页面,是看不出来这些的。

页面的结构化亦是如此,比 如<div><div><div><div>…..</div>< /div></div></div>这样的代码,显然是很难理解其DOM结构的,但 是<div><p><h2><span>…..</span>< /h2></p></div>就比上面的那个结构要清晰很多。

相信做开发的人对代码的语义化和结构化的理解 会更加深刻。

4、团队合作

可读性低、结构化和语义化差,团队的其他成员的学习和维护难度就会提高,这对于一个团队来说, 是很浪费时间和精力的。

其实,DIV+CSS的说法,已经把我们从table带到了另外的一个极端,正确的网页设计不是一 个标签雄霸天下,而是每个元素都使用合适的标签。

所以说,DIV+CSS要换一种说法了,(X)HTML+CSS不更合 适吗?

请不要再特意提DIV了。小白们真的会把它当作宝贝的!

其实回头看看国内普及标准化的过程,已然走错路了,就在国外同 行研究CSS Sprites和网格(Grid)等技术时,我们在做什么?就在国外CSS框架遍地开花的时候,我们在做什么?到现在我们还是只能去国外的东西,依然跟在 别人后面。

两年了,我们依然纠缠于DIV+CSS……



本文转载自:https://www.mk2048.com/blog/blog.php?id=1j22201cb

前端老手
粉丝 10
博文 603
码字总数 0
作品 0
卢湾
技术主管
私信 提问
前端大佬告诉你,为什么只会Vue的都是前端小白?

今天,我想再来撩一撩小白们脆弱的自尊。 请注意仔细看好标题,是“只会”,不是“会”,能理解区别吧? 比如某个人去你公司面试前端,你一定要问清楚他会哪些东西,除了Vue之外,还会不会j...

黎_20c4
2018/11/09
0
0
是要转前端还是转PHP呢?

我现在碰到一个职业转折点 这个转折点可以说 会决定我以后的生活以及去处呢 我现在的问题是: 我曾经做了三到四年的前端(简单就是切图仔) 前端JS一点都不会 但是DIV+CSS可以说是精通级别的...

南宫天明
2014/02/17
10.2K
27
各位前端工程师,或者了解前端的大牛,你们在做前端的时候都是什么流程啊

各位前端工程师,或者了解前端的大牛,你们在做前端的时候都是什么流程啊:美术设计->手工写Div+CSS->写JS->嵌入系统后台,这么个流程吗?div+css那里有没有比较快的方案,只能手写么?...

木川瓦兹
2013/08/04
1K
8
web前端开发小白需要怎样学习才能迅速掌握前端技术?

  今天来和大家讲讲零基础小白学习web前端开发,需要怎样学习才能迅速掌握前端技术?学习前端开发又需要用到哪些开发工具呢?这里首先分享一下我自己的经验,我自己目前是搞后端开发【也就是...

Java编程语言基础入门博客
2017/04/14
0
0
web前端开发工程师要掌握哪些技能?

请教各位大虾,web前端开发工程师要掌握哪些技能?我入行前端开发两个月多点,现在要精通div+css又要学js,php,精通PS or fw,AI,弄的我都不知道从哪下手了........... 目前熟练div+css-xht...

0000001
2011/05/14
2.4K
3

没有更多内容

加载失败,请刷新页面

加载更多

java通过ServerSocket与Socket实现通信

首先说一下ServerSocket与Socket. 1.ServerSocket ServerSocket是用来监听客户端Socket连接的类,如果没有连接会一直处于等待状态. ServetSocket有三个构造方法: (1) ServerSocket(int port);...

Blueeeeeee
今天
6
0
用 Sphinx 搭建博客时,如何自定义插件?

之前有不少同学看过我的个人博客(http://python-online.cn),也根据我写的教程完成了自己个人站点的搭建。 点此:使用 Python 30分钟 教你快速搭建一个博客 为防有的同学不清楚 Sphinx ,这...

王炳明
昨天
5
0
黑客之道-40本书籍助你快速入门黑客技术免费下载

场景 黑客是一个中文词语,皆源自英文hacker,随着灰鸽子的出现,灰鸽子成为了很多假借黑客名义控制他人电脑的黑客技术,于是出现了“骇客”与"黑客"分家。2012年电影频道节目中心出品的电影...

badaoliumang
昨天
14
0
很遗憾,没有一篇文章能讲清楚线程的生命周期!

(手机横屏看源码更方便) 注:java源码分析部分如无特殊说明均基于 java8 版本。 简介 大家都知道线程是有生命周期,但是彤哥可以认真负责地告诉你网上几乎没有一篇文章讲得是完全正确的。 ...

彤哥读源码
昨天
15
0
jquery--DOM操作基础

本文转载于:专业的前端网站➭jquery--DOM操作基础 元素的访问 元素属性操作 获取:attr(name);$("#my").attr("src"); 设置:attr(name,value);$("#myImg").attr("src","images/1.jpg"); ......

前端老手
昨天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部