成都互联网网站建设,网页版游戏排行榜j,智慧城市网站建设,网站 产品原型目 录
一、 HTML
1. .如何理解HTML语义化的#xff1f;
2. HTML标签有哪些#xff1f;
3. Canvas 和SVG的区别
二、CSS
1. BFC是什么#xff1f;
2. 如何实现垂直居中#xff1f;
3. css选择器 优先级如何确定#xff1f;
4. 如何清除浮动#xff1f; 5. …目 录
一、 HTML
1. .如何理解HTML语义化的
2. HTML标签有哪些
3. Canvas 和SVG的区别
二、CSS
1. BFC是什么
2. 如何实现垂直居中
3. css选择器 优先级如何确定
4. 如何清除浮动 5. 盒模型的区别
6. display 的 block、inline 和 inline-block 的区别
7. 对 CSS 工程化的理解
三、扩展
3.1 自适应rem、em、vw的区别
3.2 说一下HTML5 drag API
3.3 预处理器普遍会具备的特性
四、JavaScript
1. 基本类型 2. 检测数据类型的方式
3. null和undefined的区别
4. 如何判断某对象是空对象
5. 原型链是什么
6.this的指向
7. new 做了什么
8.立即执行函数
9.闭包
10. js如何实现类
11. v-if 和v-show 的区别 一、 HTML
1. .如何理解HTML语义化的 语义化标签是写HTML的一种方法论。例如段落用P标题h1--h6内容用main 等等。明确了HTML书写规范适合搜索引擎来检索适合我们阅读利于团队维护。 2. HTML标签有哪些 header、footer、main、video 等等 3. Canvas 和SVG的区别 Canvas 主要是用笔刷来绘制2D图形SVG 使用标签来绘制不规则矢量图的。 相同点都是用来绘制2D图形的。 不同点 Canvas 画的是位图SVG画的是矢量图SVG 节点过多时渲染慢Canvas 性能更好一点但是吧写起来比较复杂SVG支持分层和事件Canvas 不支持但可以用库来实现。 二、CSS
1. BFC是什么 BFC块级格式化上下文。 1. 触发BFC的条件【5个】 浮动元素绝对定位元素行内块元素overflow 值不是visible的块元素/overflow:hedden弹性元素display:flex 2. 解决了什么问题 清除浮动防止垂直方向上的margin合并 2. 如何实现垂直居中 flex布局 【最优先使用次数最多】margin-top:50%translate:50%absolute margin autotable 自带属性div 装成tabledisplaytable 3. css选择器 优先级如何确定 越具体的越优先相同的优先级后面的覆盖前面的有important 的优先级最高 4. 如何清除浮动 4.1 给父元素添加.clearfix .clearfix:after{content:;display:block;clear:both;
} 4.2 给父元素添加overflow:hidden 5. 盒模型的区别 标准盒模型是content-box总宽度widthmarginpaddingborder 第二种是IE盒模型 border-box总宽度就是width。 相同点 都是用来指定宽度 不同点 border-box 更好用 6. display 的 block、inline 和 inline-block 的区别 1block会独占一行多个元素会另起一行可以设置 width、height、margin 和 padding 属性 2inline元素不会独占一行设置 width、height 属性无效。但可以设置水平方向的 margin 和 padding 属性不能设置垂直方向的 padding 和 margin 3inline-block将对象设置为 inline 对象但对象的内容作为block 对象呈现之后的内联对象会被排列在同一行内。 7. 对 CSS 工程化的理解 CSS 工程化是为了解决以下问题 1.宏观设计CSS 代码如何组织、如何拆分、模块结构怎样设计 2.编码优化怎样写出更好的 CSS 3.构建如何处理我的 CSS才能让它的打包结果最优 4.可维护性代码写完了如何最小化它后续的变更成本如何确保任何一个同事都能轻松接手我一般会用到预处理器Less、 Scss 等。 三、扩展
3.1 自适应rem、em、vw的区别 都是相对单位。 不同点 rem相对html绕开了复杂的层级关系em 相对父麻烦vw 可视窗口1% 3.2 说一下HTML5 drag API dragstart事件主体是被拖放元素在开始拖放被拖放元素时触发 darg事件主体是被拖放元素在正在拖放被拖放元素时触发 dragenter事件主体是目标元素在被拖放元素进入某元素时触发 dragover事件主体是目标元素在被拖放在某元素内移动时触发 dragleave事件主体是目标元素在被拖放元素移出目标元素是触 发 drop事件主体是目标元素在目标元素完全接受被拖放元素时触发 dragend事件主体是被拖放元素在整个拖放操作结束时触发。 3.3 预处理器普遍会具备的特性 嵌套代码的能力通过嵌套来反映不同 css 属性之间的层级关系 支持定义 css 变量 提供计算函数 允许对代码片段进行 extend 和 mixin 支持循环语句的使用 支持将 CSS 文件模块化实现复用。 四、JavaScript
1. 基本类型 number、boolean、string、null、undefined、object、symbol、bigint ps: 对象用为空用unll,非对象为空用undefined 2. 检测数据类型的方式 typeof 其中 数组、对象、null 都会被判断为object instanceofconstructorObject.prototype.toString.call() 3. null和undefined的区别 undefined 表示 未定义null表示空对象。 4. 如何判断某对象是空对象 使用JSON 自带的stringify if(JSON.stringify(aObj){}){console.log(aObj,是一个空对象);
} 使用ES6的方法 Object.keys() if(Object.keys(bObj).length0){console.log(bOnb,是空对象);
} 5. 原型链是什么 原型就是一个为对象实例定义了一些公共属性和公共方法的对象模板。 原型链是多个原型的集合或者说 原型链是原型对象创建过程的历史记录。 解决了什么问题 在没有class的情况下实现[继承] 缺点 不支持私有属性。calss 支持。 6.this的指向 简单来说 this 就是 call 的第一个参数 ,箭头函数没有this。 全局作用域指向window方法中指向所属对象 构造函数调用中 指向实例化对象 func(p1,p2) func.call(undefined,p1,p2)obj.child.method(p1,p2) obj.child.method.call(obj.child,p1,p2) var obj {foo: function(){console.log(this) //obj}
}obj.foo() obj.foo() 等价于obj.foo.call(obj),所以这里的this 指向obj 7. new 做了什么 this 是执行上下文中的一个属性它指向最后一次调用这个方法的对象。 创建临时对象/新对象绑定原型指定this临时对象执行构造函数返回临时对象 8.立即执行函数 声明一个匿名函数然后立即执行它。这种做法就是立即执行函数。 立即执行函数是为了创建一个局部变量。 优点兼容性好。 9.闭包 闭包是一种语法特性。 js的所有函数都支持闭包「函数」和「函数内部能访问到的变量」的总和就是一个闭包。 解决了什么问题 避免污染全局环境提供对局部变量的间接访问维持变量使其不会被垃圾回收。 使用不当可能造成内存泄漏。 10. js如何实现类 有两个方法一种是使用原型一种是使用calss class Dog {static kind 狗 // 等价于在 constructor 里写 this.kind 狗constructor(name) {this.name namethis.legsNumber 4// 思考kind 放在哪放在哪都无法实现上面的一样的效果}say(){console.log(汪汪汪~ 我是${this.name}我有${this.legsNumber}条腿。)}run(){console.log(${this.legsNumber}条腿跑起来。)}
}
const d1 new Dog(啸天)
d1.say() 11. v-if 和v-show 的区别 1. 相同点都是控制显示隐藏的。 2. 不同点 1 控制手段不同 v-show 是通过display:none来控制隐藏的dom元素还在v-if 显示隐藏是讲dom元素整个添加或删除。 2 编译过程不同 v-if切换有一个局部编译/卸载的过程切换过程中合适的销毁和重建内部的事件监听和子 组件v-show 只是简单地基于css的切换。 3 编译条件不同 v-if是惰性的如果初始条件为假则什么也不做只有在条件第一次变为真时才开 始局部编译编译被缓存编译被缓存后然后再切换的时候进行局部卸载); v-show是在任何条件下首次条件是否为真都被编译然后被缓存而且DOM 元素保留。 4 性能消耗 v-if有更高的切换消耗v-show有更高的初始渲染消耗。 5适用场景 v-if适合运营条件不大可能改变v-show适合频繁切换。
