现在,打开浏览器,各种各样的页面可以让人眼花缭乱,对于行外人看到的是美观效果是用户体验,对行内人很多其它的是关注技术和创造力。

对于开发者都知道DIV是一对html经常使用标签,DIV+CSS是一对非常诱人的组合,非常多界面设计师通过软件培训班等学习这门手艺,当然自然非常多是冲着会用了DIV+CSS制作网页。经常会被人赞以大拇指的。现在提到DIV+CSS,还有非常多人热情高涨。接下来帮助大家纠正下DIV+CSS的一些误解。

1、DIV仅仅是HTML最经常使用的标签之中的一个

显然HTML并不仅仅是一个DIV标签实用,每一个标签都有它的用途。仅仅是DIV是当中最实用的一个罢了。假设说你一个DIV就能统领天下。那么W3C 还公布那么多标签做什么呢。Table也不是一无是处,仅仅是用table比較简单、easy上手才在早期被人错误的广泛推广。可是table在处理网页数据的表现上,是其它标签无法替代的。仅仅是,它不适合用来做整个页面的布局。

2、代码的可读性



纯DIV+CSS的站点的代码的可读性无疑是很差的。甚至table还能够通过tr和td来区分行和列,一堆DIV堆砌在一起,假设没有凝视,你根本不知道某个部分是做什么用的。

因此凝视是每一个开发者都必须要编辑的一个至关重要的环节。

3、语义化与结构化



W3C公布N多标签,他们肯定有他们的优点,假设说你页面所有是div。我想无论你是多数牛叉的人。你眼睛必花。如今,在开发CSS的时候,提的越来越多的是语义化,语义化归根究竟事实上还是代码的可读性问题。语义化就是让代码更易读,更加易懂,比方。.text_01{color:red} 就没有.text_red{color:red} easy理解。



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带到了另外的一个极端。正确的网页设计不是一个标签雄霸天下,而是每一个元素都使用合适的标签。

畅谈HTML开发的更多相关文章

  1. SQL基础培训实战教程[全套]

    学习简介:林枫山根据网上搜索资料进行参考,编写制作的SQL Server实操学习教程,欢迎下载学习. 下载链接目录如下: 进度0-SQL基础语法    下载学习文档 进度1-建数据表-美化版-2018 ...

  2. 自动化高效css开发,畅谈less的灵活变化

    css是一种让html与样式分离解析而出现的代码,它的出现大大提高了程序员的工作效率,和后期进行维护的效率.但是发展至今,由于起死板单调的写法,越来越不能满足程序员们灵活的思维,很多时候是种恨铁不成钢 ...

  3. 从设计到开发,硅谷技术专家教你做“声控”APP

    编者:本文为携程机票研发部技术专家祁一鸣在携程技术微分享中的分享内容,关注携程技术中心微信公号ctriptech,获知更多一手干货. [携程技术微分享]是携程技术中心推出的线上公开分享课程,每月1-2 ...

  4. 作为一个web开发人员,哪些技术细节是在发布站点前你需要考虑到的

    前日在cnblogs上看到一遍文章<每个程序员都必读的12篇文章>,其中大多数是E文的. 先译其中一篇web相关的”每个程序员必知之WEB开发”. 原文: http://programme ...

  5. Web开发需要关注的技术细节

    摘要:在网站发布前,开发者需要关注有许多的技术细节,比如接口设计.用户体验.安全性.Web标准.性能.SEO等,倘若一个疏忽就会影响到整体的体验效果.作为一名Web开发者,哪些技术细节需要考虑呢? [ ...

  6. web开发人员

    随笔- 4  文章- 18  评论- 12  [译]作为一个web开发人员,哪些技术细节是在发布站点前你需要考虑到的   前日在cnblogs上看到一遍文章<每个程序员都必读的12篇文章> ...

  7. 安晓辉大神的感悟:如果你发现了自己的学习模式,愿意学并且能坚持,我觉得没什么能阻挡你征服软件世界的脚步(对于开发人员来讲,最大的风险是:在职业规划上没有延续性地乱跳槽。时刻要牢记在心的:培养自己的稀缺性) good

    从技术支持中途转战软件开发,如今从事编程工作已十多有余,2014年CSDN博文大赛编程语言组冠军.CSDN Qt论坛的版主安晓辉老师从今天开始,坐镇CSDN社区问答栏目的 第十四期,届时会接受广大网友 ...

  8. [译]作为一个web开发人员,哪些技术细节是在发布站点前你需要考虑到的

    前日在cnblogs上看到一遍文章<每个程序员都必读的12篇文章>,其中大多数是E文的. 先译其中一篇web相关的”每个程序员必知之WEB开发”. 原文: http://programme ...

  9. MySQL开发篇,存储引擎的选择真的很重要吗?

    前言 谁说MySQL查询千万级别的数据很拉跨?我今天就要好好的和你拉拉家常,畅谈到深夜,一起过除夕!这篇文章也是年前的最后一篇,希望能带给大家些许收获,不知不觉查找文档和参考实体书籍就写了这么多,自己 ...

随机推荐

  1. .net面试题 2016

    经典面试题2016——50题 1.面向对象语言具有——继承性——,——封装性——,——多态性—— 继承性:就是让一个类型的对象拥有另一个类型的对象的属性的方法.继承后,子类拥有父类的属性和方法. 封装 ...

  2. 在计算机视觉与人工智能领域,顶级会议比SCI更重要(内容转)

    很多领域,SCI是王道,尤其在中国,在教师科研职称评审和学生毕业条件中都对SCI极为重视,而会议则充当了补充者的身份.但是在计算机领域,尤其是人工智能与机器学习领域里,往往研究者们更加青睐于会议 我无 ...

  3. LN : leetcode 241 Different Ways to Add Parentheses

    lc 241 Different Ways to Add Parentheses 241 Different Ways to Add Parentheses Given a string of num ...

  4. [ Luogu 3935 ] Calculating

    \(\\\) \(Description\) 若\(x\)分解质因数结果为\(x=p_1^{k_1}p_2^{k_2}\cdots p_n^{k_n}\),令\(f(x)=(k_1+1)(k_2+1) ...

  5. P1165 日志分析

    题目描述 M 海运公司最近要对旗下仓库的货物进出情况进行统计.目前他们所拥有的唯一记录就是一个记录集装箱进出情况的日志.该日志记录了两类操作:第一类操作为集装箱入库操作,以及该次入库的集装箱重量:第二 ...

  6. Selenium基于Python web自动化测试框架 -- PO

    关于selenium测试框架首先想到的就是PO模型,简单说下PO模型 PO模型的概念和理解: PO就是一个设计思想,将代码以页面为单位进行组织,针对这个页面上的所有信息.相关操作都放到一个类中,从而使 ...

  7. Pro ASP.NET Core MVC 第6版 第二章(前半章)

    目录 第二章 第一个MVC 应用程序 学习一个软件开发框架的最好方法是跳进他的内部并使用它.在本章,你将用ASP.NET Core MVC创建一个简单的数据登录应用.我将它一步一步地展示,以便你能看清 ...

  8. UI/UE/ID/UED/UCD的区别(转)

    对于刚刚接触用户体验交互设计的同学来说,很多云里雾里的英文缩写,分不清各个概念代表着什么含义,今天给大家做一个简单地介绍. 简述: UI (User Interface):用户界面 UE或UX (Us ...

  9. PHP引用(&)的考察点

    引用的概念 在PHP中引用意味着用不同的名字访问同一个变量内容. 定义方式 使用 & 符号来表示 变量的引用 $a = 'ABC'; //开辟一块内存空间存储数据,$a指向该空间 $b = & ...

  10. (转) 淘淘商城系列——Redis的安装

    http://blog.csdn.net/yerenyuan_pku/article/details/72849612 通过上文的学习,我相信大家已经将首页的轮播图展示出来了,接下来我们将进入一个新的 ...