前端三剑客常见面试题及其答案

Posted 2023-03-28 久绊A

目录

1、什么是 HTML？

2、什么是 CSS？

3、什么是 JavaScript？

4、什么是盒模型？

5、什么是浮动？

6、什么是定位？

7、什么是选择器？

8、什么是事件？

---

前端的三剑客指的是 html、CSS 和 javascript，下面是一些常见的前端三剑客面试题及其答案

1、什么是 HTML？

HTML（超文本标记语言）是用来描述网页结构和内容的一种标记语言。它由一系列标签和属性组成，可以用来创建网页的各种元素，如标题、段落、图像、链接等。

2、什么是 CSS？

CSS（层叠样式表）是用来控制网页样式和布局的一种标记语言。它通过一系列的样式规则，将样式应用到 HTML 元素上，如字体、颜色、大小、位置等。

3、什么是 JavaScript？

JavaScript 是一种用来创建交互式网页的脚本语言，它可以在浏览器端执行。它可以用来操作网页元素，响应用户交互，获取和修改网页内容等。

4、什么是盒模型？

盒模型是指在 HTML 中，每个元素都可以看作是一个矩形的盒子，包含内容、内边距、边框和外边距四个部分。其中，内容部分指的是元素内部的内容，内边距指的是内容与边框之间的空白区域，边框指的是盒子的边框，外边距指的是盒子与其他元素之间的距离。

5、什么是浮动？

浮动是指将元素从正常的文档流中移除，使其向左或向右漂浮，直到遇到父元素或其他浮动元素。浮动元素会脱离文档流，不会占用父元素的空间，因此可以用来实现文本环绕图片、多栏布局等效果。

6、什么是定位？

定位是指通过设置元素的 position 属性来控制元素的位置。常见的定位方式有静态定位、相对定位、绝对定位和固定定位。其中，静态定位是元素的默认定位方式，相对定位是相对于元素在文档流中的位置进行定位，绝对定位是相对于最近的具有定位属性的父元素进行定位，固定定位是相对于视口进行定位。

7、什么是选择器？

选择器是指用来选择 HTML 元素并为其应用样式的一种语法。选择器可以根据元素的标签名、类名、ID、属性等特征来选择元素，并为其设置样式。

8、什么是事件？

事件是指用户在浏览器中的各种操作，如点击、鼠标移动、键盘输入等。JavaScript 可以通过监听这些事件，响应用户的操作，从而实现交互式的网页效果。

Webpack常见面试题总结

一、谈谈你对Webpack的理解

1.1 背景

Webpack 的目标是实现前端项目的模块化，从而更高效地管理和维护项目中的每一个资源。在早期的前端项目中，我们通过文件划分的形式来实现模块化，也就是将每个功能及其相关状态数据各自单独放到不同的 JS 文件中。约定每个文件是一个独立的模块，然后再将这些js文件引入到页面，一个script标签对应一个模块，然后再调用模块化的成员。比如：

<script src="module-a.js"></script>
<script src="module-b.js"></script>

但这种模块化开发的弊端也十分明显，模块都是在全局中工作，大量模块成员污染了环境，模块与模块之间并没有依赖关系、维护困难、没有私有空间等问题。随后，就出现了命名空间方式，规定每个模块只暴露一个全局对象，然后模块的内容都挂载到这个对象中。

window.moduleA = 
  method1: function () 
    console.log(\'moduleA#method1\')
  

不过，这种方式也没有解决第一种方式的依赖等问题。接着，有出现了使用立即执行函数为模块提供私有空间，通过参数的形式作为依赖声明。

(function ($) 
  var name = \'module-a\'

  function method1 () 
    console.log(name + \'#method1\')
    $(\'body\').ani