该博客围绕前端开发，涵盖HTML+CSS、JS、Vue三方面基础内容。HTML+CSS涉及结构、选择器权重等；JS包含数据类型、数组方法等；Vue有生命周期、组件通信等。部分问题附上答案链接，可用于查缺补漏。
目录
10.伪元素一开始就是单冒号吗？伪元素和伪类有什么区别？伪类有哪些？
5.什么是伪数组？常见的伪数组？伪数组转真数组？Array.of( )知道吗？
9.常用的数组方法？（对数组的增删改查以及es6常用的数组方法）
前言
仅仅部分基础内容，用于查缺补漏
问题太多，部分答案附上链接了，大家自行点击><。
HTML+CSS
1.HTML结构？
HTML的结构包括，
<!DOCTYPE html>: 文档声明，位于文档最前面位置。其中的DOCTYPE是一种指示浏览器以何种HTML或XHTML规范来解析文档的声明。它能够告知浏览器网页文档使用的标记语言的类型以及版本，从而确保浏览器能够正确地展示网页内容。
<html>,根标签，有语言 lang=" "。
<head>，头部标签，包含关于文档的元信息。
<head>中包括：<meta>，文档的配置信息，比如文档字符集 charset="utf-8"。<title>，元素指定该文档的标题。
<body>，元素包含可见页面的所有内容
2.head里面可以写什么标签？必须写什么标签？
head中可以放<base>（<base>标记为页面上的所有相对URL 指定默认值href 类似基地址和target属性）、<link>、 <meta>、 <script>、<style> 以及<title>。
其中<title>标签是唯一必需的元素，用来定义文档的标题。
3.meta标签内部都可以写什么属性？
【HTML】前端必须要知道的html中的meta标签，有哪些属性？_html meta属性_Chx.zhang的博客-优快云博客
4. 分别说说H5和C3的新特性？
5.说一说HTML语义化？常见语义化标签有哪些，有什么用？
H5语义化标签及其作用，常见的语义化标签有哪些？ - 掘金 (juejin.cn)
6.选择器的权重？
一次弄懂CSS选择器权重问题 - 知乎 (zhihu.com)
7.css中哪些属性可以继承？
文本和字体相关属性(color,font-family,line-height等)，列表样式相关属性（list-style-type，list-style-position，list-style-image ），表格布局相关属性（border-collapse，border-spacing等 ），其他属性（visibility, cursor ）
8.说一下flex布局
flex布局属于一种一维的布局模型。它决定了元素如何在页面上排列，使页面能够适应不同的屏幕尺寸。在CSS3之前，我们通常会使用浮动和定位的方式实现垂直居中，三栏布局等效果，甚至还需要配合margin使用。但有了flex之后，就可以很轻易地实现这种效果。
9.常用的居中方式？div盒子如何垂直居中？
CSS盒子垂直居中的常见方法 - 掘金 (juejin.cn)
10.一个swith按钮怎么实现？不借助JS
写一个原生switch开关按钮 - 掘金 (juejin.cn)
11.一个圆环有三层，每层颜色不同怎么实现？
用CSS实现一个圆环，圆环有三层，每层的颜色不同_chen_吉的博客-优快云博客
12.讲讲媒体查询？
媒体查询能在不同的条件下使用不同的样式，使页面在不同终端设备下达到不同的渲染效果。
特点：第一，媒体查询可以针对不同的媒体类型定义不同的样式使用。第二，针对不同的屏幕尺寸设置不同的样式 ，设计响应式的页面时很好用。第三，重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
它的基本语法是：
@media 媒体类型(screen/all) 逻辑操作符 (and/not/only) 媒体功能(width：屏幕可见宽度；max-height：页面最大可见区域高度等)
13.栅栏系统如何使用和实现原理
14.伪元素和伪类有什么区别？伪类有哪些？
区别： 伪类是单冒号，伪元素是双冒号；伪类和伪元素的主要区别在于实现效果的过程中有没有创造新元素。
伪类是添加到选择器的关键字，用于指定所选元素的特殊状态。例如，:hover，:active，:focus，:first-child，:nth-of-type(n)
15.举例行内标签和块级标签？单标签有哪些？
行内标签：<a>、<b>、<i>、<s>、<u>、<em>、<del>、<ins>、<span>、<strong>
块级标签：<p>、<h1~h6>、<ul>、<ol>、<dl>、<li>、<dd>、<dt>、<div>、<form>、<table>
行内块标签：<img>、<input>、<textarea>、<select>、<td>、<label>
单标签：<br><hr><img><input><param><meta><link>
16.谈谈回流和重绘
回流是对于DOM结构中的各个元素都有自己的盒子模型,浏览器根据计算结果将元素放到它该出现的位置。简单点说，就是元素的位置发生了改变;
重绘是各种盒子的位置、大小以及其他属性,例如颜色、字体大小等都确定下来后,浏览器于是便把这些元素都按照各自的特性绘制了一遍。即，元素位置不会发生改变，视觉效果会有所改变。
17.用flex布局实现瀑布流
Flex--弹性布局学习--flex瀑布流的实现_flex实现瀑布流_ღ故里᭄ꦿ࿐的博客-优快云博客
18.判断图片是否加载成功和失败
判断图片是否加载成功和失败，需要在img 标签中添加onload事件和onerror事件。当图片的 url 地址存在且图片加载完成，则会触发onload事件。当图片 url 地址不存在或网络出错时，则触发onerror事件。并且，要在onerror事件中指定一个替换图片，否则还会触发onerror事件。
JS
1.如何判断对象为空？
JavaScript判断对象是否为空对象的几种方法_js判断.对象是否为空对象_年轻正好的博客-优快云博客
2.JS的基本数据类型？新增数据类型？
基本数据类型包括:
（原始数据类型七种）Number，String，Boolean，Null，undefined，Symbol，BigInt
和 Object（数组、函数、日期，不是数据类型，它们都属于对象 Object ）
Symbol和BigInt是新增的。
3.null和undefined的区别？
null表示一个空对象。用 typeof 检测 null 返回是object。
undefined 是一个没有设置值的变量。typeof 检测undefined会返回 undefined。
null 和 undefined 的值相等，但类型不等。
4.什么是伪数组？常见的伪数组？伪数组转真数组？Array.of( )知道吗？
伪数组就是指类似数组的一个集合，他们拥有length属性和索引，但是其类型是Object；
它与数组的区别就是它们的对象原型。普通数组有很多数组的方法，比如说push，shift，map等等，而伪数组却没有。所以称这类结构类似数组，却没有数组方法的集合叫做伪数组。
常见的伪数组有arguments，获取元素的document.querySelectorAll( )得到的对象列表。
JS数组中Array.of()方法的使用 - 溢杨年华 - 博客园 (cnblogs.com)
5.===和==什么区别？
==与===的区别（JS）_==和===的区别_寒七七（静）的博客-优快云博客
==会进行类型的转换之后再判断两者是否相等。而===不会进行数据类型的转换，先判断两边的数据类型是否相等，如果数据类型相等的话，再判断等式两边值是否相等。
===只有等式两边是全等（数据类型相同，值相同）的时候结果才会是true，否则全为false。
6.const定义的变量一定不能改变吗？
不是的，const声明的部分变量是可以改变的。
因为，const实际上保证的，并不是变量的值不能改动，而是变量指向的那个内存地址所保存的数据不得改动。对于const定义的原始类型的变量，他们的值就保存在变量指向的那个内存地址，因此等同于常量。
对于对象类型的数据，变量指向的是内存地址，保存的只是一个指向实际数据的指针，const只能保证这个指针是不变的的，至于它指向的数据是不是可变的，const就完全不能控制了。
例如，对用const声明的数组，如果想该数组push一个元素，则不会报错（指针没变）。
7.for in，for of，forEach三者的不同
【JS】forEach，for in，for of的区别_chen_吉的博客-优快云博客
for in主要用来遍历对象，可以得到对象的属性名和属性值并对其进行操作；
for of用来遍历Array，String，Symbol，Map，Set，arguments等，为每个不同属性的值执行语句。对象无法使用for of，会报错；
forEach用来遍历数组，对数组的每个元素执行一次给定的函数。
8.常用的数组方法？（对数组的增删改查以及es6常用的数组方法）
数组常见的方法（增删改查）_数组的增删改查方法_銭佳的博客-优快云博客
9.判断一段字符串出现最多次的字符和次数
10.判断一个数据是数组还是对象？
判断数据类型是数组还是对象(constructor、instanceof、toString())_故事迷人眼的博客-优快云博客
11.Dom和Bom的区别？
第一区别：Dom是文档对象模型，使JavaScript操作Html，用来访问和操作HTML元素。
Bom是浏览器对象模型，能够让JavaScript控制浏览器的行为。例如打开新窗口、打开新选项卡（标签页）、关闭页面，把网页设为主页，或加入收藏夹，等等；
第二区别：Bom没有规则，Dom是要根据w3c的标准；
第三区别：BOM的最根本对象是window。DOM最根本对象是document。
12.查询DOM元素有哪些方法？请举例
js 获取dom元素的八种方法_js获取dom元素_飞马攻城师的博客-优快云博客
通过ID获取：getElementById
通过name属性：getElementsByName
通过标签名：getElementsByTagName
通过类名：getElementsByClassName
获取html的方法：document.documentElement
获取body的方法：document.body
通过css选择器获取元素：document.querySelector(); document.querySelectorAll();
13.JS中如何获取body？（说出更多方法）
1. document.body
2. document.getElementsByTagName('body')[0]
14.如何将div添加到body中
15.事件委托？坏处？原理是什么？
JavaScript的事件委托（事件代理）原理_事件委托的实现原理_avoidaily的博客-优快云博客
16.怎么将两个变量值互换？
JavaScript中交换变量a/b的多种方法（5种实现） - 掘金 (juejin.cn)
17.箭头函数和普通函数的区别？
前端面试系列-JavaScript-箭头函数(与普通函数的区别)_js面试箭头函数_LYFlied的博客-优快云博客
18.谈谈浅拷贝和深拷贝
js中的浅拷贝和深拷贝（原理及方法）_js中的浅拷贝和深拷贝(原理)_codingWeb的博客-优快云博客
19.谈谈节流和防抖
JS优化: 谈谈节流(throttle)和防抖(debounce)_一树梨花的博客-优快云博客
19.原型链和类是什么关系？
JS基础系列之 —— 原型、原型链和类 - 知乎 (zhihu.com)
Vue
1.vue的生命周期？可以访问this的生命周期？
Vue生命周期详解_vue 生命周期_渣渣苏的博客-优快云博客
创建期间的生命周期函数：
beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好data 和 methods 属性
created：实例已经完成了模板的编译，但是还没有挂载到页面中
beforeMount：此时已经完成了模板的翻译，但是还有完全挂载到页面中
mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示
运行期间的生命周期函数：
beforeUpdate：状态更新之前执行此函数，此时 data 中的状态值是最新的，但是界面上显示的数据还是旧的，因为此时还没有开始重新渲染DOM节点
updated：实例更新完毕之后调用次函数，此时 data 中的状态值 和 界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了
销毁期间的生命周期函数：
beforeDestroy：实例销毁之前调用，在这一步，实例仍然完全可用
当执行 beforeDestroy 钩子函数的时候，Vue实例就已经从运行阶段进入到了销毁阶段；当执行 beforeDestroy 的时候，实例身上所有的 data 和所有的 methods， 以及 过滤器、指令、、 都处于可用状态，此时，还没有真正执行销毁的过程
destroyed：Vue 实例销毁后调用。调用后，vue 实例 指示的所有东西都会解绑，所有的事件监听器会被移除，所有的子实例也会被销毁
2. 脚手架里都有什么？
vue脚手架vue-cli3详细配置项（新手能看懂，老手也能长知识） - 知乎 (zhihu.com)
3.常用的通信方式？
Vue 组件间通信六种方式（完整版） - 掘金 (juejin.cn)
4.v-for，v-if可以连用吗？为什么？
vue中v-if和v-for同时使用的问题_yzehan的博客-优快云博客
不建议。因为，v-for比v-if优先级高，所以使用的话，每次v-for都会执行v-if,造成不必要的计算，影响性能。
5.v-if 和v-show的区别？
简述vue中v-if和v-show的区别_1. 简述v-if和v-show的区别以及是否可以在template中使用？_瑶&希的博客-优快云博客
v-if是创建和删除元素，而v-show只是改变元素中的display样式属性。
如果不是频繁切换，比较适合使用v-if，这样可以提高我们的页面渲染速度，因为使用v-if指令的元素只有当v-if指定的值为true时，这个元素才会被创建，而不是当页面渲染时就创建。
如果需要让元素在显示和隐藏之间频繁的切换，那这时就适合用v-show，因为只是改变元素的样式属性，而不用频繁的创建和删除元素，消耗性能。
6.如何自定义指令？
Vue进阶 之 自定义指令详解_请简述什么是vue的自定义指令?_八了个戒的博客-优快云博客
7.vue数据丢失怎么办？
8.vue状态管理有什么组成
一文带你搞懂vue中全局状态管理vuex - 掘金 (juejin.cn)
9.谈一谈用过什么包管理工具？
npm，yarn，pnpm
10.vue的单项数据流？
11.说说vue全家桶
vue全家桶包括vue-cli，vue-router，vuex，axios请求工具，基于vue的UI框架。
vue-cli是构建vue项目的脚手架工具，它通过在cmd命令中执行npm i @vue-cli -g的指令快速搭建一个vue项目；
vue-router是vue的路由管理工具，需要自己配置路由的路径。主要实现页面的跳转，路由守卫，路由懒加载等功能；
vuex是vue的全局变量状态管理工具，用来管理项目的通用数据，完成多组件共享数组；
axios是用于前后端交互请求数据用的，可以将请求发给后端，后端返回响应结果；
UI框架是基于vue的组件库，可以美观快速地开发网站。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
