期中考试

Veröffentlicht am

1. 写一个html文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的页面</title>  //页面标题
<link rel="stylesheet" href="/style.css">  //引入一个css
<link rel="stylesheet" href="/print.css" media="print">  //css仅在打印时生效
<link rel="stylesheet" href="/mobile.css" media="screen and (max-width:500px)">  //css仅在屏幕小于500px时生效
</head>
<body>

<script src="/gbk.js" charset="gb2312">  </script>  //指定文件用GBK编码
</body>
</html>

2. 移动端适配

  1. 在html的head里加上meta（背下来）
    1
    <meta name="viewport" content="width=device-width, user-scalable=no ,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

快捷键：meta:vp + tab

  1. media query（媒体查询）
    在引用css的时候加上media属性
    1
    <link rel="stylesheet" href="mobile.css" media="(max-width:768px)">

在css里用media

1
2
3
4
5
6
7
8
9
10
@media (max-width: 800px) {  //屏幕宽度小于800px时
    body{
        background-color: black;
    }
}
@media (min-width:325px) and (max-width: 800px) {  //屏幕宽度在325px到800px时
    body{
        background-color: black;
    }
}

  1. 常用单位
    px：像素，网页的默认font-size是16px
    em：本身元素的font-size

    1
    2
    3
    4
    5
    p{
    border: 1px solid red;
    font-size: 20px;
    height:2em;
    }  //则p元素的高度就是40px

    rem：根节点(html)的font-size（默认font-size是16px），若设置html的font-size为14px，则整个页面都可以通过设置rem来使其字体是14px的倍数
    vh：100vh === 视口高度
    vw：100vw === 视口宽度

  2. 动态REM（手机专用！）
    rem是根节点(html)的font-size（默认font-size是16px）大小。
    js可以获得当前屏幕的宽度pageWidth，把pageWidth赋给font-size，这样整个页面可以通过设置rem来动态的设置所有间距大小

    1
    2
    3
    4
    5
    <script>
      var pageWidth = window.innerWidth
      document.write('<style>html{font-size:'+pageWidth/10+'px;}</style>')
    //注意！font-size不能小于12px，所以这里可以除以10，但不能除以100，除以100就小于12了
    </script>
1
2
3
4
5
6
7
8
9
10
11
12
<styel>
*{margin: 0;padding: 0;}
body{font-size: 16px;}
.clearfix::after{content: ""; clear: both; display: block;}
.child{
    background: #ddd;
    width: 4rem;
    height: 2rem;
    margin: 0.5rem 0.5rem;    //一行两个width加上左右margin正好是10rem，因为script里font-size除以了10
    float: left;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<body>
    <div class="father clearfix ">
        <div class="child">
            可以
        </div>
        <div class="child">
            可以
        </div>
        <div class="child">
            可以
        </div>
        <div class="child">
            可以
        </div>
    </div>
</body>

通过rem动态设置间距
当设置很小的东西的时候，直接写像素就行了，比如设置边框的时候。
把body的font-size设置成16px。

使用SCSS更方便的调整rem，Sass入门

3. 用css3实现圆角矩形和阴影

设置border-radius和box-shadow，具体请看css入门

4. 闭包

JS函数

5. call、apply和bind

请看面向对象编程

6. 7. HTTP

HTTP入门

8. 算法

几种常见算法

9. 一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？

10. 数组去重

  1. ES5

    • 方法一：

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      Array.prototype.distinct = function (){
       var arr = this,
        i,
        obj = {},
        result = [],
        len = arr.length;
       for(i = 0; i< arr.length; i++){
        if(!obj[arr[i]]){ //如果能查找到，证明数组元素重复了
         obj[arr[i]] = 1;
         result.push(arr[i]);
        }
       }
       return result;
      };
      var a = [1,2,3,4,5,6,5,3,2,4,56,4,1,2,1,1,1,1,1,1,];
      var b = a.distinct();
      console.log(b.toString());     //1,2,3,4,5,6,56

    • 方法二：（递归）

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      Array.prototype.distinct = function (){
       var arr = this,
        len = arr.length;
       arr.sort(function(a,b){  //对数组进行排序才能方便比较
        return a - b;
       })
       function loop(index){
        if(index >= 1){
         if(arr[index] === arr[index-1]){
          arr.splice(index,1);
         }
         loop(index - 1); //递归loop函数进行去重
        }
       }
       loop(len-1);
       return arr;
      };
      var a = [1,2,3,4,5,6,5,3,2,4,56,4,1,2,1,1,1,1,1,1,56,45,56];
      var b = a.distinct();
      console.log(b.toString());      //1,2,3,4,5,6,45,56

    • 方法三：(利用indexOf以及forEach)

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      Array.prototype.distinct = function (){
       var arr = this,
        result = [],
        len = arr.length;
       arr.forEach(function(v, i ,arr){  //这里利用map，filter方法也可以实现
        var bool = arr.indexOf(v,i+1);  //从传入参数的下一个索引值开始寻找是否存在重复
        if(bool === -1){
         result.push(v);
        }
       })
       return result;
      };
      var a = [1,1,1,1,1,1,1,1,1,2,2,2,2,2,2,3,3,3,3,3,3,3,2,3,3,2,2,1,23,1,23,2,3,2,3,2,3];
      var b = a.distinct();
      console.log(b.toString()); //1,23,2,3

      方法三的indexOf和forEach都是遍历，双重循环效率不高，所以差评

  2. ES6
    set数据结构

    1
    2
    3
    4
    function dedupe(array){
     return Array.from(new Set(array));
    }
    dedupe([1,1,2,3]) //[1,2,3]

    拓展运算符(…)内部使用for…of循环

    1
    2
    3
    let arr = [1,2,3,3];
    let resultarr = [...new Set(arr)]; 
    console.log(resultarr); //[1,2,3]