渐进增强模型

  1. 总述: 结构层(Structure),表现层(presentation)与行为层(behavior). HTML,CSS,JavaScript. 只有HTML 的情况下也可以显示内容,CSS用来美化,Js则负责平滑的控制浏览器的行为,确保用户访问到里面的内容.
  2. 结构层: HTML增加了文档的信息量: 新引入 <header><nav><section><article><aside><footer>等元素.
  3. 表现层: 技术渲染比不上CSS, Js辩编写的目标是绕过Js代码,直接以css来完成需求. CSS有如下三种表现形式.
    • 內联CSS. CSS效果仅局限于元素内部,不能被缓存,也不可以被复用.
      1. <navid="nav"role="navigation"style="background:#c00;padding:10px;">

    无论通过Js代码即时生成内嵌CSS,还是手动编写到HTML文档中,都不是明智选择.

    • 链接外部样式表
      1. <head>
      2. <tilte>Great Home Page in HTML5</tilte>
      3. <metacharset="utf-8">
      4. <!--css-->
      5. <linkrel="stylesheet"href="css/styles.css">
      6. </head>

  4. 行为层

    我们必须保证即便没有Js代码的情况下, 用户仍然能够访问网站中的内容.

    三种HTML中加入Js的方式: 内联Js代码, 嵌入式Js代码, 外部Js代码

    • 内联Js代码
      <li><a href="/about" onclick="alert('this is the thing'); ">About</a></li>
    • 嵌入式Js代码 剥离了Js代码,放在HTML元素<script>中* –低调的Js代码*
    • 外联式Js代码, 放在单独的Js文件中,然后被引用. –外联的低调的Js代码

      原理上HTML任意位置均可以链接js文件,不过在尾部放入,因为我们的Js不影响网站的正常运行,在HTML文档全部渲染完毕后在用Js对其操作,相对容易.

  5. 总结
    渐进增强开发模型 对于前端开发的重要性, 网站的首要责任是保证用户能访问到它的内容.

一 JavaScript应用开发实践指南的更多相关文章

  1. 2 JavaScript应用开发实践指南

    JavaScript 语言在浏览器中的运用 HTTP请求,加载HTML后根据内容加载CSS等,大部分浏览器默认2个下载链接. HTML元素要尽可能简洁,不需要将Table元素变成多个div, css代 ...

  2. 2.1 JavaScript应用开发实践指南

    创建交互层 循环 示例代码如下: var people = family, peopleCount = items.length, i; if(peopleCount>0){ for(i=0; ...

  3. 精通BIRT：Eclipse商务智能报表工具开发实践指南

    http://blog.csdn.net/birtbird/article/details/8935520 [置顶] 精通BIRT:Eclipse商务智能报表工具开发实践指南 分类: BIRT 201 ...

  4. OpenGL ES应用开发实践指南：iOS卷

    <OpenGL ES应用开发实践指南:iOS卷> 基本信息 原书名:Learning OpenGL ES for iOS:A Hands-On Guide to Modern 3D Gra ...

  5. lua游戏开发实践指南学习笔记1

    本文是依据lua游戏开发实践指南做的一些学习笔记,仅用于继续自己学习的一些知识. Lua基础 1.  语言定义: 在lua语言中,标识符有非常大的灵活性(变量和函数名),只是用户不呢个以数字作为起始符 ...

  6. 【SpringCloud技术专题】「Gateway网关系列」（3）微服务网关服务的Gateway全流程开发实践指南（2.2.X）

    开发指南须知 本次实践主要在版本:2.2.0.BUILD-SNAPSHOT上进行构建,这个项目提供了构建在Spring生态系统之上API网关. Spring Cloud Gateway的介绍 Spri ...

  7. 《Lua游戏开发实践指南》读后感

    书籍地址:http://book.douban.com/subject/20392269/ 一句话点评该书:想用Lua作游戏脚本开发的同学值得一读! (一)本书特点 市面专门讲Lua的中文书籍非常少, ...

  8. 1. 初次尝试Core Data 应用程序（Core Data 应用开发实践指南）

    本书以实践的方式讲解 Core Data,不会过早讲一些难懂的话题.从入门知识入手,演示如何为范例程序添加Core Data 支持,后续章节再依次讨论更复杂的话题. 1.1. Core Data 是什 ...

  9. 读Lua游戏开发实践指南

    11月11日开读,到今天正好一个月. 起因是被裁员之后,发现很多公司都在使用lua编写cocos2d-x游戏,原因是上手快,技术人员比较便宜. 如果引擎封装比较好,几乎在lua里写写基本逻辑就行了,不 ...

随机推荐

  1. [css]inline-block

    能被父容器居中.能设置高度宽度和margin.不会像table或div那样占一正行……——这就是inline-block——记得这是浏览器默认样式告诉你的.

  2. java中几个特殊的类

    1 内部类-----是在其他类中的类 1.1 内部类的定义 将类定义为 class xxxx{... ...}置于某个类的内部即可‘ 内部类编译时生成 xxxx$xxxx的class文件 内部类不能够 ...

  3. Android自定义下拉刷新

    网上的下拉刷新功能很多,不过基本上都是隐藏header的,而项目里面需要只隐藏部分的header,类似QQ好友动态的效果,修改了一些现有的,最后有很多问题,所以就自己自定义了一个,逻辑也很简单,首先就 ...

  4. 【32】确定你的public继承塑模出Is-A关系

    1.public继承表示Is-A关系,也就是满足里氏代换.与之相对应的,private继承表示根据某物实现出,不满足里氏代换.子类对象初始化父类引用,编译通不过. 2.考虑下面的需求,企鹅继承鸟,Bi ...

  5. (DP6.1.2.1)UVA 147 Dollars(子集和问题)

    /* * UVA_147.cpp * * Created on: 2013年10月12日 * Author: Administrator */ #include <iostream> #i ...

  6. 关于开源的RTP——jrtplib的使用

    session.BeginDataAccess(); if (session.GotoFirstSource()){ do{ RTPPacket *packet; while ((packet = s ...

  7. iOS音频篇：AVPlayer的缓存实现

    授权转载,作者:明仔Su(简书) 在上一篇文章<使用AVPlayer播放网络音乐>介绍了AVPlayer的基本使用,下面介绍如何通过AVAssetResourceLoader实现AVPla ...

  8. AIR 程序开发系列 之五 保存数据的几种方式

    Local SharedObject 这种方法比较简单方便的保存少的数据到到设备中.你不用自己去管理这些数据,设备会自动管理他. SharedObject 在 flash.net 包中,继承自Even ...

  9. QT连接多种数据库f方法及测试

    QT提供了对多种数据库的访问支持,对SQL Server也可以通过ODBC来进行访问.要想顺利访问SQL Server. 首先要保证以下几点:1. QT编译时已经编译了QtSql2. 编译了ODBC插 ...

  10. Html简单demo_html列表中进行编辑操作

    html列表中进行编辑操作 <div class="_sort_box" style="float: left;"><?php echo $v ...