渐进增强是前端开发的根本基础。从根本的层面上讲，它可以将HTML,CSS,JavaScript这三者的功能分离开来，这能让当前的项目开一个好头。我们在创建项目的开始要将这三者分开，它们对应的称呼是结构层、表现层、行为层。这种方式可以原封不动地套用在网页设计之外的其他领域中，无论怎么说，他都是一种自底向上或由内而外的模型，我们应该以此来构建网站。

渐进增强是一种分层设计的网页开发方式，其重点是强调内容，用户和易访问性。模型的目的是让这三层自上而下依赖：javascript依赖CSS，CSS依赖HTML，这样做的好处是自上而下的一除每一层，都不会损失网站中最重要的内容，也就是内容。

只要把这三层隔开，让网站在只有HTML代码的情况下运行，同时在逐层添加CSS美化页面，以javascript程序平滑的控制浏览器的行为，那么你就能确保用户可以访问到网站中的内容。

  1.  1 结构层
  2.  2 <body>
  3.  3 <headerid="header">
  4.  4     <h1><ahref="/">这是一个主页</a></h1>
  5.  5 </header>
  6.  6 <navid="nav">
  7.  7     <ul>
  8.  8         <li><ahref="/">页面一</a></li>
  9.  9         <li><ahref="/">页面二</a></li>
  10. 10         <li><ahref="/">页面三</a></li>
  11. 11         <li><ahref="/">页面四</a></li>
  12. 12     </ul>
  13. 13 </nav>
  14. 14 <articleid="main">
  15. 15     <!--网页主体/-->
  16. 16     <buttonid="about"type="submit"></button>
  17. 17 </article>
  18. 18 <footerid="footer">
  19. 19     <p>2006版权所有</p>
  20. 20 </footer>
  21. 21 </body>
  1.  1 表现层
  2.  2 #nav{
  3.  3     background-color:#201F1F;
  4.  4     padding:10px;
  5.  5     overflow:hidden;
  6.  6 }
  7.  7 #navul{
  8.  8     list-style:none;
  9.  9     margin:0;
  10. 10     padding:0;
  11. 11 }
  12. 12 #navli{
  13. 13     float:left;
  14. 14 }
  15. 15 #navlia{
  16. 16     padding:010px;
  17. 17     color:#03a9f4;
  18. 18 }
  1. 1 行为层
  2. 2 function doTheThing(){
  3. 3 alert("这是一则弹窗消息");
  4. 4 }
  5. 5
  6. 6 Var  elem=document.getElementById("about");
  7. 7 elem.addEventListener(click,doTheThing,false);

可以发现，当移去（浏览器出错）css或javascript外部文件时，用户仍能访问到网页中的主体内容，只不过不漂亮而已。这种更加符合开发者的思维模式，能精准的找到所需的信息，可以更好的维护团队的项目，间接地改善了开发流程。

另外，在性能方面，如果CSS文件和javascript文件是通过外部文件（务必使用外链）的方式链接进来的，那么每个访问者的浏览器可以单独缓存它们，也就是说，只要用户打开一次过本网站的一个网页，在浏览其他页面的同时就不再下载这些资源了，这样也以减少页面的加载时间，并且将HTTP请求数量降至最低。

这是我认知的一些简显得前端知识，希望对一些朋友能有所帮助！

web前端的渐进增强式开发模型的更多相关文章

  1. 最受Web前端开发者欢迎的五大开发工具

    工其事,必利于器.好的开发工具毋容置疑会帮助Web前端开发者事半功倍,51CTO在上期主办的技术沙龙<大型网站PHP开发之道> 对现场的百余位Web开发者做了问卷调查,后经51CTO调研小 ...

  2. Web前端框架与移动应用开发第八章

    Web前端框架与移动应用开发:制作58招聘专题页 1.html代码: <!DOCTYPE html><html><head> <meta charset=&q ...

  3. Web设计思想——渐进增强

    最近在拜读一本Web体验相关的书<渐进增强--跨平台用户体验设计 >,阅读后做些总结,消化一下书中的精髓. 在阅读本文前,可以先思考下面几个问题. 1. 浏览网页的目的是什么? 2. 浏览 ...

  4. Web前端工程师需要注意的开发规范有哪些？

    从事web前端开发工作我们就需要了解web前端开发的规范,这样才能保证高效快速的完成工作,本篇就和大家分享一下web前端开发工程师需要注意的web前端开发规范有哪些,希望对小伙伴们有所帮助. web前 ...

  5. 【从0到1学Web前端】CSS定位问题一(盒模型,浮动,BFC) 分类： HTML+CSS 2015-05-27 22:24 813人阅读 评论(1) 收藏

    引子: 在谈到css定位问题的时候先来看一个小问题: 已知宽度(假如:100px)div框,水平居中,左右两百年的分别使用div框填充.且左右div自适应. 效果如下图: 这个问题的难点主要是浏览器宽 ...

  6. Web前端面试指导(九)：盒子模型你是怎么理解的？

    问题分析 这道题问得比较宽泛,一定要找准切入点,如果切入点找不准,很容易乱答,甚至答偏,所以找准切入点是非常的重要的. 解答思路 1)盒子模型有两种,W3C和IE盒子模型 (1)W3C定义的盒子模型包 ...

  7. web前端-移动端响应式与自适应

    一. 在HTML的头部加入meta标签 在HTML的头部,也就是head标签中增加meta标签,告诉浏览器网页宽度等于设备屏幕宽度,且不进行缩放,代码如下: <meta name="v ...

  8. Web前端框架与移动应用开发第七章：二

    3.练习3:抽奖大转盘 注意事项:需要使用Zepto.js,区别于zepto.min.js 实现效果:转盘转动抽奖 html <!DOCTYPE html><html>< ...

  9. Web前端框架与移动应用开发第七章

    1.练习1:焦点图切换 html: <!doctype html><html><head> <meta charset="utf-8" / ...

随机推荐

  1. windbg学习进阶之——dump分析常用命令收集

    #重要说明 (1) windbg命令分为标准命令,元命令和扩展命令. 标准命令提供最基本的调试功能,不区分大小写.如:bp  g  dt  dv  k等 元命令提供标准命令没有提供的功能,也内建在调试 ...

  2. display:inline-block兼容ie6/7的写法

    2.display:inline-block作用? 使用display:inline-block属性,可以使行内元素或块元素能够变成行内块元素,简单直白点讲就是不加float属性就可以定义自身的宽.高 ...

  3. 【C#进阶系列】05 基元类型、引用类型和值类型

     基元类型和FCL类型 FCL类型就是指Int32这种类型,这是CLR支持的类型. 而基元类型就是指int这种类型,这是C#编译器支持的,实际上在编译后,还是会被转为Int32类型. 而且学过C的朋友 ...

  4. 回文串---Palindrome

    POJ   3974 Description Andy the smart computer science student was attending an algorithms class whe ...

  5. React入门--------JSX

    React学习网站 React官方英文网站:http://reactjs.cn/react/docs/top-level-api.html React官方中文网站:http://www.css88.c ...

  6. 微信公共平台开发2 .net

    成功的走出第一步后,我们紧接着趁热打铁开始下一步: 成为了开发者之后微信平台会给您AppId和AppSecret,在订阅号中是没有的,所以因该申请一下服务号, 若没有请注意上一篇http://www. ...

  7. Office 365 - Windows PowerShell for SharePoint Online

    Office 365 PowerShell for SharePoint Online 1. Get-SPOTenantLogEntry 并不能获取所有的Log信息,只能用于获取因外部资源而出错的lo ...

  8. Mybatis学习记录（六）----Mybatis的高级映射

    1.一对多查询 1.1 需求 查询订单及订单明细的信息. 1.2 sql语句 确定主查询表:订单表 确定关联查询表:订单明细表 在一对一查询基础上添加订单明细表关联即可. SELECT orders. ...

  9. Arcengine实现创建网络数据集札记(一）

    一 引子 网络数据集,GIS空间分析基础的理论和知识,是最短路径分析.连通性分析等其他空间分析技术的数据基础. 以往,网络数据集的研究很少,此次项目开发过程中,对网络数据集以及arcengine创建网 ...

  10. 安卓开发_浅谈Service

    一.Service(服务) Service是Android程序中四大基础组件之一,它和Activity一样都是Context的子类,区别在于它没有UI界面,是在后台运行的组件. public abst ...