渐进增强模型

  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. 转载 C#匿名函数 委托和Lambda表达式

    转载原出处: http://blog.csdn.net/honantic/article/details/46331875 匿名函数 匿名函数(Anonymous Function)是表示“内联”方法 ...

  2. Linux web工程部署远程必备软件安装

    一.序 最近在将程序往linux上面部署,特此记录下部署步骤,待以后参考. web工程部署必备软件为:JDK.tomcat.数据库软件(oracle或mysql),远程监控.上传下载必备软件:VNC. ...

  3. iOS之FMDB 转载

      写的较好的博客:http://blog.csdn.net/xyz_lmn/article/details/9312837 http://www.cnblogs.com/wuhenke/archiv ...

  4. MongDB简介

    一.基本概念 MongoDB 是一个高性能,开源,无模式的文档型数据库,是当前NoSQL 数据库产品中最热门的一种.它在许多场景下可用于替代传统的关系型数据库或键/值存储方式,MongoDB 使用C+ ...

  5. ThinkPHP函数详解：C方法

    C方法是ThinkPHP用于设置.获取,以及保存配置参数的方法,使用频率较高.了解C方法需要首先了解下ThinkPHP的配置,因为C方法的所有操作都是围绕配置相关的.ThinkPHP的配置文件采用PH ...

  6. Android Intent入门

    http://www.cnblogs.com/leipei2352/archive/2011/08/09/2132096.html http://blog.csdn.net/xiazdong/arti ...

  7. SQLSERVER复制表的方法

    1.复制表结构及数据     格式:select * into 新表名 from 要复制的表名     --例如:select * into temp from users 2.只复制表数据   格式 ...

  8. [MODx] 10. Using Babel for Muti-languages support

    1. Go to 'Extras' -> download and install 'Babel'. 2. Set up '.htaccess' file, currently, we set ...

  9. Timus 1446. Sorting Hat 分类问题

    At the start of each school year, a very important event happens at Hogwarts. Each of the first-year ...

  10. highcharts js报表工具(报表插件)

    highcharts报表工具(报表插件.图表工具) highcharts效果在线演示(可查看源代码):  http://www.hcharts.cn/demo/index.php?p=56 Highc ...