html+css

1、请列出CSS中可以继承的属性

1、字体系列属性
font-family：字体系列 font-weight：字体的粗细 font-size：字体的大小
font-style：字体的风格
2、文本系列属性
text-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>
1..child{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为：http://www.baidu.com/helpCenter.html?a=1&b&c=&d=百度&e=，按key-value形成拼成对象

{a:“1”,b:"",c:"",d:“百度”,e:“”}

var url="http://www.baidu.com/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()   //函数表达式 未解析 执行报错，程序执行catchconsole.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、通过限制输入长度强制截断来进行防御。

前端常见笔试题(持续更新)相关推荐

2022初级前端必会面试题持续更新
01-html&css H5的新特性有哪些,C3的新特性有哪些 H5 新增语义化标签,header,nav,aside,article,section,footer 新增input表单元素类型 ...
2020年Java面试题及答案_Java面试宝典_Java笔试题(持续更新中)
推荐面试视频教程 2019年最新Java互联网大厂面试精粹前言前言: 少年易老学难成,一寸光阴不可轻.未觉池塘春草梦,阶前梧叶已秋声 .-朱熹<劝学诗> 勤奋才是改变你命运的唯一捷径. ...
前端面试笔试题总结【持续更新~】
前端面试笔试题总结 1.说说你对react的理解?有哪些特性? 2.说说Real diff算法是怎么运作的 3.说说React生命周期有哪些不同的阶段?每个阶段对应的方法是? 4.说说你对React中 ...
软件测试常见笔试题总结
http://t.csdn.cn/2fKts 软件测试常见笔试题总结 01 mysql 1.1 数据库操作 1.2 表结构操作 1.2.1 创建表 1.2.2删除表 1. 删除单张表: 2. 删除多个 ...
Jenkins常见问题解决（持续更新）
Jenkins常见问题解决(持续更新) 参考文章: (1)Jenkins常见问题解决(持续更新) (2)https://www.cnblogs.com/XhyTechnologyShare/p/120 ...
大厂常见笔试题滑动窗口内数的和
大厂常见笔试题,我以为出一个很难的题,结果出了一个基础题, 给你一个大小为n的整型数组和一个大小为k的滑动窗口,将滑动窗口从头移到尾,输出从开始到结束每一个时刻滑动窗口内的数的和. 样例对于数组 [ ...
java字符串笔试题_五道Java常见笔试题及答案汇总
1.String和StringBuffer的区别? 答:Java平台提供了两个类:String和StringBuffer,它们可以储存和操作字符串,即包含多个字符的字符数据.这个String类提供了数 ...
mysql @ $_mysql常见笔试题
一.Mysql常见笔试题 1.Mysql 中有哪几种锁? (1)表级锁:开销小,加锁快.不会出现死锁,锁定粒度大,发生锁冲突的概率高,并发度低. (2)行级锁:开销大,加锁慢.会出现死锁,锁定粒度小, ...
嵌入式linux工程师考试,嵌入式Linux工程师常见笔试题.doc
嵌入式Linux工程师常见笔试题.doc 这些年,我既参加也组织了许多这种测试,在这过程中我意识到这些测试能为带面试者和被面试者提供许多有用信息,此外,撇开面试的压力不谈,这种测试也是相当有趣的. 从 ...

前端常见笔试题(持续更新)