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

对于开发者都知道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. leetcode343 Integer Break

    思路: 将n不断拆分3出来直至其小于或等于4. 实现: class Solution { public: int integerBreak(int n) { ] = {, , , }; ) retur ...

  2. 解决opencv在pycharm中无代码自动提示的bug

    2018-03-0422:19:39 首先,估计这不是bug 可能是我自己误操作导致的,但是让我搞了好久才搞定,实在是苦恼 如图已实现功能,百度里有很多朋友出现了,这个无代码提示的问题 大概是这样的, ...

  3. Angular——自定义服务

    基本介绍 之前我们介绍了angular内置的几种服务,这里我们介绍如何自己定义自己的服务,主要是通过三个方法:factory.service.value 基本使用 factory:可以返回对象,也可以 ...

  4. Farseer.net轻量级开源框架 入门篇:修改数据详解

    导航 目   录:Farseer.net轻量级开源框架 目录 上一篇:Farseer.net轻量级开源框架 入门篇: 添加数据详解 下一篇:Farseer.net轻量级开源框架 入门篇: 删除数据详解 ...

  5. 【转】非常好的Java反射例子

    转自 http://www.douban.com/note/306848299/ 原文: 1.Java反射的概念 反射含义:可以获取正在运行的Java对象. 2.Java反射的功能 1)可以判断运行时 ...

  6. 已集成 VirtIO驱动windows server 2012, 2008, 2003的ISO镜像下载

    已集成 VirtIO驱动简体中文windows server 2012, 2008, 2003系统ISO镜像下载地址. 适用于上传自定义ISO并且使用 VirtIO驱动的kvm架构vps,vultr家 ...

  7. HDU_1242_Rescue

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=1242 大意:迷宫搜索,'#'代表墙,'.'代表路,'x'代表守卫,每移动1格用1秒,杀死守卫用1秒,ang ...

  8. 413 Request Entity Too Large报错处理

    修改nginx配置   这是最简单的一个做法,着报错原因是nginx不允许上传配置过大的文件,那么件把nginx的上传大小配置调高就好.    1.打开nginx主配置文件nginx.conf,一般在 ...

  9. JAVA I/O之文件复制

    有没有大佬告诉我这个不要了的代码插入区(就现在这句话的区域)怎么删掉....... //一个字节一个字节的复制 public static void fun() throws IOException ...

  10. python的webservice请求

    1.pip install client 2.pip install suds-jurko #coding=utf-8from suds.client import Clientimport time ...