HTML
行内元素块级元素空元素
行内元素:span img input...
块级元素: div footer header section p h1...h6 ...
空元素:br hr ...
元素之间的转换
<html>
<head>
<style>
div{
display:inline; //转换为行内元素 不独占一行,且不能设置宽高的
display:inline-block;//转换为行内块级元素 不独占一行 ,可以设置宽高
display:block;//转换为块级元素 独占一行,可以设置宽高
}
</style>
</head>
</html>
link和@import区别
区别一:link先有,后有@import (兼容性link比@import兼容)
区别二:加载顺序,浏览器先加载标签link后加载@import
<html>
<head>
<link>
<style>
@import "a.css";
</style>
</head>
</html>
标签之间的区别
title和h1的区别:
定义:
title:概括了网站信息,可以告诉搜索引擎或者用户关于这个网站的内容主题是什么
h1:文章主题内容,告诉搜索引擎我们网页内容最主要是什么
区别:
title是显示在网页的标题上,h1是显示在网页内容上
title比h1添加的重要对于seo的了解 (网站的logo都是用h1包裹的)
b与strong的区别:
定义:
b:实体标签,用来给文字加粗的
strong:逻辑标签,用来加强字符语气
区别:b标签只有加粗的样式,没有实际含义
strong表示标签内字符比较重要,用以强调
i与em的区别:
定义:
i:是一个实体标签,用来做文字倾斜的
em:是逻辑标签,用来强调文字内容的
区别:
i只是一个倾斜标签,没有实体含义 (i大多数用于字体图标上)
em表示标签内字符重要,用于强调 (em则用于专业术语上如医药、生物)
img中title和alt区别:
定义:
title:鼠标移入到图片显示的值
alt:图片无法加载显示的值
区别:
在seo的层面上,搜索引擎抓取不到图片的,所以前端在写img标签的时候,为了增加seo的效果,增强alt属性来描述图片的主题内容。
png、jpg、git这些图片格式什么时候用
定义:
png:无损压缩,尺寸体积要比jpg/jpen的大,适合做小图标
jpg:采用压缩算法,有一点失帧,比png体积小(用于中大型图片)
git:一般做动图的
webp:同时支持有损或无损压缩,相同质量的图片,webp具有更小的体积,兼容性不好
<html>
<head>
<style></style>
</head>
<body>
<img title="这是一张图片" alt="这是alt">
</body>
</html>
CSS
CSS盒子模型
css盒子模型有:标准盒子模型、IE盒子模型
css的盒子模型区别:
标准盒子模型:margin、border、padding、content
IE盒子模型:margin、content(border+padding+content)
如何转换盒子模型:
通过css来进行转盒子模型
*{
box-sizing:border-box;//IE盒子模型
box-sizing:content-box;//标准盒子模型
}
line-height和height的区别
line-height是每一行文字的高,如果文字换行则整个盒子高度会增大(行数*行高)
height是一个死值,就是这个盒子的高度
CSS选择器
CSS选择符:
通配(*)
id选择器(#)
类选择器(.)
标签选择器(div、p、sapn...)
相邻选择器(+ 下一个兄弟)
后代选择器(ul li)选中ul的所有li元素
子元素选择器(>)
属性选择器(div[background:red])
*{
ul li + li{//这是排除第一个li元素,选择剩下的所有li元素
background:red;
}
}
CSS属性继承
文字系列:font-size、color、line-height、text-aling...
不可继承属性:border、padding、margin...
CSS优先级算法如何计算
优先级比较:@important>内联样式>id>class>标签>通配
CSS权重计算:
第一:内联样式style 权重值:1000
第二:id选择器 权重值:100
第三:类选择器 权重值:10
第四:标签&伪元素 权重值:1
第五:统配、>、+ 权重值:0
CSS画个三角形
用border来画
transparent :颜色透明
div{
width:0;
height:0;
border-left:100px solid #ccc;
border-right:100px solid transparent;
border-top:100px solid transparent;
border-bottom:100px solid transparent;
}
三角形在那哪个方向哪个方向就不透明
盒子垂直居中
<div class="container">
<div class="main"></div>
</div>
第一种方法:flex布局来实现
.container{
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height:300px;
border: 1px solid black;
}
.main{
background: red;
}
第二种方法:
.container{
position: relative;
width: 300px;
height:300px;
border: 1px solid black;
}
.main{
background: red;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
display有哪些值
none:隐藏元素
block:将元素转换为块元素
inline:将元素转换为内联元素
inline-block:建元素转换为行内块级元素
table:将元素用表格的形式来显示
BFC规范
BFC就是页面上一个隔离的独立容器,容器里面的子元素不会影响外面的元素
1.BFC:就是块级格式化上下文
2.BFC原则:如果一个元素具有BFC,那么内部元素在怎么弄,都不会影响外面的元素。
3.如何触发BFC:
float的值为非none
overflow的值为非visible
display的值为:inline-block、table-cell...
position的值为:absoute,fixed
清除浮动的方式
1.触发BFC来请除浮动(overflow:hidden)
2.多创建一个盒子,添加样式:clear:both;
3.通过伪元素来实现:after
div:after{
content:"";
display:block;
clear:both;
}
CSS定位
通过position属性来定位
static:没有定位
fixed:固定定位,相对于浏览器窗口进行定位
relative:相对于自身定位,不脱离文档流
absolute:相对于第一个有relative的父元素定位,脱离文档流
relative和absolute区别
1.relative不脱离文档流 ,absolute脱离文档流
2.relative相对于自身定位,absolute相对于第一个有relative的父元素
3.relative如果有left、right、top、bottom只有left、top存在
absolute如果有left、right、top、bottom都可以存在
双飞翼布局
定义:左右
<html>
<head>
<style>
*{
margin:0;
padding:0;
}
.container{
width:100vw;
height:100vh;
}
.container>div{
float:left;
}
.left{
margin-left:-100%;
width:200px;
height:100vh;
background:red;
}
.conter{
width:100%;
background:pink;
}
.right{
margin-left:-200px;
width:200px;
height:100vh;
background:blue;
}
</style>
</head>
<body>
<div class="container">
<div class="conter"> conter</div>
<div class="left"> left</div>
<div class="right"> right</div>
</div>
</body>
</html>
CSS reset
reset.css 是一个css文件,用来重置css样式
Normalize.css 为了增强跨浏览器渲染的一致性,重置css样式
CSS sprite
1.是什么
把多个小图标合并成一个大图片
2.优缺点
优点:减少了http请求的次数,提升了性能;
缺点:维护比较差(例如图片位置进行修改或者宽高进行修改)
display:none and visibility:hidden
display:none:是不占用位置的
visibility:hidden ;虽然隐藏了但是占用位置
opacity和rgba
共同性:实现透明效果
1.opacity 取值范围是0到1之间,0表示完全透明,1表示不透明
2.rgba r代表红色,g表示绿色,b表示蓝色,a也是0-1之间
区别:opacity会继承父元素的opacity属性,而RGBA设置的元素的后代元素不会继承不透明的属性
JavaScript
JS延迟加载
async defer
<script async type="" src="1.js"></script>
<script defer type="" src="1.js"></script>
defer:等html全部解析完成,才会加载js代码,顺序执行js脚本。
async:async是和html解析同步完成的,不是顺序执行js脚本,谁先加载完成谁先执行。
JS数据类型
基本类型:String、number、boolean、undefined、null、symbol、bigint
引用类型:object (array function object)
NaN 是一个数值类型 具体不知道 如 undefined+1 就是 NaN
null和undefined的区别
1.作者在设计js的时候先设计了null(最初设计js的时候借鉴了java)
2.null会被隐试转换为0,很不容易发现错误
3.先有null后有undefined。出来undefined是为了填补之前的错误
具体的区别:javascript的最初版本是这样区分的:null是一个表示“无”的对象(空对象指针),转为数值为0,undefined是一个表示“无”的原始值,转换为数值是NaN。
==和===区别
==:比较的是值
string==number||boolean||number||...都会隐式转换
通过valueOf转换(valueOf()方法通常由JavaScript在后台自动调用)
===:比较的是值和类型
JS微任务和宏任务
1.js是单线程的语言。
2.js代码执行流程:同步任务执行完==》事件循环
事件循环(微任务、宏任务)
同步的任务都执行完了,才会执行事件循环里面,进入事件循环:请求、定时器、事件...
微任务:promise.then
宏任务:setTimeout..
要执行宏任务的前提是清空了微任务。
setTimeout(function(){
console.log(5)
},1000)
new Promose((reslove)=>{
console.log(2)
reslove()
}).then(()=>{
console.log(3)
}).then(()=>{
console.log(4)
})
console.log(1);
打印结果是:2 1 3 4 5
JS作用域
1.除了函数外,js是没有块级作用域
2.作用域链:内部可以访问外部的变量,外部不可以访问内部的变量。
变量优先访问内部变量,内部没有在向外找。
3.注意声明变量是var还是没有写如(b=0 =》window.b=0)
4.js有变量提升的机制(变量悬挂声明)
5.优先级:声明变量》声明普通函数》参数》变量提升
function fun(a){
var a=10;
function a(){}
console.log(a); //打印的值是 10
}
function c(){
var b = 1;
function a(){
console.log(b);
var b= 2;
console.log(b);
}
a();
console.log(b);
}
c();
执行结果:undefined 2 1
随机数
//生成n位数字字符串
function randomNum(n){
let res = ''
for(let i=0;i<n;i++){
res += Math.floor(Math.random()*10);
}
return res;
}
//生成n位数字字母混合得字符串
function generateMixed(n){
let chars = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
let res = '';
for(let i=0;i<n;i++){
let id = Math.floor(Math.random()*36);
res += chars[id]
}
return res;
}
闭包
闭包:本质就是上级作用域内变量的生命周期,因为被下级作用域内引用,而没有被释放。就导致上级作用域内的变量,等到下级作用域执行完以后才正常得到释放。
优点:
可以访问外部函数的局部变量
缺点:
变量会驻留内存中,造成内存损耗问题
内存泄漏【ie】
function fun(){
let a =10;
return function(){
console.log(a)
}
}
fun()();
原型链+this指向
function Foo(){
getName = function(){console.log(1)}//注意是全局 window.
return this;//this是指向window
}
Foo.getName = function(){console.log(2)}
Foo.prototype.getName = function(){console,log(3)}
var getName = function(){console,log(4)}
function getName(){
console.log(5)
}
Foo.getName(); //2
getName(); //4
Foo().getName();//1
//这里调用了顶掉了var getName 。。。
//getName = function(){console.log(1)}//注意是全局 window.
getName();//1
new Foo().getName();//3
-------------------------------------------------
var o ={
a:10,
b:{
fn:function(){
console.log(this.a);//undefine
console.log(this)//指向b
}
}
}
o.b.fn();
JS判断是不是数组
let a= [1,2,3]
let b= "124"
1.通过 isArray 来判断
console.log(Array.isArray(a)) //true
console.log(Array.isArray(b)) //false
2.通过 instanceof
console.log(a instanceof Array) //true
3.通过原型
console.log(Object.prototype.toString.call(a).indexOf('Array')>-1)//true
4.isPrototypeof
console.log(Array.prototype.isPrototypeof(a))//true
5.constructor
console.log(a.constructor.toString().indexOf('Array')>-1)//true
slice是干嘛的,splice会不会改变原数组
1.slice 是用来截取数组的但是不会改变原数组
const arr = ['a', 'b', 'c', 'd', 'e', 'f'];
arr.slice(); // 无参数时,截取所有的元素。
arr.slice(2); // 从第二个值开始提取,直到末尾
arr.slice(-2); // 提取最后两个元素 负数会将其与长度相加,-2+6=4
arr.slice(2, 4); // 提取从第二个到第四个之间的元素(不包括第四个元素)
arr.slice(4, 2); // 空
2.splice:功能有:插入、删除、替换 (会改变原数组)
返回删除的数组
var arr1 = ['a', 'b', 'c', 'd', 'e', 'f'];
arr1.splice(1); //从第index为1的位置开始,删除元素
arr2.splice(-2); //删除最后两个元素,和slice同样的思想。
arr3.splice(1, 3); //从第index为1的位置开始删除元素,一共删除三个元素
// 增加系列
arr4.splice(1,0,'g','h') //纯增加情况
//变更的情况就是 先删除再增加,即替换
arr4.splice(1, 3, 'js', 'vue');//删除+增加 == 更改
数组去重
var arr = [1,1,2,2,3,3]
1.new Set()
console.log(Array.from(new Set(arr)))
console.log([new Set(arr)])
2.indexOf
function unqiue(arr){
var array=[];
for(let i =0;i<arr.length;i++){
if(array.indexOf(arr[i])==-1){
array.push(arr[i])
}
}
return array;
}
多维数组找最大值
let arr =[
[3,2,5,2],
[36,5,3,0],
[36,58,2]
]
function funAarry(arr){
var ar = [];
arr.forEach((item,index)=>{
ar.push(Math.max(...item))
})
return ar;
}
给字符串新增方法
String.prototype.addPrefix = function(str){
return str+this
}
console.log("world".addPrefix('hello'))//helloworld
找出字符串出现最多次数字符
let str = 'aabbccddsssssaaassss'
var obj = {};
for(let i =0;i<str.length;i++){
let char = str.charAt(i);//charAt方法可返回指定位置的字符。
if(obj[char]){
obj[char]++;
}else{
obj[char]=1;
}
}
var max =0;
for(let key in obj){
if(max<obj[key]){
max = obj[key]
}
}
for(let key in obj){
if(obj[key]==max){
console.log("出现最多的字符是"+key)
console.log("出现的次数是"+max)
}
}
new操作符具体做了什么
1.创建了一个空的对象
2.将空对象的原型,指向于构造函数的原型
3.将空对象作为构造函数的上下文(改变this的指向)
4.对构造函数有返回值的处理判断
function create(fn,...args){
//创建一个空对象
let obj={}
//将空对象的原型,指向于构造函数的原型
Object.setPrototypeOf(obj,fn.prototype)
//将空对象作为构造函数的上下文 改变this指向
let result = fn.apply(obj,args);
//对构造函数有值返回处理判断
return result instanceof Obejct ? result :obj;
}
原型链
1.原型可以解决什么问题
对象属性共享和共享方法
2.谁有原型
函数有:prototype
对象拥有:_proto_
3.对象查找属性或者方法的顺序
先在对象本身找-》构造函数中找=》对象的原型=》构造函数的原型中=》当前原型的原型中查找
4.原型链
就是把原型串联起来,原型链的最顶端是null
继承
1.ES6继承
class Parent{
constructor(){
this.age=18;
}
}
class Child extends Parent{
constructor(){
super();//继承要添加这不然会报错
this.name="kun"
}
}
let k = new Child()
console.log(k,k.name,k.age)
2.原型链继承
function Parent(){
this.age =20
}
function Child(){
this.name="kun"
}
Child.prototype = new Parent();
let k = new Child();
console.log(k,k.name,k.age)
3.借用构造函数
function Parent(){
this.age =20
}
function Child(){
this.name="kun"
Parent.call(this)
}
let k = new Child();
console.log(k,k.name,k.age)
call、apply、bind区别
共同的:功能一样 改变函数体内this指向
语法:函数.call()、函数.apply、函数.bing()
区别:
1.call、apply会立即执行,bing返回的是一个函数需要加()来执行
2.参数不同:apply第二个参数是数组,call和bing有多个参数需要挨个写 (fn.call(obj,1,2) fn.apply(obj,[1,2]))
场景:
1.let arr =[1,2,3,500,56,5]
console.log(Math.max.apply(null,arr))
2.
sort
定义:针对于数组的元素进行排序,并返回数组,默认排序是根据字符串unicode码点
let arr = [12,2,'13',11,111,24]
let arr1 = arr.sort(function(a,b){
return a-b;//数组从小到大排序
return b-a;//数组从大到小排序
})
let arr = [
{name:123,age:1},
{name:321,age:3},
{name:153,age:2},
]
function compare(age){
return function(a,b){
let v1 =a[age]
let v2 = b[age]
return v1-v2
}
}
let k2 =arr.sort(compare('age')) //对其从大到小排序
深拷贝和浅拷贝
共同点:复制
1.浅拷贝:只复制引用,而未复制真正的值 (共用同一个地址)
//浅拷贝
let arr1=[1,2,3,5,4,6,5]
let arr2= arr1;
console.log(arr1,arr2)
arr1[0]=0;
arr2[1]=0;
console.log(arr1,arr2)
一个数组发生改变,则另一个数组也会发生改变
let obj1={a:1,b:2}
let obj2= Object.assign(obj1)
2.深拷贝:是复制真正的值 互不干扰
let obj1 ={
a:1,
n:2
}
let obj2 = JSON.parse(JSON.stringify(obj1))
JSON.parse(JSON.stringify(obj))深拷贝的问题
1、如果obj里面存在时间对象,JSON.parse(JSON.stringify(obj))之后,时间对象变成了字符串。
2、如果obj里有RegExp、Error对象,则序列化的结果将只得到空对象。
3、如果obj里有函数,undefined,则序列化的结果会把函数, undefined丢失。
4、如果obj里有NaN、Infinity和-Infinity,则序列化的结果会变成null。
5、JSON.stringify()只能序列化对象的可枚举的自有属性。如果obj中的对象是有构造函数生成的, 则使用JSON.parse(JSON.stringify(obj))深拷贝后,会丢弃对象的constructor。
6、如果对象中存在循环引用的情况也无法正确实现深拷贝。
3.递归实现深拷贝:
function copyObj(obj){
if(Array.isArray(obj)){
let newObj=[]
}else{
let newObj={}
}
for(let key in obj){
if(typeof obj[key]=="object"){
newObj[key]=copyObj(obj[key])
}else{
newObj[key] = obj[key]
}
}
return newObj;
}
localStorage、sessionStorage、Cookie
localStorage.setItem("kun",123);
sessionStorage.setItem("kun",123);
let date = new Date();
let time = 1000*60*60*24;
time = date.getTime()+time
document.cookie='name=kun;expires='+date.toUTCString()+"" //expires是设置过期时间
共同点:在客户端存放数据
区别:
1.数据存放有效期
sessionStorage:浏览器当前窗口有效,关闭当前页面就失去数据
localStorage:一直保存在浏览器中,不会因为页面关闭而失去数据,也叫持久化存储
cookie:只在设置的cookie过期时间之前有效。即使浏览器窗口关闭也有效
2.sessionStorage、localStorage 不可以设置过期时间
3.存储大小的限制:
cookie存储不能超过4k
sessionStorage、localStorage不能超过5M
浏览器的不同也会有一些变化
H5/C3面试题
什么是语义化标签
::before和:after中双冒号和单冒号的区别
伪类
伪类是添加到选择器的关键字,用于指定所选元素的特殊状态,修改特殊状态下的样式。
这是MDN文档对伪类的定义。
比如设置鼠标悬浮在按钮元素上时,设置背景色为红底白字。
button:hover{
background:red;
color:white
}
伪元素
伪元素是一个附加至选择器末的关键词,允许你对被选择元素的特定部分修改样式。
如何关闭IOS键盘首字母自动大写
在input的输入筐添加属性
怎么让Chrome支持小于12px文字
Chrome的默认字体大小是16px 每个浏览器的字体大小都不一样
可以通过css3 缩放来实现
div span{
display:inline-block;
-webkit--transform:scale(0.8)
}
rem和em区别
IOS系统中元素被触摸时产生的半透明灰色遮罩去除
通过css
表单输入框placeholder的颜色修改
禁止ios长按触发系统的菜单,禁止长按下载图片
禁止用户选中文字
自适应
rem只是一个单位不属于自适应的核心
单纯的使用rem是没有用的
自适应最终就是改变html的font-size来使得页面自适应
方案:
1.淘宝无限适配【移动端】:淘宝无限适配+布局单位使用rem
function flexible(){
window.onresize=function(){ //监听页面放大缩小
///获取当前可视页面的宽度
let doc = document.documentElement;
let w= doucument.documentElement.clientWidth/10
doc.style.fontSize = w+"px";
}
}
响应式
1.是什么
一个URL可以响应多端
通过媒体查询来调整页面的内容和一些布局
@media only screen and (max-width:1000px){ //大于1000px
ul li:last-child{
display:none;
}
}
only:可以排除不支持媒体查询的浏览器
screen:设备类型
max-width|max-height
min-width|min-height
2.响应式图片 (性能优化)
<picture>
<source srcset="2.jpg" media="(min-width:1000px)" >
<source srcset="3.jpg" media="(min-width:700px)" >
<img srcset="1.jpg">
</picture>
网页布局方案
1.什么情况下采用响应式布局
数据不是特别大,用户量不是特别大,纯展示类的项目适合响应式布局
列如:公司官网、专题页面
特别追求性能的,不太适合响应式
2.pc+移动端应该做什么样的布局方案
注意:访问量还可以或者比较大,类似于淘宝网
移动端是一套,会使用自适应的布局方式
PC是一套,会加一点响应式
3.PC的设计图
ui:1980
笔记本电脑:1280
ui图的宽度和电脑的宽度不对应怎么办?
1.把ui图进行等比缩放,缩放成和电脑一样的尺寸
2.换个1980的电脑
4.移动端的设计图
宽度:750
因为750的设计图/2就是375,正好是iphone6的尺寸,我们要把iphone6的尺寸作为基准点
ES6
var、let 、const
共同的:都是可以声明变量的
区别一:
var 具有变量提升的机制
let和const没有变量提升机制
区别二:
var可以多次声明同一个变量
let和const不可以多次声明同一个变量
区别三:
var、let声明变量
const声明常量
var和let声明的变量可以再次赋值,但是const不可以再次赋值了
区别四:
var声明的变量没有自身的作用域
let和const声明的变量有自身的作用域
作用域考题
console.log(str)//undefined
var str ='hello'
console.log(num) //报错
let num =10
---。
function demo(){
var n=2;
if(true){
var n =3;
}
console.log(n)//2
}
---。
const obj ={
a:123
}
obj.a=111
console.log(obj) // {a:111}
可以修改里面的值
对象合并
const a ={a:1,b:3}
const b ={b:2,c:4}
方式一:
let obj = Object.assign(a,b);//{a:1,b:2,c:4}
方式二:
let obj = {...a,...b}////{a:1,b:2,c:4}
方式三:
function extend(target,soure){
for(var key in soure ){
target[key] = soure[key]
}
return target
}
箭头函数和普通函数区别
1.this指向问题
箭头函数中的我this只在箭头函数定义时就决定的,而且不可修改的(call,apply,bing)
箭头函数的this指向定义时候,外层第一个普通函数的this
2.箭头函数不能new(不能当作构造函数)
3.箭头函数prototype是undefined
4.箭头函数是没有arguments
Promise有几种状态
1.三种状态:
1.pending 进行中
2.fulfilled 已成功
2.rejected 已失败
2.Promise的含义:是异步编程的一种解决方案,解决了回调地狱的问题
3.
Promise.resolve('foo').then(ress=>{
console.log(res);
}).then(()=>{
console.log(1)
}).then(()=>{
console.log(2)
}).then(()=>{
console.log(3)
}).then(()=>{
console.log(4)
}).then(()=>{
console.log(5)
})
结果:foo 1 2 3 4 5
4.async await
function getData(){
return new Promise((resolve,reject)=>{
resolve("1")
})
async function(){
let a= await getData();
console.log(a) // 1
}
function();
}
find和filter的区别
1.返回的内容不同
filter返回是新数组
find 返回具体的内容
2.
find:匹配到第一个即返回
filter:返回一个整体(每一个匹配到的都返回)
some和every的区别
let arr =[6,4,3,5,2]
let a = arr.some(val=>{
return val>4
})
let a = arr.every(val=>{
return val>4
})
console.log(a,b)// true false
some==>如果有一项匹配则返回true
everr==》全部匹配才返回true
Vue
vue2生命周期
1.有哪些生命周期
系统自带:
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestory
destoryed
2.一旦进入到页面或者组件,会执行哪些生命周期:
beforeCreate
created
beforeMount
mounted
3.那个阶段有$el,在哪个阶段有$data
beforeCreate 啥也没有
created 有data没有el
beforeMount 有data没有el
mounted 都有
4.如果加入了keep-alive会多两个生命周期
activated deactivated
5.如果加入了keep-alive,第一次进入组件会执行哪些生命
6.如果加入了keep-alive,第二次或者第n次入组件会执行哪些生命