正确认识 DIV+CSS 概念
今天看到神采飞扬发表于前端观察的《DIV+CSS 请不要再忽悠人了》,讲的挺有深意的,尤其对于新手如何正确认识div,学习web标准,使用web标准建站应该有很大帮助。转载过来,共同分享。
在大约两年前,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……
个人看法:本人对此文件非常认可,作者对现在这种让别人认为非常有追求感东西,其实就是夸大DIV+CSS的作用,而忽视了对其它标签的应该,DIV+CSS并不是一种完美组合,所以说,DIV+CSS要换一种说法了,(X)HTML+CSS不更合适吗?
正确认识 DIV+CSS 概念的更多相关文章
- 利用DIV+CSS制作网页过程中常用的基本概念及标签使
CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...
- 利用DIV+CSS制作网页过程中常用的基本概念及标签使用细节
CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...
- 【转】css布局居中和CSS内容居中区别和对应DIV CSS代码
原文地址:http://www.divcss5.com/jiqiao/j771.shtml css布局居中和CSS内容居中区别和对应DIV CSS代码教程与图文代码案例篇 对于新手来说DIV CSS布 ...
- DIV+CSS系统学习:转载
第一部分 HTML 第一章 职业规划和前景 职业方向规划定位: web前端开发工程师 web网站架构师 自己创业 转岗管理或其他 web前端开发的前景展望: 未来IT行业企业需求最多的人才 结合最新的 ...
- 有利于SEO优化的DIV+CSS的命名规则小结
可以先去这里温习一下CSS和HTML的知识!DIV+CSS规范命名大全集合 CSS开发技巧整理 一.CSS文件及样式命名 1.CSS文件命名规范 全局样式:global.css/master.css ...
- 2天驾驭DIV+CSS (实战篇)(转)
这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们.本文是实战篇. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” ...
- 2天驾驭DIV+CSS (基础篇)(转)
这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” 将你引入两大误区 ...
- 各种div+css居中方式调整(转载)
盘点8种CSS实现垂直居中水平居中的绝对定位居中技术 分类: 前端开发2013-09-11 21:06 24959人阅读 评论(3) 收藏 举报 绝对居中垂直居中水平居中CSS居中代码 目录(?) ...
- 深度理解div+css布局嵌套盒子
1. 网页布局概述 网页布局的概念是把即将出现在网页中的所有元素进行定位,而CSS网页排版技术有别于传统的网页排版方法,它将页面首先在整体上使用<div>标记进行分块,然后对每个快进行CS ...
随机推荐
- ASP.NET CORE RAZOR :向 Razor 页面应用添加模型
本文来自:https://docs.microsoft.com/zh-cn/aspnet/core/tutorials/razor-pages/model 在本部分中将添加用于管理数据库中的电影的类. ...
- SQL Server 中树形表数据的处理总结
-- 使用函数的方法: --建立 演示环境 if object_id('tb_bookInfo') is not null drop table tb_bookInfo go ),type int) ...
- Ubuntu下安装配置JDK,Tomcat,MySql
jdk安装配置 下载jdk-6u45-linux-x64.bin 切换到root用户su root 切换目录,新建文件夹,复制文件cd /usr mkdir javacd javacp 路径 ...
- Extjs4 Combobox 联动始终出现loading错误的解决的方法
当反复选者combobox 联动时,下级的Combobox 会出现loading的错误表现形式,尽管Store数据已载入完也是一样. 废话少说贴代码就知道怎样处理了:(注意红色部分的关键语句) }, ...
- Verilog利用$fdisplay命令往文件中写入数据
最近在做的事情是,用FPGA生成一些满足特定分布的序列.因此为了验证我生成的序列是否拥有预期的性质,我需要将生成的数据提取出来并且放到MATLAB中做数据分析. 但是网上的程序很乱,表示看不懂==其实 ...
- MS coco数据集下载
2017年12月02日 23:12:11 阅读数:10411 登录ms-co-co数据集官网,一直不能进入,FQ之后开看到下载链接.有了下载链接下载还是很快的,在我这儿晚上下载,速度能达到7M/s,所 ...
- Linux的驱动模块管理:modprobe
由一段脚本開始: MODULE_PATH=/lib/modules/`uname -r` if [ ! -f ${MODULE_PATH}/modules.dep.bb ]; then # depmo ...
- Java以指定格式输入数字
package com.ylx; import java.text.DecimalFormat; public class Test { public static void main(String[ ...
- linux centos apache开启gzip的方法
开启gzip压缩的方法很简单,连接服务器并打开配置文件“httpd.conf”,找到下面这两句,去掉前面的“#” 代码如下 1 LoadModule deflate_module modules/m ...
- cxf 创建动态webService
D:\developTools\apache-cxf-2.5.2\samples\wsdl_first_dynamic_client CXF 方法 cxf方法 serviceInfo.getBindi ...