前端工程师基本知识点集合

雨点打透心脏的1/2处 2021-07-26 01:58 347阅读 0赞

### 前端工程师基本知识点集合 ###

*  我的职场转折点
 *   *  知识点集合

# 我的职场转折点 #

我是2013级的毕业生，虽然大学时成绩绩点不错，但是作为一名学习了机械专业的女生，毕业即失业的悲惨结局让我很是无语。那时候的自己在学校除了上自习就是出去发传单，并没有积累任何其他技能。我的职场转折点是到了2018年，在此之前，我是从事医疗设备行业，从事的具体内容是技术部门，负责技术图纸的绘制，部分软件实施及测试工作。曾经从头至尾跟随编程人员在半年时间内完成了一项符合国家规范的软件系统，至今该公司仍在使用中。也就是这次机会让我有幸接触到了前端编程。2018年至今我应聘到一家互联网公司从事测试岗位，然后慢慢的接触到了前端工程师这个岗位。下面就是前端基础知识点的集合。一起努力吧。

## 知识点集合 ##

以下内容是针对 HTML CSS JS 的部分知识点的集合:

1.  **行内元素**有哪些？**块级元素**有哪些？**行内元素如何转换成块级元素**？；
2.  请回答，css代码，有几种常见的引入方式，分别是什么？；
3.  web标准指的是什么？(提示：一个高效网页的体系)；
4.  请简化一下css代码；
    
        #content{ 
         		margin:0 10px;
         		padding:0;
         		background:#fff;
         } 
         #content div{ 
         		margin:0 10px;
         		padding:0;
         		font-size:14px;
         		text-align:center;
         		color:#e9e9e9;
         }
         #nav{ 
         		margin:0 10px;
         		padding:0;
         		background:#e0e0e0;
         }
5.  各位web前端工程师，考你们一个小常识，在很浏览器中Body都有默认的margin,这个值是多少呐？
6.  有如下的代码
    
        <html lang="en">
         <head>
         	<meta charset="UTF-8">
         	<title>Document</title>
         	<style>
         		body{ 
         			padding:0;
         			margin:0;
         		}
         		#my-defined{ 
         			width:100px;
         			height:100px;
         			padding:0 100px;
         			margin:10px 20px 30px 40px;
         			border:1px solid orange;
         			background:orange;
         		}
         	</style>
         </head>
         <body>
         	<div id="my-defined"></div>
         </body>
         </html>
         ```
         请回答，Html页面中，orange颜色的区域宽度是多少，orange区域距离页面左边和上边的距离分别为多少？
7.  用 css html 编写一个两列布局的网页，要求右侧宽度为200px,左侧自动扩展。
8.  如何居中一个浮动元素？
    
        #my-defined{ 
        	position:absolute;
        	width:300px;
        	height:500px;
        }
    
    在上面添加代码即可
9.  请根据下面的html和css代码，画出布局示意图  
    \`\`\`
    
        <style>
        	#page{
        		width:520px
        	}
        	.nav{
        		width:200px;
        		float:right;
        		background:orange;
        	}
        	.main{
        		width:200px;
        		float:left;
        		padding-left:110px;
        		background:black;
        	}
        	.sub{
        		width:100px;
        		float:left;
        		margin:10px 0 10px -100px;
        	}
        	.nav .sub{
        		border:1px dashed #000;
        		height:300px;
        		background:orange;
        	}
        	.sub{
        		height:280px;
        	}
        </style>
        <body>
        	<div id="page">
        		<div class="main"><div class="sub"></div></div>
        		<div class="nav"></div>
        	</div>
        </body>
        </html>
        ```
10. form表单中的**method**属性常用哪些值，他们的区别是什么？
11. 如何去掉ul>li结构中Li前面的圆点？去除圆点后，每个Li前面会有空余，如何解决？
12. 写出javascript语言中typeof可能返回的结果。
13. 已知数组 var arr = \[‘goole’,‘microsoft’,‘oracle’,‘阿里’,‘freewheel’,‘IBM’,‘爱立信’,‘百度’,‘企鹅’,‘美团’,‘去哪’,‘58同城’,‘新浪’,‘搜狐’,‘大众点评’,‘360’,‘汽车之家’,‘巨人网络’,‘携程’,‘同城’,‘4399’,‘凤凰网’,‘人民网’\],亲们，如果你想进前十大的公司，那就请用效率最高的方法将此数组按顺序连接成字符。
14. 请写出Html css javascript注释的代码形式。
15. 请编写一段 javascript脚本生成下面的这段DOM结构，要求使用标准的DOM方法或属性。
    
        <div class="example">
        	<p class="slogan">我最帅！</div>
        </div>
16. 要为一个Html元素绑定一个事件，如点击事件，请写出一个兼容各个浏览器的事件绑定方法。
17. 简述call,applay方法的用途和区别。
18. 请自己封装一个ajax.
19. 为要给数组去重 eg:var arr =\[‘a’,‘b’,‘234.23’,‘a’,‘b’,3,1,234\];要求，在原型链上编写方法可得满分。
20. 如今有一个Ul,里面有十亿个li，要求点击Li触发事件，弹出对应li的内容。
21. 如何阻止事件冒泡和事件默认事件。
22. 什么是DOM？
23. 请利用javascript取非行间样式，要求兼容性各个浏览器。
24. 运行test()和new test()的结果是什么？
    
        var a = 5;
        function test(){ 
        	a = 0; 
        	alert(a);
        	alert(this.a);
        	var a;
        	alert(a);
        }
25. 有字符串‘aaabbbcccdddeefggaa’,转换成连续不重复的字符串，结果就是 abcefga;
26. 一连串的数字，请实现打点功能，如：已知100000000转换成1.000.000.000;(提示：用正则)
27. 写出运算结果
    
        alert(typeof(a));
        alert(typeof(undegined));
        alert(typeof(NaN));
        alert(typeof(null));
        alert(typeof(NaN));
        var a = '123abc';
        alert(typeof(+a));
        alert(typeof(!!a));
        alert(typeof(a+''));
        alert(1=='1');
        alert(NaN == NaN);
        alert(NaN == undefined);
        alert('11'+11);
        alert(1 === '1');
        alert(parseInt('123abc'));
        var num = 123123.345789;
        alert(num.toFixed(3));
28. 打印当前年月日时分秒
29. 在css中，font-size设置的是字体的高还是宽。单位px,em是相对值还是绝对值。
30. 有Html结构如下，求他们之间的间距。
    
        <div style="background-color:red;margin:0 0 100px 0;">123</div>
        <div style="background-color:red;margin:200px 0 0 0;">234</div>
31. 你了解js对象吗？可以简单说说自定义构造函数创建对象的原理吗？
32. 你了解原型链吗？请写出一种原型链实现继承的方式。
33. 使用javascript深度克隆一个对象，要求在原型链上编写。
34. 描述一下预编译的过程。
35. 请介绍一下js语言的特点。
36. 请介绍一下主流浏览器以及他们相应的内核，请介绍一下浏览器分为哪几个部分，内核呐？
37. 你了解js时间线嘛，能简单描述一下时间线的顺序嘛？
38. 请写出异步加载js的几种方案。
39. var a = (10\*3-4/2+1)%2,b=3;b%=a+3;console.log(a++);console.log(–b);
40.     <ul><li>a</li><li>a</li><li>a</li><li>a</li></ul>
    
    使用原生的js,addEventListener，给每个Li元素绑定事件，输出他们的顺序。
41. 一个字符串由\[a-z\]组成，找出第一个只出现一次的字母。
42.     var name = "222";
          var a = { 
           	name:'111',
           	say:function(){ 
           		console.log(this.name);
           	}
           }
           var fun = a.say;
           fun();
           a.say();
           var b = { 
           	name:'333',
           	say:function(fun){ 
           		fun();
           	}
           }
           b.say(a.say);
           b.say=a.say;
           b.say();
           写出控制台打印的结果
43. var str=“你很帅”;str.length=3;console.log(str);此程序的执行结果是什么？为什么？
44. 请用多种办法创建对象。
45. 在企业中，多人开发同一个js文件，常会导致污染全局变量的事情发生，为有效的解决这种情况，有什么好的建议嘛？
46. 如何枚举一个对象中的所有的自有属性，请写出具体代码。
47. 让一个数组里面的数据，从小到大排列，var arr=\[23,4,6,7,2,2,55,8\]
48. es5的严格模式如何使用，使用时应注意写什么？
49. 选择html元素节点的几种方法，以及他们各自的兼容性问题及特点。
50. 请说出，节点类型的值为1，3，8，9的值对应的节点是什么？
51. 请说出，鼠标事件的触发顺序，以及如何实现右键的事件监听。
52. 数据格式JSON转换为字符串，以及把字符串转换为JSON的方法。
53. 请说出几种你所熟知的BOM对象，并介绍其一点或两点功能。
54. 请详细说明position定位的值有什么区别，如果有不能兼容的问题，怎么解决。
55. 有如下的html和css代码
    
        <style type="text/css">
        	ul{ 
        		list-style-type:none;
        		padding:0px;
        	}
        	ul>li{ 
        		float:left;
        	}
        </style>
        <ul><li></li><li></li><li></li></ul>
    
    请在添加css代码，使ul在外观上可以包住li
56. 请说出你所熟知的选择器的优先级关系(需要表明权重)
57. 请说出display的值及含义
58. 写一个输入框，带有js功能，鼠标聚焦提示信息消息，失去焦点显示提示信息。
59. 以下代码
    
        function fn(a,b){ 
           	arguments[0]==1;
           	console.log(a);
           }
           fn(2,1);
    
    写出打印结果，并说明原因。
60. 请将如下变量名转换为小驼峰式。  
    my-first-name ——> myFirstName(用正则做)  
    var str = ‘my-first-name’;
61. 请将形如 aaaabbbb的字符串调换成bbbbaaaa的形式(用正则做)
62. 说说你曾经做过的一个项目，写写心得体会，和整个项目的思维过程。  
    \[注\]以上资源来源于渡一教育。