1. 块级元素与行内元素的区别 80%
块级元素独占一行 行内元素与其他元素共享一行
块级元素宽高由子元素或其内容决定 可以直接设置宽高(可以通过css来指定宽高) 行内元素宽高由自身决定 行内元素不可以直接设置宽高 需要通过display改变元素属性来设置 块级元素默认宽度为100%
块级元素可以包含行内元素 行内元素只包含行内元素 //行内元素中不可以嵌套块级元素
2. get与post请求的区别
- get 传输数据量小 参数携带在URL后面 没有请求体 没有数据保密性/index.php?id=100&slec=yes
- post 数据传输量大 数据携带在请求体里 数据保密性强(swagger-login /register)
3.img标签中的alt属性的作用是
alt:可以用来设置在图片不能显示的时，对图片的描述
并不是所有的属性都可以继承, 只有以color/font-/text-/line-开头的属性才可以继承
display：inline 使元素成为行内元素
display：block 使元素成为块级元素
display：inline-block 使元素保留行内元素布局，同时拥有块级元素的css属性（如width，height）
4.根据以下代码，两个div元素垂直间距为()
<div style="width:100px; height:100px; margin-bottom:100px;"></div> <div style="width:100px; height:100px; margin-top:200px;"></div>
答案：200px
css盒模型，块之间共享垂直外边距margin，margin取其大。
5.W3C盒子
内容区的宽
width
内容区的高
height
盒子的宽
width+paddingLeft+paddingRight+borderLeft+borderRight
盒子的高
height+paddingTop+paddingBottom+borderTop+borderBottom
所占屏幕空间的宽
width+paddingLeft+paddingRight+borderLeft+borderRight +marginLeft+marginRigh
所占屏幕空间的高
height+paddingTop+paddingBottom+borderTop+borderBottom+marginTop+marginBottom
内容盒子也称为普通盒子，其特点为：当我们为一个盒子指定width属性的时候，实际上width仅为内容的宽度，当padding和border变大的时候，内容宽度不变，盒子所占的总体宽度要变大。
6. 边框盒子(IE盒子模型)
IE盒子使用box-sizing属性可以改变盒子模型，取值“border-box”的盒子为边框盒子模型。
IE盒子
内容区的宽
width-paddingLeft-paddingRight-borderLeft-borderRight
内容区的高
height-paddingTop-paddingBottom-borderTop-borderBottom
盒子的宽
width
盒子的高
height
所占屏幕空间的宽
width+marginLeft+marginRight
所占屏幕空间的高
height+marginTop+marginBottom
边框盒子也称为怪异盒子，其特点为：当我们为一个盒子指定width属性的时候，实际上width包含了border和padding的宽度，如果border不变，padding变大，这时候内容会变小。
7.水平垂直居中
8.
for (var i = 0; i < 6; i++) {
console.log(i);//0，1，2，3，4，5
function output() {
console.log(i); // 为什么输出的是6，而不是0，1，2，3，4，5
// 因为输出的 i 是全局作用域的，当循环结束后 i 的值是 6，所以输出的 i 就是6。
}
}output()
//使用IIFE来处理
for (var i = 0; i < 6; i++) {
(function (j) {
console.log(j); //0,1,2,3,4,5
})(i)
// 因为 JS 中调用函数传递参数都是值传递 ，所以当立即执行函数执行时，首先会把参数 i 的值复制一份，然后再创建函数作用域来执行函数，循环5次就会创建5个作用域，所以每个输出访问的都是不同作用域的 i 的值 。
}
9.
var a = 10
//嵌套函数
function fn() {
var b = 20
function bar() {
console.log(a + b) //30
}
//将函数当做了返回值
return bar
}
var x = fn(), // 执行fn() 返回的是bar
b = 200 //用于迷惑人的
x() //执行x，就是执行bar函数
10. 阻止默认事件， 阻止冒泡
-
阻止默认事件：
e.preventDefault()
e.returnValue = false (IE)
-
阻止冒泡：
e.stopPropagation()
e.cancelBubble = true (IE)
11. 模块化机制
-
CommonJs模块化规范(针对服务器端)
-
AMD模块化规范(针对客户端的–>浏览器)
-
ES6模块化规范
- ES6
导入模块 import ‘babel-polyfill’
默认导出
一个模块只能有一个默认导出，不能使用 var、let 或 const 用于导出默认值 export default。
export default{}
export default function foo(){}//ES6导出
let firstName = ‘zhang’
let lastName = ‘san’
export { firstName, lastName }//列表导出
export var a = 1;//单个属性导出
export function() { };//单个属性导出
export { firstName as first, lastName as last }//重命名导出
//默认导出 default
export default {}
//ES6导入
// import {firstName,lastName} form ‘./module.js’
// commomJs导出
module.exports = {
firstName,
lastName,
}
//commonJS导入
let { firstName, lastName } = require(’./module.js’)
12. CommonJS与ES6模块的区别
commonJS模块输出的是值的拷贝 ES6模块输出的是值的引用
commonJS模块运行时加载 ES6模块编译时输出接口
13. 怎么在路由携带参数id 格式是什么 ，
在项目中,通过一个列表进入详情页,携带参数id渲染不同的详情页,动态传参使用编程式跳转
vue传参方法一
在router路由配置中
{
path: ‘/article/:id’,
name: ‘Article’,
component: Article,
}在详情页中使用params获取
mounted() { console.log(this.$route.params.id); }在列表页中点击事件
handleClick(id){ this.$router.push(`/article/${id}`) ; }
vue传参方法二
在router路由配置中
{ path: '/article', name: 'Article', component: Article, }在列表页中点击事件
handleClick(id){ this.$router.push({ name: 'Article', params: { id: id } }) }在详情页中使用params获取
mounted() { console.log(this.$route.params.id); }特点;这里不能使用:/id来传递参数了，因为父组件中，已经使用params来携带参数了。所以不会暴漏在网址中,同时也不会变化网址,router.afterEach也没有办法调用
vue传参方法三
在router路由配置中
在列表页中点击事件
handleClick(id){ this.$router.push({ path: '/article', query: { id: id } }) }在详情页中使用query获取
mounted() { console.log(this.$route.query.id); }特点:这种情况下 query传递的参数会在url后面拼接上 ?id=？,同样会暴漏详情id
开始提到了编程式跳转,这里还要在说一种编程式不携参的跳转方式$router.go();
这个就随意提一下，就是类似于history.go()的方法，括号里面填个1就是前进一级页面，-1就后退一级页面。
14. for和for in 的区别 ，
1.for-of 无法遍历不可迭代对象
可迭代对象包括: Array，Map，Set，String，TypedArray，arguments等等
2.for-of 遍历的是值，for-in遍历的是key
遍历Object
for-of
var obj = {
a: 1,
b: [],
c: function () {}
};
for (var key of obj) {
console.log(key);
}
// 出错：
// Uncaught TypeError: obj is not iterablefor-in
var obj = {
a: 1,
b: [],
c: function () {}
};
for (var key in obj) {
console.log(key);
}
// 结果是：
// a
// b
// c遍历数组
for-in
var arr = [3, 5, 7];
for (var i in arr) {
console.log(i);
}
// 结果是：
// 0
// 1
// 2for-of
var arr = [3, 5, 7];
for (var i of arr) {
console.log(i);
}
// 结果是：
// 3
// 5
// 7
15. css有哪些伪类 ，
CSS伪类用于向某些选择器添加特殊的效果。CSS伪元素用于向某些选择器设置特殊效果。
下面我们给大家总结下css伪类以及伪元素。
伪类：
:active，将样式添加到被激活的元素。
:focus，将样式添加到被选中的元素。
:hover，当鼠标悬浮在元素上方是，向元素添加样式。
:link，将特殊的样式添加到未被访问过的链接。
:visited，将特殊的样式添加到被访问的链接。
:first-child，将特殊的样式添加到元素的第一个子元素。
:lang，允许创作者来定义指定的元素中使用的语言。
伪元素：
:first-letter，将特殊的样式添加到文本的首字母。
:first-line，将特殊的样式添加到文本的首行。
:before，在某元素之前插入某些内容。
:after，在某元素之后插入某些内容。
####16. vuex的作用 ，
状态机可以将所有需要共享的数据进行统一维护，当某个组件需要时，直接引入即可。
状态机可以对请求代码进行封装，其他任何组件可以直接调用。
1、多层嵌套的组件、兄弟组件间的状态会更好管理维护。
2、缓存一些当前要使用请求远程或本地的数据集（刷新后会自己销毁）。
3、有了第二条，就可以减少向服务器的请求，节省资源。如果你的用户足够多，那么每多出一个请求，对公司来说，都是一大笔钱。
4、对开发者来说，如果你的项目足够复杂，团队的规模也不仅是一个人，数据集中处理更利于程序的稳定和维护。Vuex的State特性
1、Vuex就是一个仓库，仓库里面放了很多对象。其中state就是数据源存放地，对应于一般Vue对象里面的data
2、state里面存放的数据是响应式的，Vue组件从store中读取数据，若是store中的数据发生改变，依赖这个数据的组件也会发生更新
3、它通过mapState把全局的 state 和 getters 映射到当前组件的 computed 计算属性中
Vuex的Getter特性
1、getters 可以对State进行计算操作，它就是Store的计算属性
2、虽然在组件内也可以做计算属性，但是getters 可以在多组件之间复用
3、如果一个状态只在一个组件内使用，是可以不用getters
Vuex的Mutation特性
Action 类似于 mutation，不同在于：Action 提交的是 mutation，而不是直接变更状态；Action 可以包含任意异步操作。
Vuex的Module特性
Module 可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。
const moduleA = { state: { ... }, mutations: { ... }, actions: { ... }, getters: { ... } } const moduleB = { state: { ... }, mutations: { ... }, actions: { ... } } const store = new Vuex.Store({ modules: { a: moduleA, b: moduleB })
17. 怎么进行表单校验
表单验证
对必填项校验，在表单控件里写required属性
对数据格式校验，js的正则表达式RegExp产品上架功能
产品下架功能
前端访问/product/offline接口，携带了id:1。在后台接口里，获取前端传递的参数1，拼接到sql语句里，将这条sql语句发给数据库执行。update jz_product set status=‘下架’ where id=9445;
update jz_product set name=‘1’,productCategoryId=9443,photo=‘1’,
description:‘1’
where id=1;
18. foreach和map的区别
一、相同点：
都是循环遍历数组中的每一项
forEach和map方法里每次执行匿名函数都支持3个参数，参数分别是item（当前每一项）、index（索引值）、arr（原数组）
匿名函数中的this都是指向window
只能遍历数组array.map(function(item,index,arr){},this)
Array.forEach(function(item,index,arr){},this)
二、区别：
1.forEach()
没有返回值。forEach()方法不会返回执行结果，而是undefined。也就是说，forEach()会修改原来的数组
2.map()
map()方法会得到一个新的数组并返回。不会改变原数组
有返回值，可以return 出来。
19. 连接两个字符串
一、使用连接符 “+” 把要连接的字符串连起来
var a = ‘java’
var b = a + ‘script’
只连接100个以下的字符串建议用这种方法最方便二、使用数组的 join 方法连接字符串
var arr = [‘hello’,‘java’,‘script’]
var str = arr.join("")
比第一种消耗更少的资源，速度也更快三、使用模板字符串，以反引号（ ` ）标识
var a = ‘java’
var b = hello ${a}script四、使用 JavaScript concat() 方法连接字符串
var a = ‘java’
var b = ‘script’var str = a.concat(b)
20. HTTP的几种请求方法用途?
1.1.什么是HTTP 协议？
HTTP : Hyper Text Transfer Protocol 超文本传输协议
1.2.HTTP 协议的作用HTTP 最大的作用就是确定了请求和响应数据的格式，
请求报文：浏览器发送给服务器的数据；响应报文：服务器返回给浏览器的数据。
1.3 HTTP 协议的组成HTTP 协议由请求和响应两部分构成，请求是由客户端往服务器传输数据，相应是由服务器往客户端传输数据.
**1、Get方法：**发送一个请求来取得服务器上的某一资源
特征：没有请求体
请求参数附着在URL 地址后面。
请求参数在浏览器地址栏能够直接被看到，存在安全隐患。
在URL 地址后面携带请求参数，数据容量非常有限。如果数据量大，那么超出容量的数据会丢失。
从报文角度分析，请求参数是在请求行中携带的，因为访问地址在请求行。**2、Post方法：**向URL指定的资源提交数据或附加新的数据
特征：有请求体
请求参数放在请求体中
请求体发送数据的大小没有限制
可以发送各种不同类型的数据
从报文角度分析，请求参数是在请求体中携带
由于请求体参数是放在请求体中，所以浏览器地址栏看不到**3、Put方法：**跟Post方法很像，也是向服务器提交数据，但是，Put指向了资源在服务器上的位置，而Post没有
4、Head方法：只请求页面的首部
**5、Delete方法：**删除服务器上的某资源
**6、Options方法：**它用于获取当前URL所支持的方法。如果请求成功，会有一个Allow的头包含类似“Get,Post”这样的信息
**7、Trace方法：**Trace方法被用于激发一个远程的，应用层的请求消息回路
8、Connect方法：把请求连接转换到透明的TCP/IP通道
21. HTTP状态码及其含义?
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UtnQo19E-1636464616066)(C:/Users/yang/Pictures/typora图片/image-20211020193605852.png)]
说说你知道的状态码⭐⭐⭐⭐⭐
- 2开头的表示成功
- 一般见到的就是200
- 3开头的表示重定向
- 301永久重定向
- 302临时重定向
- 304表示可以在缓存中取数据（协商缓存）
- 4开头表示客户端错误
- 403跨域
- 404请求资源不存在
- 5开头表示服务端错误
- 500
22. HTML语义化的理解?
<基本上都是围绕着几个主要的标签，像标题（H1~H6）、列表（li）、强调（strong em）等等>
根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。
- 用正确的标签做正确的事情！
- html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；
- 在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的。
- 搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。
- 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
23. display: none;与visibility: hidden;的区别?
很多前端的同学认为visibility: hidden和display: none的区别仅仅在于display: none隐藏后的元素不占据任何空间，而visibility: hidden隐藏后的元素空间依旧保留 ，实际上没那么简单，visibility是一个非常有故事性的属性
1、visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。这个和display: none有着质的区别
2、visibility: hidden不会影响计数器的计数，如图所示，visibility: hidden虽然让一个元素不见了，但是其计数器仍在运行。这和display: none完全不一样
3、CSS3的transition支持visibility属性，但是并不支持display，由于transition可以延迟执行，因此可以配合visibility使用纯css实现hover延时显示效果。提高用户体验。
24. 为什么要初始化CSS样式?
因为浏览器的兼容性，每个浏览器设计时都有自己的特性，因此在解析标签的时候就产生一些差异，因此显示页面的时候就会出现微小的差异。
25. display 有哪些值?说明他们的作用?
block 此元素将显示为块级元素，此元素前后会带有换行符。
none 此元素不会被显示。
inline-block 行内块元素。
list-item 此元素会作为列表显示。
table 此元素会作为块级表格来显示
inherit 规定应该从父元素继承 display 属性的值
26. 介绍下flex。
Flex 布局，可以简便、完整、响应式地实现各种页面布局
任何一个容器都可以指定为 Flex 布局。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）
伸缩盒布局用于解决块元素在x轴以及y轴上排列的问题
核心概念：主轴，交叉轴，伸缩盒容器，伸缩盒元素
伸缩盒容器规则：
display、flex-direction、flex-wrap、flex-flow、justify-content、align-items
伸缩盒元素规则：
flex-grow、flex-shrink、flex-basis、flex
27. 介绍js有哪些内置对象?
1.数据封装类对象: Object、Array、Boolean、Number和String
2.其他对象:Function、Arguments、Math、Date、RegExp、ErrorJavaScript
28. 原型,原型链?有什么特点?
1.JS中每个构造函数都存在有一个原型对象属性prototype。并且所有函数的默认原型都是Object的实例。
2.每个继承父函数的子函数的对象都包含一个内部属性____proto____。该属性包含一个指针，指向父函数的prototype。若父函数的原型对象的_proto_属性为再上一层函数。在此过程中就形成了原型链。
3.原型链实现了继承。原型链存在两个问题：a 包含引用类型值的原型属性会被所有实例共享。b 在创建子类型时，无法向超类型的构造函数中传递参数。
每个构造函数都有一个prototype原型对象，原型有一个constructor属性指回构造函数，而实例有一个____proto____内部指针指向原型。如果原型是另一个类型的实例呢？那就意味着这个原型本身有一个____proto____内部指针指向另一个原型，相应地另一个原型也有一个指针指向另一个构造函数。这样就在实例和原型之间构造了一条原型链。这就是原型链的基本构想。原型中包含的引用值会在所有实例间共享
29. 请解释什么是事件代理?
事件代理，俗地来讲，就是把一个元素响应事件（click、keydown…）的函数委托到另一个元素 事件流的都会经过三个阶段：捕获阶段 -> 目标阶段 -> 冒泡阶段，而事件委托就是在冒泡阶段完成事件委托，会把一个或者一组元素的事件委托到它的父层或者更外层元素上，真正绑定事件的是外层元素，而不是目标元素 当事件响应到目标元素上时，会通过事件冒泡机制从而触发它的外层元素的绑定事件上，然后在外层元素上去执行函数
什么是DOM事件流？什么是事件委托⭐⭐⭐⭐⭐
DOM事件流
分为三个阶段
捕获阶段
目标阶段
冒泡阶段
在addeventListener()的第三个参数(useCapture)设为true，就会在捕获阶段运行，默认是false冒泡
事件委托
利用冒泡原理（子向父一层层穿透），把事件绑定到父元素中，以实现事件委托事件冒泡和事件捕捉有什么区别⭐⭐⭐⭐⭐
- 事件冒泡
- 在addEventListener中的第三属性useCapture设置为false（默认）
- 从下至上（儿子至祖宗）执行
- 事件捕捉
- 在addEventListener中的第三属性useCapture设置为true
- 从上至下（祖宗到儿子）执行
<
最低0.47元/天 解锁文章
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
