前端的面试题

银河系的一束光

已于 2022-09-29 14:11:54 修改

阅读量300

点赞数

分类专栏：面试题文章标签： css html5 html

于 2021-08-16 23:17:20 首次发布

本文链接：https://blog.csdn.net/weixin_58276266/article/details/119744478

版权

面试题专栏收录该内容

24 篇文章 1 订阅

订阅专栏

请添加图片描述

href属性用来让超链接可以被点击,也可以指定点击的跳转网址
			target属性用来让指定超链接的打开方式,默认是_self当前窗口打开
			      _blank是用新窗口打开

	src属性用来指定图片位置/路径
			(如果图片和网页文件在同级文件夹可以直接写图片名称)
			width属性用来指定图片的宽度,单位是像素px
			height属性用来指定图片的高度,单位是像素px

css

1,全称是层叠样式表stylesheet,专门用来修饰HTML网页的,就是让网页变漂亮.
2,语法: 选择器 { 属性名:属性值;样式2;样式3; }
3,使用位置: 内联CSS , 内部CSS , 外部CSS

css为了方便的选中网页中的元素进行修饰,提供了各种选择器,分类:基础选择器+高级选择器

标签选择器

<style>
			/* 1.标签名选择器 */
				/* 练习1:把div修饰成红色文字 */
				div{  /* 选中了网页中所有叫div的标签们 */
					color:red; /* 红色文字 */
				}
				/* 练习2:把span字号加大 */
				span{
					font-size:30px; /* 字号加大 */
					font-family: "宋体" ;/* 字体 */
				}
		</style>
	</head>
	<body>
		<div>我是div1</div>
		<div>我是div2</div>
		<div>我是div3</div> 
		<span>我是span1</span>
		<span>我是span2</span>
	</body>

–2,class选择器
也叫类选择器,比标签名选择器更细致.
使用步骤: 给你想要修饰的元素加 class属性 + 通过.获取class的值


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 选择器</title>
		
		<!-- 在HTML网页中,嵌入一段css代码,使用style标签 -->
		<style>
			/* 语法: 选择器{样式1;样式2;} */
			/* 1.类选择器/class选择器:
					先加class属性 + 通过.获取class的值
					其中,class的值可以相同.
			 */
				/* 练习1:只div2修饰字号加大 */
				.a{ /* 选中了网页中 所有class=a的元素*/
					font-size: 40px;
				}
				/* 练习2:div1 div3加背景色 */
				.b{ /* 选中了网页中 所有class=b的元素*/
					background-color: pink;
				}
		</style>
	</head>
	<body>
		<div class="b">我是div1</div>
		<div class="a">我是div2</div>
		<div class="b">我是div3</div>
		<a href="#">我是a1</a>
		<a href="#" class="a">我是a2</a>
	</body>
</html>

–3,id选择器
id选择器的值不能相同 , 如果要使用id选择器只会选中一个元素.
使用步骤: 给想要修饰的元素加id属性 + 通过#获取id的值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 选择器</title>
		
		<style>
			/* id选择器: 加id属性(属性值不让相同) + 通过#获取id的值 */
				/* 练习1:设置用户名输入框的背景色 */
				/* 选择器{样式1;} */
				#a{
					background-color: hotpink;/* 背景色 */
				}
				/* 练习2:设置 我是span2 字体透明度 */
				#c{
					opacity: 0.3;/* 值0.0~1.0区间,值越小越透明 */
				}
		</style>
	</head>
	<body>
		<input type="text" placeholder="用户名..." id="a"/>
		<input type="text" placeholder="密码..." id="b"/>
		<span>我是span1</span>
		<span id="c">我是span2</span>
	</body>
</html>

–4,分组选择器
是指,把使用不同选择器选中的元素,分成一组,统一设置样式.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 选择器</title>
		<style>
			/* 1.分组选择器:使用不同的选择器,来选中多种元素 */
			/* 语法: 选择器 {  样式1; 样式2; } */
				/* 练习1:把标签名/id选择器选中的元素,设置背景色 */
				div , #input1{ /* 分组选择器,多种选择器间用逗号隔开 */
					background-color: limegreen;
				}
				/* 练习2:把id/class选择器选中的元素,设置背景色 */
				#input1 , .a{
					background-color: pink;
				}
		</style>
	</head>
	<body>
		<div>我是div1</div>
		<div>我是div2</div>
		<div>我是div3</div>
		<input type="text" placeholder="账号" id="input1"/>
		<input type="text" placeholder="密码"/>
		<span class="a">我是span1</span>
		<span class="a">我是span2</span>
	</body>
</html>

–5,属性选择器
根据标签的不同属性,来选中一些元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 选择器</title>
		
		<style>
			/* 1.属性选择器:根据不同属性,选中不同元素 */
				/* 练习1:把有type属性的 设置背景色 */
				[type]{ /* 选中了,有type属性的元素 */
					background-color: indianred;
				}
				/* 练习2:把有type属性的input 设置边框 */
				input[type]{
					border: 3px dashed blue;/* 宽度 虚线 颜色 */
					border-radius: 25px; /* 圆角边框,值越大越圆 */
				}
				/* 练习3:type=text的input设置背景色 */
				input[type="text"]{
					background-color:seagreen;
					display: none; /* 隐藏元素*/
				}
		</style>
	</head>
	<body>
		<input type="text" placeholder="用户名.."/>
		<input type="password" placeholder="密码.."/>
		<input type="number" placeholder="年龄.."/>
		<input type="text" placeholder="地址.."/>
		<a href="#">我是a1</a>
	</body>
</html>

,JavaScript
–1,概述
简称是JS,用来增强网页的动态交互性.
是一种基于对象和事件驱动的脚本语言
1,基于对象: js也可以像java一样,使用对象.
2,事件驱动: 所有js的代码,都是通过事件来驱动执行的.事件就是你在网页中常见的动作(单击.双…)
3,脚本语言: 是指在特殊的环境才能运行.js就是在浏览器中执行的

–2,特点
1, js是一门直译式的语言,不需要像java一样的编译过程.
2, js是弱类型的语言,底层会自动类型转换.
3, 增强了用户的交互性, 跨平台 .
4, js代码出现的位置: 行内JS, 内部JS, 外部JS

<!-- 1, js可以出现的位置:行内js,内部js,外部js -->
		<!-- 事件驱动: js代码要通过一些事件(动作)来触发,常见有单击,双击 -->
		
		<!-- 单击时弹框 -->
		<div onclick="alert('欢迎来到div')">我是div</div>
		<!-- 双击时弹框 -->
		<span ondblclick="alert('欢迎来到span')">我是span</span>
		<!-- 鼠标进入/移出 时弹框 -->
		<div onmouseenter="alert('欢迎进入div2')">我是div2</div>
		<div onmouseleave="alert('您离开了div3')">我是div3</div>

1, 分支结构 if…else

	if(!true){//判断条件不成立
				alert(100);
			}

for循环

for(let i = 1;i<=100;i++){
					if(i % 2 == 0){//判断是不是偶数
						sum = sum + i ;//求和
					}
				}

//bug:for循环里定义的变量,竟然在循环外也能用!!!
				//原因:定义的变量没有作用域的概念,使用let定义变量!!!
				//var没有作用域,let严格的规定了作用域
				//console.log(i+"=====");

1、什么是盒子模型？

在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容(content)，元素的内边距(padding)，元素的边框(border)，元素的外边距(margin)四个部分。这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的盒模型。

2、行内元素有哪些？块级元素有哪些？空(void)元素有那些？

行内元素：a、b、span、img、input、strong、select、label、em、button、textarea

块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote

空元素：即系没有内容的HTML元素，例如：br、meta、hr、link、input、img

3、CSS实现垂直水平居中

一道经典的问题，实现方法有很多种，以下是其中一种实现：

HTML结构：

CSS：

.wrapper{position:relative;}

.content{

background-color:#6699FF;

width:200px;

height:200px;

position: absolute; //父元素需要相对定位

top: 50%;

left: 50%;

margin-top:-100px ; //二分之一的height，width

margin-left: -100px;

}

4、简述一下src与href的区别

href 是指向网络资源所在位置，建立和当前元素(锚点)或当前文档(链接)之间的链接，用于超链接。

src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置;在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

5、什么是CSS Hack？

一般来说是针对不同的浏览器写不同的CSS,就是 CSS Hack。

IE浏览器Hack一般又分为三种，条件Hack、属性级Hack、选择符Hack(详细参考CSS文档：css文档)。例如：

// 1、条件Hack

// 2、属性Hack

.test{

color:#0909; /* For IE8+ */

color:#f00; / For IE7 and earlier */

_color:#ff0; /* For IE6 and earlier */

}

// 3、选择符Hack

html .test{color:#090;} /* For IE6 and earlier */
- html .test{color:#ff0;} /* For IE7 */

6、简述同步和异步的区别

同步是阻塞模式，异步是非阻塞模式。

同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去;

异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。

7、px和em的区别

px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易。em得值不是固定的，并且em会继承父级元素的字体大小。

浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em

8、什么叫优雅降级和渐进增强？

渐进增强 progressive enhancement：

针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级 graceful degradation：

一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

区别：

a. 优雅降级是从复杂的现状开始，并试图减少用户体验的供给

b. 渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要

c. 降级(功能衰减)意味着往回看;而渐进增强则意味着朝前看，同时保证其根基处于安全地带

9、浏览器的内核分别是什么？

IE: trident内核

Firefox：gecko内核

Safari：webkit内核

Opera：以前是presto内核，Opera现已改用Google Chrome的Blink内核

Chrome：Blink(基于webkit，Google与Opera Software共同开发)

JavaScript部分

1、怎样添加、移除、移动、复制、创建和查找节点？

1)创建新节点

createDocumentFragment() //创建一个DOM片段

createElement() //创建一个具体的元素

createTextNode() //创建一个文本节点

2)添加、移除、替换、插入

appendChild() //添加

removeChild() //移除

replaceChild() //替换

insertBefore() //插入

3)查找

getElementsByTagName() //通过标签名称

getElementsByName() //通过元素的Name属性的值

getElementById() //通过元素Id，唯一性

2、实现一个函数clone，可以对JavaScript中的5种主要的数据类型(包括Number、String、Object、Array、Boolean)进行值复制。

/**

对象克隆
支持基本数据类型及对象
递归方法

function clone(obj) {

var o;

switch (typeof obj) {

case “undefined”:

break;

case “string”:

o = obj + “”;

break;

case “number”:

o = obj - 0;

break;

case “boolean”:

o = obj;

break;

case “object”: // object 分为两种情况对象(Object)或数组(Array)

if (obj === null) {

o = null;

} else {

if (Object.prototype.toString.call(obj).slice(8, -1) === “Array”) {

o = [];

for (var i = 0; i obj.length; i++) {

o.push(clone(obj[i]));

}

} else {

o = {};

for (var k in obj) {

o[k] = clone(obj[k]);

}

break;

default:

o = obj;

break;

}

return o;

}

3、如何消除一个数组里面重复的元素？

// 方法一：

var arr1 =[1,2,2,2,3,3,3,4,5,6],

arr2 = [];

for(var i = 0,len = arr1.length; i< len; i++){

if(arr2.indexOf(arr1[i]) < 0){

arr2.push(arr1[i]);

}

document.write(arr2); // 1,2,3,4,5,6

4、想实现一个对页面某个节点的拖曳？如何做？

使用原生JS

5、在Javascript中什么是伪数组？如何将伪数组转化为标准数组？

伪数组(类数组)：无法直接调用数组方法或期望length属性有什么特殊的行为，但仍可以对真正数组遍历方法来遍历它们。典型的是函数的argument参数，还有像调用getElementsByTagName,document.childNodes之类的,它们都返回NodeList对象都属于伪数组。可以使用Array.prototype.slice.call(fakeArray)将数组转化为真正的Array对象。

function log(){

var args = Array.prototype.slice.call(arguments);

//为了使用unshift数组方法，将argument转化为真正的数组

args.unshift(‘(app)’);

console.log.apply(console, args);

};

6、Javascript中callee和caller的作用？

caller是返回一个对函数的引用，该函数调用了当前函数;

callee是返回正在被执行的function函数，也就是所指定的function对象的正文。

7、请描述一下cookies，sessionStorage和localStorage的区别

sessionStorage用于本地存储一个会话(session)中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

web storage和cookie的区别

Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。

除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在，而Web Storage仅仅是为了在本地“存储”数据而生。

8、手写数组快速排序

关于快排算法的详细说明，可以参考阮一峰老师的文章快速排序

“快速排序”的思想很简单，整个排序过程只需要三步：

(1)在数据集之中，选择一个元素作为”基准”(pivot)。

(2)所有小于”基准”的元素，都移到”基准”的左边;所有大于”基准”的元素，都移到”基准”的右边。

(3)对”基准”左边和右边的两个子集，不断重复第一步和第二步，直到所有子集只剩下一个元素为止。

9、统计字符串”aaaabbbccccddfgh”中字母个数或统计最多字母数。

var str = “aaaabbbccccddfgh”;

var obj = {};

for(var i=0;istr.length;i++){

var v = str.charAt(i);

if(obj[v] & obj[v].value == v){

obj[v].count = ++ obj[v].count;

}else{

obj[v] = {};

obj[v].count = 1;

obj[v].value = v;

}

for(key in obj){

document.write(obj[key].value +‘=’+obj[key].count+’ '); // a=4 b=3 c=4 d=2 f=1 g=1 h=1

}

10、写一个function，清除字符串前后的空格。(兼容所有浏览器)

function trim(str) {

if (str & typeof str === “string”) {

return str.replace(/(^s*)|(s*)$/g,“”); //去除前后空白符

}

其他部分

1、一次完整的HTTP事务是怎样的一个过程？

基本流程：

a. 域名解析

b. 发起TCP的3次握手

c. 建立TCP连接后发起http请求

d. 服务器端响应http请求，浏览器得到html代码

e. 浏览器解析html代码，并请求html代码中的资源

f. 浏览器对页面进行渲染呈现给用户

2、对前端工程师这个职位你是怎么样理解的？

a. 前端是最贴近用户的程序员，前端的能力就是能让产品从 90分进化到 100 分，甚至更好

b. 参与项目，快速高质量完成实现效果图，精确到1px;

c. 与团队成员，UI设计，产品经理的沟通;

d. 做好的页面结构，页面重构和用户体验;

e. 处理hack，兼容、写出优美的代码格式;

f. 针对服务器的优化、拥抱最新前端技术。

用js递归的方式写1到100求和？

递归我们经常用到，vue在实现双向绑定进行数据检验的时候用的也是递归，但要我们面试的时候手写一个递归，如果对递归的概念理解不透彻，可能还是会有一些问题。

 function add(num1,num2){
    	var num = num1+num2;
          if(num2+1>100){
	   return num;
    	}else{
 	  return add(num,num2+1)
         }
  }
  var sum =add(1,2);

页面渲染html的过程？

不需要死记硬背，理解整个过程即可
浏览器渲染页面的一般过程：

1.浏览器解析html源码，然后创建一个 DOM树。并行请求 css/image/js在DOM树中，每一个HTML标签都有一个对应的节点，并且每一个文本也都会有一个对应的文本节点。DOM树的根节点就是 documentElement，对应的是html标签。

2.浏览器解析CSS代码，计算出最终的样式数据。构建CSSOM树。对CSS代码中非法的语法它会直接忽略掉。解析CSS的时候会按照如下顺序来定义优先级：浏览器默认设置 < 用户设置 < 外链样式 < 内联样式 < html中的style。

3.DOM Tree + CSSOM --> 渲染树（rendering tree）。渲染树和DOM树有点像，但是是有区别的。

DOM树完全和html标签一一对应，但是渲染树会忽略掉不需要渲染的元素，比如head、display:none的元素等。而且一大段文本中的每一个行在渲染树中都是独立的一个节点。渲染树中的每一个节点都存储有对应的css属性。

4.一旦渲染树创建好了，浏览器就可以根据渲染树直接把页面绘制到屏幕上。

以上四个步骤并不是一次性顺序完成的。如果DOM或者CSSOM被修改，以上过程会被重复执行。实际上，CSS和JavaScript往往会多次修改DOM或者CSSOM。

说一下CORS（跨域）？

CORS是一种新标准，跨域资源共享，支持同源通信，也支持跨域通信。fetch是实现CORS通信的

规定要求：请求协议://域名:端口号
1.如果3者都满足,则符合同源策略.浏览器可以正确解析.
2.反之(有一个不满足)不满足同源策略.称之为跨域请求. 则浏览器不能正常解析Ajax请求.

如何中断ajax请求？
一种是设置超时时间让ajax自动断开，另一种是手动停止ajax请求，其核心是调用XML对象的abort方法，ajax.abort()

银河系的一束光

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端的面试题

1、什么是盒子模型？在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容(content)，元素的内边距(padding)，元素的边框(border)，元素的外边距(margin)四个部分。这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的盒模型。2、行内元素有哪些？块级元素有哪些？空(void)元素有那些？行内元素：a、b、span、img、input、strong、select、label、em、button、
复制链接

扫一扫