渐进增强模型

  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. RC522天线匹配参数【worldsing笔记】

    图为Device读卡器的参数值 EMC电路对读写距离影响不大:                   L3 和L4 固定为2.2uH:                  C11和C12也是固定值,如果P ...

  2. 牛一网ecshop综合类模板(仿淘常州) for ecshop 2.7.3

    牛一网目前已经开发好这款ecshop综合类/多色系模板,已经开发好多种色系,本模板将会搭配多种颜色让用户选择,以适应 家电数码. 个护化妆. 生鲜水果 . 服饰鞋帽 . 图书音像 . 粮油食品.家具家 ...

  3. .NET设计模式（1）：开篇

    转载:http://terrylee.cnblogs.com/archive/2005/12/09/293465.html .NET设计模式开篇 --.NET设计模式系列之一 Terrylee,200 ...

  4. 关于七牛云存储，HTTPS资源上传不成功问题

    关于七牛云存储,HTTPS资源上传不成功问题 官方给出了一个解决方案,亲测可用.特此记录一下. 找到QNConfiguration.m文件.然后重写两个方法,直接上代码. + (instancetyp ...

  5. 精彩，sinox.org官网贴满winxp死亡大字报

    sinox杀死windowxp不可避免,不用说,微软还自己掐死他!!! 中国人会升级正版 windows7吗?昨天也许会,但今天不会了,因为 sinox大字报出来了! 这下举国皆知了. 换装sinox ...

  6. 使用JavaScript实现分页效果

    应公司需求,有时需要制作静态页面网站,而一旦涉及到文章的分页,实现起来非常麻烦,自己又刚入门,对js不是很熟悉,所以就拿来练练手. 首先页面结构如下,分别展示数据跟分页: <!DOCTYPE h ...

  7. 统计php源码行

    嘿嘿,最近在提交文件,需要知道代码行数,简单记录下,由几种不同的方法进行: 1.直接在 linux 上运行下面语句即可,秒杀: find . -name "*.php" -exec ...

  8. Codeforces Round #261 (Div. 2) D 树状数组应用

    看着题意:[1,i]中等于a[i]的个数要大于[,jn]中等于a[j]的个数 且i<j,求有多少对这种(i,j)  ,i<j可是 i前面的合法个数 要大于j后面的 看起来非常像逆序数的样子 ...

  9. Android开发环境中的概念和工具介绍

    最近学习Android开发,以前使用C/C++多一些,现在再补点Java知识,不管是哪种语言,都不过是一种工具而已,真的学起来,大同小异,无谓优劣.学习Android编程肯定是要先从环境搭建开始,无论 ...

  10. linux僵死进程的产生与避免

      作者:lingdxuyan来源:ChinaUnix技术博客,本文版权由lingdxuyan所有,如需转载,请注明出处. 一个进程在调用exit命令结束自己的生命的时候,其实它并没有真正的被销毁, ...