前端笔记1

简述一下你对HMTL语义化的理解

语义化是指根据内容的类型，选择合适的标签（代码语义化），即用正确的标签做正确的事情；
html语义化让页面的内容结构化，结构更清晰，有助于浏览器、搜索引擎解析对内容的抓取；
语义化的HTML在没有css的情况下也能呈现较好的内容结构与代码结构；
搜索引擎的爬虫也依赖HTML标记来确定上下文和各个关键字的权重，利于SEO。

---

positon的static、relative、absolute、fixed的区别

• absolute：绝对定位，元素会相对于值不为static的第一个父元素进行定位（会一直往父级节点查找），它是脱离正常文档流、不占位的；
• fixed：同样是绝对定位，但元素会相对于浏览器窗口进行定位，而不是父节点的position（IE9以下不支持）；
• relative：相对定位，元素相对于自身正常位置进行定位，属于正常文档流；
• static：position的默认值，也就是没有定位，当元素设置该属性后（top、bottom、left、right、z-index）等属性将失效；
• inherit：从父元素继承position属性的值。

---

什么是外边距合并？

当2个垂直元素都设置有marign外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于2个发生合并的外边距的值中的较大的那个。

---

display:none与visibility:hidden两者的区别

• display:none; 在页面中不占位置
• visibility:hidden; 保留原来的位置
• display:none; 显示/隐藏，页面会：重排and重绘
• visibility:visible/none; 显示/隐藏，页面不会重排，但是会重绘

display:none与visibility:hidden两者的共同点

display: none与visibility: hidden，DOM都存在页面中

v-if和v-show的区别

• v-if设置为false时，DOM被移除
• v-show设置为false时，相当于：display: none，DOM继续存在页面中
• 一般来说，v-if有更高的切换消耗，而v-show有更高的初始渲染消耗。因此，如果需要频繁切换，则使用v-show更好。

---

浏览器的最小字体为12px，如果还想再小，怎么办？

css3的样式transform:scale(0.7)，scale有缩放功能

---

CSS样式优先级排序如何计算的？

• 同权重：内联样式表（标签内部）>嵌入样式表（当前文件中）>外部样式表（外部文件中）
• !important > id > class >tag
• !important比内联优先级高

---

JS有哪些基本数据类型？

ECMAScript标准定义有8种数据类型：

1. Boolean
2. Null
3. Undefined
4. Number
5. String
6. Object（Array、Function、Object）
7. Symbol（ ECMAScript6新定义，Symbol生成一个全局唯一，表示独一无二的值）
8. BigInt

---

JS返回上一页

• history.go(-1);
• history.back(-1);
• window.history.go(-1);

---

Jquery中点击未来元素

$(document).on(“click”, “#testDiv”,function(){
	//此处的$(this)指“#testDiv”，而不是$(document)
});

---

jquery实现回车键事件

键盘事件有3：keydown、keypress、keyup，分别是按下、按着没上抬、上抬键盘

$(document).keyup(function(event){
	if(event.keyCode===13){
		$(“#submit”).trigger(“click”);
	}
});

meta标签

<meta name="viewport" content="width=device-width,initial-scale=1">

width=device-width这一句的意思是让页面的宽度等于屏幕的宽度

---

JS阻止冒泡

防止冒泡和捕获：w3c的方法是e.stopPropagation，IE则是e.cancelBubble=true
阻止冒泡：window.event?window.event.cancelBubble=true:e.stopPropagation();
当需要停止冒泡行为时，可以使用：

function stopBubble(e){
	if(e&&e.stopPropagation){
		e.stopPropagation();
	}else{
		window.event.cancelBubble=true;
	}
}

---

JS取消默认事件

取消默认事件：w3c的方法是e.preventDefault()，IE则是e.returnValue=false;

function stopDefault(e){
	if(e&&e.preventDefault){
		e.preventDefault();
	}else{
		window.event.returnValue=false;
	}
	return false;
}