Skip to content

Commit 80ce0b1

Browse files
wangwenjie1314wangwenjie1314
committed
Update README.md
更新样式显示
1 parent a38847d commit 80ce0b1

File tree

1 file changed

+98
-104
lines changed

1 file changed

+98
-104
lines changed

‎README.md

Lines changed: 98 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
1-
webQd
2-
=====
3-
4-
web前端面试相关的知识点
51
#2014年最新前端开发面试题（题目列表+答案 完整版）
62

73

@@ -38,41 +34,39 @@ web前端面试相关的知识点
3834
**前端开发面试知识点大纲：**
3935

4036
HTML&CSS：
41-
对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功：布局、盒子模型、选择器优先级及使用、HTML5、CSS3、移动端适应
42-
37+
对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功：布局、盒子模型、选择器优先级及使用、HTML5、CSS3、移动端适应
38+
4339
JavaScript：
44-
数据类型、面向对象、继承、闭包、插件、作用域、跨域、原型链、模块化、自定义事件、内存泄漏、事件机制、异步装载回调、模板引擎、Nodejs、JSON、ajax等。
45-
40+
数据类型、面向对象、继承、闭包、插件、作用域、跨域、原型链、模块化、自定义事件、内存泄漏、事件机制、异步装载回调、模板引擎、Nodejs、JSON、ajax等。
41+
4642
其他：
47-
HTTP、安全、正则、优化、重构、响应式、移动端、团队协作、可维护、SEO、UED、架构、职业生涯
43+
HTTP、安全、正则、优化、重构、响应式、移动端、团队协作、可维护、SEO、UED、架构、职业生涯
4844

4945
作为一名前端工程师，**无论工作年头长短都应该必须掌握的知识点**：
5046

5147
此条由 王子墨 发表在 [前端随笔](http://julying.com/blog/front-end-engineers-must-master-knowledge/)
5248

53-
1、DOM结构 —— 两个节点之间可能存在哪些关系以及如何在节点之间任意移动。
54-
55-
2、DOM操作 ——如何添加、移除、移动、复制、创建和查找节点等。
56-
57-
3、事件 —— 如何使用事件，以及IE和标准DOM事件模型之间存在的差别。
58-
59-
4、XMLHttpRequest —— 这是什么、怎样完整地执行一次GET请求、怎样检测错误。
60-
61-
5、严格模式与混杂模式 —— 如何触发这两种模式，区分它们有何意义。
62-
63-
6、盒模型 —— 外边距、内边距和边框之间的关系，及IE8以下版本的浏览器中的盒模型
64-
65-
7、块级元素与行内元素 —— 怎么用CSS控制它们、以及如何合理的使用它们
66-
67-
8、浮动元素——怎么使用它们、它们有什么问题以及怎么解决这些问题。
68-
69-
9、HTML与XHTML——二者有什么区别，你觉得应该使用哪一个并说出理由。
70-
71-
10、JSON —— 作用、用途、设计结构。
49+
1、DOM结构 —— 两个节点之间可能存在哪些关系以及如何在节点之间任意移动。
50+
51+
2、DOM操作 ——如何添加、移除、移动、复制、创建和查找节点等。
52+
53+
3、事件 —— 如何使用事件，以及IE和标准DOM事件模型之间存在的差别。
54+
55+
4、XMLHttpRequest —— 这是什么、怎样完整地执行一次GET请求、怎样检测错误。
56+
57+
5、严格模式与混杂模式 —— 如何触发这两种模式，区分它们有何意义。
58+
59+
6、盒模型 —— 外边距、内边距和边框之间的关系，及IE8以下版本的浏览器中的盒模型
60+
61+
7、块级元素与行内元素 —— 怎么用CSS控制它们、以及如何合理的使用它们
62+
63+
8、浮动元素——怎么使用它们、它们有什么问题以及怎么解决这些问题。
64+
65+
9、HTML与XHTML——二者有什么区别，你觉得应该使用哪一个并说出理由。
66+
67+
10、JSON —— 作用、用途、设计结构。
7268
7369

74-
75-
7670
**备注：**
7771

7872
根据自己需要选择性阅读，面试题是对理论知识的总结，让自己学会应该如何表达。
@@ -86,109 +80,109 @@ web前端面试相关的知识点
8680

8781
- Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?
8882

89-
（1）、<!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器的解析器，
90-
用什么文档类型 规范来解析这个文档。
91-
92-
（2）、严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。
93-
94-
（3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
95-
96-
（4）、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
83+
（1）、<!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器的解析器，
84+
用什么文档类型 规范来解析这个文档。
85+
86+
（2）、严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。
87+
88+
（3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
89+
90+
（4）、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
9791

9892
- 行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
9993

100-
（1）CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，
101-
比如div默认display属性值为“block”，成为“块级”元素；
102-
span默认display属性值为“inline”，是“行内”元素。
94+
（1）CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，
95+
比如div默认display属性值为“block”，成为“块级”元素；
96+
span默认display属性值为“inline”，是“行内”元素。
10397

104-
（2）行内元素有：a b span img input select strong（强调的语气）
105-
块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
106-
107-
（3）知名的空元素：
108-
<br> <hr> <img> <input> <link> <meta>
109-
鲜为人知的是：
110-
<area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>
98+
（2）行内元素有：a b span img input select strong（强调的语气）
99+
块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
100+
101+
（3）知名的空元素：
102+
<br> <hr> <img> <input> <link> <meta>
103+
鲜为人知的是：
104+
<area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>
111105

112106

113107
- link 和@import 的区别是？
114108

115109

116-
（1）link属于XHTML标签，而@import是CSS提供的;
110+
（1）link属于XHTML标签，而@import是CSS提供的;
117111

118-
（2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
112+
（2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
119113

120-
（3）import只在IE5以上才能识别，而link是XHTML标签，无兼容问题;
114+
（3）import只在IE5以上才能识别，而link是XHTML标签，无兼容问题;
121115

122-
（4）link方式的样式的权重 高于@import的权重.
116+
（4）link方式的样式的权重 高于@import的权重.
123117

124118
- 浏览器的内核分别是什么?
125119

126-
* IE浏览器的内核Trident、Mozilla的Gecko、Chrome的Blink（WebKit的分支）、Opera内核原为Presto，现为Blink；
120+
* IE浏览器的内核Trident、Mozilla的Gecko、Chrome的Blink（WebKit的分支）、Opera内核原为Presto，现为Blink；
127121

128122

129123
- 常见兼容性问题？
130124

131-
* png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.
132-
133-
* 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。
134-
135-
* IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。
136-
137-
浮动ie产生的双倍距离 #box{ float:left; width:10px; margin:0 0 0 100px;}
138-
139-
这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 ——_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)
125+
* png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.
140126

141-
渐进识别的方式，从总体中逐渐排除局部。
142-
143-
首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。
144-
接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。
145-
146-
css
147-
.bb{
148-
background-color:#f1ee18;/*所有识别*/
149-
.background-color:#00deff\9; /*IE6、7、8识别*/
150-
+background-color:#a200ff;/*IE6、7识别*/
151-
_background-color:#1e0bd1;/*IE6识别*/
152-
}
127+
* 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。
128+
129+
* IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。
130+
131+
浮动ie产生的双倍距离 #box{ float:left; width:10px; margin:0 0 0 100px;}
132+
133+
这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 ——_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)
134+
135+
渐进识别的方式，从总体中逐渐排除局部。
153136

154-
* IE下,可以使用获取常规属性的方法来获取自定义属性,
155-
也可以使用getAttribute()获取自定义属性;
156-
Firefox下,只能使用getAttribute()获取自定义属性.
157-
解决方法:统一通过getAttribute()获取自定义属性.
158-
159-
* IE下,even对象有x,y属性,但是没有pageX,pageY属性;
160-
Firefox下,event对象有pageX,pageY属性,但是没有x,y属性.
161-
162-
* 解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。
163-
164-
* Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,
165-
可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决.
137+
首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。
138+
接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。
139+
140+
css
141+
.bb{
142+
background-color:#f1ee18;/*所有识别*/
143+
.background-color:#00deff\9; /*IE6、7、8识别*/
144+
+background-color:#a200ff;/*IE6、7识别*/
145+
_background-color:#1e0bd1;/*IE6识别*/
146+
}
147+
148+
* IE下,可以使用获取常规属性的方法来获取自定义属性,
149+
也可以使用getAttribute()获取自定义属性;
150+
Firefox下,只能使用getAttribute()获取自定义属性.
151+
解决方法:统一通过getAttribute()获取自定义属性.
152+
153+
* IE下,even对象有x,y属性,但是没有pageX,pageY属性;
154+
Firefox下,event对象有pageX,pageY属性,但是没有x,y属性.
155+
156+
* 解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。
157+
158+
* Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,
159+
可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决.
166160

167-
超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序:
168-
L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
161+
超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序:
162+
L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
169163

170164

171165

172166
- html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和
173167
HTML5？
174168

175169

176-
* HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
177-
178-
* 绘画 canvas
179-
用于媒介回放的 video 和 audio 元素
180-
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
181-
sessionStorage 的数据在浏览器关闭后自动删除
182-
183-
语意化更好的内容元素，比如 article、footer、header、nav、section
184-
表单控件，calendar、date、time、email、url、search
185-
新的技术webworker, websockt, Geolocation
186-
187-
* 移除的元素
188-
189-
纯表现的元素：basefont，big，center，font, s，strike，tt，u；
190-
191-
对可用性产生负面影响的元素：frame，frameset，noframes；
170+
* HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
171+
172+
* 绘画 canvas
173+
用于媒介回放的 video 和 audio 元素
174+
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
175+
sessionStorage 的数据在浏览器关闭后自动删除
176+
177+
语意化更好的内容元素，比如 article、footer、header、nav、section
178+
表单控件，calendar、date、time、email、url、search
179+
新的技术webworker, websockt, Geolocation
180+
181+
* 移除的元素
182+
183+
纯表现的元素：basefont，big，center，font, s，strike，tt，u；
184+
185+
对可用性产生负面影响的元素：frame，frameset，noframes；
192186

193187
支持HTML5新标签：
194188

0 commit comments

Comments
 (0)