渐进增强模型

  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. Web- HTML网页颜色大全

    按色相的搭配分类 列举一些最为代表常见的颜色值,让你能快速的找到自己想要的代码 红色 #FFFFCC#CCFFFF#FFCCCC #99CCCC#FFCC99#FFCCCC #FF9999#99669 ...

  2. Oracle- 日期格式和数字类型处理

    更新数据库时间格式的显示格式的语句:(alter session set nls_date_format='YYYY-MM-dd'); to_date("要转换的字符串",&quo ...

  3. Ajax调用WebService（一）

    Ajax调用WebService(一) http://www.cnblogs.com/leslies2/archive/2011/01/26/1934889.html 分类: Ajax 使用技术 We ...

  4. css中文字体unicode对照表

    为什么要使用Unicode编码代替中文字体 在CSS中使用中文字体通常直接设置字体名称,比如设置字体为宋体:font-family:’宋体’:但因此产生的一个问题是,如果默认编码并不是UTF-8,这会 ...

  5. [转]Java 动态代理机制分析及扩展

    引言 Java 动态代理机制的出现,使得 Java 开发人员不用手工编写代理类,只要简单地指定一组接口及委托类对象,便能动态地获得代理类.代理类会负责将所有的方法调用分派到委托对象上反射执行,在分派执 ...

  6. 强烈推荐android studio用的几个插件，androidstudio

    不懂安装studio插件,看参考博文:android stuido插件安装:http://blog.csdn.net/liang5630/article/details/46372447 1.Butt ...

  7. iOS开发笔记系列-基础1(数据类型与表达式)

    学习iOS开发快两年了,去年完成MagViewer之后就因为公司的其他业务繁重,除了维护这个应用之外,只是断断续续地自己做一些实验开发,没有再发布新的应用,这里想整理一下学习过程中的笔记,以便加深印象 ...

  8. 使用android x86进行android应用开发.

    首发论坛 安卓巴士.id:android_bin 一.必备工具: 1.虚拟机软件(本文使用virtual Box为例), 2.android x86镜像,下载地址http://www.android- ...

  9. hdu4081 次小生成树变形

    pid=4081">http://acm.hdu.edu.cn/showproblem.php?pid=4081 Problem Description During the Warr ...

  10. qss 实践

    *{ font-size:13px; color:white; font-family:"宋体"; } CallWidget QLineEdit#telEdt { font-siz ...