前端笔记（1）（实习生水平）
1.请简单描述html、css、js（2分）
Html是超文本标记语言，是用来描述网页的一种语言
Css是层叠样式表，因为直接在html修改样式过于繁琐，所以衍生出的描述html的语言，用于定义html的元素
Js是一种脚本语言用来实现网页的一些动态效果，动态交互
2.js有哪些数据类型（3分）
有七种内置类型 分为了基本类型和对象
六种基本类型：null string undefined Boolean number symbol
3.如何判断一个变量是array还是object（代码）（3分）
1．
Var arr = [];
var obj = {};
if (Array.isArray(arr)) {
Console.log(“这是数组”);
}else {
Console.log(“这不是数组”)
}；
var arr = [];
var obj = {};
console.log(arr instanceof Array);
console.log(obj instanceof Array);
4.简单描述下DOM事件流（3分）
DOM事件会经历三个阶段：事件捕获 ——当前目标阶段——冒泡阶段
5.请写出下面代码输出的值以及为什么（3分）
var a = 'a';
var b;
a = b || a;
console.log(a);
输出a 字符串形式 ||是or运算符 声明变量a赋值了字符串‘a‘， 变量b只是声明了没有赋值，所以输出的是a 字符串的数据类型
6.将"2020/9/9 下午5:17:06"转化为"2020年9月9日 下午5:17:06"（代码）
var date = new Date("2020-9-9 5:17:06");
var year = date.getFullYear();
var month = date.getMonth() + 1;
var date1 = date.getDate();
var hours = date.getHours();
var minutes = date.getMinutes();
var second = date.getSeconds();
if (second < 10) {
second = "0" + second;
}
console.log(
"今天是：" +
year +
"年" +
month +
"月" +
date1 +
"日 下午" +
hours +
":" +
minutes +
":" +
second
);
7.请根据标准数组对新数组进行排序（代码）
var standard_array = ['one', 'two', 'three', 'four'];
var new_array = ['three', 'one', 'four'];
8.写出下面代码的输出，并且修改for循环中的代码使输出为：0、1、2、3。
for(var i=1; i<=3; i++){
setTimeout(function(){
console.log(i);
}, 100);
};
console.log(0)
输出的值依次为0、4、4、4
for (let i = 1; i <= 3; i++) {
setTimeout(function () {
console.log(i);
}, 100);
}
console.log(0);
9.实现一个函数clone，可以对JavaScript中的5种主要的数据类型（包括Number、String、Object、Array、Boolean）进行值复制
function clone(obj){
if(typeof obj === "object"&& typeof obj !== "null"){
Var o =
Object.prototype.toString.call(obj).slice(8,-1) === "Array"
?[]
:{};
for(var k in obj) {
if(typeof obj === "object" && typeof obj !== "null") {
o[k] = clone(obj[k]);
}else {
o[k] = obj[k];
}
}
}else {
return obj;
}
return o;
}
var i = clone([]);
console.log(i);
10.下面这个ul，如何点击每一列的时候aler 其 index？
- 这是第一条
- 这是第二条
- 这是第三条
var arr = document.querySelector("#test").children;
for (var i = 0;i < arr.length;i++) {
arr[i].setAttribute("index",i);
arr[i].addEventListener("click",function() {
alert(this.getAttrribute("index"));
});
}
11.img的alt与title有何异同？
它们都会出现浮层，显示自己设置的图片相关的内容
Alt是当图片加载不出来时，会在图片位置显示属性内容。方便用户在网络较差环境下能够了解图片信息
Title是当用户把鼠标移动到元素上时，就会显示属性内容，起到对图片说明的作用，实质上就是对图片的解释和备注
12.你做的页面在那些浏览器测试过？这些浏览器的内核分别是什么？
Chrome Blink(WebKit的分支）
13.在css/js代码上线之后开发人员经常会优化性能，从用户刷新网页开始，一次js请求一般情况下有那些地方会有缓存处理？
dns缓存，cdn缓存，浏览器缓存，服务器缓存。
14.div+css的布局较table布局有什么优点？
更加符合W3c标准，代码结构明确，可维护性高
加快页面加载速度
节约站点所占的空间和站点的流量
15.为什么利用多个域名来存储网站资源会更有效？
1.节约主域名的连接数，从而提高客户端网络带宽的利用率，优化页面响应。
2.加快页面加载速度
3.动静分离需求，使用不同的服务器处理 请求。动态只处理动态；静态只处理静态
16.请描述一下cookies，seesionStorage和localStorage的区别？
window.sesionStorage
1.生命周期为关闭浏览器窗口
2.同一个窗口下数据可以共享
3.以键值对的形式存储使用
window.localStorage
1.生命周期永久生效，除非手动删除，否则关闭页面也会存在
2.可以多窗口共享（同一浏览器可以共享 ）
3.以键值对的形式存储使用
Cookie
1.在浏览器和服务器间来回传递
2.只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
sessionStorage约5M、localStorage约20M、cookie数据不能超过4k
17.谈谈以前端角度触发做好SEO需要考虑什么？
meta标签优化
关键词分析
合理的标签使用
18.你还了解那些前端优化技术？
图片懒加载
开源节流
防抖节流
19.有那些方式可以对一个DOM设置它的css样式？
外部样式表
内部样式表
内联样式表
20.display:none与visibility:hidden的区别是什么？
如果给一个元素设置了display:none,那么该元素以及它的所有后代元素都会隐藏就，不会 占据空间
而visibility:hidden会占据空间，会影响布局
21.CSS都有那些选择器？
通配符选择器
标签选择器
类选择器
id选择器
后代选择器
子选择器
伪类选择器
相邻选择器
22.看下列代码，
标签内的文字是什么颜色？
<style>
.classA{color:blue;}
.classB{color:red;}
</style>
<body>
<p class='classB classA'>
123
</p>
</body>
红色
CSS层蝶性覆盖，就近原则
23.什么是外边距重叠？重叠的结果是什么？？？？？
多种情况：
两个元素上下 或者包含 或者自身
1.出现上下则是上元素的下边距与下元素的上边距发生合并
2.包含则是一个元素在另一个元素里面时它们的上和、或下外边距也会发生合并
3.有一个空元素，它有外边距，但是没有边距或填充，也会发生合并。
结果：
1.两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值
2.两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大者
3.两个外边距一正一负时，折叠结果是两者的相加的和
24.如何垂直和水平居中一个元素？
使用弹性布局将将父元素设置为display:flex; justify-content:center; align-items:center;
给父元素添加相对定位，子元素添加绝对定位，利用margin负子元素宽高的一半
利用absolute绝对定位和margin:auto自动居中方法完成元素的居中
flex+margin:auto
194
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
