初级前端面试题（一） 之 html/css/js

目     录

一、 HTML

1. .如何理解HTML语义化的？

2.  HTML标签有哪些？

3. Canvas 和SVG的区别

二、CSS 

1. BFC是什么？

2. 如何实现垂直居中？

3. css选择器 优先级如何确定？

4. 如何清除浮动？

 5. 盒模型的区别？

6. display 的 block、inline 和 inline-block 的区别？

7. 对 CSS 工程化的理解？ 

三、扩展

3.1 自适应，rem、em、vw的区别

3.2 说一下HTML5 drag API 

3.3 预处理器普遍会具备的特性？ 

四、JavaScript

1. 基本类型

 2. 检测数据类型的方式

3. null和undefined的区别

4. 如何判断某对象是空对象？

5. 原型链是什么

6.this的指向

7. new 做了什么 

8.立即执行函数

9.闭包

10. js如何实现类

11. v-if 和v-show 的区别

---

一、 HTML

1. .如何理解HTML语义化的？

      语义化标签是写HTML的一种方法论。例如段落用P，标题h1--h6，内容用main 等等。明确了HTML书写规范，适合搜索引擎来检索，适合我们阅读，利于团队维护。

2.  HTML标签有哪些？

header、footer、main、video 等等

3. Canvas 和SVG的区别

   Canvas 主要是用笔刷来绘制2D图形，SVG 使用标签来绘制不规则矢量图的。

相同点：都是用来绘制2D图形的。

不同点：

• Canvas 画的是位图，SVG画的是矢量图；
• SVG 节点过多时渲染慢，Canvas 性能更好一点，但是吧，写起来比较复杂；
• SVG支持分层和事件，Canvas 不支持，但可以用库来实现。

---

二、CSS 

1. BFC是什么？

BFC，块级格式化上下文。

1. 触发BFC的条件【5个】

•  浮动元素
• 绝对定位元素
• 行内块元素
• overflow 值不是visible的块元素/overflow:hedden
• 弹性元素，display:flex

2. 解决了什么问题

• 清除浮动
• 防止垂直方向上的margin合并

2. 如何实现垂直居中？

• flex布局 【最优先，使用次数最多】
• margin-top:50%
• translate:50%
• absolute margin auto
• table 自带属性；
• div 装成table；（display：table）

3. css选择器 优先级如何确定？

• 越具体的越优先；
• 相同的优先级，后面的覆盖前面的；
• 有！important 的优先级最高

4. 如何清除浮动？

 4.1 给父元素添加.clearfix

.clearfix:after{
  content:'';
  display:block;
  clear:both;
}

4.2  给父元素添加：overflow:hidden 

 5. 盒模型的区别？

标准盒模型是content-box，总宽度=width+margin+padding+border ；

第二种是IE盒模型 border-box，总宽度就是width。

相同点：

 都是用来指定宽度

不同点：

 border-box 更好用

6. display 的 block、inline 和 inline-block 的区别？

（1）block：会独占一行，多个元素会另起一行，可以设置 width、height、margin 和 padding 属性； （2）inline：元素不会独占一行，设置 width、height 属性无效。但可以设置水平方向的 margin 和 padding 属性，不能设置垂直方向的 padding 和 margin； （3）inline-block：将对象设置为 inline 对象，但对象的内容作为block 对象呈现，之后的内联对象会被排列在同一行内。

7. 对 CSS 工程化的理解？ 

CSS 工程化是为了解决以下问题： 1.宏观设计：CSS 代码如何组织、如何拆分、模块结构怎样设计？ 2.编码优化：怎样写出更好的 CSS？ 3.构建：如何处理我的 CSS，才能让它的打包结果最优？ 4.可维护性：代码写完了，如何最小化它后续的变更成本？如何确保任何一个同事都能轻松接手？我一般会用到预处理器：Less、 Scss 等。

三、扩展

3.1 自适应，rem、em、vw的区别

都是相对单位。

不同点：

• rem相对html绕开了复杂的层级关系
• em 相对父麻烦
• vw 可视窗口1%

3.2 说一下HTML5 drag API 

• dragstart：事件主体是被拖放元素，在开始拖放被拖放元素时触发；
• darg：事件主体是被拖放元素，在正在拖放被拖放元素时触发；
• dragenter：事件主体是目标元素，在被拖放元素进入某元素时触发；
• dragover：事件主体是目标元素，在被拖放在某元素内移动时触发；
• dragleave：事件主体是目标元素，在被拖放元素移出目标元素是触 发；
• drop：事件主体是目标元素，在目标元素完全接受被拖放元素时触发；
• dragend：事件主体是被拖放元素，在整个拖放操作结束时触发。

3.3 预处理器普遍会具备的特性？ 

• 嵌套代码的能力，通过嵌套来反映不同 css 属性之间的层级关系 ；
• 支持定义 css 变量；
• 提供计算函数；
• 允许对代码片段进行 extend 和 mixin；
• 支持循环语句的使用；
• 支持将 CSS 文件模块化，实现复用。

四、JavaScript

1. 基本类型

number、boolean、string、null、undefined、object、symbol、bigint

ps: 对象用为空用unll,非对象为空用undefined

 2. 检测数据类型的方式

• typeof

其中 数组、对象、null 都会被判断为object

• instanceof
• constructor
• Object.prototype.toString.call()

3. null和undefined的区别

undefined 表示 未定义，null表示空对象。

4. 如何判断某对象是空对象？

• 使用JSON 自带的stringify 

if(JSON.stringify(aObj)=='{}'){
  console.log(aObj,'是一个空对象');
}

• 使用ES6的方法 Object.keys()

if(Object.keys(bObj).length<0){
  console.log(bOnb,'是空对象');
}

5. 原型链是什么

原型就是一个为对象实例定义了一些公共属性和公共方法的对象模板。 

原型链：是多个原型的集合，或者说 原型链是原型对象创建过程的历史记录。

•  解决了什么问题？

在没有class的情况下实现[继承]

• 缺点

不支持私有属性。calss 支持。

6.this的指向

简单来说  this 就是 call 的第一个参数 ,箭头函数没有this。

ps:call 可以改变this 指向

全局作用域	指向window
方法中	指向所属对象
构造函数调用中	指向实例化对象

• func(p1,p2) ==func.call(undefined,p1,p2)
• obj.child.method(p1,p2) ==obj.child.method.call(obj.child,p1,p2)

var obj = {
  foo: function(){
    console.log(this) //obj
  }
}

obj.foo()  

obj.foo() 等价于obj.foo.call(obj),所以，这里的this 指向obj

7. new 做了什么 

this 是执行上下文中的一个属性，它指向最后一次调用这个方法的对象。

• 创建临时对象/新对象
• 绑定原型
• 指定this=临时对象
• 执行构造函数
• 返回临时对象

例如：

8.立即执行函数

 声明一个匿名函数，然后立即执行它。这种做法就是立即执行函数。

立即执行函数是为了创建一个局部变量。

优点：兼容性好。

9.闭包

       闭包是一种语法特性。 js的所有函数都支持闭包，「函数」和「函数内部能访问到的变量」的总和，就是一个闭包。

解决了什么问题？

• 避免污染全局环境；
• 提供对局部变量的间接访问；
• 维持变量，使其不会被垃圾回收。

使用不当可能造成内存泄漏。

应用场景：

防抖、节流、库的封装（保证数据私有性）

10. js如何实现类

有两个方法，一种是使用原型，一种是使用calss

class Dog {
  static kind = '狗' // 等价于在 constructor 里写 this.kind = '狗'
  constructor(name) {
    this.name = name
    this.legsNumber = 4
    // 思考：kind 放在哪，放在哪都无法实现上面的一样的效果
  }
  say(){
    console.log(`汪汪汪~ 我是${this.name}，我有${this.legsNumber}条腿。`)
  }
  run(){
    console.log(`${this.legsNumber}条腿跑起来。`)
  }
}
const d1 = new Dog('啸天')
d1.say() 

11. v-if 和v-show 的区别

1.   相同点：都是控制显示隐藏的。

2.   不同点：

    （1） 控制手段不同；

    v-show 是通过display:none来控制隐藏的，dom元素还在；v-if 显示隐藏是讲dom元素整个添加或删除。

     （2）  编译过程不同；

      v-if切换有一个局部编译/卸载的过程，切换过程中合适的销毁和重建内部的事件监听和子 组件；v-show 只是简单地基于css的切换。

     （3） 编译条件不同；

             v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开        始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载);

               v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM        元素保留。

     （4） 性能消耗；

        v-if有更高的切换消耗；v-show有更高的初始渲染消耗。

     （5）适用场景：

        v-if适合运营条件不大可能改变；v-show适合频繁切换。

简化版：

       v-if是通过条件判断来控制元素是否渲染到DOM中，当条件为真时才会将元素添加到DOM中，否则不会渲染该元素。当条件发生变化时，v-if会根据新的结果重新创建或销毁DOM元素。因此，v-if在切换频繁的场景中有可能会有性能问题。

      v-show是通过CSS样式来控制元素是否显示，当条件为真时，则将元素的display属性设置为默认值，也就是显示元素；当条件为假时，则将元素的display属性设置为none，也就是隐藏元素。因此，v-show的切换速度较快，适合在频繁切换的场景中使用。