前端常见笔试题（持续更新）html+css
1、请列出CSS中可以继承的属性
1、字体系列属性
font-family：字体系列 font-weight：字体的粗细 font-size：字体的⼤⼩
font-style：字体的风格
2、⽂本系列属性
clonetext-indent：⽂本缩进 text-align：⽂本⽔平对齐  line-height：⾏⾼
word-spacing：单词之间的间距 letter-spacing：中⽂或者字母之间的间距
text-transform：控制⽂本⼤⼩写（就是uppercase、lowercase、capitalize这三个） color：⽂本颜⾊
3、元素可见性：
visibility：控制元素显⽰隐藏
4、列表布局属性：
list-style：列表风格，包括list-style-type、list-style-image等
5、光标属性： cursor：光标显⽰为何种形态
2、绘制⼀个两条直⾓边均为16px，背景颜⾊#dadada的直接三⾓形
#t{
width: 0;
height: 0;
border-left: 16px solid #dadada;
border-top: 16px solid transparent; //关键
}
3、实现元素垂直居中
<div class="demo1">
<div class="child"></div>
</div>
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
1. .demo1 {
width: 600px;
height: 300px;
background: red;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.child {
display: inline-block;
/* width: 100px;
height: 100px; */
background: #000;
}
3..demo1 {
width: 600px;
height: 300px;
background: red;
display: flex;
justify-content: center;
align-items: center;
}
.child {
width: 100px;
height: 100px;
background: #000;
}
4、display:none、visibility:hidden和opacity:0之间的区别
display:none隐藏后不占据额外空间，它会产⽣回流和重绘，⽽visibility:hidden和opacity:0元素虽然隐藏了，但它们仍然占据着空间，它们俩只会引起页⾯重绘。
js
1、请实现⼀个函数，对元素类型不确定的数组进⾏去重，⽐如[1,2,2,3,[1,2],[1,3],{a:1},{a:1,b:1},{a:1,b:1}]去重为 [1,2,3,[1,2],[1,3],{a:1},{a:1,b:1}]
var a=[1,2,2,3,[1,2],[1,3],{a:1},{a:1,b:1},{a:1,b:1}];
function duplicate(value){
let strArr =[];
for(let i of value){
//*要点--把数组⾥所有类型转换成字符串
strArr.push(JSON.stringify(i))
}
returnArray.from(newSet(strArr))
}
console.log(duplicate(a))
//output:['1','2','3','[1,2]','[1,3]','{"a":1}','{"a":1,"b":1}']
2、请实现⼀个函数，获取当前⽹页的URL，并将其中的查询参数解析成字典对象，⽐如当前URL为：
www.baidu/helpCenter.html?a=1&b&c=&d=百度&e=，按key-value形成拼成对象
{a:“1”,b:"",c:"",d:“百度”,e:“”}
var url="www.baidu/helpCenter.html?a=1&b&c=&d=百度&e=<script>alert(0)</script>" function putUrl(url){
try{
//获取？后的字符串
let k = url.split('?')[1]
//每个&的数据
let ks = k.split("&")
let v ={}
for(let val of ks){
v[val.split("=")[0]]= val.split("=")[1]?val.split("=")[1]:""
}
return v
}catch(e){
//⽆参数时返回
return null
}
}
console.log(putUrl(url))
//output:{a:'1',b:'',c:'',d:'百度',e:'<script>alert(0)</script>'}
3、实现⼀个函数clone，可以对javaScript中的5种主要的数据类型（Number，String，Object，Array，Boolean）
var a =[1,2,3],b={a:1,b:2},c=true,d=1,e="s";
function clone(value){
//JSON.parse(JSON.stringify()) 作⽤于深复制
return{val:JSON.parse(JSON.stringify(value)),type:typeof JSON.parse(JSON.stringify(value))} }
console.log(clone(a))//{ val: [ 1, 2, 3 ], type: 'object' }
console.log(clone(b))//{ val: { a: 1, b: 2 }, type: 'object' }
console.log(clone(c))//{ val: true, type: 'boolean' }
console.log(clone(d))//{ val: 1, type: 'number' }
console.log(clone(e))//{ val: 's', type: 'string' }
4、说出以下代码最终执⾏结果
/**
2. 要点：
3. 1、解析器会率先读取函数声明，并使其在执⾏任何代码之前可⽤；⾄于函数表达式，则必须等到解析器执
⾏到它所在的代码⾏，才会真正被解析执⾏。
4. 2、定时器会在js执⾏完第⼀遍后执⾏
*/
try{
oh()//函数声明
wow()//函数表达式未解析执⾏报错，程序执⾏catch
console.log(oh)
console.log(wow)
}catch(e){
setTimeout(function(){
console.log(1,wow)
console.log(1,oh)
})
}
function oh(){
console.log("更好玩的H5")
}
var wow=function(){
console.log("更酷的H5")
}
var oh ="abcde"
var wow ="12345"
/*
更好玩的H5
1 12345
1 abcde
*/
安全
1.在实际开发中，列举⼏个常见的XSS攻击例⼦并且给出防御⽅案。
答：XSS是跨站脚本攻击(Cross Site Scripting)俗称脚本注⼊，典型例⼦是在留⾔版的输⼊框中输⼊带有html标签的关键字进⾏恶意的修改页⾯以及盗取Cookie。
解决办法有：
1、对诸如</script>、</img>、</a>等标签进⾏过滤。
2、像⼀些常见的符号，如<>在输⼊的时候要对其进⾏转换编码。
3、通过限制输⼊长度强制截断来进⾏防御。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。