关于前端html、css、js部分的个人总结

前端总结

网页的形成：
Html+css+js 经过浏览器渲染 --------> 页面
由于不同厂商的浏览器渲染引擎不一致----------> 同一个标签渲染的样式可能会不一样

Web标准：
因为浏览器的厂商不一样，制造的内核需要共同遵守同一个web标准，而不是自己搞自己的一套标准。
因此W3C规定了Web标准：结构html，表现css，行为js，而js中的ECMAScript由ECMA组织来规定

内核：
不同浏览器用的内核可能不同
IE：Trident内核
FireFox：GeCko
Safari：Webkit
Chrome：Blink
Opera：Blink

兼容性：
兼容一般是指兼容Pc端的IE678低版本，而移动端的浏览器版本都很高，不需要考虑兼容性问题。
因为Pc中的IE678低版本浏览器中的内核版本太低，不支持H5和C3这些新的标签和新的css属性以及ECMAScript的新语法，所以只能使用H4和C2的标签和属性。

浏览器的渲染过程：
浏览器的内核从上往下渲染html文档，根据文档中的标签关系建立dom树，同时也根据样式标签中的样式建立css树，这两个过程是并行的，不会相互阻塞。内核在遇到script标签的时候会启动js引擎来执行js代码，但如果上面的css样式还没加载完，他会被阻塞，直到他上面所有css样式都加载完后，立刻执行。在js引擎执行js代码的过程会阻塞css和html标签的渲染。

Html总结

Html标签的语义化：
      每个html标签都有自己的语义，要在合适的地方使用合适的标签来搭建网页结构，即使没有css来修饰，网页的结构也是清晰的。
总的来说，html标签语义化能使得网页结构合理清晰。

Html的标签关系：
      Html双标签一般都是可以任意互相嵌套的，除了类似（列表ul、li）（表格table、tr、td）等等有父子关系的标签要配套使用，中间不能任意嵌套其他无关的标签

H4的常用标签：
 排版标签：
    H1-h6 标题标签
    P 段落标签
    Div 块标签，没有语义
    Span 行内标签，没有语义
 文本格式化标签：
    Strong/b 强调加粗
    Em/i 斜体倾斜
    Del 删除线
    Ins 下划线
 三个表：
    Table tr td 主要用于显示展示信息
    Ul li ol dl dt dd
    Form form表单元素 提示信息 用于收集用户信息

标签属性：
      在html网页文件中，标签属性一般只是用来存储数据信息，而不用来改变标签元素的样式布局，标签元素的布局样式交给css来做。

Css总结

Css的作用：
      Css（层叠样式表）主要设置 文本内容（字体、大小、对齐方式等）和版面的布局（盒子模型）。

Css的结构：
  选择器{
               属性：属性值;
  }

盒子模型:

外边距margin + 边框border + 内边距padding + 内容区content

盒子摆放的三种机制：

标准流 浮动 定位

三种机制的层级：

标准流在底下，浮动在中间，定位的在上面（position属性不是static就行）

文档流:
  定义：
      标签的盒子从上往下渲染到页面中，而块级元素独占一行，  行内元素并排一行。
      当一个标签元素脱离文档流时，会失去他在文档流中盒子所占  的空间，后面的元素会占据他的位置。脱离文档流的属性有浮动和绝对定位和固定定位。
      在文档流中的块级元素可以通过一些属性来开启BFC，使其 成为一个独立的块级渲染空间，具有普通块级元素所没有的一些特性。BFC规定了在它内部的元 素的布局规则，BFC外面的元素不会影响到它内部元素的布局，反之也一样。

文档流中的规范：
      行内元素只能容纳文本或其他行内元素
      块级元素可以容纳所有块级、行内元素
      行内块可以容纳所有的块级和行内元素

文档流的显示模式：
      行内元素inline
      行内块元素inline-block
      块级元素block

浮动：
      主要是用来做横向的布局

定位：（盒子压住盒子一般是用定位做的）
*  在绝对定位中，如果没有父级的定位元素，则会相对于初始包含快定位，即浏览器视口，而不是html元素或者body元素。滚动页面时会改变位置。
*  固定定位中，位置永远相对于浏览器视口，不随滚动而变化位置。
*  固定定位和绝对定位的width height left top的百分比是相对于参照的定位元素的，而不是参照父级元素。

Css的三大特性：
层叠性：
      有多个相同的属性时，会产生冲突，会根据优先级来决定选用哪一个。
继承性：
       Css的继承属性：
           关于文本内容的样式属性一般来说都是可以继承的，继承过来的属性会被标签的默认属性给覆盖。
优先级：
      继承过来的属性权重为0，标签的权重为1，类的权重为10，id的权重为100，行内样式权重为1000，！important为10000。

Js总结

Js引擎的执行过程（事件循环机制）：
      Js执行代码分同步代码和异步代码，在遇到同步代码的时候立刻执行，而遇到异步代码的时候，不会立刻执行，需要等到条件满足的时候把异步代码块放到回调队列中，而根据异步代码段类型的不同，分到宏队列或是微队列中，在主线程空闲的时候会先把微队列中所有的异步函数都执行完，再从宏队列中取。

变量：
      基本数据类型：数值型 字符串型 布尔型 null undefined
      复杂数据类型： object
     *基本数据类型在通过 ‘.’调用方法的时候，会把基本数据类型包装成包装类型（复杂数据类型）再来调用方法和属性。
*堆和栈，数据类型的内存分配

变量的运算：
算术运算：
       1.运算过程首先要按数字的标准，能够隐性转成数字的优先都转成数字：这样的话，计算结果要么是正确的数学计算，要么就是NaN；
　　2.但这个过程有个例外，就是字符串，字符串与任何数据类型的加运算都是拼接， 字符串与任何数据类型的减乘除模余运算参照第一条。
*浮点数的运算会有精度问题，不能用来判断两个浮点数是否相等。
运算符优先级：

（），！，++，–，算术运算符，比较运算符，逻辑运算符

执行上下文、作用域、作用域链、this、闭包：
  执行上下文{
  （AO、VO）变量对象：{}，
    作用域链（scope）：[]，
    This：?
   }

      每个函数在声明定义的时候会有一个[[scope]]属性，它可以看成是一个数组，它包含了它上级所有的AO或VO对象，当调用这个函数、执行函数的第一行代码前的时候会创建一个执行上下文对象，如上所示，把函数中声明的函数、变量名和函数的形参放到变量对象中，并对作用域链赋值为[ 当前函数调用时的变量对象，[[scope]] ]。
在调用函数、创建执行上下文对象的时候，就已经确定了this的值，且在函数执行期间不会改变。
This值的确定：
    引用类型={
        Base：包含这个属性的对象
        属性名:‘’
     }
        当（）的左边是引用类型时，this的值为base，如果base是AO或VO时，base都当做null处理，javascript当然不允许base为null的情况发生，所有就将base设置为global对象。，当（）左边不是引用类型时，this的值为null，实际最终this的值被隐式转换为全局对象。

构造函数和原型、实例对象的关系：
        每个构造函数都有proptype属性指向原型对象，原型对象中有一个constructor属性指向构造函数，通过构造函数创建出来的实例对象中的__prop__属性都会指向原型对象。
        *每个对象身上都会有__prop__属性，在原型对象身上的__prop__属性理解为继承，在实例对象身上的__prop__属性理解为这个实例对象是哪个构造函数创建出来的。
原型链：
        在JavaScript中万物都是对象，对象和对象之间也有关系，并不是孤立存在的。对象之间的继承关系，在JavaScript中是通过__prop__对象指向父类对象，直到指向Object对象为止，这样就形成了一个原型指向的链条，专业术语称之为原型链。
        当我们访问对象的一个属性或方法时，它会先在对象自身中寻找，如果有则直接使用，如果没有则会去原型对象中寻找，如果找到则直接使用。如果没有则去原型的原型中寻找,直到找到Object对象的原型，Object对象的原型没有原型，如果在Object原型中依然没有找到，则返回undefined。

在ES6之前没有class定义类，是通过构造函数+原型对象来实现类的。