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

你的名字 2022-11-18 05:48 81阅读 0赞

**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\]

**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**

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

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

var foo = 1;

function()\{

var foo;

console.log(foo);

//undefined

foo = 2;

console.log(foo);

// 2;

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

称不会提升赋值部分

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

答案：

**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() // 创建一个文本节点

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

appendChild()

removeChild()

replaceChild()

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

1.  查找

getElementsByTagName()

// 通过标签名称

getElementsByName() //

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

其中包括 id 等于 name 值的)

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

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

如：var str = ‘asdfssaaasasasasaa’;

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

答案：

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

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

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

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

答：

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

属性；

2、document 对象，文档对象；

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

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

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

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

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

答：

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

适用场景：

post 一般用于表单提交

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

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

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