web前端面试经常问到的面试题有哪些 Web前端岗位面试题有哪些
\u9762\u8bd5Web\u524d\u7aef\u9700\u8981\u6ce8\u610f\u4ec0\u4e48\uff1f\u4f1a\u9762\u8bd5\u54ea\u4e9b\u95ee\u9898\uff1f\u4f5c\u4e3a\u4e00\u540dHTML5\u524d\u7aef\u5de5\u7a0b\u5e08\uff0c\u4e3a\u4e86\u5de5\u4f5c\uff0c\u4e3a\u4e86\u5c31\u4e1a\u6211\u4eec\u514d\u4e0d\u4e86\u8981\u53c2\u52a0\u5404\u79cd\u5404\u6837\u7684\u9762\u8bd5\u3002\u4e3a\u6b64\u603b\u7ed3\u4e86\u9762\u8bd5\u524d\u7684\u6ce8\u610f\u4e8b\u9879\uff1a
\u7b2c\u4e00\uff1a\u6ce8\u610f\u81ea\u5df1\u7684\u4eea\u5bb9\u4eea\u8868
\u9762\u8bd5\u4e4b\u524d\uff0c\u4e00\u5b9a\u8981\u518d\u6b21\u4ece\u5934\u5230\u811a\u5730\u5c06\u81ea\u5df1\u7684\u4eea\u5bb9\u4eea\u8868\u68c0\u67e5\u4e00\u904d\u3002\u68c0\u67e5\u65f6\u4e3b\u8981\u5305\u62ec\uff0c\u81ea\u5df1\u7684\u7259\u7f1d\u662f\u4e0d\u662f\u8fd8\u6709\u98df\u7269\u6b8b\u6e23\uff0c\u6240\u4ee5\u4f60\u9700\u8981\u5c31\u8fd1\u627e\u4e00\u4e2a\u536b\u751f\u95f4\uff0c\u5982\u679c\u6ca1\u6709\u536b\u751f\u95f4\u5c31\u8fd1\u627e\u4e00\u4e2a\u89d2\u843d\u4e5f\u662f\u53ef\u4ee5\u7684\uff0c\u4f46\u662f\u5207\u8bb0\u4e00\u5b9a\u4e0d\u8981\u5728\u5927\u5ead\u5e7f\u4f17\u4e4b\u4e0b\u3002\u56e0\u6b64\uff0c\u4e3a\u4e86\u7ed9\u81ea\u5df1\u6574\u7406\u51fa\u7740\u88c5\u7684\u65f6\u95f4\u8bf7\u5728\u7ea6\u5b9a\u65f6\u95f4\u524d20\u5206\u949f\u5230\u8fbe\u3002
\u7b2c\u4e8c\uff1a\u518d\u6b21\u68c0\u67e5\u9762\u8bd5\u65f6\u6240\u9700\u7684\u8d44\u6599\u662f\u5426\u90fd\u5df2\u5e26\u5168
\u8fd9\u4e9b\u8d44\u6599\u4e3b\u8981\u5305\u62ec\uff1a\u8eab\u4efd\u8bc1\u660e\u3001\u5b66\u5386\u6587\u51ed\u8bc1\u660e\u3001\u4e2a\u4eba\u7b80\u5386\u3001\u4ee5\u5f80\u4f5c\u54c1\u7b49\u7b49\uff0c\u5982\u679c\u8fd9\u4e9b\u4e1c\u897f\u9f50\u5168\u4e4b\u540e\uff0c\u9700\u8981\u5bf9\u8fd9\u4e9b\u8d44\u6599\u505a\u4e00\u4e2a\u6574\u7406\u4e0e\u6392\u5e8f\u3002\u56e0\u4e3a\u6ca1\u6709\u54ea\u4e2a\u9762\u8bd5\u5b98\u5e0c\u671b\u770b\u5230\u9762\u8bd5\u8005\u62ff\u51fa\u4e00\u5806\u201c\u83ab\u540d\u5176\u5999\u201d\u7684\u4e1c\u897f\u585e\u7ed9\u4ed6\uff0c\u8ba9\u4ed6\u81ea\u5df1\u518d\u4e00\u9875\u4e00\u9875\u7684\u7ffb\u627e\u81ea\u5df1\u9700\u8981\u7684\u5185\u5bb9\uff0c\u5982\u679c\u8bf4\u8fd9\u4e9b\u8d44\u6599\u5728\u9762\u8bd5\u5b98\u624b\u4e2d\u4e0d\u5c0f\u5fc3\u6563\u843d\u4e00\u5730\uff0c\u7ed3\u679c\u53ef\u60f3\u800c\u77e5\u3002\u8fd9\u6837\u7684\u6c42\u804c\u8005\u5728\u9762\u8bd5\u5b98\u773c\u4e2d\u4e5f\u4e00\u5b9a\u4e0d\u662f\u4e00\u4e2a\u8ba9\u4eba\u653e\u5fc3\u3001\u6709\u6761\u4e0d\u7d0a\u7684\u5458\u5de5\u3002\u5f53\u7136\u5982\u679c\u68c0\u67e5\u65f6\u53d1\u73b0\u8d44\u6599\u6ca1\u6709\u5e26\u5168\uff0c\u4e5f\u4e0d\u8981\u7d27\u5f20\u3002\u53cd\u800c\u4f60\u8981\u5e86\u5e78\u5e78\u4e8f\u53ca\u65f6\u68c0\u67e5\uff0c\u4e5f\u6709\u8db3\u591f\u7684\u65f6\u95f4\u7ec4\u7ec7\u8bed\u8a00\u53bb\u5411\u9762\u8bd5\u5b98\u89e3\u91ca\u3002
\u7b2c\u4e09\uff1a\u9762\u8bd5\u4e4b\u524d\u5c06\u901a\u4fe1\u5de5\u5177\u8c03\u6210\u632f\u52a8\u6216\u5173\u95ed\u72b6\u6001
\u867d\u7136\u8bf4\u9762\u8bd5\u8005\u4e0e\u9762\u8bd5\u5b98\u4e4b\u95f4\u662f\u4e00\u4e2a\u5e73\u7b49\u7684\u5173\u7cfb\uff0c\u4f46\u6bd5\u7adf\u4f60\u662f\u53bb\u4eba\u5bb6\u516c\u53f8\u6c42\u804c\u7684\uff0c\u59cb\u7ec8\u5904\u4e8e\u4e00\u4e2a\u88ab\u52a8\u7684\u72b6\u6001\uff0c\u6240\u4ee5\u6700\u8d77\u7801\u7684\u5c0a\u91cd\u8fd8\u662f\u8981\u505a\u5230\u7684\u3002\u66fe\u7ecf\u6709\u8c03\u67e5\u663e\u793a\uff0c\u5bf9\u4e8e\u9762\u8bd5\u8fc7\u7a0b\u4e2d\u63a5\u7535\u8bdd\u6216\u662f\u88ab\u7535\u8bdd\u6253\u65ad\u7684\u6c42\u804c\u8005\uff0c\u4f1a\u88abHR\u51cf\u5206\u3002
\u7b2c\u56db\uff1a\u7b49\u5019\u9762\u8bd5\u5b98\u65f6\uff0c\u4ed4\u7ec6\u89c2\u5bdf\u591a\u4e86\u89e3\u9762\u8bd5\u516c\u53f8
\u5728\u7b49\u5019\u9762\u8bd5\u5b98\u65f6\uff0c\u53ef\u4ee5\u6697\u81ea\u89c2\u5bdf\u4e00\u4e0b\u516c\u53f8\u7684\u5927\u4f53\u60c5\u51b5\u6bd4\u5982\u5458\u5de5\u7684\u7740\u88c5\u98ce\u683c\u3001\u516c\u53f8\u7684LOGO\u6216\u662f\u8d34\u5728\u5899\u4e0a\u7684\u4f01\u4e1a\u6587\u5316\u3001\u516c\u53f8\u7684\u73af\u5883\u7b49\u7b49\uff0c\u4e00\u6765\u53ef\u4ee5\u5728\u63a5\u4e0b\u6765\u7684\u9762\u8bd5\u8fc7\u7a0b\u4e2d\u8868\u73b0\u51fa\u81ea\u5df1\u5bf9\u516c\u53f8\u7684\u8ba4\u540c\u611f\uff0c\u4e8c\u6765\u4e5f\u53ef\u4ee5\u8ba9\u81ea\u5df1\u5bf9\u6c42\u804c\u516c\u53f8\u591a\u4e9b\u4e86\u89e3\uff0c\u4ee5\u786e\u5b9a\u662f\u5426\u8981\u63a5\u53d7\u8fd9\u91cc\u7684\u5de5\u4f5c\u3002\u5982\u679c\u4f60\u8eab\u8fb9\u6709\u516c\u53f8\u7684\u8d44\u6599\u5ba3\u4f20\u67b6\uff0c\u4e0d\u59a8\u53d6\u4e00\u672c\u7ffb\u770b\u4e00\u4e0b\uff0c\u4e5f\u4f1a\u589e\u52a0HR\u5bf9\u4f60\u7684\u597d\u611f\u3002
\u7b2c\u4e94\uff1a\u653e\u677e\u5fc3\u60c5\uff0c\u4fdd\u6301\u81ea\u4fe1
\u9762\u8bd5\u65f6\u4e00\u5b9a\u8981\u4fdd\u6301\u4e00\u5b9a\u7684\u81ea\u4fe1\uff0c\u8fd9\u6837\u4e5f\u4f1a\u7ed9\u9762\u8bd5\u5b98\u7559\u4e0b\u5f88\u597d\u7684\u5370\u8c61\u3002\u9762\u8bd5\u53ea\u662f\u4f60\u6b65\u5165\u5de5\u4f5c\u7684\u7b2c\u4e00\u6b65\uff0c\u5373\u4fbf\u662f\u5931\u8d25\u4e86\u90a3\u4e5f\u662f\u4eba\u751f\u91cd\u8981\u7684\u7ecf\u5386\u3002\u5931\u8d25\u662f\u4e3a\u4e86\u66f4\u597d\u7684\u8fce\u63a5\u4e0b\u4e00\u4e2a\u6311\u6218\u3002
\u4f5c\u4e3a\u4e00\u540dweb\u524d\u7aef\u5de5\u7a0b\u5e08\u5343\u4e07\u4e0d\u8981\u89c9\u5f97\u61c2\u6280\u672f\u9762\u8bd5\u5c31\u80fd\u4e07\u4e8b\u5927\u5409\u4e86\uff0c\u50cf\u4ee5\u4e0a\u4e94\u70b9\u7ec6\u8282\u6027\u7684\u4e1c\u897f\u4e5f\u662f\u4e00\u5b9a\u8981\u638c\u63e1\u7684\u3002
\u9762\u8bd5\u9898\u7cfb\u5217\uff1a
\u7f51\u9875\u94fe\u63a5
HTML+CSS
1.\u5bf9WEB\u6807\u51c6\u4ee5\u53caW3C\u7684\u7406\u89e3\u4e0e\u8ba4\u8bc6
\u6807\u7b7e\u95ed\u5408\u3001\u6807\u7b7e\u5c0f\u5199\u3001\u4e0d\u4e71\u5d4c\u5957\u3001\u63d0\u9ad8\u641c\u7d22\u673a\u5668\u4eba\u641c\u7d22\u51e0\u7387\u3001\u4f7f\u7528\u5916
\u94fecss\u548cjs\u811a\u672c\u3001\u7ed3\u6784\u884c\u4e3a\u8868\u73b0\u7684\u5206\u79bb\u3001\u6587\u4ef6\u4e0b\u8f7d\u4e0e\u9875\u9762\u901f\u5ea6\u66f4\u5feb\u3001\u5185\u5bb9\u80fd\u88ab\u66f4\u591a\u7684\u7528\u6237\u6240\u8bbf\u95ee\u3001\u5185\u5bb9\u80fd\u88ab\u66f4\u5e7f\u6cdb\u7684\u8bbe\u5907\u6240\u8bbf\u95ee\u3001\u66f4\u5c11\u7684\u4ee3\u7801\u548c\u7ec4\u4ef6\uff0c\u5bb9\u6613\u7ef4
\u62a4\u3001\u6539\u7248\u65b9\u4fbf\uff0c\u4e0d\u9700\u8981\u53d8\u52a8\u9875\u9762\u5185\u5bb9\u3001\u63d0\u4f9b\u6253\u5370\u7248\u672c\u800c\u4e0d\u9700\u8981\u590d\u5236\u5185\u5bb9\u3001\u63d0\u9ad8\u7f51\u7ad9\u6613\u7528\u6027\uff1b
2.xhtml\u548chtml\u6709\u4ec0\u4e48\u533a\u522b
HTML\u662f\u4e00\u79cd\u57fa\u672c\u7684WEB\u7f51\u9875\u8bbe\u8ba1\u8bed\u8a00\uff0cXHTML\u662f\u4e00\u4e2a\u57fa\u4e8eXML\u7684\u7f6e\u6807\u8bed\u8a00
\u6700\u4e3b\u8981\u7684\u4e0d\u540c\uff1a
XHTML \u5143\u7d20\u5fc5\u987b\u88ab\u6b63\u786e\u5730\u5d4c\u5957\u3002
XHTML \u5143\u7d20\u5fc5\u987b\u88ab\u5173\u95ed\u3002
\u6807\u7b7e\u540d\u5fc5\u987b\u7528\u5c0f\u5199\u5b57\u6bcd\u3002
XHTML \u6587\u6863\u5fc5\u987b\u62e5\u6709\u6839\u5143\u7d20\u3002
3.Doctype? \u4e25\u683c\u6a21\u5f0f\u4e0e\u6df7\u6742\u6a21\u5f0f-\u5982\u4f55\u89e6\u53d1\u8fd9\u4e24\u79cd\u6a21\u5f0f\uff0c\u533a\u5206\u5b83\u4eec\u6709\u4f55\u610f\u4e49?
\u7528\u4e8e\u58f0\u660e\u6587\u6863\u4f7f\u7528\u90a3\u79cd\u89c4\u8303\uff08html/Xhtml\uff09\u4e00\u822c\u4e3a \u4e25\u683c \u8fc7\u5ea6 \u57fa\u4e8e\u6846\u67b6\u7684html\u6587\u6863
\u52a0\u5165XMl\u58f0\u660e\u53ef\u89e6\u53d1\uff0c\u89e3\u6790\u65b9\u5f0f\u66f4\u6539\u4e3aIE5.5 \u62e5\u6709IE5.5\u7684bug
4.\u884c\u5185\u5143\u7d20\u6709\u54ea\u4e9b?\u5757\u7ea7\u5143\u7d20\u6709\u54ea\u4e9b?CSS\u7684\u76d2\u6a21\u578b?
\u5757\u7ea7\u5143\u7d20\uff1adiv p h1 h2 h3 h4 form ul
\u884c\u5185\u5143\u7d20: a b br i span input select
Css\u76d2\u6a21\u578b:\u5185\u5bb9\uff0cborder ,margin\uff0cpadding
5.CSS\u5f15\u5165\u7684\u65b9\u5f0f\u6709\u54ea\u4e9b? link\u548c@import\u7684\u533a\u522b\u662f?
\u5185\u8054 \u5185\u5d4c \u5916\u94fe \u5bfc\u5165
\u533a\u522b \uff1a\u540c\u65f6\u52a0\u8f7d
\u524d\u8005\u65e0\u517c\u5bb9\u6027\uff0c\u540e\u8005CSS2.1\u4ee5\u4e0b\u6d4f\u89c8\u5668\u4e0d\u652f\u6301
Link \u652f\u6301\u4f7f\u7528javascript\u6539\u53d8\u6837\u5f0f\uff0c\u540e\u8005\u4e0d\u53ef
6.CSS\u9009\u62e9\u7b26\u6709\u54ea\u4e9b?\u54ea\u4e9b\u5c5e\u6027\u53ef\u4ee5\u7ee7\u627f?\u4f18\u5148\u7ea7\u7b97\u6cd5\u5982\u4f55\u8ba1\u7b97?\u5185\u8054\u548cimportant\u54ea\u4e2a\u4f18\u5148\u7ea7\u9ad8?
\u6807\u7b7e\u9009\u62e9\u7b26 \u7c7b\u9009\u62e9\u7b26 id\u9009\u62e9\u7b26
\u7ee7\u627f\u4e0d\u5982\u6307\u5b9a Id>class>\u6807\u7b7e\u9009\u62e9
\u540e\u8005\u4f18\u5148\u7ea7\u9ad8
7.\u524d\u7aef\u9875\u9762\u6709\u54ea\u4e09\u5c42\u6784\u6210\uff0c\u5206\u522b\u662f\u4ec0\u4e48?\u4f5c\u7528\u662f\u4ec0\u4e48?
\u7ed3\u6784\u5c42 Html \u8868\u793a\u5c42 CSS \u884c\u4e3a\u5c42 js
8.css\u7684\u57fa\u672c\u8bed\u53e5\u6784\u6210\u662f?
\u9009\u62e9\u5668{\u5c5e\u60271:\u503c1;\u5c5e\u60272:\u503c2;\u2026\u2026}
9.\u4f60\u505a\u7684\u9875\u9762\u5728\u54ea\u4e9b\u6d41\u89c8\u5668\u6d4b\u8bd5\u8fc7?\u8fd9\u4e9b\u6d4f\u89c8\u5668\u7684\u5185\u6838\u5206\u522b\u662f\u4ec0\u4e48?
Ie(Ie\u5185\u6838) \u706b\u72d0\uff08Gecko\uff09 \u8c37\u6b4c\uff08webkit\uff09 opear(Presto)
10.\u5199\u51fa\u51e0\u79cdIE6 BUG\u7684\u89e3\u51b3\u65b9\u6cd5
1.\u53cc\u8fb9\u8dddBUG float\u5f15\u8d77\u7684 \u4f7f\u7528display
2.3\u50cf\u7d20\u95ee\u9898 \u4f7f\u7528float\u5f15\u8d77\u7684 \u4f7f\u7528dislpay:inline -3px
3.\u8d85\u94fe\u63a5hover \u70b9\u51fb\u540e\u5931\u6548 \u4f7f\u7528\u6b63\u786e\u7684\u4e66\u5199\u987a\u5e8f link visited hover active
4.Ie z-index\u95ee\u9898 \u7ed9\u7236\u7ea7\u6dfb\u52a0position:relative
5.Png \u900f\u660e \u4f7f\u7528js\u4ee3\u7801 \u6539
6.Min-height \u6700\u5c0f\u9ad8\u5ea6 \uff01Important \u89e3\u51b3\u2019
7.select \u5728ie6\u4e0b\u906e\u76d6 \u4f7f\u7528iframe\u5d4c\u5957
8.\u4e3a\u4ec0\u4e48\u6ca1\u6709\u529e\u6cd5\u5b9a\u4e491px\u5de6\u53f3\u7684\u5bbd\u5ea6\u5bb9\u5668\uff08IE6\u9ed8\u8ba4\u7684\u884c\u9ad8\u9020\u6210\u7684\uff0c\u4f7f\u7528over:hidden,zoom:0.08 line-height:1px\uff09
11.\u6807\u7b7e\u4e0atitle\u4e0ealt\u5c5e\u6027\u7684\u533a\u522b\u662f\u4ec0\u4e48?
Alt \u5f53\u56fe\u7247\u4e0d\u663e\u793a\u662f \u7528\u6587\u5b57\u4ee3\u8868\u3002
Title \u4e3a\u8be5\u5c5e\u6027\u63d0\u4f9b\u4fe1\u606f
12.\u63cf\u8ff0css reset\u7684\u4f5c\u7528\u548c\u7528\u9014\u3002
Reset\u91cd\u7f6e\u6d4f\u89c8\u5668\u7684css\u9ed8\u8ba4\u5c5e\u6027 \u6d4f\u89c8\u5668\u7684\u54c1\u79cd\u4e0d\u540c\uff0c\u6837\u5f0f\u4e0d\u540c\uff0c\u7136\u540e\u91cd\u7f6e\uff0c\u8ba9\u4ed6\u4eec\u7edf\u4e00
13.\u89e3\u91cacss sprites\uff0c\u5982\u4f55\u4f7f\u7528\u3002
Css \u7cbe\u7075 \u628a\u4e00\u5806\u5c0f\u7684\u56fe\u7247\u6574\u5408\u5230\u4e00\u5f20\u5927\u7684\u56fe\u7247\u4e0a\uff0c\u51cf\u8f7b\u670d\u52a1\u5668\u5bf9\u56fe\u7247\u7684\u8bf7\u6c42\u6570\u91cf
14.\u6d4f\u89c8\u5668\u6807\u51c6\u6a21\u5f0f\u548c\u602a\u5f02\u6a21\u5f0f\u4e4b\u95f4\u7684\u533a\u522b\u662f\u4ec0\u4e48?
\u76d2\u5b50\u6a21\u578b \u6e32\u67d3\u6a21\u5f0f\u7684\u4e0d\u540c
\u4f7f\u7528 window.top.document.compatMode \u53ef\u663e\u793a\u4e3a\u4ec0\u4e48\u6a21\u5f0f
15.\u4f60\u5982\u4f55\u5bf9\u7f51\u7ad9\u7684\u6587\u4ef6\u548c\u8d44\u6e90\u8fdb\u884c\u4f18\u5316?\u671f\u5f85\u7684\u89e3\u51b3\u65b9\u6848\u5305\u62ec\uff1a
\u6587\u4ef6\u5408\u5e76
\u6587\u4ef6\u6700\u5c0f\u5316/\u6587\u4ef6\u538b\u7f29
\u4f7f\u7528CDN\u6258\u7ba1
\u7f13\u5b58\u7684\u4f7f\u7528
16.\u4ec0\u4e48\u662f\u8bed\u4e49\u5316\u7684HTML?
\u76f4\u89c2\u7684\u8ba4\u8bc6\u6807\u7b7e \u5bf9\u4e8e\u641c\u7d22\u5f15\u64ce\u7684\u6293\u53d6\u6709\u597d\u5904
17.\u6e05\u9664\u6d6e\u52a8\u7684\u51e0\u79cd\u65b9\u5f0f\uff0c\u5404\u81ea\u7684\u4f18\u7f3a\u70b9
1.\u4f7f\u7528\u7a7a\u6807\u7b7e\u6e05\u9664\u6d6e\u52a8 clear:both\uff08\u7406\u8bba\u4e0a\u80fd\u6e05\u695a\u4efb\u4f55\u6807\u7b7e\uff0c\uff0c\uff0c\u589e\u52a0\u65e0\u610f\u4e49\u7684\u6807\u7b7e\uff09
2.\u4f7f\u7528overflow:auto\uff08\u7a7a\u6807\u7b7e\u5143\u7d20\u6e05\u9664\u6d6e\u52a8\u800c\u4e0d\u5f97\u4e0d\u589e\u52a0\u65e0\u610f\u4ee3\u7801\u7684\u5f0a\u7aef,,\u4f7f\u7528zoom:1\u7528\u4e8e\u517c\u5bb9IE\uff09
3.\u662f\u7528afert\u4f2a\u5143\u7d20\u6e05\u9664\u6d6e\u52a8(\u7528\u4e8e\u975eIE\u6d4f\u89c8\u5668)
Javascript
1.javascript\u7684typeof\u8fd4\u56de\u54ea\u4e9b\u6570\u636e\u7c7b\u578b
Object number function boolean underfind
2.\u4f8b\u4e3e3\u79cd\u5f3a\u5236\u7c7b\u578b\u8f6c\u6362\u548c2\u79cd\u9690\u5f0f\u7c7b\u578b\u8f6c\u6362?
\u5f3a\u5236\uff08parseInt,parseFloat,number\uff09
\u9690\u5f0f\uff08== \u2013 ===\uff09
3.split() join() \u7684\u533a\u522b
\u524d\u8005\u662f\u5207\u5272\u6210\u6570\u7ec4\u7684\u5f62\u5f0f\uff0c\u540e\u8005\u662f\u5c06\u6570\u7ec4\u8f6c\u6362\u6210\u5b57\u7b26\u4e32
4.\u6570\u7ec4\u65b9\u6cd5pop() push() unshift() shift()
Push()\u5c3e\u90e8\u6dfb\u52a0 pop()\u5c3e\u90e8\u5220\u9664
Unshift()\u5934\u90e8\u6dfb\u52a0 shift()\u5934\u90e8\u5220\u9664
5.\u4e8b\u4ef6\u7ed1\u5b9a\u548c\u666e\u901a\u4e8b\u4ef6\u6709\u4ec0\u4e48\u533a\u522b
6.IE\u548cDOM\u4e8b\u4ef6\u6d41\u7684\u533a\u522b
1.\u6267\u884c\u987a\u5e8f\u4e0d\u4e00\u6837\u3001
2.\u53c2\u6570\u4e0d\u4e00\u6837
3.\u4e8b\u4ef6\u52a0\u4e0d\u52a0on
4.this\u6307\u5411\u95ee\u9898
7.IE\u548c\u6807\u51c6\u4e0b\u6709\u54ea\u4e9b\u517c\u5bb9\u6027\u7684\u5199\u6cd5
Var ev = ev || window.event
document.documentElement.clientWidth || document.body.clientWidth
Var target = ev.srcElement||ev.target
8.ajax\u8bf7\u6c42\u7684\u65f6\u5019get \u548cpost\u65b9\u5f0f\u7684\u533a\u522b
\u4e00\u4e2a\u5728url\u540e\u9762 \u4e00\u4e2a\u653e\u5728\u865a\u62df\u8f7d\u4f53\u91cc\u9762
\u6709\u5927\u5c0f\u9650\u5236
\u5b89\u5168\u95ee\u9898
\u5e94\u7528\u4e0d\u540c \u4e00\u4e2a\u662f\u8bba\u575b\u7b49\u53ea\u9700\u8981\u8bf7\u6c42\u7684\uff0c\u4e00\u4e2a\u662f\u7c7b\u4f3c\u4fee\u6539\u5bc6\u7801\u7684
9.call\u548capply\u7684\u533a\u522b
Object.call(this,obj1,obj2,obj3)
Object.apply(this,arguments)
10.ajax\u8bf7\u6c42\u65f6\uff0c\u5982\u4f55\u89e3\u91cajson\u6570\u636e
\u4f7f\u7528eval parse \u9274\u4e8e\u5b89\u5168\u6027\u8003\u8651 \u4f7f\u7528parse\u66f4\u9760\u8c31
11.b\u7ee7\u627fa\u7684\u65b9\u6cd5
12.\u5199\u4e00\u4e2a\u83b7\u53d6\u975e\u884c\u95f4\u6837\u5f0f\u7684\u51fd\u6570
function getStyle(obj,attr,value)
{
if(!value)
{
if(obj.currentStyle)
{
return obj.currentStyle(attr)
}
else
{
obj.getComputedStyle(attr,false)
}
}
else
{
obj.style[attr]=value
}
}
13.\u4e8b\u4ef6\u59d4\u6258\u662f\u4ec0\u4e48
\u8ba9\u5229\u7528\u4e8b\u4ef6\u5192\u6ce1\u7684\u539f\u7406\uff0c\u8ba9\u81ea\u5df1\u7684\u6240\u89e6\u53d1\u7684\u4e8b\u4ef6\uff0c\u8ba9\u4ed6\u7684\u7236\u5143\u7d20\u4ee3\u66ff\u6267\u884c\uff01
http://www.webasily.com/?p=78 \u4f8b\u5b50\u53ef\u89c1\u6b64\u94fe\u63a5
14.\u95ed\u5305\u662f\u4ec0\u4e48\uff0c\u6709\u4ec0\u4e48\u7279\u6027\uff0c\u5bf9\u9875\u9762\u6709\u4ec0\u4e48\u5f71\u54cd
\u95ed\u5305\u5c31\u662f\u80fd\u591f\u8bfb\u53d6\u5176\u4ed6\u51fd\u6570\u5185\u90e8\u53d8\u91cf\u7684\u51fd\u6570\u3002
\u6df1\u5165\u7406\u89e3JavaScript\u7684\u95ed\u5305\u7279\u6027 \u5982\u4f55\u7ed9\u5faa\u73af\u4e2d\u7684\u5bf9\u8c61\u6dfb\u52a0\u4e8b\u4ef6 \u6b64\u94fe\u63a5\u53ef\u67e5\u770b\uff08\u95ee\u8fd9\u4e2a\u95ee\u9898\u7684\u4e0d\u662f\u4e00\u4e2a\u516c\u53f8\uff09
15.\u5982\u4f55\u963b\u6b62\u4e8b\u4ef6\u5192\u6ce1\u548c\u9ed8\u8ba4\u4e8b\u4ef6
canceBubble return false
16.\u6dfb\u52a0 \u5220\u9664 \u66ff\u6362 \u63d2\u5165\u5230\u67d0\u4e2a\u63a5\u70b9\u7684\u65b9\u6cd5
obj.appendChidl()
obj.innersetBefore
obj.replaceChild
obj.removeChild
17.\u89e3\u91cajsonp\u7684\u539f\u7406\uff0c\u4ee5\u53ca\u4e3a\u4ec0\u4e48\u4e0d\u662f\u771f\u6b63\u7684ajax
\u52a8\u6001\u521b\u5efascript\u6807\u7b7e\uff0c\u56de\u8c03\u51fd\u6570
Ajax\u662f\u9875\u9762\u65e0\u5237\u65b0\u8bf7\u6c42\u6570\u636e\u64cd\u4f5c
18.javascript\u7684\u672c\u5730\u5bf9\u8c61\uff0c\u5185\u7f6e\u5bf9\u8c61\u548c\u5bbf\u4e3b\u5bf9\u8c61
\u672c\u5730\u5bf9\u8c61\u4e3aarray obj regexp\u7b49\u53ef\u4ee5new\u5b9e\u4f8b\u5316
\u5185\u7f6e\u5bf9\u8c61\u4e3agload Math \u7b49\u4e0d\u53ef\u4ee5\u5b9e\u4f8b\u5316\u7684
\u5bbf\u4e3b\u4e3a\u6d4f\u89c8\u5668\u81ea\u5e26\u7684document,window \u7b49
19.document load \u548cdocument ready\u7684\u533a\u522b
Document.onload \u662f\u5728\u7ed3\u6784\u548c\u6837\u5f0f\u52a0\u8f7d\u5b8c\u624d\u6267\u884cjs
Document.ready\u539f\u751f\u79cd\u6ca1\u6709\u8fd9\u4e2a\u65b9\u6cd5\uff0cjquery\u4e2d\u6709 $().ready(function)
20.\u201d==\u201d\u548c\u201c===\u201d\u7684\u4e0d\u540c
\u524d\u8005\u4f1a\u81ea\u52a8\u8f6c\u6362\u7c7b\u578b
\u540e\u8005\u4e0d\u4f1a
21.javascript\u7684\u540c\u6e90\u7b56\u7565
\u4e00\u6bb5\u811a\u672c\u53ea\u80fd\u8bfb\u53d6\u6765\u81ea\u4e8e\u540c\u4e00\u6765\u6e90\u7684\u7a97\u53e3\u548c\u6587\u6863\u7684\u5c5e\u6027\uff0c\u8fd9\u91cc\u7684\u540c\u4e00\u6765\u6e90\u6307\u7684\u662f\u4e3b\u673a\u540d\u3001\u534f\u8bae\u548c\u7aef\u53e3\u53f7\u7684\u7ec4\u5408
22.\u7f16\u5199\u4e00\u4e2a\u6570\u7ec4\u53bb\u91cd\u7684\u65b9\u6cd5
function oSort(arr)
{
var result ={};
var newArr=[];
for(var i=0;i<arr.length;i++)
{
if(!result[arr])
{
newArr.push(arr)
result[arr]=1
}
}
return newArr
}
Web前端经常被问到的面试题及答案
一、HTML+CSS
1.对WEB标准以及W3C的理解与认识
标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外
链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维
护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性;
2.xhtml和html有什么区别
HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言
最主要的不同：
XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名必须用小写字母。
XHTML 文档必须拥有根元素。
3.Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?
用于声明文档使用那种规范(html/Xhtml)一般为 严格 过度 基于框架的html文档
加入XMl声明可触发，解析方式更改为IE5.5 拥有IE5.5的bug
4.行内元素有哪些?块级元素有哪些?CSS的盒模型?
块级元素：div p h1 h2 h3 h4 form ul
行内元素: a b br i span input select
Css盒模型:内容，border ,margin，padding
5.CSS引入的方式有哪些? link和@import的区别是?
内联 内嵌 外链 导入
区别 ：同时加载
前者无兼容性，后者CSS2.1以下浏览器不支持
Link 支持使用javascript改变样式，后者不可
6.CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先级高?
标签选择符 类选择符 id选择符
继承不如指定 Id>class>标签选择
后者优先级高
7.前端页面有哪三层构成，分别是什么?作用是什么?
结构层 Html 表示层 CSS 行为层 js
8.css的基本语句构成是?
选择器{属性1:值1;属性2:值2;……}
9.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?
Ie(Ie内核) 火狐(Gecko) 谷歌(webkit) opear(Presto)
二、Javascript
1.javascript的typeof返回哪些数据类型
Object number function boolean underfind
2.例举3种强制类型转换和2种隐式类型转换?
强制(parseInt,parseFloat,number)
隐式(== – ===)
3.split() join() 的区别
前者是切割成数组的形式，后者是将数组转换成字符串
4.数组方法pop() push() unshift() shift()
Push()尾部添加 pop()尾部删除
Unshift()头部添加 shift()头部删除
5.事件绑定和普通事件有什么区别
6.IE和DOM事件流的区别
1.执行顺序不一样、
2.参数不一样
3.事件加不加on
4.this指向问题
7.IE和标准下有哪些兼容性的写法
Var ev = ev || window.event
document.documentElement.clientWidth || document.body.clientWidth
Var target = ev.srcElement||ev.target
8.ajax请求的时候get 和post方式的区别
一个在url后面 一个放在虚拟载体里面
有大小限制
安全问题
应用不同 一个是论坛等只需要请求的，一个是类似修改密码的
9.call和apply的区别
Object.call(this,obj1,obj2,obj3)
Object.apply(this,arguments)
10.ajax请求时，如何解释json数据
使用eval parse 鉴于安全性考虑 使用parse更靠谱
11.b继承a的方法
12.写一个获取非行间样式的函数
function getStyle(obj,attr,value)
{
if(!value)
{
if(obj.currentStyle)
{
return obj.currentStyle(attr)
}
else
{
obj.getComputedStyle(attr,false)
}
}
else
{
obj.style[attr]=value
}
}
列举一些给你吧（题目比较多，没办法了）
请问display：none和visibility：hidden的作用什么，它有什么区别？
请用CSS实现：一个矩形内容，有投影，有圆角，hover状态慢慢变透明。
描述下盒模型（BoxModule）及CSS3相关特性
有那些行内元素、有哪些块级元素、盒模型？
描述下CSS3里实现元素动画的方法
下列JavaScript代码执行后，依次alert的结果是
解释一下什么叫闭包，并实现一段闭包代码
简述一下什么叫事件委托以及其原理
有哪些选择符，优先级的计算公式是什么？行内样式和！important哪个优先级高？
用正则表达式，写出由字母开头，其余由数字、字母、下划线组成的6~30的字符串？
更多前端面试真题，到HTML5学堂。
1、 列举web性能优化？
1)
减少http请求次数。合并文件、利用css sprite把零散的图片整合到一张图上。
2)
减少DNS查找。
3)
减少从定向。
4)
响应时间。使用AJAX进行缓存，减少http请求。
5)
延迟载入组件.
6)
预载入组件。
7)
减少节点的数量。
8)
切分组件到多个域。
9)
最小化iframe。
10)
杜绝http404错误。
2、 介绍一下XMLHttpRequest对象的常用方式和属性?
open(“method”,”URL”) 建立对服务器的调用，第一个参数是HTTP请求方式
可以为GET，POST或任何服务器所支持的您想调用的方式。
第二个参数是请求页面的URL。
send()方法，发送具体请求
abort()方法，停止当前请求
readyState属性 请求的状态 有5个可取值 0=未初始化 ，1=正在加载
2=以加载，3=交互中，4=完成
responseText 属性 服务器的响应，表示为一个串
reponseXML 属性 服务器的响应，表示为XML
status 服务器的HTTP状态码，200对应ok 400对应not found
1.对WEB标准以及W3C的理解与认识
标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性;
2.xhtml和html有什么区别
HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言
最主要的不同：
XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名必须用小写字母。
XHTML 文档必须拥有根元素。
3.Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?
用于声明文档使用那种规范(html/Xhtml)一般为 严格 过度 基于框架的html文档
加入XMl声明可触发，解析方式更改为IE5.5 拥有IE5.5的bug
4.行内元素有哪些?块级元素有哪些?CSS的盒模型?
块级元素：div p h1 h2 h3 h4 form ul
行内元素: a b br i span input select
Css盒模型:内容，border ,margin，padding
5.CSS引入的方式有哪些? link和@import的区别是?
内联 内嵌 外链 导入
区别 ：同时加载
前者无兼容性，后者CSS2.1以下浏览器不支持
Link 支持使用javascript改变样式，后者不可
6.CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先级高?
标签选择符 类选择符 id选择符
继承不如指定 Id>class>标签选择
后者优先级高
7.前端页面有哪三层构成，分别是什么?作用是什么?
结构层 Html 表示层 CSS 行为层 js
8.css的基本语句构成是?
选择器{属性1:值1;属性2:值2;……}
9.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?
Ie(Ie内核) 火狐(Gecko) 谷歌(webkit) opear(Presto)
10.写出几种IE6 BUG的解决方法
1.双边距BUG float引起的 使用display
2.3像素问题 使用float引起的 使用dislpay:inline -3px
3.超链接hover 点击后失效 使用正确的书写顺序 link visited hover active
4.Ie z-index问题 给父级添加position:relative
5.Png 透明 使用js代码 改
6.Min-height 最小高度 !Important 解决’
7.select 在ie6下遮盖 使用iframe嵌套
8.为什么没有办法定义1px左右的宽度容器(IE6默认的行高造成的，使用over:hidden,zoom:0.08
line-height:1px)
行元素与块元素的区别；
如何清除浮动；
定位方式当中，absolute与fixed、relative的区别；
事件的兼容问题；
Ajax是什么；
如何优化你的页面；
响应式布局是什么等等。
经典的前端面试题至少有近百道，在这里也没办法全部给你列出来，你可以看看这个（小-程-序）“决胜前端”，里面有好几百道面试真题，也有比较好的答案解析。
绛旓細瑙ｅ喅鐧藉睆闂锛氣憼浣跨敤v-text娓叉煋鏁版嵁 鈶′娇鐢▄{}}璇硶娓叉煋鏁版嵁锛屼絾鏄悓鏃朵娇鐢╲-cloak鎸囦护锛堢敤鏉ヤ繚鎸佸湪鍏冪礌涓婄洿鍒板叧鑱斿疄渚嬬粨鏉熸椂鍊欒繘琛岀紪璇戯級锛寁-cloak瑕佹斁鍦ㄤ粈涔堜綅缃憿锛寁-cloak骞朵笉闇瑕佹坊鍔犲埌姣忎釜鏍囩锛屽彧瑕佸湪el鎸傝浇鐨勬爣绛句笂娣诲姞灏卞彲浠 43.Vue鍙屾暟鎹粦瀹氳繃绋嬩腑锛岃繖杈瑰効鏁版嵁鏀瑰彉浜嗘庝箞閫氱煡鍙︿竴杈规敼鍙 鏁版嵁...
绛旓細鍓嶇闈㈣瘯涓紝闈㈣瘯瀹樺父浼氳闂叧浜庡熀纭姒傚康鐨勯棶棰銆傞鍏堬紝鐩掑瓙妯″瀷鏄〉闈㈠竷灞鐨勫熀纭锛屾瘡涓厓绱犺瑙嗕负涓涓寘鍚唴瀹广佸唴杈硅窛銆佽竟妗嗗拰澶栬竟璺濈殑鐭╁舰锛屽垎涓烘爣鍑嗙洅妯″瀷锛堝唴瀹规拺澶э級鍜岃嚜鍔ㄥ唴鍑忕洅妯″瀷锛堜笉鎾戝ぇ锛夈侰SS3寮曞叆浜嗚濡傚渾瑙掋佹笎鍙樸侀槾褰辩瓑鏂扮壒鎬э紝浠ュ強鍔ㄧ敾銆乫lex甯冨眬鍜屽獟浣撴煡璇㈢瓑鍔熻兘锛屽府鍔╁疄鐜版洿涓板瘜鐨...
绛旓細6銆360娴忚鍣ㄣ佺寧璞规祻瑙堝櫒鍐呮牳:IE+Chrome鍙屽唴鏍; 7銆佹悳鐙椼侀仺娓搞丵Q娴忚鍣ㄥ唴鏍: Trident(鍏煎妯″紡)+Webkit(楂橀熸ā寮)锕 8銆佺櫨搴︽祻瑙堝櫒銆佷笘鐣屼箣绐楀唴鏍:IE鍐呮牳; 9銆2345娴忚鍣ㄥ唴鏍:浠ュ墠鏄疘E鍐呮牳锛岀幇鍦ㄤ篃鏄疘E+Chrome鍙屽唴鏍;鎶婁笉鍚岃矾鐢卞搴旂殑涓嶅悓鍐呭鎺屾彙鍦鍓嶇锛屽vue涓殑vue-router銆乺eact...
绛旓細鍗氬鍥暣鐞嗕簡涓涓嬶紝鏈夊ソ鐨勯潰璇曢娆㈣繋澶у鍙戝湪璇勮鍖哄摕 1. 闂寘 2. 鏁扮粍鍘婚噸 3. 鍘熷瀷鍜屽師鍨嬮摼 4. call,apply,bind涓夎呯殑鍖哄埆锛 5. 璇蜂粙缁嶅父瑙佺殑 HTTP 鐘舵佺爜(鑷冲皯浜斾釜) 6. 娣辨祬鎷疯礉 7. 瀹炵幇(5).add(3).minus(2)杈撳嚭6 8. null鍜寀ndefined鍖哄埆 9. MVC鍜孧V...
绛旓細鍦闈㈣瘯鍓嶇鐨勮繃绋嬩腑锛屾湁浜闂鏄缁忓父浼氳鎻愰棶鍒扮殑 涓銆佸熀纭绡 1. 鍦ㄤ笉浣跨敤绗笁涓彉閲忕殑鎯呭喌涓嬶紝濡備綍璋冩崲a涓巄鐨勫硷紵2. px涓巈m鐨勫尯鍒 3. 绠杩颁竴涓嬬洅妯″瀷 4. 椤甸潰瀵煎叆鏍峰紡鏃讹紝浣跨敤link鍜孈import鏈変粈涔堝尯鍒紵5. 绠杩颁竴涓嬩簨浠朵唬鐞 浜屻丠TML甯歌棰樼洰 01銆丏octype浣滅敤锛熶弗鏍兼ā寮忎笌娣锋潅妯″紡濡備綍鍖哄垎锛
绛旓細JavaScript闈㈣瘯棰:瀛楃涓插鐞 鍦ㄥ簲鑱鍓嶇绋嬪簭鍛樻椂锛屽湪绗旇瘯閮ㄥ垎缁忓父浼氳冨埌瀛楃涓插鐞嗙殑闂銆傝繖浜涢鏈変竴涓壒鐐癸紝绔欏湪鑰冨畼鐨勮搴﹀幓鑰冭檻锛屽畠鑰冪殑涓嶆槸浣犱細涓嶄細锛岃屾槸浣犺兘涓嶈兘鍦ㄤ笉鍊熺敤XX鎵嬪唽鎴栬匵X鎸囧崡鍐嶆垨鑰呯櫨搴﹁胺姝岀殑鎯呭喌涓嬶紝鐢ㄦ瘮杈冪畝娲佺殑鏂瑰紡鍐欏嚭绛旀鏉ャ傚氨鍏蜂綋鐨勫瓧绗︿覆澶勭悊闂锛岄儜宸炲皻瀛﹀爞缁欏ぇ瀹跺垎浜竴涓...
绛旓細鍓嶇缁忓吀闈㈣瘯棰(60閬鍓嶇闈㈣瘯棰鍖呭惈JS銆丆SS銆丷eact銆佹祻瑙堝櫒绛) 鎴戞潵绛 1涓洖绛 #鐑# 浣犵煡閬撳摢浜00鍚庤亴鍦虹‖鍒氫簨浠?绉戞妧鏃朵唬17 2022-07-21 路 TA鑾峰緱瓒呰繃262涓禐 鐭ラ亾灏忔湁寤烘爲绛斾富 鍥炵瓟閲:92 閲囩撼鐜:66% 甯姪鐨勪汉:24.2涓 鎴戜篃鍘荤瓟棰樿闂釜浜洪〉 灞曞紑鍏ㄩ儴 闃叉姈 鑺傛祦 璇尯:鎴戜滑缁忓父璇...
绛旓細涓嶄細,JS涓兘澶熻繘琛屽彉閲忎綔鐢ㄥ煙鎻愬崌,鎶婃墍鏈夊彉閲忋佸嚱鏁扮殑澹版槑鎻愬崌鍒板綋鍓嶄綔鐢ㄥ煙鐨勬渶鍓嶉潰,浣嗕笉杩涜璧嬪兼搷浣;鎵浠ュ彲鑳介犳垚鑾峰彇鐨勫兼槸undefined銆4.浠涔堟槸hash,浠ュ強hashchange浜嬩欢?鍏堜簡瑙ｄ笅浠涔堟槸hash:hash鍗砋RL涓"#"瀛楃鍚庨潰鐨勯儴鍒嗐俛)浣跨敤娴忚鍣ㄨ闂綉椤垫椂锛屽鏋滅綉椤礥RL涓甫鏈塰ash锛岄〉闈㈠氨浼氬畾浣嶅埌id(鎴杗ame)...
绛旓細HTML+CSS 1.瀵WEB鏍囧噯浠ュ強W3C鐨勭悊瑙ｄ笌璁よ瘑 鏍囩闂悎銆佹爣绛惧皬鍐欍佷笉涔卞祵濂椼佹彁楂樻悳绱㈡満鍣ㄤ汉鎼滅储鍑犵巼銆佷娇鐢ㄥ 閾綾ss鍜宩s鑴氭湰銆佺粨鏋勮涓鸿〃鐜扮殑鍒嗙銆佹枃浠朵笅杞戒笌椤甸潰閫熷害鏇村揩銆佸唴瀹硅兘琚洿澶氱殑鐢ㄦ埛鎵璁块棶銆佸唴瀹硅兘琚洿骞挎硾鐨勮澶囨墍璁块棶銆佹洿灏戠殑浠ｇ爜鍜岀粍浠讹紝瀹规槗缁 鎶ゃ佹敼鐗堟柟渚匡紝涓嶉渶瑕佸彉鍔ㄩ〉闈㈠唴瀹广佹彁渚涙墦鍗...
绛旓細鍥炵瓟锛氬鏋滄垜浣滀负Web鍓嶇鐢佃瘽闈㈣瘯鐨勯潰璇瀹,閭ｄ箞鎴戝氨瑕佽繘琛屽鏂归潰鐨勮冮噺,涓嶄粎鑰冮噺杩欎釜浜虹殑涓撲笟鑳藉姏,涔熻鑰冮噺杩欎釜浜虹殑缁煎悎绱犺川绛夈 绗竴涓闂:鑷垜浠嬬粛 杩欐槸闈㈣瘯涓渶甯歌鐨勭涓涓棶棰,骞朵笖鑷垜浠嬬粛鍗佸垎閲嶈,鍥犱负杩欑煭鐭殑浠嬬粛灏嗕細鍦ㄩ潰璇曞畼鐨勮剳娴烽噷褰㈡垚绗竴鍗拌薄,涔熷彲鑳戒細鎴愪负琚潰璇曡呯殑鍒绘澘鍗拌薄銆 绗簩涓棶...
