Web前端易错知识点总结58.已知如下代码，如何修改才能让图片宽度为 300px ？注意下面代码不可修改。 <!DOCT

<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
<script>
var li = document.getElementsByTagName("li");
for (var i = 0; i < li.length; i++) {
li[i].onclick = function () {
alert(i);
}
}
</script>

效果：每次都打印出4，原因是，js单线程的，事件，定时器等等被阻塞执行

方法一

var li = document.getElementsByTagName("li");
for (var i = 0; i < li.length; i++) {
li[i].index = i;
li[i].onclick = function () {
alert(this.index);
}
}

方法二：将全局作用域改为局部作用域，使用let变量。

方法三：使用闭包的知识

<script>
var li = document.getElementsByTagName("li");
for (var i = 0; i < li.length; i++) {
a = function (i) {
li[i].onclick = function () {
alert(i);
}
};
a(i)
}
</script>

15.关于for语句的理解错误

打印出来是18，并列的内容执行时，满足两个其中一个条件也要继续执行。

for (i = 0, j = 0; i < 6, j < 10; i++, j++) {
x = i + j;
}
console.log(x);

16.var，不加var，let，const用法区别

var在方法里面定义是局部变量，在方法外面是全局变量

不加var，在执行方法后是全局变量。

let：函数作用域，不能重复声明，不会变量提升，不会预处理。

const：常量定义用法和let一样，但是不能改变其值，定义必须赋值。

17.关于变量提升和预处理的问题

<script>
    var a = 10;
    console.log(a);

    function fn() {
        console.log(a);

        var a = 10;
    }
    fn();
    console.log(a);
</script>

打印出来结果是10 undefined 10，原因是，变量提升和预处理的原因，里面定义了变量，就不会在外面去找，也就是里面的var预处理提升到函数里面第一句，但是没赋值，也就是undefined

<script>
    var a = 10;
    console.log(a);

    function fn() {
        console.log(a);

        a = 20;
    }
    fn();
    console.log(a);
</script>

打印结果是10 10 20。因为没有预处理的变量提升，就在外面寻找变量，后面的a=20,修改变量值，因为不加var是全局变量了。

优先级：变量》函数》参数》提升

1.变量不管是在函数里面还是函数外面，预处理变量提升的问题都是只提升预处理，没赋值，例子把调用了变量的函数放在var前面执行，那是没有值的，只是定义了。

 function fn1() {
        console.log(a);
    }
    fn1();//undefined
    var a = 10;
    var a = 20;

    function fn2() {
        console.log(a);
    }
    fn2();//20

2.变量和函数覆盖的问题，变量和变量，函数和函数后面覆盖前面的

如果是变量的形式定义函数的话，那么和函数相比不管怎么样的顺序，优先级都是变量定义的函数。

<script>
    function fn1() {
        console.log("1")
    }
    var fn1 = function () {
        console.log("2")
    }
    fn1();
</script>

出现下面这种情况一般是变量优先级高于函数，但是假如变量只是定义了，没有赋值，同名的函数就会覆盖,打印出好函数

<script>
     function x() {};
     var x ;
        console.log(x);
    </script>

18.Javascript浏览器垃圾回收机制

1.Gc回收机制：

Javascript具有自动垃圾回收机制(GC:Garbage Collecation)，也就是说，执行环境会负责管理代码执行过程中使用的内存。

原理：原理：垃圾收集器会定期（周期性）找出那些不在继续使用的变量，然后释放其内存。

函数定义的局部变量在函数执行完成后就自动删除，除非含有内部函数的闭包不会被清除。全局变量在页面执行完成后清除。

实例：

  <script>
        function f1() {
            var a = {
                name: "朱宇",
                age: 20
            }
        }

        function f2() {
            var b = {
                name: "朱宇",
                age: 20
            };
            return b;
        }
        var a = f1();
        var b = f2();
        try {
            console.log(a);
        } catch (error) {
            console.log(error)
        }
        console.log(b);
    </script>

效果：a为undefied,b为对象实例。返回的对象挂载在Windows上面，那么这样的好处就是变成全局变量了，那么就不会被销毁，因此保存在window上面。

2.标记清除

原理：js中最常用的垃圾回收方式就是标记清除。当变量进入环境时，例如，在函数中声明一个变量，就将这个变量标记为“进入环境”。从逻辑上讲，永远不能释放进入环境的变量所占用的内存，因为只要执行流进入相应的环境，就可能会用到它们。而当变量离开环境时，则将其标记为“离开环境”。通俗来说，就是使用一个函数包裹全局变量，然后执行这个函数不需要的函数变量就无效了，因此像闭包这种引入外部变量被清除了，然后闭包被清除。

 <script>
        function fn1() {
            var a = 10;
            var b = 20;
            var c = 30;
            var d = 40;
        }
        fn1();
    </script>

3.引用计数

原理：引用计数的含义是跟踪记录每个值被引用的次数。当声明了一个变量并将一个引用类型值赋给该变量时，则这个值的引用次数就是1。如果同一个值又被赋给另一个变量，则该值的引用次数加1。相反，如果包含对这个值引用的变量又取得了另外一个值，则这个值的引用次数减1。当这个值的引用次数变成0时，则说明没有办法再访问这个值了，因而就可以将其占用的内存空间回收回来。这样，当垃圾回收器下次再运行时，它就会释放那些引用次数为0的值所占用的内存。

内存管理的内容：

内存管理GC时，你会造成短时间无法响应，对于游侠这种快速响应的，问题就会很大。

优化策略：

1.增量GC：一次处理一点，下次再处理的一点

2.分类GC:将回收的对象分类为临时性，持久性，减少遍历，减少时间

19.内存泄露和内存溢出区别及其原因

内存泄露：占用内存没有及时释放，内存泄露过多会造成内存溢出。

内存泄露：运行内存超过提供的内存。

到处内存溢出的原因：

1.占用内存较大的全局变量。

2.闭包的使用。

3.没有及时清理的定时器。

20.闭包相关知识

闭包定义：内部函数引用了外部变量

闭包应用：

1.封存局部变量：

 <script>
        function fn1() {
            var money = 100000;

            function fn2() {
                money++;
                console.log(money);
            }
            return fn2;
        }
        var f = fn1();
        f();
        f();
    </script>

点击并拖拽以移动

2.上面提到过的用于局部作用域，使用闭包函数封存局部作用域

3.内部函数形参引用外部函数传来的实参

21.设置内容过多自动隐藏

.ell { 
    text-overflow: ellipsis;//超过部分使用省略号
    white-space: nowrap;//文本不会换行
    overflow: hidden;//超过部分隐藏
}

text-overflow超出文本宽度怎么处理，clip直接裁剪，ellipsis使用省略号

white-space:不能换行，也就是防止指定宽度，你却换行到第二行。还有其他的属性normal清楚空格，pre保留空格

22.清楚浮动伪类总结

.clearfloat:after {
    display: block;
    content: "";
    clear: both;
}

这种设置伪类清楚浮动的好处就是，可以定义一个类，专门用于清除浮动，而且没有其他的副作用，如果使用overflow:hidden有的影响就是超过部分的内容就被隐藏了，边框以内的内容都是超出隐藏了，那么问题来了，假如你的内容需要盖住下面的边框，超过边框以内的内容都被隐藏了，那么就无效了，所以这样清楚浮动有弊端

23.img和input，span等内容水平对齐

在需要对齐的两个都采用采用vertical:middle，才能存在一行

24.关于搜索框里面的搜索图标

图标内容都是采用padding-left就可以了，但是input搜索框会不断地增大，注意调整搜索框的大小。

25.轮播图的制作

26.tab选项卡的切换

27.关于position中fixed布局将页面导航栏固定

28.关于box-shadow

box-shadow:x y 模糊度大小 color inset

分别是x宽度，y宽度，模糊度大小，阴影颜色，默认不写inset是外阴影，写了inset为内阴影

当x,y都为0，这样四周都是一样的阴影效果，通过设置模糊度大小设置其他

x,y为正值的情况下，向右向下阴影

29.关于函数this指向打印

 <script>
        function Foo() {
            getName = function () {
                alert(1)
            };
            return this;
        }
        Foo.getName = function () {
            alert(2)
        }
        Foo.prototype.getName = function () {
            alert(3)
        }
        var getName = function () {
            alert(4)
        }

        function getName() {
            alert(5)
        }
        //Foo.getName();//2
        //getName(); //4
        //Foo().getName();//1
        //getName();//1
        // new Foo().getName();//3
    </script>

解释：关于第一个function Foo()这一个是函数方法getName，不要当做对象方法了，因为对象的方法是具有this.getName指向的。那么这个函数里面的getName是一个匿名函数，并且这个匿名函数没有加var，意味着执行了这个函数后就是全局变量，绑定在全局window上面，那return返回的this是什么意思呢，意思就是window，最近指向就是window。倘若将他当做对象实例化的话，这个方法只会去原型对象里面寻找，不会在对象中找到这个，因为没有this指向。

30.数组去重方法介绍

30.1利用object特性

var b = {
            5: 10,
            "5": 20
        }

这个打印出来是只有一个5：20的键值对，也就是会将索引字符串转换为数字，并且后面的索引覆盖前面的。

那么可以利用这一属性封装出一个去重函数，注意和boolean值做判断时，也就是true==true，后面不要变成true="true"了。

 <script>
        var a = [12, 45, 45, "45", 64];
        var b = {
            a: 142,
            b: 244
        }
        console.log(b)

        function unchat(arr) {
            var brr = [],
                obj = {};
            for (var i = 0; i < arr.length; i++) {

                if (!obj[arr[i]]) {
                    obj[arr[i]] = true//设置这一个的作用是第二个内容
                    brr.push(arr[i]);
                }
            }
            return brr;
        }
        console.log(unchat(a));
    </script>

30.2使用ES6中的Set自动去重

 <script>
        var a = [12, 16, "12", "18", 82, 12];
        var b = new Set(a);
        console.log(b);
    </script>

关于Set数据结构的其他内容提示。

  <script>
        var a = [12, 16, "12", "18", 82, 12];
        var b = new Set(a);
        //添加add
        a.add("20");
        //测试长度
        console.log(a.size);
        //删除delete
        a.delete("12");
        //for of遍历
        for (let i of a) {
            console.log(a);
        }
        //判断是否含有目标内容has
        console.log(a.has(12));
        //将set转换array
        console.log(Array.from(a));
    </script>

30.3.Map数据结构介绍

 <script>
        var map = new Map();
        map.set("zhuyu", "zhuming")
        console.log(map);
        console.log(map.get("zhuyu"));
        console.log(map.size)
        var a = {
            name: "zhuyu",
            age: 20,
            na: "1234"
        }
        console.log(Object.keys(a).length) //测试对象长度
    </script>

31.0.1+0.2是否等于0.3

由于没有浮点型类型，所以是二进制转换为10进制来看，所以不等于0.3.

32.关于闭包封装变量的题

<script>
        function Foo() {
            var i = 0;
            return function () {
                console.log(i++);
            }
        }
        var f1 = Foo();
        var f2 = Foo();
        f1();//0
        f1();//1
        f2();//0
    </script>

33.判断是否为数组的3种方法

<script>
        var a = [12, 45, 45, 78];
        var b = {
            name: "zhuyu",
            age: 21
        };
        var c = 12;
        //第一种
        console.log(a instanceof Array);
        console.log(b instanceof Array);
        console.log(c instanceof Array);
        //第二种
        console.log(a.constructor.name);
        console.log(b.constructor.name);
        console.log(c.constructor.name);
        //第三种
        console.log(Object.prototype.toString.call(a));
        console.log(Object.prototype.toString.call(b));
        console.log(Object.prototype.toString.call(c));
    </script>

34.事件冒泡和事件捕获

事件冒泡：从目标位置向外层执行

事件捕获：从最外层到目标位置执行

浏览器默认事件冒泡，使用addEventListener来指定事件冒泡和事件捕获，第三个参数用于表示，true:事件捕获，false:事件冒泡，在ie9及其以上支持事件捕获

 <style>
        #main1 {
            width: 400px;
            height: 400px;
            background-color: red;
        }

        #main2 {
            width: 300px;
            height: 300px;
            background-color: green;
        }

        #main3 {
            width: 200px;
            height: 200px;
            background-color: orange;
        }

        #main4 {
            width: 100px;
            height: 100px;
            background: black;
        }
    </style>
</head>

<body>
    <div id="main1">
        main1
        <div id="main2">
            main2
            <div id="main3">
                main3
                <div id="main4">
                    main4
                </div>
            </div>
        </div>
    </div>
    <script>
        function getId(id) {
            return document.getElementById(id);
        }
        getId("main1").addEventListener("click", function () {
            console.log("main1");
        }, false);
        getId("main2").addEventListener("click", function () {
            console.log("main2");
        }, flase)
        getId("main3").addEventListener("click", function () {
            console.log("main3");
        }, false)
        getId("main4").addEventListener("click", function () {
            console.log("main4");
        }, false)
    </script>

35.阻止事件冒泡和默认事件

阻止事件冒泡

 getId("main1").onclick = function (e) {
            var e = window.event || e
            if (e.stopPropagation) {
                e.stopPropagation()
            } else {
                e.cancelBubble = true;
            }
        }

阻止默认事件

 <script>
        var a = document.getElementById("a");
        a.onclick = function (e) {
            if (e.preventDefault) {
                e.preventDefault();
                console.log("zhuyu")
            } else {
                window.event.returnValue == false;
                console.log("ie")
            }
        }
    </script>

36.new操作符，fas发生了哪些事情

1.创建对象

2.object.__proto__=Fun.prototype

3.this指向从window等转向此对象

37.js预加载

什么是预加载：就是提前加载图片，当用户需要查看时可直接从本地缓存中渲染

预加载的好处：增加用户体验，但是会加载服务器的负担

实现预加载的三种方法

1.使用css中的background

可通过CSS的background属性将图片预加载到屏幕外的背景上。只要这些图片的路径保持不变，当它们在Web页面的其他地方被调用时，浏览器就会在渲染过程中使用预加载（缓存）的图片。简单、高效，不需要任何JavaScript。

#preload-01 { background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; }

2.使用单纯js

<div class="hidden">  
    <script type="text/javascript">  
        <!--//--><![CDATA[//><!--  
            var images = new Array()  
            function preload() {  
                for (i = 0; i < preload.arguments.length; i++) {  
                    images[i] = new Image()  
                    images[i].src = preload.arguments[i]  
                }  
            }  
            preload(  
                "http://domain.tld/gallery/image-001.jpg",  
                "http://domain.tld/gallery/image-002.jpg",  
                "http://domain.tld/gallery/image-003.jpg"  
            )  
        //--><!]]>  
    </script>  
</div>

3.使用ajax

window.onload = function() {  
    setTimeout(function() {  
        // XHR to request a JS and a CSS  
        var xhr = new XMLHttpRequest();  
        xhr.open('GET', 'http://domain.tld/preload.js');  
        xhr.send('');  
        xhr = new XMLHttpRequest();  
        xhr.open('GET', 'http://domain.tld/preload.css');  
        xhr.send('');  
        // preload image  
        new Image().src = "http://domain.tld/preload.png";  
    }, 1000);  
};

38.js延迟加载(懒加载)

第一种defer

<script src="file.js" defer> </script>

第二种ansyc

<script src="file.js" async> </script>

第三种动态DOM创建

39.严格模式

优点：帮助解决一些不规范的js代码，减少压缩体积

缺点：会造成运行中断，压缩可能会出问题

40.判断图片是否加载完成

 <img src="./1.jpg" alt="" id="img">
    <script>
        var img = document.getElementById("img");
        var timer = setInterval(function () {
            if (img.complete) {
                clearInterval(timer);
                alert("zhuyu")
            } else {
                alert("失败")
            }
        }, 10)
    </script>

41.判断数据类型

const type = data => Object.prototype.toString.call(data).replace(/^\[object (.+)\]$/, '$1').toLowerCase()准确判断数值类型。

42.作用域细节

 <script>
        function fun(n, o) {
            console.log(o);
            return {
                fun: function (m) {
                    return fun(m, n)
                }   
            }
        }
        var a = fun(0);
        a.fun(1);
        a.fun(2);
        a.fun(3);
        console.log("第二次使用")
        var b = fun(0).fun(1).fun(2).fun(3);
        var c = fun(0).fun(1);
        c.fun(2);
        c.fun(3);
    </script>

点击并拖拽以移动

43.事件委托（事件代理）

为什么要使用事件委托：在对于多个一样的选项标签，比如li这种，你绑定事件的时候使用循环选取，这个时候后期添加的节点没有在选择之中，那么后期添加的节点是没有绑定上事件。我们通过事件冒泡，事件不直接绑定在li上面，而是后冒泡的父节点里面。这样的好处在于通过后面的父节点获取实时节点绑定改变内容。

<body>
    <ul id="uls">
        <li class="li">1</li>
        <li class="li">2</li>
        <li class="li">3</li>
    </ul>
    <button id="btn">添加节点</button>
    <script>
        var uls = document.getElementById("uls")
        var li = document.getElementsByClassName("li")
        console.log("开始执行")

        for (let i = 0; i < li.length; i++) {
            console.log(li[i])
            li[i].onclick = function () {
                this.style.background = "red";
            }
        }
        var btn = document.getElementById("btn");
        var a = li.length + 1;
        btn.onclick = function () {
            var node = document.createElement("li");
            node.innerHTML = a++;
            uls.appendChild(node);
        }
    </script>
</body>

点击并拖拽以移动

这个时候后期添加节点是没有绑定到事件的，则使用事件绑定。

在IE/Opera中，是window.event，而在Firefox中，是event

注意：获取的tar是最里层节点。

<body>
    <ul id="uls">
        <li class="li">1</li>
        <li class="li">2</li>
        <li class="li">3</li>
    </ul>
    <button id="btn">添加节点</button>
    <script>
        var uls = document.getElementById("uls")
        var li = document.getElementsByClassName("li")
        console.log("开始执行")

        uls.onclick = function (e) {
            var e = window.event || e;
            console.log(e.srcElement)
            var tar = e.srcElement || e.target;
            if (tar.nodeName == "LI") {
                tar.style.background = "red";
            }
        }

        var btn = document.getElementById("btn");
        var a = li.length + 1;
        btn.onclick = function () {
            var node = document.createElement("li");
            node.innerHTML = a++;
            uls.appendChild(node);
        }
    </script>
</body>

44.关于js类型转换的问题

遵守三条准则

1.加法里面：字符串第一优先，number第二优先，没有字符串或者数字，那么除了null,true和其他相加转换为1，undefined这种是相加为NAN，对象和任何相加为string

2.减法为转换为数字进行运算

45.websocket和ajax

websocket是一直连接通讯，ajax是请求才连接，不请求就不连接

题外话：document.getElementByTagName打印出来是HTMLCollection，函数参数arguments打印出来是arguments不是数组，使用Array.from.

46.获取一个节点下面的所有节点

 <div id="d">
        <p>
            <li><span></span></li>
        </p>
        <span><em></em></span>
    </div>
    <script>
        var d = document.getElementById("d")
        console.log(d.getElementsByTagName("*"))
    </script>

47.给数组添加一个实例化固有的去重方法

每一个对象都有的方法的话，在原型方法上面进行方法定义。

 <script>
        Array.prototype.unique = function () {
            var obj = {};
            var b = []
            for (let i = 0; i < this.length; i++) {
                if (!obj[this[i]]) {
                    obj[this[i]] = true;
                    b.push(this[i]);
                }
            }
            return b;
        }
        var arr = [12, 12, "12", 45, 67];
        console.log(arr.unique());
    </script>

48.nextElementSibling

获取下一个兄弟节点，用于邮箱验证成功，然后后面紧挨着的兄弟节点添加内容

<body>
    <input type="text"><strong></strong>
    <button id="btn">点击</button>
    <script>
        var input = document.getElementsByTagName("input")[0];
        var btn = document.getElementById("btn");
        btn.onclick = function () {
            input.nextElementSibling.innerHTML = "点击成功"
        }
        console.log(input);
    </script>
</body>

49.将多维数组转换为一维数组

<script>
        function Arr(arr, brr) {
            var brr = brr || []
            for (let i = 0; i < arr.length; i++) {
                if (Object.prototype.toString.call(arr[i]) == "[object Array]") {
                    Arr(arr[i], brr);
                } else {
                    brr.push(arr[i]);
                }
            }
            return brr;
        }
        var b = []
        Arr([12, 45, 78, [12, 45, [211, 65]]], b);
        console.log(b)
    </script>

这个里面使用两个参数，第二个参数使用一个固定数组传入，然后使用递归。

50.数组解构，箭头函数

<script>
        var arr = (a, ...b) => {
            return [a, b]
        }

        console.log(arr(1, 4, 4, 4, 4, 4))
    </script>

效果：[1,[4,4,4,4,4]]

51.合并对象

<script>
        var a = {
            name: "zhuyu",
            thing: {
                date: 2019,
                gun: "yes"
            }
        }
        var b = {
            age: 21
        }
        var ob = Object.assign(a, b);
        console.log(ob)
    </script>

这个是一个浅拷贝，也就是复制的内存地址，没有创建新的内存空间。

11.在HTML中添加ico文件

52.将一个数组中的多个小数组转化为一个对象数组

var a=[[1,2,3],[4,5,6],[7,8,9],[10,11,12]];
function f1(a){
    var arr=[];
    arr=a.map((item)=>{
        [x,y,z]=item;
        return {x,y,z}
    })
    return arr;
}
console.log(f1(a));

点击并拖拽以移动

53.解决跨域

JSONP 跨域：这种方式跨域是通过script标签引入js文件，这个js文件又会返回一个js函数调用，也就是请求后通过callback的方式回传结果
优点：
1.不受同源策略的限制
2.兼容性更好
3.支持老版本浏览器
缺点：只支持get请求
CORS 跨域
其原理是使用自定义的http头部请求，让浏览器与服务器之间进行沟通，从而决定请求或响应是否成功
优点：
1.支持所有类型的http请求
2.比jsonp有更好的错误处理机制
3.被大多数浏览器所支持
h5的postMessage方法
window.postMessage(message,targetOrigin) 方法是html5新引进的特性，可以使用它来向其它的window对象发送消息，无论这个window对象是属于同源或不同源，目前IE8+、FireFox、Chrome、Opera等浏览器都已经支持window.postMessage方法。这种方法不能和服务端交换数据，只能在两个窗口（iframe）之间交换数据

54.http状态码解析

　301，302 都是HTTP状态的编码，都代表着某个URL发生了转移，不同之处在于：
　　301 redirect: 301 代表永久性转移(Permanently Moved)。
　　302 redirect: 302 代表暂时性转移(Temporarily Moved )。

都是用过location对象进行转移，并且301返回一个重定向的新的网址，302返回一个暂存的旧的网址

400客户端语法错误，服务器无法识别

404客户端请求的数据不存在

401没有带权限，或者权限错误

403带了权限，并且已经验证了

500服务器内容错误

501服务器无法完成请求的功能

502网关或者代理服务器收到一个无效的响应

55.ajax的优势

优点
1.无刷新页面请求，使产品更快，更小更友好
2.服务器端的任务转嫁到客户端处理
3.减轻浏览器负担，节约带宽
4.基于标准化对象，不需要安装特定的插件
5.彻底将页面与数据分离

缺点
1.无法使用回退按钮
2.不利于网页的SEO
3.不能发送跨域请求

56.get和pos请求的区别

1.get采用明文传输，post采用request body传输，get相对于post不那么安全

2.GET请求会被浏览器主动cache，而POST不会，除非手动设置。

3.get请求回退无害，post请求回退会重写请求

4.get请求会有长度限制，post一般是没有的

5.get只支持url编码，post几乎支持所有编码

57.display:none,opacity:0;visibility:hidden区别

总结一下：结构： display:none: 会让元素完全从渲染树中消失，渲染的时候不占据任何空间, 不能点击， visibility: hidden:不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，不能点击 opacity: 0: 不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，可以点击

继承： display: none和opacity: 0：是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示。 visibility: hidden：是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显式。

性能： displaynone : 修改元素会造成文档回流,读屏器不会读取display: none元素内容，性能消耗较大 visibility:hidden: 修改元素只会造成本元素的重绘,性能消耗较少读屏器读取visibility: hidden元素内容 opacity: 0 ：修改元素会造成重绘，性能消耗较少

联系：它们都能让元素不可见

58.已知如下代码，如何修改才能让图片宽度为 300px ？注意下面代码不可修改。

<img src="1.jpg" style="width:480px!important;”>

解决：

<img src="1.jpg" style="width:480px!important; max-width: 300px">
<img src="1.jpg" style="width:480px!important; transform: scale(0.625, 1);" >
<img src="1.jpg" style="width:480px!important; width:300px!important;">

发布包在npmjs.com的流程点击并拖拽以移动

# 发布 1. npmjs.com创建账户信息，username,password,email后期将使用 2. 首先创建一个项目project, 切入项目cd project 3. npm init 4. 证书写MIT，name写包名，入口文件随意写 5. 第一次上传使用npm adduser添加用户 6. 后面上传使用npm login直接登陆就可以了 7. 然后发布npm publish就ok 8. 更改版本npm version 1.0.1 # 使用升级npm包 1. 使用的时候采用npm update package安装最新包 2. 使用npm install package@指定版本 3. 全局安装npm-check包 4. `npm-check -u`检查项目中的可升级对应包 5. `npm-check -u -g`检查全局项目中的可升级包 6. 使用上下选择，空格选中

Web前端易错知识点总结

1.你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?

2.每个HTML文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？

3.div+css的布局较table布局有什么优点？

4.CSS选择器有哪些？

5.@import和link引入css的差别

6.常用的行内元素有哪些，块级元素有哪些

7.css3新增伪类选择器

8.typeof打印奇怪的几个

9.模块化应用

AMD：异步模块定义

10.inline-block之间的空白解决方案

11.伪类选择器

12.em,rem,px区别

13.postion内容详解

14.关于js异步循环操作的问题

15.关于for语句的理解错误

16.var，不加var，let，const用法区别

17.关于变量提升和预处理的问题

18.Javascript浏览器垃圾回收机制

19.内存泄露和内存溢出区别及其原因

20.闭包相关知识

21.设置内容过多自动隐藏

22.清楚浮动伪类总结

23.img和input，span等内容水平对齐

24.关于搜索框里面的搜索图标

25.轮播图的制作

26.tab选项卡的切换

27.关于position中fixed布局将页面导航栏固定

28.关于box-shadow

29.关于函数this指向打印

30.数组去重方法介绍

30.1利用object特性

30.2使用ES6中的Set自动去重

30.3.Map数据结构介绍

31.0.1+0.2是否等于0.3

32.关于闭包封装变量的题

33.判断是否为数组的3种方法

34.事件冒泡和事件捕获

35.阻止事件冒泡和默认事件

36.new操作符，fas发生了哪些事情

37.js预加载

38.js延迟加载(懒加载)

39.严格模式

40.判断图片是否加载完成

41.判断数据类型

42.作用域细节

43.事件委托（事件代理）

44.关于js类型转换的问题

45.websocket和ajax

46.获取一个节点下面的所有节点

47.给数组添加一个实例化固有的去重方法

48.nextElementSibling

​

49.将多维数组转换为一维数组

50.数组解构，箭头函数

51.合并对象

52.将一个数组中的多个小数组转化为一个对象数组

53.解决跨域

54.http状态码解析

55.ajax的优势

56.get和pos请求的区别

57.display:none,opacity:0;visibility:hidden区别

58.已知如下代码，如何修改才能让图片宽度为 300px ？注意下面代码不可修改。