前端面试题汇总

132 阅读4分钟

1. HTML面试题目

1.1 语义化相关

1. 如何理解语义化标签?

  • 语义化标签概念

语义化是指根据内容的结构化,选择合适的标签,写出便于开发者阅读的代码,同时让浏览器的爬虫和机器很好的解析。即,用正确的标签包含了正确的内容,使得文档结构良好,便于阅读。

  • 语义化的好处:
  • 用正确的标签做正确的事情
  • 去掉或丢掉样式的时候能让页面呈现出清晰的结构
  • 方便其它设备解析,例如屏幕阅读器等
  • 有利于SEO:和搜索引擎建立良好的沟通,有助于爬虫抓取更多的有效信息;爬虫依赖于标签来确定上下文和各个关键字的权重;
  • 便于团队开发和维护,语义化更具有可读性,减少差异化

2. HTML5有哪些语义化标签?

  • <header>:用于定义文档的页眉
  • <nav>:用作页面导航
  • <section>:用于对网站或应用程序中页面上的内容分块
  • <article>:规定独立的自包含内容
  • <aside>:当前页面或文章的附属信息部分
  • <footer>:定义文档的页脚

2. CSS面试题目

2.1 CSS3面试题目

1. 你了解哪些CSS3新特性?

答案:flex布局,媒体查询,盒模型,过渡(transition),属性选择器,伪类选择器,伪元素选择器;

2.2 布局相关

1. 两列布局

  • 左自适应,右列定宽(左列定宽,右列自适应)
  • float + margin
  • 定宽float + 自适应端width: calc(100% - 固定端width)
  • 父元素相对定位,定宽于父容器绝对定位,自适应端margin-left等于定宽
  • flex布局
  • grid布局

2. 三列布局

  • 左右定宽,中间自适应
  • 浮动,左右浮动,中间的盒子设置margin-leftmargin-right
  • 使用绝对定位,左右固定到两边,中间设置margin-leftmargin-right
  • flex布局,设置左中右order属分别为0,1,2;且中间的盒子flex-grow: 1flex-grow设置弹性盒子的扩展比率);

2.3 水平垂直居中

1. 水平居中

  • text-align: center;需要设置display: inline-block
  • 绝对定位+transform位移
  • 定宽+margin: 0 auto
  • flex布局,设置水平轴居中
  • 定宽 + 绝对定位 + calc:设置left: calc(50% - 50px)

2. 垂直居中

  • 绝对定位+transform位移
  • flex布局,设置垂直轴居中
  • 设置heightline-height大小一样
  • 定高 + 绝对定位 + calc:设置top: calc(50% - 50px)

3. 水平垂直居中

  • flex布局,设置主轴和纵轴都居中
  • flex布局+margin: 0 auto;
  • line-height+text-align: center
  • 须知宽高 + 绝对定位 + calc

3. Javascript面试题目

3.1 闭包

1. 说一下闭包

js有全局作用域和函数作用域(ES6里还有块作用域);js代码在执行时,会创建执行上下文环境,在创建执行上下文环境时,会创建作用域链,此时,会把当前执行上下文放到作用域链的栈顶。作用域链中包含着当前执行上下文环境对象和所有父级执行上下文环境对象。 当前函数操作一个变量时,会沿着作用域链查找,当前作用域找不到,就去父级作用域查找。简单说,就是当前作用域下可以使用其它作用域中的参数和变量。

2. 闭包的应用场景

  • 给对象设置私有属性
  • 为结点循环绑定click事件,使得每次输出正确的结点
  • 防抖和节流函数中也有用到闭包

3.2 ES5 VS ES6

1. 普通函数和箭头函数有什么区别?

  • 箭头函数不能用function声明,只能使用函数表达式的方式定义
  • 箭头函数不能做构造函数,不能调用new,没有原型
  • 箭头函数没有自己的arguments对象
  • 箭头函数没有自己的this对象,而是会向外查找最近的非箭头函数的this对象
  • 箭头函数不能使用callapplybind修改this指向

4. vue面试题目

5. 浏览器面试题目

6. 计算机网络面试题目

7. git面试题目

1. git回滚

  • 已经提交,但没有push
  • git reset --soft 版本号,用来撤销commit
  • git reset --mixed 版本号,用来撤销commit和add两个动作
  • 已经提交,并且push
  • git reset --hard 版本号,撤销并舍弃版本号之后的提交记录,需谨慎使用
  • git revert (要移除的)版本号;撤销,但是保留了提交记录

8. 代码题