在面试初级前端需要知道那些知识

最新推荐文章于 2022-04-14 08:49:14 发布

置顶寒酥_

最新推荐文章于 2022-04-14 08:49:14 发布

阅读量710

点赞数 2

文章标签：面试

本文链接：https://blog.csdn.net/weixin_49115895/article/details/113186824

版权

通过目录查找

第一天
第二天
第三天
第四天
第五天
第六天
第七天

第一天

HTML

1、link与@uimport的区别

从属关系区别

@import是css提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载css文件，还可以定义rss、rel链接属性等
加载顺序区别

加载页面时，link标签引入的css同时被加载，@import引入的css将在页面加载完毕后被加载
兼容性区别

@import是css2.1才有的语法，故只可在IE5+才能识别；link标签作为HTML元素，不存在兼容性的问题
DOM可控制性区别

可以通过JS操作DOM,插入·link标签来改变样式；由于DOM方法是基于文档的，无法使用@import

使用link方式引入

<link href="a.css" rel="stylesheet">

使用@impot引入

<style>
@import url('a.css');
</style>

2、HTML包含的元素

块级(包括行内块)

div
p
ol
ul
li
dd
dt
dl
table
h1～h6
textarea
input
button
img

行内

span
i
b
a
em
s
label

header
aside
section
nav
footer
audio
video
canvas

空标签

br
hr
img
link
meta
input

CSS

1、圣杯布局和双飞翼布局的理解和区别

作用：

圣杯布局和双飞翼布局解决的问题是一样的，就是两边顶宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。
区别：

圣杯布局，为了中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，将左右两个div用相对布局position: relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div。
双飞翼布局，为了中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该子div里用margin-left和margin-right为左右两栏div留出位置。

圣杯布局代码：

<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
</head>
<style>
  body {
    min-width: 550px;  /* 2x leftContent width + rightContent width */
    font-weight: bold;
    font-size: 20px;
  }
 
  #header, #footer {
    background: rgba(29, 27, 27, 0.726);
    text-align: center;
    height: 60px;
    line-height: 60px;
  }
  #footer {
    clear: both;
  }
 
  #container {
    padding-left: 200px;   /* leftContent width */
    padding-right: 150px;  /* rightContent width */
    overflow: hidden;
  }
 
  #container .column {
    position: relative;
    float: left;
    text-align: center;
    height: 300px;
    line-height: 300px;
  }
 
  #center {
    width: 100%;
    background: rgb(206, 201, 201);
  }
 
  #left {
    width: 200px;           /* leftContent width */
    right: 200px;           /* leftContent width */
    margin-left: -100%;
    background: rgba(95, 179, 235, 0.972);
  }
 
  #right {
    width: 150px;           /* rightContent width */
    margin-right: -150px;   /* rightContent width */
    background: rgb(231, 105, 2);
  }
 
</style>
 
<body>
  <div id="header">#header</div>
  <div id="container">
    <div id="center" class="column">#center</div>
    <div id="left" class="column">#left</div>
    <div id="right" class="column">#right</div>
  </div>
  <div id="footer">#footer</div>
 
 
</body>

双飞翼布局代码：

<body>
<div id="hd">header</div> 
  <div id="middle">
    <div id="inside">middle</div>
  </div>
  <div id="left">left</div>
  <div id="right">right</div>
  <div id="footer">footer</div>
</body>

<style>
#hd{
    height:50px;
    background: #666;
    text-align: center;
}
#middle{
    float:left;
    width:100%;/*左栏上去到第一行*/     
    height:100px;
    background:blue;
}
#left{
    float:left;
    width:180px;
    height:100px;
    margin-left:-100%;
    background:#0c9;
}
#right{
    float:left;
    width:200px;
    height:100px;
    margin-left:-200px;
    background:#0c9;
}

/*给内部div添加margin，把内容放到中间栏，其实整个背景还是100%*/ 
#inside{
    margin:0 200px 0 180px;
    height:100px;
}
#footer{  
   clear:both; /*记得清楚浮动*/  
   height:50px;     
   background: #666;    
   text-align: center; 
} 
</style>

2、css新增特性

边框(borders):

border-radius 圆角
box-shadow 盒阴影
border-image 边框图像

背景:

background-size 背景图片的尺寸
background_origin 背景图片的定位区域
background-clip 背景图片的绘制区域

渐变：

linear-gradient 线性渐变
radial-gradient 径向渐变

文本效果;

word-break
word-wrap
text-overflow
text-shadow
text-wrap
text-outline
text-justify

转换：

2D转换属性：

transform
transform-origin
2D转换方法
translate(x,y)
translateX(n)
translateY(n)
rotate(angle)
scale(n)
scaleX(n)
scaleY(n)
rotate(angle)
matrix(n,n,n,n,n,n)

3D转换：

3D转换属性：

transform
transform-origin
transform-style
3D转换方法
translate3d(x,y,z)
translateX(x)
translateY(y)
translateZ(z)
scale3d(x,y,z)
scaleX(x)
scaleY(y)
scaleZ(z)
rotate3d(x,y,z,angle)
rotateX(x)
rotateY(y)
rotateZ(z)
perspective(n)

过渡

transition

动画

@Keyframes规则
animation

弹性盒子(flexbox)

多媒体查询@media

JS

1、用递归算法实现，数组长度为5且元素的随机数在2-32间不重复的值

描述：

这是一道大题目，把考点拆成了4个小项；需要侯选人用递归算法实现（限制15行代码以内实现；限制时间10分钟内完成）：
a) 生成一个长度为5的空数组arr。
b) 生成一个（2－32）之间的随机整数rand。
c) 把随机数rand插入到数组arr内，如果数组arr内已存在与rand相同的数字，则重新生成随机数rand并插入到arr内[需要使用递归实现，不能使用for/while等循环]
d) 最终输出一个长度为5，且内容不重复的数组arr。

function buildArray(arr, length, min, max) {
    var num = Math.floor(Math.random() * (max - min + 1)) + min;
    if (!arr.includes(num)) { arr.push(num); }
    return arr.length === length ? arr : buildArray(arr, length, min, max);
}
var result = buildArray([], 5, 2, 32);
console.table(result);

2、去除字符串中最后一个指定的字符

function laststr(str, last) {
    //判断str是否是一个字符串
    if (typeof str != "string") {
        console.log('错误')
        return
    }
    //得到字符在字符串最后一次出现的位置
    var index = str.lastIndexOf(last)
    //截取字符所在位置之前的字符串，再拼接字符后面的字符串
    return str.substring(0, index) + str.substring(index + 1, str.length)
}
var str = laststr('123', '2')
console.log(str)

第二天

HTML

1、HTML的全局属性有哪些

accesskey——设置快捷键
class——为元素设置类标识
contenteditable——指定元素内容是否可编辑
data-*——为元素增加自定义属性
dir——设置元素文本方向（默认ltr，rtl）
drozone——设置元素是否可拖拽
hidden——规定对元素进行隐藏
id——规定元素的唯一id
style——规定元素的行内样式
title——规定元素的tab键控制次序
lang——设置元素中内容的语言代码

CSS

1、在页面上隐藏元素的方法有哪些？

position配合z-index
margin-left：-100%
display：hidden
opacity：0
visibility：hidden
transform：scale（0）
width:0;height:0

2、css选择器有哪些？那些属性可以继承？

css选择器

通配符
标签选择器
id选择器
类选择器
伪类选择器
伪元素选择器
兄弟选择器
后代选择器
子元素选择器
属性选择器

可以继承的属性

文字：font-size，color，font-family，font-style，font-weight
文本：text-align，line-height，text-index，text-transform,white-spacing,white-space
元素可见：visibility：opacity
光标属性：cursor

JS

1、去除字符串中的空格

var trim = function(str){
    return str.replace(/\s*/g,'')
}
str.replace(/\s*/g,'')//去除字符串内所有的空格
str.replace(/^/s|/s*$/g,'')//去除字符串内两端的空格
str.replace(/^\s*/,''/)//去除字符串左侧的空格
str.replace(/(\s*$)/g,'')//去除字符串内右侧的空格

第三天

浏览器

什么是同源策略

来历

与1995年由网景公司引入浏览器，目前，所有浏览器都实行这个策略

什么是同源

指协议、域名、端口三者一致

目的

是为了保证用户信息安全，防止恶意网站的窃取数据

非同源会有什么限制

DOM无法获取、ajax不能发送、Cookie、LocalStorage无法读取

如何跨域

jsonp跨域

cors跨域资源共享，php中加入如下代码

header('Access-Control-Allow-Origin: *');

header('Access-Control-Allow-Credentials: true'); // 设置是否允许发送 cookies

header('Access-Control-Expose-Headers: *');  //服务器 headers 白名单，可以让客户端进行访问

header('Access-Control-Allow-Headers: *');

nginx代理跨域

JS

什么是回调函数

就是把一个函数作为参数进行传递,回调函数首先最为一个函数的参数传入，当这个函数执行后在执行的函数，往往会依赖前一个函数的执行结果。

在js中，对I/O、HTTP请求等异步操作，为了控制执行的顺序就需要使用回调函数方法

    function f1(a) {
        a()
    }
    f1(function () {
        console.log('你好啊世界')
    })

CSS

Less 伪元素生成横线

在被创建伪元素的less代码中使用**&:after/&before**来创建伪元素

.box{
    &:after{
		display:inline-block;
        content:'';
        width:100px;
        height:1px;
        background:#000;
    }
}

第四天

HTML

简述超链接target属性的取值和作用

_self

默认属性，在当前窗口或者框架中加载目标文档
_blank

打开新的窗口或者新的标签页。在使用这个属性时，最好添加 rel="noopener norefferrer" 属性，防止打开的新窗口对原窗口进行篡改。防止 window.opener API 的恶意行为。
_parent

在frame或者iframe中使用的较多。在父级框架中载入目标文档，当a标签本身在顶层时与_self相同
_top

在frame或者iframe中使用较多。直接在顶层框架中载入目标，加载整个文档

CSS

使用css画出三角形，并说明原理

.box{
    width:0;
    height:0;
    border-top:100px solid transparent;
    border-bottom:100px solid transparent;
    border-left:100px solid transparent;
    border-right:100px solid #000;
}

css中的边框其实是一个梯形，只要把盒子的宽高都设置为0，让边框向内延申，就会发现原来的梯形变成了三角形，所以我们只要把其余的三个边框设置为透明的，就能得到一个三角形了。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-htyjHaz0-1611657752913)(D:\桌面\临时文件\MK图片\image-20210118154311215.png)]

JS

去除制表符和换行符的方法

  var str = 'app\nle\t';
        function fn(str) {
            var s = str.replace(/\s+/g,'');
            return s;
        }
        console.log(fn(str))

第五天

HTML

iframe框架都有哪些优缺点

优点：

可以实现异步刷新，单个iframe刷新不影响整体窗口的刷新
可以实现跨域，每个iframe的源都可以不相同
多页面应用时，对于共同的header, footer 可以使用 iframe 加载，拆分代码（导航栏的应用）

缺点：

每一个iframe都对应着一个页面，也就意味着多余的css，js文件的载入，会增加请求的开销
如果iframe内有滚动条，会严重影响用户的体验
window.onload事件会在所有的iframe加载完成后在会触发因此会造成页面阻塞

CSS

简述你对BFC规范的理解

I know it when i see it.

BFC全称Box Formatting Context块级格式化上下文

出现条件（其中之一）

float不是none
绝对定位元素（position为absolute或fixed）
display的值是inline-block,table-cell,flex,table-caption或者inline-flex
具有overfloat并且值不为visible

特性

内部的盒子会在垂直方向上一个接一个的放置
两个相邻的盒子的margin会发生重叠
每个元素的左外边框与包含块的左边界接触，即使浮动元素也是如此
BFC的区域不会与float的元素区域发生重叠
计算BFC的高度时，浮动元素也参与计算
BFC就是页面上的独立的一个容器，容器里面的子元素不会影响到外面的元素，反之亦然

参考链接https://www.jianshu.com/p/0d713b32cd0d

JS

统计某一字符再字符串中出现的次数

方式一

function fn(str,target){
    //定义一个0的变量来存储出现的次数
    var count = 0
   	//如果这个字符存在在这个字符串中那么就执行下面的操作
    while(str.includes(target)){
        //找到这个字符在字符串中的位置
		var index = str.indexof(target)
        //出现一次count加一
        count++
        //截取目标字符在字符串中出现位置之前的字符
        str = str.substring(index+target.length)
    }
    return count
}

方式二

//通过字符在字符串中的位置将字符转切割成数组，最后长度再减一，就得到了字符出现的次数
var nums = str.split(target).length-1

第六天

HTML

多个标签页之间的通讯方式

WebSocket （可跨域）
postMessage（可跨域）
Worker之SharedWorker
Server-Sent Events
BroadcastChannel

————————以上的都不懂——————————

localStorage

//存储
localStorage.setItem('name','grh')
//读取localStorage
var name = localStorage.getItem('name')
console.log(name)
//删除localStorage
localStorage.removeItem('name');

//存储cookie
document.cookie = 'name=grh'
document.cookie = 'age=21'
//读取cookie
var c = document.cookie
console.log(c)

CSS

简述你理解的优雅降级和渐进增强

优雅降级：先不考虑兼容，优先最新版的浏览器效果，之后再逐渐兼容最低版本

渐进增强：考虑兼容，以较低或使用人数较多的浏览器效果为主，之后在逐渐增强对新版本的支持，以内容为主。也是多数公司所采用的方式

JS

写一个判断数据类型的方法

分析:

typeof只能返回，string、number、boolean、undefined、object
null会被判为object
array会被判为object

所以比较优雅的方式是Object.portotype.toString.call()的方法，最后再用正则把其中的[object ]替换掉就ok了

const fn = obj => {
    return Object.prototype.toString.call(obj).replace(/\[object\s|\]/g, '')
}
console.log(fn())//undefined
console.log(fn([]))//Array

第七天

HTML

viewport常见的属性有哪些

minmum-scale最小缩放比

maxmum-scale最大缩放比

width 视口宽度

user-scalable 是否允许用户缩放

initial-scale 页面初始化缩放值

CSS

清除浮动的方式有什么以及优缺点

1、父盒子也设置浮动

缺点：可读性差，可能会造成页面布局混乱

2、添加空标签，为其设置clear：both

缺点：添加了冗余元素

3、overflow：hidden

缺点：会导致超出父盒子的元素被隐藏，影响展示效果

4、伪元素

很不错，没有缺点

JS

把下划线命名转成大驼峰命名

function toCamel(str) {
  str = str.replace(/(\w)/, (match, $1) => `${$1.toUpperCase()}`)
  while(str.match(/\w_\w/)) {
    str = str.replace(/(\w)(_)(\w)/, (match, $1, $2, $3) => `${$1}${$3.toUpperCase()}`)
  }
  return str
}

console.log(toCamel('a_c_def')) // ACDef

虽然看不懂但还是要总结一下

toUpperCase 小写变大写
match正则返回要查找的值

寒酥_

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
在面试初级前端需要知道那些知识

通过目录查找第一天HTML1、link与@uimport的区别2、HTML包含的元素CSS1、圣杯布局和双飞翼布局的理解和区别2、css新增特性JS1、用递归算法实现，数组长度为5且元素的随机数在2-32间不重复的值2、去除字符串中最后一个指定的字符第二天HTML1、HTML的全局属性有哪些CSS1、在页面上隐藏元素的方法有哪些？2、css选择器有哪些？那些属性可以继承？JS1、去除字符串中的空格第三天浏览器什么是同源策略JS什么是回调函数CSSLess 伪元素生成横线第四天HTML简述超链接target属
复制链接

扫一扫