div 超链接_你该知道滥用div的危害性！

温馨提示

本文对你有用，想要获得更多及技术文章，请点击上方蓝字关注我(*╹▽╹*)，免费转发分享到朋友圈，即可获取文章最后福利！

1前言

今天又有一位前端大牛发文呼吁：

国外前端大牛

发表于4天前 Facebook查看: 13500 回复:935

开发者们请停止滥用div！这对开发规范及页面性能实在太糟糕了！   

    这些年关于停止滥用div这样的话题屡见不鲜。早几年前h5标准被应用之后，许多人感受到h5标准的好处后纷纷赞叹，已经有很多大公司将其纳入应用规范，求职中你也能看到有“熟知H5标准规范”要求。

    无奈的是一些 小公司 以及 使用 旧教材的学习者 还是没有遵守这样的规范，很多受此影响的学者跟不上技术发展的潮流。

   这类人群一般集中在 外包、前端自学者、使用dreamwearver工具等人群，你可以检查你自己是不是也是这样！如果是，那你注意了，跟不上技术发展潮流可不是什么好事！

    落后意味挨打！

    在现在H5标准规范下，一些人依然喜欢用

标签来达到布局效果，我认为造成这种现象的很大原因是：

    div标签出现的早，很多人已经用习惯了，觉得好用，甚至没有接触过规范        

     经常在网页布局中遇到需要将一些内容(指文字或者标签等)包裹起来达到布局效果的时候，第一反应就是使用div标签来实现！

 举个例子，下面是某网站的标签布局：

    上面代码中可以看到 大量的div标签来 搭建 网页结构，虽然在给它们添加 css样式后，它实现的视觉效果 能让你满意，但这样做会有很多严重的问题：

可访问性：

    首先你要知道，布局好的网页需要上线，用户可以通过搜索关键词找到你的网站，如此你的网站才有曝光率，这也是公司要做网站目的(不然产品怎么推广！)，这过程中间的媒介在于搜索引擎(后面简称 机器)。

输入搜索内容

搜索

     现今的搜索引擎是非常智能的，它们会尽力去解析当前页面的标签结构，根据页面制作者的意图来引导用户，抓取各标签里的文字，为用户提供简单的超链接 来引导他们 找到自己关心的内容。

    但div标签它的语义是“块”，无法向搜索引擎传递任何有关文档结构的有用信息。世界上最聪明的机器永远不是人类，你不能指望这些机器可以自主解析识别class和id属性值的含义，也别指望 它们 能识别 世界开发人员对标签的各类命名方式。

    举个例子，我能识别出是一个标题，但是机器不能识别，也就意味着网站的可访问性大大降低，等于你辛苦做的网站没人看一样的后果！(当然，有钱聘请SEO人员 或者 参与排名竞价，一般公司承担不来长期的消耗)

可读性：

    要阅读此代码，你需要仔细看类名，从之间挑选出能表达该结构含义的类名。

    一旦这些代码深入几个层次，跟踪哪个

结束标记 与 哪个

开始标记 对应，那就变得很棘手了。

    于是你开始依赖IDE(智能开发工具)的功能，例如颜色不同的缩进、自动标记标签。

    而在较长的 html文档中，它可能要在这些功能之上进行长时间的来回滚动，你才能找到对应的位置进行解读修改。

    一致性和规范

    比如开始新的项目或接手旧项目，你会发现，当项目的开发者没有遵守统一的规范时，你须从头学习项目中使用的代码标记(上面指的类名)才能明白每个结构的含义，这在开发中是相当抓狂的事。

    如果每个人都有标准化的方法来标记web文档中常见标签结构，那么在不熟悉项目代码的情况下，都可以很容易的浏览 HTML文件并快速处理它应该展示的内容。

    非常棒的是，HTML5标准引入了一组标准化的语义元素，能以更有意义的方式标记文档结构的元素。

  这种方式可以清楚地表明这些结构的用途，更重要的是：它们是标准化的。也就是说用来搭建文档结构的这些语义元素可以被每个人使用并理解，包括机器人。

    举个例子，以往我们用 div 来表明网页主体结构(头部、主体、页脚)是这样写的：

  而采用标准化的语义元素是这样写：

  标签里包含什么类型的内容和代表含义一目了然！不仅开发者容易解读，机器也是一样，更加方便！

    HTML5规范本身在

元素定义下的一个注释中很好地总结了这个问题：

注释：强烈建议作者将div元素视为最后采取的元素，在没有其它元素适合的(情况下)。使用更合适的元素而不是div元素可以使读者更容易访问，并且更容易为作者提供可维护性

    div作为最后手段，指的是考虑兼容情况，在不支持H5标签的浏览器当中应当使用div布局，也仅此而已，并不是说这种情况就不用注重标签语义化等规范了。

    文章最开始的代码块中，几乎都是div来实现效果，后果多严重上文也已说明！但你要知道的是，不仅仅是div标签！！

    除了H5新增的标签，还有很多其他标签，比如：ul 、li、strong、em等等。

  它们在使用上是不是也有企业规范！！

    但很多前端学习者压根接触不到开发规范，或者没有人告诉他们开发规范是什么？为什么呢？因为没有这样的一个环境 和 资源。通常这类人群有以下特点：

    1、对合格网页布局判断失误：网页布局时只追求视觉效果，表面效果有了就认为网页布局已经很熟练了！

  这样的即便练习的再多，顶多是让你敲代码的速度快一点，对你本身没有技能提升。因为你一直使用的不规范的写法！面试官一看代码或者向你提问，再怎么抱怨“前端找不到工作”也无任何意义。

    2、没有人告诉规范有哪些：很多自学者自学方式多为网上看免费视频、教程文档、基础书籍等，偏偏问题就在这里，这些 免费学习资源里要么文本晦涩难懂，要么压根不提规范。

    我看过网上一套《入门前端xxxx》的教学视频，从头到尾只是 告诉你 “这个标签是什么，写上去有什么效果”，都没有说明为什么这样？更加没有讲到任何的规范、性能等前端必须了解的知识！

  为什么会这样呢？因为 免费 啊！天下有白吃的午餐么！都给你免费做指导了人家喝西北风么？换你你乐意么？

  今天我就开一门这样的课程，从0讲解布局规范，哪怕你是零基础，也没有问题！文章中说的内容都会有深入讲解，考虑到学生居多，想学但报班培训太贵承担不起，课程价格定为 168元，课程最后会带领实践大型企业官网的规范布局，只需要花费7天时间。

    每天晚上学习90分钟的知识干货

    长达15天的私教辅导，解决学习疑问

    开发项目实战>>>>大型企业官网

    课程全部录播视频

   名额仅限20个，学费仅168元，看图扫码抢报名机会！