2024年最全web前端基础(3)，2024年最新web前端开发面试问题回答技巧有哪些-CSDN博客

本文链接：https://blog.csdn.net/2401_84446787/article/details/138850809

判断

回到题目，如果你真想检验一个人的水平。第一步先考察一下基本的编程基础，问几个基本的编程问题，可以和前端相关也可以无关。比如垃圾收集大致是怎么做的，setTimeout 大致做了什么（说会在另一个线程里执行回调的直接毙掉）。

第二步考察一下知识面，问问http、tcp的基本知识，dns是怎么工作的，或者常用框架的实现原理，看看候选人是不是除了自己的一亩三分地什么都不关心。

第三步考察hold业务逻辑的能力，从一个简单的注册页，或者查询页开始，先让说下代码的基本架构，然后需求、性能、可靠性、安全层层加码，看看能不能很快的反馈出解决方案。能对答如流的要么做过，要么对他来说这种复杂度的东西是小case。

前三步都没问题，基本上说明候选人已经还行了，但是行到什么程度，不知道。如果想找比较厉害的，就增加个第四步，亮点项目考察。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

总的来说，面试官要是考察思路就会从你实际做过的项目入手，考察你实际编码能力，就会让你在电脑敲代码，看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时，有一个清晰的逻辑思路，清楚知道自己在和面试官说项目说技术时的话就好了，我整理一套前端面试题分享给大家，希望对即将去面试的小伙伴们有帮助！

href: 跳转的地址

target : 在哪里打开新页面

_blank : 在新窗口打开

_self : 在当前窗口打开，默认值

a href=“文档结构.html” target=“_self”>文档/a>

最常用的标签，没有之一：独占一行，我们在今后的学习中将会经常性的用到这个标签

div>/div>

接下来给大家介绍一下我们的列表标签

首先是有序列表，用来展示一个列表项目（文本前会有序号）

ol>

li>

男装区

ol>

li>小男人区

li>大男人区

/ol>

/li>

li>女装区

li>不男不女区

/ol>

然后是无序列表，也是用来展示一个列表项目（文本没有序号，是一个圆点）

ul>

li>我是One

li>我是Two

/ul>

**最后是自定义列表 ** 他是一个特殊的列表

1.将标题和内容成对显示，作为一个子项

2.子项的数量不限一个dl中可以包含 1~n个子项

标题

我是对应的内容

标题二

我是内容二

文本修饰标签

================================================================

在制作页面时，如果只有一个页面的话，那么内容可能会很枯燥，就好像你的房子建好了，但是是毛坯房，需要你去装修他一下，随意我们会用到一些文本修饰标签，接下来我给大家介绍一下。

内容加粗显示：b>/b>

换行标签：br />

内容斜体显示：i>/i>

内容添加一条删除线：s>/s>

内容添加一条下划线：u>/u>

内容已上标的形式显示：sup>/sup>

内容已下标的形式显示：sub>/sub>

内容加粗显示，具有语义化，表强调作用：strong>/strong>

比周围的字体大一号：big>/big>

比周边的字体小一号：small>/small>

font: 这个标签可以用来控制更多的字体外观

通过属性：

1.face: 字体

2.size: 大小

3.color: 颜色

font face=“楷体” size=“20” color=“pink”>/font>

文档结构

==============================================================

在制作页面时，如果没有一个文档分类结构的用户在浏览时会非常的不方便，接下来我给大家介绍几种文档结构的标题类以及表格表单类

h家族 用来做标题的

h1 ~ h6 从大到小

h1>我是老大/h1>

h2>我是老二/h2>

h3>我是老三/h3>

h4>我是老四/h4>

h5>我是老五/h5>

h6>我最小的/h6>

表格的整体框架：table border=“1px” align=“center” cellspacing=“0px” cellpadding=“0px”>/table>

表格的标题：caption>/caption>

单元行：tr>/tr>

表头： th>/th>

单元格：td>/td>

**form>**标签中通常会有很多子元素（文本字段、复选框、单选框、提交按钮等等），比如< input>、< button>、< select>、< textarea>等标签。

说明：表单内容可以是< input>、< textarea>、< button>、< select>、< option>、< optgroup>、< fieldset>、< label>等标签

CSS选择器

================================================================

通常我们在构建页面时，标签起的的作用就好像是一个人体，但是一个人光秃秃的总是有点不雅观，所以我们这里会运用到一些CSS选择器以及CSS属性，用这个来创造一件衣服，看起来会舒适很多。

通用选择器：

它的优先级是最低的。

慎用，因为它会修改整个页面中，所有标签的样式。包括body,html在大型网站中，这个选择器是被禁止使用的，样式容易混乱。

作用：修改整个页面中，所有标签的样式

示例：*{

border: 2px solid black;

background-color: green;

}

标签选择器：

用标签名来定义的。

作用：当前页面中，所有叫这个名字的标签，全部都绑定上样式。

示例：div{

width: 200px;

height: 200px;

background-color: yellow;

}

class选择器 用 . 来标示自身

自定义名称(名字符合见名知意即可)

命名时：可以包含字母数字下划线，但是不能以数字开头

特点：具有重用性，可以给多个标签使用

使用给对应的标签进行绑定例如

class 的优先级高于标签选择器

示例：.box{

width: 500px;

color: red;

}

id选择器 用#来标示

自定义名称(名字符合见名知意即可)

Vue 面试题

1.Vue 双向绑定原理
2.描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？
3.你是如何理解 Vue 的响应式系统的?
4.虚拟 DOM 实现原理
5.既然 Vue 通过数据劫持可以精准探测数据变化,为什么还需要虚拟 DOM 进行 diff 检测差异?
6.Vue 中 key 值的作用？
7.Vue 的生命周期
8.Vue 组件间通信有哪些方式?
9.watch、methods 和 computed 的区别?
10.vue 中怎么重置 data?
11.组件中写 name 选项有什么作用？
12.vue-router 有哪些钩子函数?
13.route 和 router 的区别是什么？
14.说一下 Vue 和 React 的认识，做一个简单的对比
15.Vue 的 nextTick 的原理是什么？
16.Vuex 有哪几种属性?
17.vue 首屏加载优化
18.Vue 3.0 有没有过了解？
19.vue-cli 替我们做了哪些工作？
…