# HTML5

**Repository Path**: yushi5344/html5

## Basic Information

- **Project Name**: HTML5
- **Description**: No description available
- **Primary Language**: HTML
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-09-14
- **Last Updated**: 2021-09-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# HTML5
1. 概述    
   HTML5是定义HTML标准的最新版本.      
   是唯一一个能通吃PC,MAC,iPhone,Android 等主流平台的跨平台语言.
2. DOCTYPE     
   `DOCTYPE` 全称`Document Type Declaration`(文档类型声明)      
    通常情况下,DOCTYPE位于HTML文档最前面,位于根元素HTML的起始标签之前       

    |传统名称|和HTML草案名称|document.compatMode返回值|    
    | :---: | :---: | :---: |     
    | standards mode | no-quirks mode| CSS1Compat|
    |almost standars mode | limited-quirks mode |CSS1Compat|
    | quirks mode | quirks mode | BackCompat|
3. 语义化标签
    ```html
   <hgroup></hgroup>
   <header></header>
   <nav></nav>
   <section></section>
   <footer></footer>
   <article></article>
   <aside></aside>
   ```
# JavaScript
## 数据类型的分类和判断
1. 数据类型
   - 基本数据类型
       - String
       - Number
       - boolean
       - undefined
       - null
   - 引用数据类型
      - Object 任意对象
      - Function 一种可以执行的对象
      - Array  一种数值下标,内部有序对象
2. 类型判断
   - typeof    
     数据类型的字符串表达
      ```javascript
      console.log(typeof 1)// number
      console.log(typeof "1") // string
      console.log(typeof true) //boolean
      console.log(typeof undefined) // undefined
      console.log(typeof null) // object
      console.log(typeof {}) // object
      console.log(typeof [])// object
      console.log(typeof alert) // function
      ```
   - instanceof     
     实例  判断对象的具体类型
      ```javascript
      console.log(1 instanceof Number)//false
      console.log('1' instanceof String)//false
      onsole.log({} instanceof Object)// true
      console.log([] instanceof Object,[] instanceof Array)// true true
      console.log(alert instanceof Object,alert instanceof Function)// true true
      ```
   - ===    
    可以判断undefined,null
3. 类型
  - undefined和null的区别
      - undefined代表定义未赋值
      - null定义赋值了,只是值为null
  - 什么时候赋值给变量null呢
     - 初始赋值,表名将要赋值为对象
     - 结束前,让对象称为垃圾对象(被垃圾回收器回收)
  - 严格区别数据类型和变量类型
     - 数据类型
        - 基本
        - 对象
     - 变量类型
        - 基本: 保存的是基本类型的数据
        - 引用: 保存的是地址值
        
	
4. 数据,变量和内存的理解
   - 什么是数据
       - 在内存中可读的,可传递的保存了特定信息的东东
       - 一切皆数据,函数也是数据
       - 在内存中所有操作的目标 :数据
   - 什么是变量
       - 在程序运行中它的值是允许改变的量
       - 一个变量对应一小块内存,它的值保存在次内存中
   - 什么是内存
       - 内存条通电后产生的存储空间
       - 一块内存包含两个方面的数据
          - 内部存储的数据
          - 地址值数据
       - 内存空间的分类
           - 堆内存: 对象
           - 栈内存: 全局变量或者局部变量
   - 内存数据和变量之间的关系
       - 内存是容器,用来存储不同的数据
       - 变量是内存的标示,通过变量我们可以操作内存中的数据
     
5. 对象的理解和使用
    - 什么是对象
         - 多个数据,属性的集合
         - 用来保存多个数据的容器
    - 属性组成
        - 属性名: 字符串
        - 属性值: 任意类型
    - 属性分类
        - 一般: 属性值不是function, 描述对象的状态
        - 方法: 属性值为function 描述对象的行为
    - 特别对象
        - 数组,属性值为数字索引
        - 函数 可以执行的对象
    - 如何操作内部方法
       - `.属性名`
       - `["属性名"]`

6. 函数的理解和使用
    - 什么是函数
        - 用来实现特定功能的n条语句的封装体
        - 只有函数类型的数据是可以执行的,其他的都不可以
    - 为什么要用函数
       - 提交复用性
       - 便于阅读交流
    - 函数也是对象
       - instanceof Object===true
       - 函数有属性 prototype
       - 函数有方法 bind,call,apply
       - 可以添加新的属性/方法
    - 函数的三种不同角色
       - 一般函数 直接调用
       - 构造函数 通过new调用
       - 对象 通过`.`调用内部属性或者方法
    - 函数中this
       - 显示指定 obj.xxx
       - 通过call/apply/bind指定谁调用 xxx.call(obj)
       - 不指定调用 window
       - 回调函数 看背后是通过谁来调用它
    - 匿名函数自调用
         ```javascript
             ;(function(){
             // ....
             })()
         ```
         专业术语 IIFE
    - 回调函数理解
       - 什么是回调函数
           - 你定义的
           - 你没有调用
           - 但它最终执行了
       - 常用的回调函数
          - DOM事件回调
          - 定时器回调
          - Ajax请求回调
          - 生命周期回调

![](./src/00_static/基础.png)


## 原型和原型链
1. 原型与原型链
   - 所有的函数都有个特别的属性
      - `prototype` 显示原型属性
   - 所有的实例对象都有一个特别的属性 
      - `__proto__` 饮食原型属性 
   - 显式原型与隐式原型的关系
      - 函数的`prototype`  定义函数时自动赋值,默认为{},即用为原型对象
      - 实例对象的_`_proto__` 在创建实例对象时被自动创建,并赋值为构造函数的prototype属性
      - 原型对象即为当前实例对象的父对象
   - 原型链
      - 所有的实例对象都有`__proto__`属性 它指向的是原型对象
      - 这样通过`__proto__`属性就形成了一个链的结构-->原型链
      - 当查找对象内部的属性和方法时,js引擎会自动沿着这个原型链查找
      - 当给对象属性赋值时,不会使用原型链,而只是在当前对象中进行操作
2. 执行上下文和执行上下文栈
   - 变量提升与函数提升  
       - `变量提升` 在变量定义语句前,就可以访问到这个变量
       - `函数提升` 在函数定义语句前,就执行该函数
       - 先有变量提升,后有函数提升
   - 理解
       - `执行上下文` 由js引擎自动创建的对象,包含对应作用域中的所有变量属性
       - `执行上下文栈` 用来管理产生的多个执行上下文
   - 分类
      - `全局`  `window`
      - `函数`  对程序员来说是透明的 
   - 生命周期
      - `全局` 准备执行全局代码前产生,当页面刷新/关闭时死亡
      - `函数` 调用函数时产生,函数执行完死亡
   - 包含哪些属性 
      - 全局 
         - 使用var定义的全局变量 `undefined`
         - 使用function定义的全局变量  `function`
         - this `window`
      - 函数 
        - 使用var定义的变量 `undefined`
        - 使用function声明的函数  `function`
        - this 调用函数的对象,如果没有就是`window`
        - 形参 对应实参值
        - `arguments` 实参列表的伪数组
   - 执行上下文创建和初始化的过程
     - 全局
         - 在全局代码执行前创建一个全局执行上下文 `window` 
         - 收集一些全局变量,并初始化
         - 将这些变量设置为window属性
     - 函数
         - 在调用函数时,在执行函数体之前创建一个函数执行上下文
         - 收集一些局部变量,并初始化
         - 将这些变量设置为执行上下文属性
3. 作用域和作用域链
   - 理解
      - `作用域`: 一块代码区域,在编码时就确定了,不会再变化
      - `作用域链` 多个嵌套的作用域形成的由内向外的结构,用于查找变量
   - 分类
      - 全局
      - 函数
      - 块作用域
   - 作用
      - `作用域`:隔离变量,可以在不同的作用域定义的同名变量不冲突
      - `作用域链` :查找变量
   - 区别作用域与执行上下文
      - `作用域` :静态的 编码时就确定了,一旦确定就不会变化了
      - `执行上下文` : 动态的,在执行代码时创建,执行结束小时
      - `联系`: 执行上下文环境是对应的作用域中的 
4. 闭包
   - 理解
      - 当嵌套的内部函数引用了外部函数的变量时就产生了闭包
      - 通过Chrome控制台得知: 闭包本质是函数内部的一个对象,这个对象中包含引用的变量属性
   - 作用
      - 延长局部变量的生命周期
      - 让函数外部能够操作内部的局部变量
   - 编码
      ```javascript
      function fn1() {
         var a = 2;
         function fn2() {
            a++;
            console.log(a);
         }
         return fn2;
      }
      var f = fn1();
      f();
      f();      
      ```
   - 应用
      - 模块化
      - 循环遍历加监听
      - js库JQuery使用了大量的闭包
   - 缺点
     - 变量占用内存时间过长
     - 可能导致内存泄露
5. 内存溢出和内存泄露
    - 内存溢出
    - 内存泄露
   
 ![](./src/00_static/函数高级.png)
## 面向对象
1. 创建对象方式
   - Object构造函数模式
      ```javascript
      var obj = {};
      obj.name = 'Tom'
      obj.setName = function(name){this.name=name}
      ```
   - 对象字面量模式
      ```javascript
      var obj = {
        name : 'Tom',
        setName : function(name){this.name = name}
      }
      ```
   - 构造函数模式
      ```javascript
     function Person(name, age) {
        this.name = name;
        this.age = age;
        this.setName = function(name){this.name=name;};
     }
     new Person('tom', 12);
     ```
   - 构造函数+原型的组合模式
      ```javascript
      function Person(name, age) {
          this.name = name;
          this.age = age;
      }
      Person.prototype.setName = function(name){this.name=name;};
      new Person('tom', 12);
      ```
2. 继承模式
   - 原型链继承:得到方法
      ```javascript
     function Parent(){}
     Parent.prototype.test = function(){};
     function Child(){}
     Child.prototype = new Parent(); // 子类型的原型指向父类型实例
     Child.prototype.constructor = Child
     var child = new Child(); //有test()
     ```
   - 借用构造函数:得到属性
      ```javascript
     function Parent(xxx){this.xxx = xxx}
     Parent.prototype.test = function(){};
     function Child(xxx,yyy){
        Parent.call(this, xxx);//借用构造函数   this.Parent(xxx)
     }
     var child = new Child('a', 'b');  //child.xxx为'a', 但child没有test()
     ```
   - 组合
      ```javascript
      function Parent(xxx){this.xxx = xxx}
      Parent.prototype.test = function(){};
      function Child(xxx,yyy){
          Parent.call(this, xxx);//借用构造函数   this.Parent(xxx)
      }
      Child.prototype = new Parent(); //得到test()
      var child = new Child(); //child.xxx为'a', 也有test()
      ```
   - new 一个对象后做了些什么
      - 创建一个空对象
      - 给对象设置__proto__,值为构造函数对象的prototype,即
          ```javascript
          this.__proto__=Fn.prototype
          ```
      - 执行构造函数体  给对象添加属性/方法
![](src/00_static/面向对象.png)
## 线程与进程

1. 线程,进程
    - 进程
       - 程序的一次执行,它战友一片独有的内存空间
       - 可以通过windows任务管理器查看进程
    - 线程
       - 是进程内的一个独立执行单元
       - 是程序执行的一个完整流程
       - 是CPU的最小调度单元
    - 关系
       - 一个进程至少有一个线程
       - 程序是在某个进程内的某个线程执行的
2. 浏览器内核模块组成
   - 主线程
      - js引擎模块:负责js的编译与运行
      - HTML,CSS文档解析模块:负责文本的解析处理
      - DOM/css模块: 负责dom/css在内存中的相关处理
      - 布局和渲染模块: 负责页面的布局和效果的绘制
   - 分线程
      - 定时器模块:负责定时器管理
      - DOM事件模块
      - 网络请求模块
3. js线程
    - js是单线程
    - h5提出了多线程的解决方案
    - 只能是主线程更新界面
4. 定时器问题
   - 定时器并不真正完全定时
   - 如果在主线程执行了一个长时间的操作,可能导致延时才处理
5. 事件处理机制
![](./src/00_static/线程.png)

# CSS3
1. 新增选择器
    - 根据类型
       - `first-of-type` 同一类下第一个
       - `last-of-type` 同一类下最后一个
       - `nth-of-type(n)` 同一类下第n个
       - `nth-last-of-type(n)` 同一类下倒数第n个
        ```css
       p:first-of-type{
          color: red;
       }
       p:last-of-type{
          color: blue;
       }
       p:nth-of-type(2){
          color: aqua;
       }
       p:nth-last-of-type(2){
          color: blueviolet;
       }
       ```
    - 根据顺序
       ```css
       p:first-child{
          font-size: 18px;
       }
       p:last-child{
          font-size: 24px;
       }
       p:nth-child(2){
          font-size: 20px;
       }
       p:nth-last-child(2){
          font-size: 28px;
       }
       ```
    - 根据属性
        - `::selection` CSS伪元素应用于文档中被用户高亮的部分（比如使用鼠标或其他选择设备选中的部分）
        - `:not(p)` 排除p元素
        - `:root` 根目录 同html,优先级高
        - `[attr=""]`属性选择
       ```css
       p::selection{
           background: chartreuse;
       }
       .paragraphs :not(p){
           background: brown;
       }
       :root{
           background: #ebebeb;
       }
       input[type="text"]{
           width: 100px;
       }
       
       input[type="text"]:enabled{
           border: 1px solid forestgreen;
       }
       input[type="text"]:disabled{
           border: 1px solid red;
       }
       input[type="radio"]{
           width: 25px;
           height: 25px;
       }
       input[type='radio']:checked{
           width: 35px;
           height: 35px;
       }
       ```
    - target     
      `:target` CSS 伪类 代表一个唯一的页面元素(目标元素)，其id 与当前URL片段匹配 .
        ```html
        <a href="#news1">点击我news1变绿色</a>
        <br>
        <a href="#news2">点击我new2变红色</a>
        
        <br>
        <div id="news1">
            我是IDnews1
        </div>
        <div id="news2">
            我的ID为new2
        </div>
        ```
      ```css
      #news1:target{
          color: green;
      }
      #news2:target{
          color: orangered;
      }
      ```
2. css3装换
   - `translate` 根据x轴和Y轴给定的参数,从当前元素位置移动
   - `rotate` 在一个给定度数旋转的元素,负值表示逆时针
   - `scale`  表示该元素增加或者减少的多少,取决于宽度和高度的参数
   - `skew`  包含两个参数值,分别代表X轴和Y轴倾斜的角度,如果第二个参数为空,则为0,参数为负表示反方向倾斜
   - `matrix` 前四个方法合为一个.
   - `transform-origin` 设置转换原点,默认为(50%,50%),表示以元素中心点为转换原点,除了使用固定值和百分比之外,也可使用left,top,center,bottom,right等控制.

3. css3过渡      
   `transform`只能使元素的样子发生改变,并不能使它动起来,要让元素动起来,还需要过渡     
   css3过渡是元素从一种样式逐渐过渡到另一种效果.    
   - `transition-property`  规定应用过渡的css属性的名称
   - `transition-duration`   定义过渡效果花费的时间  默认是0
   - `transition-timing-function`  规定过渡效果的时间曲线 默认ease
       - `liner`  以相同速度开始至结束
       - `ease`   慢速开始,然后变快,最后慢慢结束
       - `ease-in`  规定以慢速开始的过渡效果
       - `ease-out`  规定以慢速结束的过渡结果
       - `ease-in-out`  规定以慢速开始喝结束的过渡效果
       - `cubic-bezier`  在贝塞尔曲线函数定义
   - `transition-delay`  规定过渡效果何时开始  
   - 简写形式
       ```css
        transition:height 1s liner 2s;    
        /*
         transition :名称   持续时间 时间曲线函数  延迟
        */   
       ```
4. `~`选择器和`+`选择器
    - `~`选择器 ele1~ele2  匹配出现在ele1后面的ele2
    - `+`选择器 ele1+ele2 匹配出现在ele1后面临近的ele2
5. border-raduis 圆角
    - 一个值
      ```css
      .div1{
          border-radius: 50px;
      }
      ```
    - 两个值
      ```css
      .div2{
      /*设置左上角右下角为0   ,右上角-左下角为50*/
          border-radius: 0 50px;
      }
      ```
    - 三个值
      ```css
      .div3{
      /*设置左上角为50,右上角0 右下角50  左下角0*/
          border-radius: 50px 0 50px;
      }
      ```
    - 四个值
      ```css
      .div4{
          border-radius: 50px 0 50px 20px;
      }
      ```

6. css动画
   - 设置动画    
      ```css
     @keyframes layer-rollIn {
        0% {background: #ebebeb;margin-left: 0;margin-top: 0;}
        25% {background: #cd0000;margin-left:500px;margin-top: 0;}
        50%{background: chartreuse;margin-left:500px;margin-top: 500px }
        75%{background: blueviolet;margin-left: 0;margin-top:500px}
        100%{background: aquamarine;left: 0;top: 0; }
     }
     ```
   使用keyframes创建动画规则
   - 绑定动画到元素上
      ```css
      .div{
      background: #ebebeb;
         height: 200px;
         width: 200px;
         animation-name: layer-rollIn;
         animation-duration: 5s;
         animation-timing-function: ease;
         animation-delay: 1s;
         animation-iteration-count:infinite;
         animation-direction: alternate;
         animation-play-state: running;
      }
      ```
   - 属性说明
      - `animation-name` 动画名称
      - `animation-durtaion` 动画持续时间  默认为0
      - `animation-timing-function`  动画执行时间曲线函数   默认ease
         - `linear`  线性速度运行
         - `ease`   动画以低速开始,然后加快,在结束前变慢
         - `ease-in` 动画以低速开始
         - `ease-out`  动画以低速结束
         - `ease-in-out`  动画以低速开始和结束
         - `cubic-bezier`  贝塞尔曲线
      - `animation-delay`  动画延迟  默认0
      - `animation-iteration-count`  动画迭代运行次数  默认1  无穷 infinite
      - `animation-direction`    规定动画是否在下一个周期逆向播放
         - `normal`  正常的
         - `reverse`  反向播放
         - `alternate`  奇数次正向 ,偶数次反向
         - `alternate-reverse`  奇数次反向,偶数次正向
         - `initial`  初始
         - `inherit` 继承


7. box-shadow

        box-shadow: h-shadow v-shadow blur spread color inset;

8. ::after和::before      
    content可以接收的值  
      - url
      - string
      - attr
          ```css
         a::after{
            content: "("attr(href)")";
         }
         ```
        

9. 多列
    ```css
    p{
       column-count: 3;
       column-gap: 60px;
       column-rule: 5px solid #cd0000;
       /*column-width: 400px;*/
    }
    
    ```