前端面试题汇总

前端_小白
131 阅读14分钟

HTML

1. DOCTYPE的作用，为什么H5只用写 <!DOCTYPE HTML>

DOCTYPE是document type (文档类型) 的缩写。声明位于文档的最前面，处于标签之前，它不是html标签。主要作用是告诉浏览器的解析器使用哪种HTML规范或者XHTML规范来解析页面。

在HTML4.01和HTML1.0中，声明引用DTD（文档类型定义），因为HTML4.01基于SGML（标准通用标记语言），而 HTML 5 不基于 SGML，因此不需要引用DTD，但是需要 doctype 来规范浏览器的行为

HTML4.01和HTML1.0都有三种声明，而HTML5只有一种声明

2. HTML中的行内元素、块级元素分别有哪些？非替换元素和替换元素呢？

  • 行内元素：<a> <span> <i> <img> <input> <select> <b> <em> <u> <strong> 等
  • 块级元素：<h1>~<h6> <p> <div> <ul> <ol> <li>等
  • 行内块元素：<img> <input> <td>等 各元素特点：

行内元素：

  1. 一行可以显示多个
  2. 宽、高直接设置无效
  3. 默认宽高就是标签本身内容的宽高
  4. 行内元素只能容纳文本或者其他行内元素

块级元素：

  1. 独占一行
  2. 宽、高、外边距、内边距都可控
  3. 宽度默认是父级容器宽度的100%
  4. 是容器及盒子，里面可以放行内元素或者块级元素

行内块元素：

  1. 一行可以显示多个
  2. 默认宽高就是标签本身内容的宽高
  3. 宽、高、外边距、内边距都可控

3. HTML5新增的内容有哪些？

  • 新增语义化标签
  • 新增表单类型
  • 表单元素
  • 表单属性
  • 表单事件
  • 多媒体标签

语义化标签

语义化标签的优点

  1. 提升可访问性，即使在没有CSS的支持下，浏览器依然可以呈现出良好的内容结构；
  2. 有利于搜索引擎的优化（SEO）；
  3. 结构清晰，利于维护； 常见的语义化标签：
  • header ——页面头部
  • main ——页面主要内容
  • footer —— 页面底部
  • nav —— 页面导航
  • section —— Web页面中的一块区域，相当于div
  • article —— 独立的文章内容
  • aside —— 侧边栏
  • video、audio —— 视频、媒体标签

表单类型

input标签新增类型： Email、url、date、time、month、week、number、range、search、color等

表单元素

form标签用于向服务器发送请求，其中的action字段可以设置服务器的地址，method字段用于设置请求方式（GET\POST）

表单属性

  • require —— 值为“require”的时候，表示该表单内容不能为空，必填；
  • placeholder —— 表单提示文本
  • autofocus —— 自动聚焦属性，页面加载完后自动聚焦到指定表单
  • pattern —— 正则表达式

表单事件

  • oninput —— 监听当前指定元素内容的改变
  • inkepup —— 键盘弹起时触发
  • oninvalid —— 验证不通过时触发

多媒体标签

video，src属性填视频地址 audio

4. 页面导入样式时，使用link和@import有什么区别？

  1. 先有link，后有@import（兼容性link比@import更好）； 2. 加载顺序不同，浏览器先加载link标签，后加载@import；

5. title和h1的区别，b与strong的区别，i与em的区别？

title与h1的区别

定义：

  • title：概括了网站信息，可以告诉搜索引擎或者用户这个网站的内容主题
  • h1：文章主题内容，告诉爬虫，网站最主要的内容是什么 具体区别：
  • title是显示在网页的标题上的，而h1则是显示在内容上的
  • title比h1更重要（title > h1），对于网站seo的优化 场景： 网站的logo都是用h1标签包裹的

b与strong的区别

定义：

  • b：实体标签、用来给文字加粗的
  • strong：逻辑标签、用来加强字符语气的 区别：
  • b标签只有加粗样式，没有实际含义
  • strong表示标签内容字符比较重要，用来强调的 为了符合css3的规范，b标签尽量少用，改用strong

i与em的区别

定义：

  • i：是实体标签，用来做文字倾斜的
  • em：逻辑标签，用来强调文字内容的 区别：
  • i 只是一个倾斜标签，没有实际含义
  • em 表示标签内容字符重要，用来强调的 场景：
  • i 更多的用于字体图标
  • em 更多用在术语上（比如医药、生物）

6. img标签的title和alt有什么区别

区别一：

  • title：鼠标移动到图片时显示的提示文字；
  • alt：图片加载不出来时的替换文字； 区别二：
  • alt属性更利于seo优化，前端在写img标签时，为了增加网站的seo效果，要加入alt属性来描述图片的内容或者关键词

7.解释一下png、jpg、gif这些图片格式，他们分别什么时候用？

  • png：无损压缩，尺寸体积要比 jpg / jpeg 大，适合做网页的小图标
  • jpg：采用压缩算法，有一点失真，比png体积小，一般做中大图展示；
  • gif：一般做动图展示
  • webp：同时支持有损和无损压缩，相同质量的图片，webp体积更小，但是webp的兼容性不是很好

CSS

1. 介绍一下CSS的盒子模型

css盒子模型有 W3C 标准盒子模型、IE盒子模型

  • W3C 标准盒子模型：margin、border、padding、content

属性 width, height 只包含内容 content，不包含 border 和 padding。盒子的大小由content+padding+border这几部分决定

  • IE盒子模型：margin、content（border、padding、content）

属性 width, height 包含 border 和 padding，指的是 content + padding + border。盒子的大小为 width 和 height

如何通过 css 转换盒子模型？

box-sizing: content-box;  /* 标准盒子模型 */
box-sizing: border-box;  /* IE盒子模型 */

2. line-height 和 height 的区别？

  • line-height 就是每一行文字的高，如果文字换行则整个盒子高度会增大（行数 * 行高）
  • height 就是元素的高度值

3. CSS选择器（符）有哪些？哪些属性可以继承？

css选择器

  • 通配符（*）
  • 类选择器（.）
  • 标签选择器（div、p、h1...）
  • 相邻（兄弟）选择器（+）
  • 后代选择器（ul li）
  • 子元素选择器（>）
  • 并集选择器（,）
  • 属性选择器（a[href]）
  • 伪元素选择器（::before、::after）
  • 伪类选择器（:link、:visited、:hover、:active）
  • 结构伪类选择器（:first-clild、:nth-child(n)）

css哪些属性可以继承？

  • 文字系列：font-size、color、line-height、text-align... 不可继承属性: border、padding、margin...

4. 讲一下 CSS 的优先级

优先级比较：!important > 内联样式 > id > class > 标签 > 通配符

CSS 权重计算：
第一：内联样式（style）     权重值：1000
第二：id选择器              权重值：0100
第三：类选择器              权重值：0010
第四：标签&伪类选择器        权重值：0001
第五：通配符、>、+           权重值：0000
注意：
复合选择器会有权重叠加的问题
权重虽然会叠加，但是不会有进位
比如：
.nav li 的权重是 0010 + 0001
ul li 的权重是 0001 + 0001 = 0002
最后按位比较
并集选择器中相同的权重只算一个的，不算全部的
伪类选择器的权重是 0,0,1,1

5. 用CSS画一个三角形

用边框来画（border）

width: 0;
height: 0;
border-top: 100px solid #000000;
border-bottom: 100px solid transparent;
border-left: 100px solid transparent;
border-right: 100px solid transparent;

6. 一个盒子如何水平垂直居中？不给高度和宽度呢？

定宽高：

  1. 绝对定位和负magin值
子元素：
left: 50%; 
top: 50%; 
margin-left: -50px; 
margin-top: -50px;
  1. 绝对定位和transform
子元素：
left: 50%;  
top: 50%; 
transform: translate(-50%, -50%);
  1. 绝对定位 + left/right/bottom/top + margin
子元素：
top: 0; 
left: 0; 
right: 0; 
bottom: 0;
margin: auto;
  1. flex布局
父元素：
display: flex; 
justify-content: center; 
align-items: center;
  1. grid布局
父元素：
display: grid;
子元素：
margin: auto;
  1. table-cell + vertical-align + inline-block/margin: auto
父元素：
display: table-cell; 
text-align: center; 
vertical-align: middle;
子元素：
display: inline-block;/* 可以换成margin: auto; */

不定宽高：

  1. 绝对定位 + transform
  2. table-cell -- 父元素设置，子元素不用设置宽高，子元素基于父元素水平垂直居中
  3. flex布局 -- 父元素设置，子元素不用设置宽高，子元素基于父元素水平垂直居中
  4. grid + flex布局
父元素：
width: 200px; 
height: 200px; 
border: 1px solid red; 
display: grid;
子元素：
align-self: center; 
justify-self: center;

7. 说一下常用的 display 属性，并说明他们的作用

  • none：隐藏元素，仍然在 dom 中，只是不显示出来
  • block：把某某元素转换成块级元素
  • inline：把某某元素转换成内联元素
  • inline-block：把某某元素转换成行内块元素

8. 谈一谈你对 BFC 规范的理解

BFC 就是页面上一个隔离的独立容器，容器里面的子元素不会影响到外面的元素

  1. 了解 BFC：块级格式化上下文

  2. BFC 的原则：如果一个元素具有 BFC，那么内部元素再怎么弄，都不会影响到外面的元素

  3. 如何触发 BFC：

    • float的值非 none
    • overflow的值非visible
    • display的值为：inline-block、table-cell
    • position的值为 absolute、fixed

9. CSS 浮动（float）

常见的三种网页布局方式

  1. 标准流

所谓的标准流就是标签（块级元素、行内元素）按照规定好的默认方式排列

  1. 浮动

浮动可以改变标签默认的排列方式，可以让多个块级元素在一行内排列显示

  1. 定位

浮动的特性

  1. 浮动会脱离普通流的控制（浮）移动到指定的位置（动），俗称脱标
  2. 浮动的盒子不再保留原先的位置
  3. 如果多个盒子都设置了浮动，则他们会根据属性值在一行内显示并且顶端对齐排列
  4. 浮动的元素是相互紧贴在一起的（不会有缝隙），如果父级元素宽度不够了，则另起一行显示
  5. 浮动元素具有行内块元素的特性，
    • 即不管什么元素，加了浮动之后都会变成行内块元素
    • 如果行内元素有了浮动，就不需要再转换成行内块元素了
  6. 浮动的元素不会压住下面标准流的文字
  7. 浮动可以实现文字围绕的效果

如何清除浮动？

为什么要清除浮动

由于父盒子很多情况下，不方便给高度，但是子盒子浮动又不占位置，最后父盒子高度为0时，就会影响下面的标准流盒子

清除浮动的方法：

  1. 额外标签法，在最后一个浮动元素的后面添加一个空标签（div），设置其样式为 clear: both;
  2. 触发 BFC，给父级元素添加 overflow: hidden;
  3. 给父级元素添加 after 属性
.clearfix:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

10. CSS定位（position）

css 定位的作用

定位可以让盒子自由地在某个盒子内移动位置或者固定在屏幕上的某个位置，并且压住其他盒子

定位分类

  1. 静态定位：static（很少用到）

静态定位相当于标准流，表示没有定位

  1. 相对定位：relative（重要）

相对于自身定位，不脱离文档流

  1. 绝对定位：absolute（重要）

相对于第一个有 relative 的父元素，脱离文档流

  1. 固定定位：fixed（重要）

相对于浏览器窗口进行定位

  1. 粘性定位：sticky（了解）

重要原则

子绝父相

定位的一些特性

  • 行内元素添加绝对或者固定定位，可以直接设置高度和宽度
  • 块级元素添加绝对定位或者固定定位，如果不给宽度或者高度，默认大小是内容的大小
  • 脱标的盒子不会触发外边距塌陷
  • 浮动元素、绝对（固定）定位元素都不会触发外边距合并的问题
  • 绝对（固定）定位会压住下面标准流里的所有内容（包括文字）
  • relative 如果有 left、right、top、bottom，那么只有 left 和 top 有效
  • absolute 如果有 left、right、top、bottom，那么都有效

11. 写一个左中右布局占满屏幕，其中左右两块固定宽200，中间自适应宽，要求先加载中间块，请写出结构和样式（双飞翼布局）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>双飞翼</title>
  <!-- 方法一：float + margin -->
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      width: 100vw;
      height: 100vh;
    }

    .container>div {
      float: left;
    }

    .left {
      margin-left: -100%;
      width: 200px;
      height: 100vh;
      background-color: red;
    }

    .middle {
      width: 100%;
      height: 100vh;
      background-color: pink;
    }

    .right {
      margin-left: -200px;
      width: 200px;
      height: 100vh;
      background-color: blue;
    }

    .content {
      padding: 0 200px;
    }
  </style>


</head>

<body>
  <div class="container">
    <div class="middle">
      <div class="content">
        <span>中</span>
      </div>
    </div>
    <div class="left">左</div>
    <div class="right">右</div>
  </div>
</body>

</html>

效果图：

image.png

12. 什么是 CSS reset

reset.css 是一个 css 文件，用来重置页面 css 样式的，太过冗余，不常用

Normalize.css 也是一个 css 重置样式库，替代 reset.css 使用，跨端用得比较多，体积较小，性能更好

13. CSS sprite 是什么？有什么优缺点？

CSS sprite 是什么？

CSS sprite 又称为精灵图，就是将多个小图标合并成一张大图片

优缺点

优点：减少了 http 请求的次数，提升了性能

缺点：维护比较差（例如图片位置进行修改或者内容宽高修改）

JS

1. defer 和 async

<script/> 标签中有三种加载模式：默认加载、defer、async

  • 默认加载
<script src="app.js"></script>

浏览器在解析 HTML 的时候，如果遇到没有任何属性的 script 标签，则会先暂停解析，发送网络请求去获取 js 脚本的内容，然后让 js 引擎执行这个代码，当代码执行完毕之后再恢复解析。如果遇到网络卡顿或者 js 脚本执行时间过长，就会出现页面白屏的情况，导致用户看不到页面内容。

  • defer 加载
<script defer src="app.js"></script>

当浏览器遇到带有 defer 属性的 script 标签时，会发送异步请求去获取该 js 脚本，不会阻塞浏览器解析 HTML，js 脚本请求到后，如果 HTML 还没有解析完，浏览器不会暂停对 HTML 内容的解析，当 HTML 内容解析完之后，才会执行请求到的 js 脚本代码。

如果存在多个 defer script 标签，浏览器（IE9及以下除外）会保证它们按照在 HTML 中出现的顺序执行，不会破坏 JS 脚本之间的依赖关系。

  • async 加载
<script async src="app.js"></script>

async 表示异步，当浏览器遇到带有 async 的 script 标签时，会异步请求该 js 脚本，不会阻塞浏览器解析 HTML，async 与 defer 的不同就在于，async 请求到 js 脚本后，如果 HTML 还没有解析完，浏览器会暂停解析，先执行 js 脚本，等 js 脚本执行完毕之后再继续解析 HTML 内容。

参考文章：juejin.cn/post/689462…

2. 说一说 JS 的基本数据类型

JavaScript 定义了 6 种基本数据类型

  • null：空值，表示非对象
  • undefined：未定义的值
  • number：数字类型
  • string：字符串类型
  • boolean：布尔值
  • object：对象类型
  • symbol：可以生成唯一值，作为对象属性的标识符
  • bigInt：大整数类型

基本类型

  • null：空值，表示非对象
  • undefined：未定义的值
  • number：数字类型
  • string：字符串类型
  • boolean：布尔值

对象（引用）类型

  • Object: 任意对象
  • Function: 一种特别的对象(可以执行)
  • Array: 一种特别的对象（数值下标，内部数据时有序的）

3. typeof 和 instanceof 的区别，还有 == 和 === 的区别

typeof 和 instanceof 的区别

typeof 会返回数据类型的字符串表达，它可以判断

  • undefined
  • number
  • string
  • boolean
  • function typeof 不能判断 null、object、array

instanceof 可以判断对象的具体类型（Object、Array、Function）

== 和 === 的区别

  • == 抽象相等，比较时，会先进行类型转换，然后再比较值
  • === 严格相等，会比较两个值的类型和值

4. null 与 undefined 的区别

undefined 表示变量未定义，而 null 表示变量定义并赋值了，但是值为 null，null 可以在定义对象时，初始化为 null。

什么情况下会打印出 undefined？

  • 变量声明了，但是未定义
  • 调用函数时，该传递的参数没有传，那这个参数在函数内部就是 undefined
  • 对象的属性没有赋值，则该属性为 undefined
  • 函数没有返回值，默认返回 undefined

null 的典型用法：

  • 作为函数的参数，表示该函数的参数不是对象
  • 原型链的终点

5. 说一说 var、let、const 这三个关键字的区别

  • let 定义的变量具有块级作用域，不能使用 let 重复定义变量，let 不存在变量提升
  • var 定义的变量只有函数作用域，var 关键字可以重复定义变量，存在变量提升
  • const 相当于定义常量，具有块级作用域，不可以重复定义，而且定义时必须赋初值，const 不存在变量，const 定义引用类型比如，array、object 时，其内部属性可以改变，定义值类型时不可改变

变量提升:即先使用再声明,这是一种很不严谨的编程规范

avatar
文章
阅读
粉丝