3

最新推荐文章于 2024-03-10 20:09:06 发布

以南的地方是海

最新推荐文章于 2024-03-10 20:09:06 发布

阅读量388

点赞数 1

分类专栏：面试

本文链接：https://blog.csdn.net/lihuijuan_1/article/details/89608120

版权

面试专栏收录该内容

3 篇文章 0 订阅

订阅专栏

HTML

什么是h5语义化，你知道的h5标签都有哪些？

根据内容的结构选择合适的标签，便于开发者阅读和写出更优雅的代码
在没有css样式的时候，也能很好得呈现页面的结构和代码的结构，即裸奔时更好看
便于开发和维护：语义化具有可读性，遵循w3c标准，减少差异
方便于设备的读取解析
利于SEO：便于爬虫的搜索，爬虫是依赖标签来确定上下文和关键字的权重
提升用户体验，比如title,alt
article,video ,canvas,footer ,meter,audio

CSS

. css的选择器（属性选择器，伪类选择器，）

标签选择器 p、通用选择器*、后代选择器 div .box 、子选择器 div>p
、伪类选择器 a:hover、群组选择器 .box1,.box2,li、兄弟选择器h1+p、属性选择器input[type=hidden]

div[title]、div[class="box7"]、
div[class^="aa"]、div[class$="aa"]、div[class*="aa"]
div[class~='aa'],class里含有aa这个单词，而且这个单词还要和其他的单词以空格来隔开
------------------伪类选择器----------------------------------------
       .box div:first-child{
			background: red;
		}
		.box div:last-child{
			background: blue;
		}
		.box div:nth-child(odd){  //奇数
			background: yellow;
		}
		.box div:nth-child(even){   //偶数
			background: pink;
		}
		.box div:nth-child(2n){
			background: palevioletred;
		}
		.box div:nth-child(-2n+1){ //倒数第一个
			background: palevioletred;
		}
		.box div:nth-child(1){   //从1开始
			background: palevioletred;
		}

3 三栏布局

 <p class="container">
      <p class="left"></p>   
      <p class="right"></p>   
      <p class="main"></p>  
   </p>

1. float

.left{
   width: 200px;
   height: 100px;
   float: left;
   background: rebeccapurple
}
.right{
   width: 200px;
   height: 100px;
   float: right;
   background: rosybrown
}
.main{
   height: 200px;
   background: royalblue;
   margin-left: 200px;
   margin-right: 200px
}
优点:简单
缺点：中间是最后才加载的，如果元素较多的话，影响体验

2. BFC ：BFC不会和浮动元素重叠，将main设为BFC模式

 .left{
   width: 200px;
   height: 100px;
   float: left;
   background: rebeccapurple
}
.right{
   width: 200px;
   height: 100px;
   float: right;
   background: rosybrown
}
.main{
   height: 200px;
   background: royalblue;
   overflow: hidden;    //清除浮动
}

3. 圣杯
核心：元素都设为浮动，然后通过margin负值调整，left:-100%,right:-widthpx
处理遮住部分：整体contain设置左右padding，再将。left(right,)position,left:-width,right:-width

 .left{
   float:left;
   width:200px;
   height: 200px;
   margin-left:-100%; 
   position: relative;
   left:-200px;
   background: red;
}
.right{
   float:left;
   width:200px;
   height: 200px;
   margin-left: -200px;
   position: relative;
   right: -200px;
   background: royalblue;
}
.main{
   width: 100%;
   height: 300px;
   float: left;
   background: rebeccapurple;
}
.container{
   padding-left: 200px;
   padding-right:200px;
}

4. 双飞翼
和圣杯布局一样，只是处理中间遮住部分不同，
处理遮住部分：给main里的con设置左右padding，清除main的浮动

 .left{
   float:left;
   width:200px;
   height: 200px;
   margin-left:-100%; 
   background: red;
}
.right{
   float:left;
   width:200px;
   height: 200px;
   margin-left: -200px;
   background: royalblue;
}
.main{
   width: 100%;
   height: 300px;
   float: left;
   background: rebeccapurple;
}
.con{
   padding-left: 200px;
   padding-right:200px;
}
.main::after{
     display: block;
     content: '';
     font-size: 0;
     height: 0;
     clear: both;
     zoom: 1;
}
--------------------html----------------------------------
   <div class="main">
       <div class="con">dsfsdaf</div>
   </div>  
   <div class="left"></div>   
   <div class="right"></div>

5.flex

    .container{
  display: flex;
}
.main{
   height:200px;
   flex-grow: 1;   //多余空间给main,空间不够时，仅缩小left,right
   background: red;
}
.left{
   height: 100px;
   order:-1;   // 因为left显示最左侧，所以order:1
   background: yellow;
   flex:0 1 200px;
}
.right{
   height: 100px;
   background: green;
   flex:0 1 400px;
}

6. 定位absolute

.main{
position:absolute;
left:200px;
right:200px;
}
.left:{
position:absolute;
left：0；
}

水平垂直居中

JavaScript

js的类型，数组的判断方法

1,Array.isArray(0
2,arr instanceof Array
3,arr.constructor==Array
    方法2,3会有误差，在不同的iframe下不共享prototype
    判读为true,也不一定是数组
    function arr(){}
    arr.prototyp=[]
    arr2=new arr()

4,特性判断
5.Object.prototype.toString.call(arr)==='[Object Array]'

你理解的闭包？用途？影响？

闭包：能够访问其他函数内部变量的函数
作用：能够读取其他函数内部的变量，而且能够将变量的值保存在内存中
函数作为返回值，函数作为参数传递。
缺点：因为闭包携带包含它函数的作用域，因此比其他函数占用的内存更多
优点：减少创建全局变量，减少传递给函数的参数量，封闭性
函数执行后，函数执行环境的作用域会被销毁，但是活动对象不会，只有将匿名函数销毁才可以销毁对象，变量设置为null

作为参数
 var max=10
var fn=function(x){
    if(x>max){
       console.log(x);
    }
 }
 (function(f){
    var max=100;
    f(15)  这里max使用10，根据词法作用域，
 })(fn)

function fun(n,o) {
		console.log(o);
		return {
		    fun: function (m) {
			    return fun(n,m);//1,0
            }
		}
    }
    var a = fun(0); //undefined
	a.fun(1);//1
	a.fun(2);//2
	a.fun(3);//3

函数提升和变量提升?

console.log(a)
	function a() {
		return 'this is function';
    }
	console.log(a)
    var a = 10;
	console.log(a);
	var b = 20;
	var b
	console.log(b)

	if(!(c in window)) {
	    var c = 10;
	    console.log('in')
	}
	console.log(c)

数组的去重？所有的js类型

２==true,与=, instanceof检测的是什么
this，call,apply,bind 用call 实现bind

function bind1(obj){
    var that = this;
    var context = Array.prototype.shift().call(arguments);
    var can = Array.prototype.slice().call(arguments);
    return function () {
        that.apply(context,can.concat(arguments))
    }
}

函数作用域，块级作用域，词法作用域

函数内声明的变量在函数体内是可见的

js的代码的执行顺序
正则　命名方式的转换

    const str = 'dom_one'
	const reg = /\_(\w)/g;
	const str1 = str.replace(reg,(str,letter)=>{
		return letter.toUpperCase();
	})
	console.log(str1)

	function toLine(name) {
		return name.replace(/([A-Z])/g,"_$1").toLowerCase();
	}

原型和原型链,继承的几种方法

深拷贝？ `

1,function deep(obj){
   return JSON.parse(JSON.stringify(obj))
}
2.function deep2(obj){
   let objClone=Array.sArrsy(obj)?[]:{};
   if(obj && typeof obj=='Object'){
     for(key in obj){
       if(obj.hasOwnProperty(key)){//判断ojb子元素是否为对象，如果是，递归复制
         objClone[key]=deep2(obj[key])
        }
        objClone[key]=obj[key]  //如果不是，简单复制
     }
   }
   return objClone;
}
3,$.extend
let a=[0,1,[2,3],4],
    b=$.extend(true,[],a);   //true是深拷贝
a[0]=1;
a[2][0]=1;
console.log(a,b);

promise封装ajax

 window.jQuery.ajax=({method,path,body,headers})=>{
    return new Promise((resolve,reject)=>{
       let xhr=new XMLHttpRequest();
       xhr.open(method,path); //配置
       for(const key in headers){
          let value=headers[key]
          xhr.setRequestHeader(key,value);
       }
       xhr.send(body)
       xhr.onreadystatechange=()=>{
          if(xhr.readyState==4){
            if(xhr.status>=200 && xhr.status<=400){
               resolve.call(undefined,xhr.responseText)
            }else if(xhr.status>400){
               reject.call(undefined,xhr)
            }
          }
          
       }
    })
 }
 --------------------使用------------------------
$.ajax({
   method:'POST',
   path:'/xxx',
   body:"username=mtt&password=1",
   headers:{
       "content-type":'application/x-www-form-urlencoded',
       "mataotao":18
   }
}).then(
   (responseText)=>{console.log(responseText);},//成功就调用这个函数
   (request)=>{console.log(request);}//失败就调用这个函数
   )

promise的用法

function xxx(){
  return new Promise((resolve,reject)=>{
     dosomething(...)
     setTimeOut(()=>{
        成功就调用resolve
     },1000)
  })
}
xxx().then(success, fail).then(success, fail).then(success, fail)

设置cookie

服务器向浏览器设置cookie ，Set-Cookie,
浏览器获取cookie

类型转换 2==false×

因为false是1 ，1！=2，转为Number类型

js中的几种遍历

var arr=[1,2,3]
1,for
for(var i =0;i<arr.length;i++){
   console.log(arr[i])
}
优化：将数组的长度用变量存起来，避免多次去获取数组的长度
for(var i =0,len=arr.length;i<len;i++){
   console.log(arr[i])
}
================================================
2.for(var i in arr){
   console.log(arr[i])   //这里的i是下标
}
一般是用来遍历对象的
================================================
3.for... of 
  for(var i of arr){   //这里的i代表数组里面的元素
     console.log(i)
  }
  最简洁、最直接,与forEach()不同的是，它可以正确响应break、continue和return语句
  ================================================
4.forEach
arr.forEach((item,index,arr)=>{
  console.log(item)  //1,2，3
  console.log(index)  //0,1,2
})
比较便捷，可以很容易得到元素或者下标，
但是它是Array提供的方法，其他的不能使用比如（nodeList）
而且return false，不会终止执行，只会跳过
 ================================================
5.some
- arr.some((item,index,arr)=>{
  console.log(item)  //1,2，3
  console.log(index)  //0,1,2
})
一般用于判断是否含有某元素
- arr.some(item=>{
    return item==2  //判断是否有2的元素
 })
 
 ================================================
6.every
- arr.some((item,index,arr)=>{
  console.log(item)  //1,2，3
  console.log(index)  //0,1,2
})
用于判断所有元素是否都符合，如果有一个是false,则不再往下继续判断了，直接返回false
- arr.some(item=>{
    return item>0  //判断所有的元素是否大于0
 })
 ================================================
7.filter
arr.filter(item=>{
    return item>1  //[2,3]
})
================================================
7.map
arr.map(item => { // item为数组的元素
    console.log(item); // 1, 2, 3
    return item * 2; // 返回一个处理过的新数组[2, 4, 6]
})
map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
map() 方法按照原始数组元素顺序依次处理元素。
================================================
8.set=>这个会去重

CORS设置请求头，响应头

es6监听

https://blog.csdn.net/u013707249/article/details/78842602
  Object.defindProperties(obj,{
      get:function(){}
      set:function(){}
   })

https://blog.csdn.net/panyang01/article/details/65471856

VUE

vue 双向绑定的实现

html:
    <input type="text" id="input1">
    <input type="text" id="input2">
js:
    var oInput1 = document.getElementById('input1');
    var oInput2 = document.getElementById('input2');
    var obj = {};
    Object.defineProperties(obj, {
        val1: {
            configurable: true,
            get: function() {
                oInput1.value = 0;
                oInput2.value = 0;
                return 0
            },
            set: function(newValue) {
                oInput2.value = newValue;
            }
        },
        val2: {
            configurable: true,
            get: function() {
                oInput1.value = 0;
                oInput2.value = 0;
                return 0
            },
            set: function(newValue) {
                oInput1.value = newValue;
            }
        }
    })
    oInput1.value = obj.val1;
    oInput1.addEventListener('keyup', function() {
        obj.val1 = oInput1.value;
    }, false);
    oInput2.addEventListener('keyup', function() {
        obj.val2 = oInput2.value;
    }, false);

利用 Object.defineProperties
vue 的生命周期，详述
vue diff算法的实现
虚拟DOM的创建

网络

TCP/IP五层模型

应用层、传输层、网络层、数据链路层、物理层

get post 区别

get 为什么长度限制
域名解析的过程？　三次握手的过程

查找域名对应的IP地址。这一步会依次查找浏览器缓存，系统缓存，路由器缓存，ISPNDS缓存，根域名服务器。

跨域的解决方案
http2 新特性
前端实现同步后端实时发送数据几种方式

算法

数组去重
二分查找？

 function search(arr,left,right,num) {
    if(left>right) {
        return -1;
    }
    var mid = parseInt((left+right)/2);
    if(arr[mid]===num) {
        return mid;
    }else if(arr[mid]>num){
        return search(arr,left,mid-1,num)
    }else {
        return search(arr,mid+1,right,num)
    }
}

排序写一下快排
判断一个数能被６整除
构建一棵树？查找指定的关键字

{
    value: 0,
    children: [
        {
            value:'0-1',
            children...
        },
        ...
    ],
}

反转单链表
            ActList* p;
            ActList* q;
            ActList* r;
            p = head;
            q = head->next;
            head->next = NULL;
            while(q){
                r = q->next;
                q->next = p;
                p = q;
                q = r;
            }
            head = p;

            删除一个链表的节点p怎么做？（前提是你只知道p节点，其他节点包括头节点都不知道）
            p->data = p->next->data;
            p->next = p->next->next;
            free(p->next)

            在p节点之前插入一个节点
            q->next = p->next;
            p->next = q;
            var tmp = p->data;
            p->data = q->data'
            q->data = tmp;

设计模式

以南的地方是海

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
3

HTML什么是h5语义化，你知道的h5标签都有哪些？CSScss的选择器（属性选择器，伪类选择器）div[title]、div[class=“box7”]、div[class^=“aa”]、div[class$=“aa”]、div[class*=“aa”].box div:first-child{background: red;}.box div:last-child{...
复制链接

扫一扫