html基础、h5&c3高级&c3动画 、 JavaScript初高级、css预处理器和git 部分面试题

1、div+css 的布局较 table 布局有什么优点？

改版的时候更方便

只要改 css 文件。

页面加载速度更快、结构化清晰、页面显示简洁。

表现与结构相分离。

易于优化（seo）搜索引擎更友好，排名更容易靠前。

2、有哪项方式可以对一个 dom设置它的 CSS 样式?

外部样式表，引入一个外部 css 文件

内部样式表，将 css 代码放在 标签内部

内联样式，将 css 样式直接定义在 HTML 元素内部

3、行内元素和块级元素的具体区别是什么？

​ 行内元素的 padding 和 margin 可 设置吗？

块级元素(block)特性：

总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;

宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

内联元素(inline)特性：

和相邻的内联元素在同一行;

宽度(width)、高度(height)、内边距的 top/bottom(padding-top/padding-bottom)和外边

距的 top/bottom(margin-top/margin-bottom)都不可改变（也就是 padding 和 margin 的

left 和 right 是可以设置的），就是里面文字或图片的大小。

那么问题来了，浏览器还有默认的天生 inline-block 元素（拥有内在尺寸，可设置高宽，

但不会自动换行），有哪些？

答案：<input> 、<img> 、<button> 、<texterea> 、<label>

4、BFC 是什么?

BFC（块级格式化上下文），一个创建了新的 BFC 的盒子是独立布局的，盒子内元素的布局

不会影响盒子外面的元素。在同一个 BFC 中的两个相邻的盒子在垂直方向发生 margin 重叠

的问题

BFC 是指浏览器中创建了一个独立的渲染区域，该区域内所有元素的布局不会影响到区域外

元素的布局，这个渲染区域只对块级元素起作用

5、谈谈你对javascript 的同源策略的理解

一段脚本只能读取来自于同一来源的窗口和文档的属性，这里的同一来源指的是主机名、协

议和端口号的组合

http,ftp:协议

主机名；localhost

端口名：8

同源策略带来的麻烦：ajax 在不 0:http 协议的默认端口

https:默认端口是 8083

同域名下的请求无法实现，

如果说想要请求其他来源的 js 文件，或者 json 数据，那么可以通过 jsonp 来解决

6、编写一个数组去重的方法

var arr = [2, 8, 5, 0, 5, 2, 6, 7, 2]; => [2,8,5,0,6,7]

<script>
    var arr = [2, 8, 5, 0, 5, 2, 6, 7, 2];
    function unique1(arr) {
        var hash = [];
        for (var i = 0; i < arr.length; i++) {
            if (hash.indexOf(arr[i]) == -1) {
                hash.push(arr[i]);
            }
        }
        return hash;
    }

    var a = unique1(arr);
    console.log(a);
</script>

7、当一个 DOM 节点被点击时候，我们希望能够执行一个函数，有几种方法实现，应该怎么做？

直接在 DOM 里绑定事件：

在 JS 里通过 onclick 绑定：xxx.onclick = test

通过事件添加进行绑定：addEventListener(xxx, ‘click’, test)

8、看下列代码输出为何？解释原因。

var a; 
alert(typeof a); 
alert(b); 
b=10;
alert(typeof b);

var a;

alert(typeof a); // “undefined”

//alert(b); // 报错

b=10;

alert(typeof b);//”number”

解释：Undefined 是一个只有一个值的数据类型，这个值就是“undefined”，在使用 var

声明变量但并未对其赋值进行初始化时，这个变量的值就是 undefined。而 b 由于未声明将

报错。注意未申明的变量和声明了未赋值的是不一样的。

undefined 会在以下三种情况下产生：

1、 一个变量定义了却没有被赋值

2、 想要获取一个对象上不存在的属性或者方法:

3、 一个数组中没有被赋值的元素

注意区分 undefined 跟 not defnied(语法错误)是不一样的

9、输出今天的日期，以 YYYY-MM-DD 的方式，

比如今天是 2021年 4 月 8 日， 则输出 2021-04-08

<script>
    var d = new Date(); // 获取年，getFullYear()返回 4 位的数字 
    var year = d.getFullYear();
    // 获取月，月份比较特殊，0 是 1 月，11 是 12 月 
    var month = d.getMonth() + 1;
    // 变成两位 
    month = month < 10 ? '0' + month : month;
    // 获取日 
    var day = d.getDate(); day = day < 10 ? '0' + day : day;
    alert(year + '-' + month + '-' + day);
</script>

10、看下列代码，将会输出什么?

<script>
    var foo = 1;
    function f(){
        console.log(foo);
        var foo = 2;
        console.log(foo);
    }

    f();
</script>

答案：输出 undefined 和 2。上面代码相当于：

var foo = 1;

function(){

var foo;

console.log(foo);

//undefined

foo = 2;

console.log(foo);

// 2;

}

函数声明与变量声明会被 JavaScript 引擎隐式地提升到当前作用域的顶部，但是只提升名

称不会提升赋值部分

11、用 js 实现随机选取 10–100 之间的 10 个数字，存入一个数组，并排序

答案：

<script>
    var iArray = [];

    function getRandom(istart,iend){
        var iChoice = iend - istart + 1;
        return Math.floor(Math.random() * iChoice + istart);
    }
    // Math.random()就是获取 0-1 之间的随机数（永远获取不到 1） 
    for (var i = 0; i < 10; i++) {
        var result = getRandom(10, 100);
        iArray.push(result);
    }
    iArray.sort();

    console.log(iArray);
</script>

12、简述列举文档对象模型 DOM 里 document 的常用的查找访问节点的方法

​ 并做简单说明

答案：

Document.getElementById 根据元素 id 查找元素

Document.getElementByName 根据元素 name 查找元素

Document.getElementTagName 根据指定的元素名查找元素

13、谈谈 Cookie 的弊端

答案：

缺点：

1.Cookie数量和长度的限制。每个 domain 最多只能有 20 条 cookie，每个 cookie 长度不

能超过 4KB，否则会被截掉。

2.安全性问题。如果 cookie 被人拦截了，那人就可以取得所有的 session 信息。即使加密

也与事无补，因为拦截者并不需要知道 cookie 的意义，他只要原样转发 cookie 就可以达到

目的了。

3.有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务器端保存

一个计数器。如果我们把这个计数器保存在客户端，那么它起不到任何作用。

14、DOM 操作——怎样添加、移除、移动、复制、创建和查找节点。

答案：

1. 创建新节点

createDocumentFragment() // 创建一个 DOM 片段

createElement() // 创建一个具体的元素

createTextNode() // 创建一个文本节点

2. 添加、移除、替换、插入

appendChild()

removeChild()

replaceChild()

insertBefore() // 在已有的子节点前插入一个新的子节点

3. 查找

getElementsByTagName()

// 通过标签名称

getElementsByName() //

通过元素的 Name 属性的值(IE 容错能力较强，会得到一个数组，

其中包括 id 等于 name 值的)

getElementById() // 通过元素 Id，唯一性

15、判断一个字符串中出现次数最多的字符，统计这个次数

如：var str = ‘asdfssaaasasasasaa’;

打印结果：出现次数最多的是:a出现9次；

答案：

<script>
    var str = 'asdfssaaasasasasaa';
    var json = {};
    for (var i = 0; i < str.length; i++) {
        if (!json[str.charAt(i)]) {
            json[str.charAt(i)] = 1;
        } else {
            json[str.charAt(i)]++;
        }
    };
    var iMax = 0;
    var iIndex = '';
    for (var i in json) {
        if (json[i] > iMax) {
            iMax = json[i];
            iIndex = i;
        }
    } 
    alert('出现次数最多的是:' + iIndex + '出现' + iMax + '次');
</script>

16、什么是闭包？ 写一个简单的闭包

答：我的理解是，闭包就是能够读取其他函数内部变量的函数。在本质上，

闭包就是将函数内部和函数外部连接起来的一座桥梁。

<script>
    function outer() {
        var num = 1;
        function inner() {
            var n = 2;
            alert(n + num);
        }
        return inner;
    }
    outer()();
</script>

17、BOM 对象有哪些，列举 window 对象？

答：

1、window 对象 ，是 JS 的最顶层对象，其他的 BOM 对象都是 window 对象的

属性；

2、document 对象，文档对象；

3、location 对象，浏览器当前 URL 信息；

4、navigator 对象，浏览器本身信息；

5、screen 对象，客户端屏幕信息；

6、history 对象，浏览器访问历史信息；

18、HTTP 协议中，GET 和 POST 有什么区别？分别适用什么场景

答：

	GET	POST
缓存	能被缓存	不能缓存
历史	参数保留在浏览器历史中	参数不会保存在浏览器历史中
对数据长度的限制	当发送数据时，GET 方法向 URL 添加数据；URL 的长度是受限制的（URL 的最大长度IE是 2048 个字符,chrome 最大长度8182个字符）	无限制
对数据类型的限制	只允许 ASCII 字符	没有限制，也允许二进制数据
安全性	与 POST 相比，GET 的安全性较差，因为所发送的数据是 URL 的一部分	POST 比 GET 更安全，因为参数不会被保存在浏览器历史或 web 服务器日志中
可见性	数据在 URL 中对所有人都是可见的	数据不会显示在 URL 中

适用场景：

post 一般用于表单提交

get 一般用于简单的数据查询，严格要求不是那么高的场景

19、用正则表达式，写出由字母开头，其余由数字、字母、下 划线组成的 6~30 的字符串

答：var reg=/^ [a-ZA-Z]{5,29}/;