WEB前端面试题全套WORD.docx

WEB前端面试题全套WORD.docx

《WEB前端面试题全套WORD.docx》由会员分享，可在线阅读，更多相关《WEB前端面试题全套WORD.docx（47页珍藏版）》请在冰点文库上搜索。

WEB前端面试题全套WORD

什么是响应式网页?

通过CSS3MediaQuery实现响应式Web设计

响应式Web设计（ResponsiveWebdesign）的理念是，页面的设计与开发应当根据用户行为以及设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相应的响应和调整。

具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSSmediaquery的使用等。

无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备；换句话说，页面应该有能力去自动响应用户的设备环境。

这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了。

Doctype?

严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?

声明位于文档中的最前面的位置，处于标签之前。

此标签可告知浏览器文档使用哪种HTML或XHTML规范。

标准模式和混杂模式（quirksmode）。

在标准模式中，浏览器根据规范呈现页面；在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。

混杂模式通常模拟老式浏览器（比如MicrosoftIE4和NetscapeNavigator4）的行为以防止老站点无法工作。

在IE6出现时，在标准模式中使用的是正确的盒模型，在混杂模式中使用的则是老式的专有盒模型。

为了维持对IE5和更低版本的向后兼容性，Opera7和更高版本也在混杂模式中使用有缺点的IE盒模型。

前端页面有哪三层构成，分别是什么？

作用是什么？

网页的结构层（structurallayer）由HTML或XHTML之类的标记语言负责创建。

标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。

例如，P标签表达了这样一种语义：

“这是一个文本段。

”

网页的表示层（presentationlayer）由CSS负责创建。

CSS对“如何显示有关内容”的问题做出了回答。

网页的行为层（behaviorlayer）负责回答“内容应该如何对事件做出反应”这一问题。

这是Javascript语言和DOM主宰的领域。

使用（X）HTML去搭建文档的结构。

使用CSS去设置文档的呈现效果。

使用DOM脚本去实现文档的行为

如何居中一个浮动元素?

方法一：

让最外面的层相对定位，left等于50%，然后内部嵌套层也使用相对定位且left设为-50%，这样的效果就是内层相对整行为水平居中；

方法二：

使用display:

table;

方法三：

直接使用table布局（使用太多table容易让结构看起来比较混乱，其实页面中使用少量的table，只要不要嵌套使用，还是可以实现使用少量CSS，达到最好的效果的），这种方法这里就不举例演示了。

如何让ie6,7,8，兼容html5的标签？

我一直使用公司里的提供的jqside插件，里面就是把html5的标签放到字符串，用字符串的split的方法变为数组，用while的方法，变量减减，用dom的createElement方法进行再ie678里创建标签。

if（$.isIE678）{

Varhtml5="abbr,article,aside,audio,canvas,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split（','）,

i=html5.length;

while（i--）document.createElement（html5[i]）;

}

在Css中那个属性会影响dom读取文档流的顺序？

Float

行内元素有哪些？

块级元素有哪些？

CSS的盒模型？

Css的盒模型：

从外到里，margin，border，padding，content。

块元素在页面里，占一行，可以设定宽和高，可以容纳块元素和行内元素。

常见的块元素有div，p，h1-h6，ul等。

行内元素没有宽和高的属性但可以与其他元素同一行，一般不可以包含块元素，行内元素的高度一般由元素内部的字体大小决定，宽度由内容的长度控制。

常见的行内元素有a，b，span，strong，em等。

CSS引入的方式有哪些?

link和@import的区别是?

内联引用CSS。

可灵巧应用样式於各标签中。

方便于编写代码时的使用。

没有整篇文件的“统一性”，在需要修改某样式的时候也变的比较困难。

内部引用CSS将样式规则写在标签之中。

外部引用link标签引用CSS将样式规则写在.css的样式文件中，再以标签引入。

这样引入该css样式表文件以后，就可以直接套用该样式档案中所制定的样式了。

外部引用@import引用CSS跟link方法很像，但必须放在中：

--@importurl（引入的样式表的位址、路径与档名）;-->可以灵活的引入css文件对xhtml元素进行控制。

有时候也用来编写某些csshack。

这种方法的缺点：

在个别文件或元素的灵活度不足老祖宗的差别。

link属于XHTML标签，而@import完全是CSS提供的一种方式。

加载顺序的差别。

当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。

兼容性的差别。

由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。

使用dom控制样式时的差别。

当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。

CSS选择符有哪些？

哪些属性可以继承？

优先级算法如何计算？

内联和important哪个优先级高？

ID和CLASS

Class可继承;伪类A标签可以继承;列表UL,LI,DL,DD,DT可继承

优先级就近原则，样式定义最近者为准载入样式以最后载入的定位为准

优先级为:

!

important>id>class>tag;Important比内联优先级高

CSS层叠是什么?

介绍一下？

CSS翻译过来叫做层叠样式表。

运用到层叠的时候，主要就是靠CSS的组合与子选择器。

去编辑样式。

它的作用是定义网页的外观（例如字体，颜色等等），它也可以和javascript等浏览器端脚本语言合作做出许多动态的效果。

CSS指层叠样式表（CascadingStyleSheets）样式定义如何显示HTML元素样式通常存储在样式表中把样式添加到HTML4.0中，是为了解决内容与表现分离的问题外部样式表可以极大提高工作效率外部样式表通常存储在CSS文件中多个样式定义可层叠为一

html的意义？

HTML指的是超文本标记语言（HyperTextMarkupLanguage）

HTML不是一种编程语言，而是一种标记语言（markuplanguage）

标记语言是一套标记标签（markuptag）

HTML使用标记标签来描述网页

HTML标记标签通常被称为HTML标签（HTMLtag）

HTML标签是由尖括号包围的关键词，比如

HTML标签通常是成对出现的，比如和

标签对中的第一个标签是开始标签，第二个标签是结束标签

开始和结束标签也被称为开放标签和闭合标签

介绍HTML5和CSS3（对比）?

HTML

5

还包含了新的语义化的元素标签，比如：