渐进增强模型
- 总述: 结构层(Structure),表现层(presentation)与行为层(behavior). HTML,CSS,JavaScript. 只有HTML 的情况下也可以显示内容,CSS用来美化,Js则负责平滑的控制浏览器的行为,确保用户访问到里面的内容.
- 结构层: HTML增加了文档的信息量: 新引入
<header><nav><section><article><aside><footer>等元素. - 表现层: 技术渲染比不上CSS, Js辩编写的目标是绕过Js代码,直接以css来完成需求. CSS有如下三种表现形式.
- 內联CSS. CSS效果仅局限于元素内部,不能被缓存,也不可以被复用.
<navid="nav"role="navigation"style="background:#c00;padding:10px;">
无论通过Js代码即时生成内嵌CSS,还是手动编写到HTML文档中,都不是明智选择.
- 链接外部样式表
<head><tilte>Great Home Page in HTML5</tilte><metacharset="utf-8"><!--css--><linkrel="stylesheet"href="css/styles.css"></head>
- 內联CSS. CSS效果仅局限于元素内部,不能被缓存,也不可以被复用.
-
行为层
我们必须保证即便没有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对其操作,相对容易.
- 内联Js代码
总结
渐进增强开发模型 对于前端开发的重要性, 网站的首要责任是保证用户能访问到它的内容.