前端学习笔记基础版

以下的内容都只是一些粗略的总结，每个知识点都有很多需要去推敲。
可以参考另一篇文章，一些ES6的语法。

html

1. 页面编码在 head 标签 meta中 charset=“utf-8”,就可以显示中文字符；meta中name=“viewport”表示视窗，移动端 content=“width=device-wideth,initial-scale=1.0” ；title标签 修改页面名称。（vscode中快建->输入htm:5+tab键）
2. strong标签 加粗
   p标签 （paragraph）段落
   h{1，2，3，4，5，6}标签标题级别
3. div和span：主要作用是分类，包裹
   div换行 span不换行

CSS

1. 
   （抽离页面CSS样式）
2. 引入方式：
   行内内联：在标签内< div style="color:red; background-clolor="green";></div>
   link标签：<link rel="stylesheet" href="/index.css">
   嵌入式方式：

<style>
	div{
	color:red;
	background-color:green;
	}
	//类选择器用.
	.title_l{
	color:blue;
	}
	//id选择器用#
	#btn{
	color:pink;
	}
</style>

• 当某个标签既有类又有id时且都有样式时该用类的样式还是id的样式？
  ! imortant 可以修改权重，但是一般不建议用
  伪类选择器：hover

3. padding内边距
   border边框
   margin外边距
   display：block/inline/inline-block
   （1） block块级元素：会独占一行
   （2）inline：不会独占一行
   position：relative；absolute；static(default)；fixed
   （1）relative设置父级元素，用absolute可以调整子块内元素的位置。相对定位，不会破坏原有页面结构。
   （2）absolute：绝对定位，将当前元素浮动起来。可以想象成为 -->（三个人躺在地上，中间的人如果飘起来，那么第三个人会向第一个人靠近。中间的人和他们不在同一平面上了。）说的有点抽象
   可以设置left right top bottom，都是相对离他最近的非static定位元素，一般是相对父元素。
   （3）fixed:固定在整个页面的相对位置，当滚动时，他也不会改变位置。
   （4）sticky：吸顶效果（当这个元素滑动到顶部时会吸在顶部保持不动，下方元素继续滑动）
   float：建议学习布局思想
   flex：移动端应用非常大
   注意样式塌陷问题
   

JS

1. 解释型语言，可以跨平台，JS引擎单线程，异步机制
2. 基本类型（值类型）
   （1）按值访问 ，不可改变；如下，a的值并没有发生改变，他只是在栈内的不同地方。

//按值访问
var a="hello";
 a=123;

（2）比较的是值

var a=1
var b=true
console.log(a==b)

结果是：true
改成a===b结果是false (一般在用到比较时，建议都用到 === 严格等：不仅数值比较还数据类型比较 )
0/undefined ->false
1->true
（3）基本类型存在与栈中
3. 引用类型
（1）可以改变值,按地址访问。

var a={name:"zs"}
a.name="ls"

4. null缺少这个值（未赋值的一个状态）
undefined表示值存在，但是未定义

5. Symbol（ES6新定义）
唯一标志符info2不会覆盖ino的值 。
6. 一个函数怎么会成为一个对象呢？

这是因为在调用函数时，前面加了一个new这会导致在调用这个函数的时候，自动的初始化一个对象。一般为了区分自定义对象和函数，自定义对象的开头第一个字要大写。下面是调用过程：

这里只是把它当作一个函数来执行，直接调用该函数结果是yellow carundefined

6. 包装对象–>Object

7. 函数声明
   

8. 数组创建：推荐直接用自变量方式var arr=[]
   

9. 

JS作用域

上图所示右侧的代码：if语句中的name，不是在函数（{}）中声明的，所以就被认为时全局的变量，所以一开始声明的name就被污染了，输入了第二次的name。

var name='张三'
if(true){
var name='123'
var name2='lis'
let name3='wangwu' //let const 是局部变量
//出了{}之后变量就被销毁
}
//当name3改成var时，就可以打印出来
console.log(name,name2,name3)

JS预编译

1. 先打印再赋值会报错吗？

console.log(name)
var name='123'

不会，打印结果是undefined.
再预编译以后，会进行变量提升操作。

AO{ } 执行期上下文

最后打印结果是function() 123 123 function
下面是一个a在提升时，经历的一个过程。

总结：

JS作用域链

DOM

jQuery

AJAX局部更新