WEB前端面试题全套

什么是响应式网页?通过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将样式规则写在STYLE.../STYLE标签之中。外部引用link标签引用CSS将样式规则写在.css的样式文件中，再以link标签引入。这样引入该css样式表文件以后，就可以直接套用该样式档案中所制定的样式了。外部引用@import引用CSS跟link方法很像，但必须放在STYLE../STYLE中：STYLETYPE=text/css!--@importurl(引入的样式表的位址、路径与档名);--/STYLE可以灵活的引入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和CLASSClass可继承;伪类A标签可以继承;列表UL,LI,DL,DD,DT可继承优先级就近原则，样式定义最近者为准载入样式以最后载入的定位为准优先级为:!importantidclasstag;Important比内联优先级高CSS层叠是什么?介绍一下？CSS翻译过来叫做层叠样式表。运用到层叠的时候，主要就是靠CSS的组合与子选择器。去编辑样式。它的作用是定义网页的外观（例如字体，颜色等等），它也可以和javascript等浏览器端脚本语言合作做出许多动态的效果。CSS指层叠样式表(CascadingStyleSheets)样式定义如何显示HTML元素样式通常存储在样式表中把样式添加到HTML4.0中，是为了解决内容与表现分离的问题外部样式表可以极大提高工作效率外部样式表通常存储在CSS文件中多个样式定义可层叠为一html的意义？HTML指的是超文本标记语言(HyperTextMarkupLanguage)HTML不是一种编程语言，而是一种标记语言(markuplanguage)标记语言是一套标记标签(markuptag)HTML使用标记标签来描述网页HTML标记标签通常被称为HTML标签(HTMLtag)HTML标签是由尖括号包围的关键词，比如htmlHTML标签通常是成对出现的，比如b和/b标签对中的第一个标签是开始标签，第二个标签是结束标签开始和结束标签也被称为开放标签和闭合标签介绍HTML5和CSS3(对比)?HTML5还包含了新的语义化的元素标签，比如：nav,header,footer，aside以及figure等等。拖放（Drag和drop）是HTML5标准的组成部分。canvas元素用于在网页上绘制图形。HTML5支持内联SVG（矢量图形）Canvas和SVG都允许您在浏览器中创建图形，但是它们在根本上是不同的。HTML5Geolocation（地理定位）用于定位用户的位置。在谷歌地图上显示您的位置。HTML5引入了应用程序缓存，这意味着web应用可进行缓存，并可在没有因特网连接时进行访问。webworker是运行在后台的JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时webworker在后台运行。在客户端存储数据HTML5提供了两种在客户端存储数据的新方法：localStorage-没有时间限制的数据存储sessionStorage-针对一个session的数据存储HTML5服务器发送事件（server-sentevent）允许网页获得来自服务器的更新。border-image原理？1.调用边框图片border-image的url属性，通过相对或绝对路径链接图片。2，边框图片的建裁border-image的数值参数剪裁边框图片，形成九宫格。3.剪裁图片的边框边框图片被切割成9部分，以一一对应的关系放到div边框的九宫格中，然后再压缩（或拉伸）至边框（border-width或border-image-width）的宽度大小。4.执行重复属性被填充至边框九宫格四个角落的的边框图片是不执行重复属性的。上下的九宫格执行水平方向的重复属性（拉伸或平铺），左右的格子执行垂直方向的重复属性，而中间的那个格子则水平重复和垂直方向的重复都要执行。5、完成绘制，实现效果自定义手机UI组件？如何实现的？Input,button,radio,checkbox.把本身的input隐藏掉，给后面的label进行样式，并且用label的for属性，去指定input的id。去点击label的时候，css3的：chcked和：disabled去确定状态，样式用css精灵去排版。图片切换的实现思路?以全局监听的方式通过a标签的描点进行view动态切换页面，只要把a标签带有id的href属性的值指到锚点，用CSS3的动画进行切换页面.HTML5都有哪些新的JSAPI?二维绘图API，可以用在一个新的画布（Canvas）元素上以呈现图像、游戏图形或者其他运行中的可视图形。一个允许web应用程序将自身注册为某个协议或MIME类型的API。一个引入新的缓存机制以支持脱机web应用程序的API。一个能够播放视频和音频的API，可以使用新的video和audio元素。一个历史纪录API，它可以公开正在浏览的历史纪录，从而允许页面更好地支持AJAX应用程序中实现对后退功能。跨文档/跨域的消息传递，它提供了一种方式，使得文档可以互相通信而不用考虑它们的来源域，在某种程度上，这样的设计是为了防止跨站点的脚本攻击。一个支持拖放操作的API，用它可以与draggable特性相关联。一个支持编辑操作的API，用它可以与一个新的全局contenteditable特性相关联。一个新的网络API，它支持web应用程序在本地网络上互相通信，并在它们的源服务器上维持双向的通信。使用JavaScriptAPI的键/值对实现客户端的持久化存储，同时支持嵌入的SQL数据库。服务器发送的事件，通过它可以与新的事件源（event-source）元素关联，新的事件源元素有利于与远程数据源的持久性连接，而且极大地消除了在Web应用程序中对轮询的需求。AMD和CMD是什么？它们的区别有哪些？AMD和CMD是二种模块定义规范。现在都使用模块化编程，AMD，异步模块定义；CMD，通用模块定义。AMD依赖前置，CMD依赖就近。CMD的API职责单一，没有全局require，AMD的一个API可以多用。MVCBFCmvc是模型(model)－视图(view)－控制器(controller)的缩写，一种软件设计典范使用MVC的目的是将M和V的实现代码分离，从而使同一个程序可以使用不同的表现形式。MVC对应Html，CSS，js。BFC全称”BlockFormattingContext”,中文为“块级格式化上下文”。流体特性：块状水平元素，如div元素（下同），在默认情况下（非浮动、绝对定位等），水平方向会自动填满外部的容器；BFC元素特性表现原则就是，内部子元素不会影响