2020年前端HTML+CSS+JS+VUE面试题考试题

HTML面试题

（一）HTML5中的新标记

1、HTML5中新的语义元素

什么是语义元素

语义元素清楚地向浏览器和开发者描述其意义。

例如div和span元素，无法表达其内容相关信息，属于非语意化元素；

而像form、table、img等元素，能够通过元素名清晰地表达其内容，这种就属于语意化元素。

HTML中常用的语意化标记有

标记	描述
article	文档内的文章
aside	页面内容之外的内容
details	用户可查看或隐藏的额外细节。
dialog	对话框或窗口。
figcaption	figure 元素的标题。
figure	自包含内容，比如图示、图表、照片、代码清单等等。
footer	文档或节的页脚。
header	文档或节的页眉。
main	文档的主内容。
mark	重要或强调的内容。
section	文档中的节。
summary	details 元素的可见标题。
time	日期/时间。

这些语意化的标记并非一定要用，完全可以使用div + class来表示。

2、HTML中新的表单元素

标记	描述
datalist	输入框的预定义选项。
keygen	键对生成器字段（用于表单）。
output	计算结果。

3、HTML5中新的输入类型

HTML5中新的输入类型大多数在网页上没什么区别，比较直观的区别就是输入时弹出的键盘的类型不同

新的输入类型	说明
color	颜色
date	日期
datetime	日期和时间
datetime-local	本地化的日期和时间
email	电子邮件
month	月份
number	数字
range	数字取值范围
search	搜索
tel	电话号码
time	时间
week	星期

4、HTML5中新的输入属性

HTML5中新的输入属性中，一些用于限制的属性功能有限，并不能满足开发需求，所以大多数情况下都是使用JS来实现输入限制的

新的输入属性	说明
autocomplete	表单或输入字段是否应该自动完成，浏览器会基于用户之前的输入值自动填写值
autofocus	自动聚焦，打开就显示输入光标
form	规定input元素所属的一个或多个表单
formaction	规定当提交表单时处理该输入控件的文件的 URL
formenctype	规定当把表单数据提交至服务器时如何对其进行编码
formmethod	规定提交方式
formnovalidate	规定在提交表单时不对input元素进行验证
formtarget	规定的名称或关键词指示提交表单后在何处显示接收到的响应
height 和 width	规定input元素的高度和宽度
list	引用的datalist元素中包含了input元素的预定义选项
min 和 max	规定input元素的最小值和最大值
multiple	规定允许用户在input_file元素中输入一个以上的值
pattern (regexp)	规定用于检查input元素值的正则表达式
placeholder	规定用以描述输入字段预期值的提示
required	规定在提交表单之前必须填写输入字段
step	如果 step=“3”，则合法数字应该是 -3、0、3、6、等等

5、HTML5中新的图像属性

标签	描述
canvas	定义使用 JavaScript 的图像绘制。
svg	定义使用 SVG 的图像绘制。

6、HTML5中新的媒体元素

标签	描述
audio	播放声音或音乐，没有画面
embed	外部应用程序的容器（比如插件），也可以播放音视频
source	为video和audio指定媒体的资料来源
track	为ideo和audio的添加轨道
video	播放视频或影片，有画面

（二）HTML如何实现单选

单选框默认不能单选，实现单选的多个单选框的name属性必须相同，相当于分组，属于同一组多个单选元素才能选一个

选项1
选项2
选项3
选项4

（三）HTML多种本地存储的区别

HTML中主要有3中本地存储方式：

• cookie - HTML5之前，数据只能存储在 cookie 中，包括每一个服务器的请求数据
• window.localStorage - 存储没有截止日期的数据（当关闭整个浏览器时数据也不会消失）
• window.sessionStorage - 针对一个session来存储数据（当关闭浏览器标签页时数据会丢失）

（四）HTML5页面缓存

HTML5 引入了应用程序缓存（Application Cache），这意味着可对 web 应用进行缓存，并可在没有因特网连接时进行访问。

第一步：先创建缓存配置文件

文件有三个部分：

• CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
• NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
• FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

demo.appcache文件

CACHE MANIFEST
/theme.css
/logo.gif
/main.js
NETWORK:
mine.html
FALLBACK:
/html/offline.html

第二步：在html标记中添加配置文件

index.html文件

如需启用应用程序缓存，请在文档的html标签中包含 manifest 属性：

（五）meta标记常用属性

1、http-equiv 属性的 Content-Type 值（设置字符集）

2、http-equiv 属性的 Refresh 值（设置自动刷新｜跳转）

3、name 属性的 viewport 值（移动屏幕的缩放）

/*
width –  viewport 的宽度 （范围从 200 到 10,000，默认为 980 像素）
height –  viewport 的高度 （范围从 223 到 10,000 ）
initial-scale –  初始的缩放比例 （范围从 > 0 到 10，默认 1.0）
minimum-scale –  允许用户缩放到的最小比例
maximum-scale –  允许用户缩放到的最大比例
user-scalable –  用户是否可以手动缩放 (no，yes)
*/
"viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

4、name 属性的 format-detection 值（忽略页面中的数字识别为电话号码）

/*
使设备浏览网页时对数字不启用电话功能（不同设备解释不同，iTouch 点击数字为存入联系人，iPhone 为拨打电话），忽略将页面中的数字识别为电话号码。

若需要启用电话功能将 telephone=yes 即可，若在页面上面有 Google Maps, iTunes 和 YouTube 的链接会在ios设备上打开相应的程序组件。
*/
"format-detection" content="telephone=no" />

5、name 属性的 apple-mobile-web-app-capable 值（网站开启对 web app 程序的支持）

/*
网站开启对 web app 程序的支持。

该 meta 可以看出内容为“苹果设备 web 应用程序 xx”，就是说该 meta 是专门定义 web 应用的。
*/
"apple-mobile-web-app-capable" content="yes" />

6、name 属性的 apple-mobile-web-app-status-bar-style 值（改变顶部状态条的颜色）

/*
在 web app 应用下状态条（屏幕顶部条）的颜色
默认值为 default（白色），可以定为 black（黑色）和 black-translucent（灰色半透明）

注意：若值为“black-translucent”将会占据页面位置，浮在页面上方（会覆盖页面 20px 高度 iphone4 和 itouch4 的 Retina 屏幕为 40px）
*/
"apple-mobile-web-app-status-bar-style" content="black" />

7、name 属性设置作者姓名及联系方式

"author" contect="liudanyun, [email protected]" />

8、name 属性设置搜索引擎关键词

"keywords" contect="视频,直播" />

9、name 属性设置搜索引擎网页描述

"description" contect="一个流行的视频网站" />

CSS面试题

（一）区块元素&内联元素

HTML中的元素可分为区块元素、内联元素两类

div元素是最典型的区块元素，
span元素是最典型的内联元素

区块元素和内联元素的特征：

元素	宽度	高度	显示	可控
区块元素	多数为100%，少数为内容的宽度	内容的高度	独占一行，换行显示	宽高内外边距设置有效
内联元素	内容的宽度	内容的高度	同行显示	宽高内外边距设置无效

（二）元素显示方式

元素的显示方式有很多，常用的有

值	描述
none	元素不会被显示。
block	元素将显示为块级元素，此元素前后会带有换行符。
inline	此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素（CSS2.1 新增的值）具有行内显示及宽高内外边距可控的特征
list-item	元素会作为列表显示。
run-in	元素会根据上下文作为块级元素或内联元素显示。
flex	元素会作为弹性盒子显示。
grid	元素会作为网格布局显示

（三）CSS选择器类型

CSS选择器有很多种类型，灵活运用可以大大提高效率

选择器	举例
通用选择器	*{…}
元素选择器	p{…}
分组选择器	a,p,h1{…}
类选择器详解	.abc{…}
ID选择器详解	#aaa{…}
兼并选择器	#a.b.c{…}
属性选择器详解	[name]{…}或[name「*｜^
后代选择器	ul li{…}
直接子元素选择器	ul>li{…}
相邻兄弟选择器	p+div{…}
后续兄弟选择器	p~div{…}
伪类	li:hover{…}
伪元素	li:before{…}

(四)CSS颜色的表示方法

CSS中可以通过多种方式来表示颜色

• RGB - 指的是三原色 red（红色）、green（绿色）、blue（蓝色）
• HSL - 指的是坐标值 hue（色调）、saturation（饱和度）、lightness（亮度）
  • H从 0 到 360 - 0 (或 360) 是红色，120 是绿色，240 是蓝色。
  • S是百分比值；0% 意味着灰色，而 100% 是全彩。
  • L同样是百分比值；0% 是黑色，100% 是白色

表示方法	举例
单词	red、green、blue
3位十六进制色	#aaa、#FFF、#000
6位十六进制	#FF0000、#00FF00、#000000
RGB 函数颜色	rgb(255,10,0)、rgb(0,0,255)
RGBA 函数颜色	rgb(255,10,0,0.2)、rgb(0,0,255,1)
HSL 颜色	hsl(120,65%,75%)、hsl(240,65%,75%)
HSLA 颜色	hsl(0,65%,75%,0.5)、hsl(240,65%,75%,1)

(五)CSS外边距合并的问题

CSS中顶部外边距和底部外边距经常会出现合并的情况，尤其是顶部外边距合并的时候必须想办法解决合并的问题，不然会影响页面的正常排版。

顶部外边距合并的情况是：给子元素添加的顶部外边距时，子元素的顶部外边距合并后变成了父元素的顶部外边距。

合并原因是：自元素和父元素的顶部之间是重合在一起的，系统自动合并外边距。

解决思路是：让子元素和父元素的顶部不重合

决绝方案是：

1. 给父元素添加顶部的内边距，哪怕0.1个像素，让父元素和子元素的顶部不再重合
2. 使用父元素的内边距代替子元素的外边距
3. 在子元素前面添加一个任意有高度的元素，将父元素和子元素分开不重合

(六)CSS中3种定位方式

所有定位的元素都可以使用left、right、top、bottom属性设置元素的位置

定位方式	说明
relative	相对定位，常用于微调和绝对定位的参照物
absolute	绝对定位，参照已定位的父元素中调整位置
fixed	固定定位，参照整个页面做定位，不随页面而滚动

(七)CSS中BFC的概念

BFC（Block Formatting Context）直译为“块级格式化范围”。是 W3C CSS 2.1 规范中的一个概念。

一个BFC元素就是一个独立的模块，与其他模块之间没有任何关系，所以不会出现外边距合并问题，并且计算BFC的高度时，浮动子元素也计算在内，所以也不会出现浮动影响的问题。

什么情况下会出发BFC呢？

1. 元素浮动后
2. 绝对定位或者相对定位后
3. 改变overflow的值后，即不为默认的visible
4. 设置display的值为table系列、inline-block、flex、list-item

（八）元素水平排版方法

1、子元素设置display:inline-block;属性水平排版

	
		"utf-8">
		
		
	
	

		

			
水平排版元素1
			
水平排版元素2
			
水平排版元素3
		
		
	

2、子元素设置float属性水平排版

	
		"utf-8">
		
		
	
	

		

			
水平排版元素1
			
水平排版元素2
			
水平排版元素3
		
		
	

使用display:flex;弹性盒子水平居中

	
		"utf-8">
		
		
	
	

		

			
水平排版元素1
			
水平排版元素2
			
水平排版元素3
		
		
	

（九）弹性盒子常用属性

弹性盒子是 CSS3 的一种新的布局模式。

属性	说明
display:flex、inline-flex;	对上级父容器使用，使其子元素成为弹性子元素
flex: auto、initial、none、[ flex-grow ]、[ flex-shrink ]、[ flex-basis ]	对弹性子元素使用，设置弹性子元素的生长、收缩、比例等属性
flex-direction: row、row-reverse、column、column-reverse	对上级父容器使用，指定弹性子元素水平排版还是垂直排版
justify-content: flex-start、flex-end、center、space-between、space-around	对上级父容器使用，设置弹性子元素水平分布
align-content: flex-start、flex-end、center、space-between、space-around、stretch	对上级父容器使用，设置弹性子元素垂直分布

（十）css预编译器scss、less、stylus

都是css预处理器。进行Web页面样式设计，然后再编译成正常的CSS文件，无需考虑浏览器的兼容性问题。

（十一）css中link与@import区别

link是HTML标记，在HTML文档中使用，可以引入包括CSS的多种样式和脚本，当解析到link时，页面会同步加载所引的css。

@import是CSS属性，在CSS样式表中使用，只能引入其他CSS样式表，@import所引用的css会等到页面加载完才被加载。

JS面试题

（一）JS中const,var,let的区别

• const定义的变量不可以修改，不可以重复定义同一个变量，而且必须初始化
• var定义的变量可以修改，可以重复定义同一个变量，如果不初始化会输出undefined，不会报错
• let是块级作用域，函数内部使用let定义后，对函数外部无影响，不可以重复定义同一个变量

（二）JS中Object.defineProperty()方法

参考资料Object.defineProperty() - JavaScript | MDN

Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。默认情况下，使用 Object.defineProperty() 添加的属性值是不可修改的

注：应当直接在 Object 构造器对象上调用此方法，而不是在任意一个 Object 类型的实例上调用。

Object.defineProperty(obj, prop, descriptor)

参数

• obj - 被定义或修改属性的对象。
• prop - 要定义或修改的属性的名称或Symbol 。
• descriptor - 要定义或修改的属性描述符。
  • 有两种描述符：数据描述符和存取描述符

描述符

• 数据描述符 - 使用value属性设置值
• 存取描述符 - 使用getter 函数和 setter 函数设置值

两种描述符都是对象。它们共享以下可选参数

参数	描述
configurable	当且仅当该属性的 configurable 键值为 true 时，该属性的描述符才能够被改变，同时该属性也能从对应的对象上被删除。默认为 false。
enumerable	当且仅当该属性的 enumerable 键值为 true 时，该属性才会出现在对象的枚举属性中。默认为 false。
value	该属性对应的值。可以是任何有效的 JavaScript 值（数值，对象，函数等）。默认为 undefined。
writable	当且仅当该属性的 writable 键值为 true 时，属性的值，也就是上面的 value，才能被赋值运算符改变。默认为 false。
get	属性的 getter 函数，如果没有 getter，则为 undefined。当访问该属性时，会调用此函数。执行时不传入任何参数，但是会传入 this 对象（由于继承关系，这里的this并不一定是定义该属性的对象）。该函数的返回值会被用作属性的值。默认为 undefined。
set	属性的 setter 函数，如果没有 setter，则为 undefined。当属性值被修改时，会调用此函数。该方法接受一个参数（也就是被赋予的新值），会传入赋值时的 this 对象。默认为 undefined。

两种描述符可拥有的参数

	configurable	enumerable	value	writable	get	set
数据描述符	可以	可以	可以	可以	不可以	不可以
存取描述符	可以	可以	不可以	不可以	可以	可以

数据描述符案例

const data = {}; //创建data对象
//数据描述符
Object.defineProperty(data, "value", {
	value: 100,
	writable: true,//能通过赋值运算符“=”改变值
	enumerable: true,//该属性会出现在对象的枚举属性中
	configurable: true//表示该属性能被修改和删除
});
console.log(data.value)//100
data.value = 200;//通过赋值运算符“=”改变值
console.log(data.value)//200

存取描述符案例

const data = {}; //创建data对象
//数据描述符
Object.defineProperty(data, "input", {
	get(){
		return this.value;
	},
	set(v){
		this.value = v;
	},
	enumerable: true,//该属性会出现在对象的枚举属性中
	configurable: true//表示该属性能被修改和删除
});
console.log(data.input) //undefinded
data.input = 200;//通过赋值运算符“=”改变值
console.log(data.input)//200

（三）MVVM模式

MVVM是Model-View-ViewModel的简写。它本质上就是MVC （Model-View- Controller）的改进版。

两个方向：

• 一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。
• 二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。

这两个方向都实现的，我们称之为数据的双向绑定。

在MVVM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信。

ViewModel通常要实现一个observer观察者，当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动。

（四）JS中实现简单input双向绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>输入框双向绑定</title>
	</head>
	<body>
		<input id="input" />
	</body>
	<script type="text/javascript">
		//const定义的变量不可以修改，而且必须初始化
		const input = document.querySelector("#input");
		//创建data对象
		const data = {};
		//数据描述符，设置变量的值的时候更新输入框的值
		Object.defineProperty(data, "input", {
			get() {
				return this.value;
			},
			set(v) {
				this.value = v;
				input.value = v;
			},
			enumerable: true, //该属性会出现在对象的枚举属性中
			configurable: true //表示该属性能被修改和删除
		});
		data.input = 200;
		//输入框改变的时候，修改变量的值
		input.onkeyup = function(e) {
			data.input = e.target.value;
			console.log(data.input)
		}
	</script>
</html>