1.浏览器基础知识
1.1 目前常用的4种浏览器内核
- 谷歌浏览器(chrome): webkit内核(v8引擎)
- 火狐浏览器(firefox): Gecko内核
- 欧朋浏览器(opera):Presto内核(版本14以上 用webkit内核)
- IE浏览器:Trident内核
1.2 渲染引擎
- 作为前端开发,我们会使用HTML/CSS/JS编写代码,编写代码的时候要遵循一些规范(w3c)
- 浏览器开发商开发的浏览器,目的就是为了按照W3C规范,识别出开发者编写的代码,并且在页面中绘制出开发者预想的页面和效果(cpu:显卡),我们把浏览器中识别代码绘制页面的东西称为"浏览器的内核或者渲染引擎"
1.3浏览器兼容
- W3C发布的规范都是开发者们不断尝试总结下来的产物，举个例子:谷歌浏览器开发了一个新的css属性(border-radius)可以让开发者快速实现盒子圆角(万恶的IE 6/78浏览器)
1、-webkit-border-radius(只有谷歌浏览器遇到-webkit才会识别)
2、火狐浏览器发现这个功能很好用,也实现了这个属性(-moz-border-radius)
3、w3c把它融入到规范的时候(border-radius) 都能识别 加前缀(说明只有部分浏览器认可)
- 每个浏览器为了彰显自己的不一样,不按照标准来,但是把标准中规定的效果用另外一种方式实现了
1、JS中获取浏览器的所有样式 window.getComputedStyle (标准)
2、CurrentStyle(IE浏览器搞特殊)
3、所以写的时候要写两套
2.JS/CSS的引入方式
2.1 JS的导入方式
2.1.1 行内导入JS
//(慎重:不安全 不推荐)
<div onClick = "alert('hello world')"> come on </div>
//事件触发
2.1.2 内嵌式
<script type="text/javascript"> alert("hello world ~~")</script>
2.1.3 外链式
<script src="js/1-import.js"></script>
2.2 CSS的导入方式
2.2.1 行内
<div style="width:100px"></div>
2.2.2 内嵌
<style>
div {
height:100px
}
</style>
2.2.3 外链式
<link rel = "stylesheet" href="css/1-import.css">
2.2.4 导入式
<style>
@ import "css/1-import.css"
</style>
//导入式和外链式的本质区别
//两者最先实现的结果是一样的，都是将独立的css文件引入到网页文件中。但是两者还是有细微的差别的。
//其中link是将css布局文件先加载如网页文件中，所以这时无论网速再慢，最终实现的网页效果都是一样的。
//而@import则是先将网页文件加载，再加载布局文件，这时候如果网速过慢的话，则会先出现没有布局的网页效果，就会显得很难看
//但是导入样式可以避免过多的网页文件指向一个css布局文件，如果采用link的话，可能会导致由于过多的网页文件同时采用一个布局文件而导致速度下降。但是使用好的硬盘基本不会出现这样的情况
3.前端开发
- 写静态页面 --- 从UI设计师手里拿到设计稿(静态图片PSD),使用HTML+CSS把图片变成静态的HTML页面
- 拿JS写一些用户交互的效果,例如点击某一个按钮实现图片的切换等
- JS中有一个很常用的操作,就是用来操作页面中的HTML标签(DOM元素)
4.CSS放置位置
- 真实项目中我们都会把css放在body上边，把JS放在body的末尾(约定俗成的规定)
- body中编写的都是HTML标签,JS很多时候需要操作这些元素,首先我们要保证元素加载成功,才可以在JS中获取到
- 如果把JS放在HTML标签前面了,如何等到结构加载完成再加载JS?
window.onload = function() {
}
$(document).ready(function() {
})
window.addEventListener('load',funcion() {},false);
window.addachEvent('onreadystatechange',function() {})
- 动力: 这是我的学习笔记(来源于视频或者查阅文档),您能从中得到收获和进步,是我分享的动力,帮助别人,自己也会更快乐
- 期望: 不喜勿喷,谢谢合作！如果涉及版权请及时联系我,马上删除!
