18面试

1. 讲一下什么是闭包，为什么内部函数B可以使用A函数里面的变量？

闭包：闭包是一个拥有许多变量和绑定了这些变量的环境表达式，通常是一个函数 ，因此这些变量也是该表达式的一部分；也就是说JS中所有的function都是一个 闭包，只是嵌套的function所产生的闭包更为强大。

好处：1）创建一个匿名函数，并立即执行，由于外部无法引用内部变量，因此在 执行后能很快释放，不会造成全局污染。

2）缓存，可以将值存储起来，当需要调用的时候，首先在缓存中查找，如果找不 到再进行计算，然后更新缓存并返回值。

3）实现封装。

4）实现面向对象中的对象。

坏处：闭包会导致变量不能释放，引起内存泄露。

1. 会用jQuery Mobile吗？讲一下他有哪些功能？事件？

使用data属性驱动元素生成各种界面组件，我了解有触摸事件，滑动事件，定位事件以及页面事件。

1. css中的rem怎么写？他的作用是什么？

rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。

 

1. ajax运作原理？

1) ajax引擎(XMLHttpRequest)为对象注册一个监听器(事件处理函数，对状态的改变事件(readyStatechange)监听)

2) 等待用户执行操作(例如点击)

3) 触发了事件处理代码

4) 调用ajax引擎

5) 发送请求，ajax引擎被调用后单独向服务器发送请求(不是整个界面)——异步请求

6) 服务器接受到了处理请求--开始处理

7) 服务器将处理结果(xml或者文本)返回给了ajax引擎

8) 监听相应数据

9) 监听器对GUI数据更新

 

1. 对于jsonp有什么了解

主要是用于解决ajax的跨域问题，利用在页面中创建<script>节点的方法向不同域提交HTTP请求，请求完毕之后可以使用callback方式回传结果。

Jsonp缺点是只支持get请求，只支持跨域http请求

1. jquery里的bind,live,on的用法和区别？

用法：

bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数；

live(type,[data],fn) 给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的

on(events,[selector],[data],fn) 在选择元素上绑定一个或多个事件的事件处理函数

区别：

.bind()是直接绑定在元素上

.live()则是通过冒泡的方式来绑定到元素上的。更适合列表类型的，绑定到document DOM节点上。和.bind()的优势是支持动态数据。

.on()则是最新的1.9版本整合了之前的三种方式的新事件绑定机制

 

1. 盒模型是什么？画出每个部分是从哪到哪?

CSS对HTML文档元素生成了一个描述该元素在HTML文档布局中所占空间的矩形元素框(element box),那么我们可以形象地将其看作是一个盒子

由内到外：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。

1. 说一下html5的本地存储是什么？

localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。

localStorage.setItem("key","value");//以“key”为名称存储一个值“value”

localStorage.getItem("key");//获取名称为“key”的值

枚举localStorage的方法：

for(var i=0;i<localStorage.length;i++){

     var name = localStorage.key(i)​;

     var value = localStorage.getItem(name);​

}

删除localStorage中存储信息的方法：

localStorage.removeItem("key");//删除名称为“key”的信息。

localStorage.clear();​//清空localStorage中所有信息

1. ajax的核心对象是什么？

核心对象是XMLHttpRequest它可以提供不重新加载页面的情况下更新网页，在页面加载后在客户端向服务器请求数据，在页面加载后在服务器端接受数据，在后台向客户端发送数据。

1. setInterval和setTimeout的区别。

setTimeout(表达式,延时时间)在执行时,是在载入后延迟指定时间后,去执行一次表达式

setInterval(表达式,交互时间)则不一样,它从载入后,每隔指定的时间就执行一次表达式

1. 跨域问题的解决方案。

1.jsonp。

ajax请求，dataType为jsonp。这种形式需要请求在服务端调整为返回callback([json-object])的形式。如果服务端返回的是普通json对象。那么调试的时候，在chrome浏览器的控制台会报"Uncaught SyntaxError: Unexpected token"错误；在firefox浏览器的控制台会报"SyntaxError: missing ; before statement"错误。

2.iframe跨域。

    页面中增加一个iframe元素，在需要调用get请求的时候，将iframe的src设置为get请求的url即可发起get请求的调用。

var url = "http://xxx.xxx.xxx";

$("#iframe").attr("src", url);//跨域，使用iframe

3.script元素的src属性处理

iframe、img、style、script等元素的src属性可以直接向不同域请求资源，jsonp正是利用script标签跨域请求资源的简单实现，所以这个和jsonp本质一样，同样需要服务端请求返回callback...形式。

var url="http://xxx.xxx.xxx?p1=1";

var script = document.createElement('script');

script.setAttribute('src', url);

document.getElementsByTagName('head')[0].appendChild(script);

4.在服务器使用get处理。

对于业务上没有硬性要求在前端处理的，可以在服务端做一次封装，再服务端发起调用，这样就可以解决跨域的问题。然后再根据请求是发出就完，还是需要获取返回值，来决定代码使用同步或者异步模式。

private static void CreateGetHttpResponse(string url, int? timeout, string userAgent, CookieCollection cookies)

        {

            if (string.IsNullOrEmpty(url))

            {

                throw new ArgumentNullException("url");

            }

            var request = WebRequest.Create(url) as HttpWebRequest;

            request.Method = "GET";

            if (!string.IsNullOrEmpty(userAgent))

            {

                request.UserAgent = userAgent;

            }

            if (timeout.HasValue)

            {

                request.Timeout = timeout.Value;

            }

            if (cookies != null)

            {

                request.CookieContainer = new CookieContainer();

                request.CookieContainer.Add(cookies);

            }

            request.BeginGetResponse(null,null);//异步

            //return request.GetResponse() as HttpWebResponse;

        }

1. 选择JQuery库的原因。

它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器，使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需要定义id即可。

1. 项目中bootstrap和angularJS在前端的主要方法和区别

bootstrap不算是javascript框架，它只是一个前端的ui框架，然后有一些附带的js插件而已

angularjs是一个javascript的mvvm的框架，是为了开发有复杂业务逻辑的CRUD（增）应用而生的。

1. html自带的滚动标签是什么？html5引用多媒体的标签是什么？

<marquee></marquee>，<autio><video>。

1. 怎么实现动画效果的？

Javscript 动画

css3 动画：一种是 transition， 一种是 animation

html5 动画：定义了三种绘图的方式，canvas ,svg, webgl，其中svg做为一种可缩放矢量图形的实现是基于xml标签定义的，它有专门的 animate 标签来定义动画。而为 canvas 或者 webgl 实现动画则需要通过 requestAnimationFrame (简称 raf) 来定期刷新画布。

1. 获取文本框的值和设置？js和jq分别怎么实现？

var obj=$("#文本框的id");

document.getElementById("#文本框的ID").value

 

1. 外部操作iframe内的元素？

通过window.top.document.getElementById("topNav")方法获取了顶部菜单页面（topPage.htm）所在的iframe对象；第二步，通过上一步获取到的iframe对象的contentWindow属性得到了iframe中元素所在的window对象；第三步，通过上一步获取到的window对象来操作iframe框架中的元素，这和操作不在iframe框架中的普通HTML元素是一样的。

function ShowExit() {

             //获取iframe的window对象

Var topWin = window.top.document.getElementById("topNav").contentWindow;

             //通过获取到的window对象操作HTML元素，这和普通页面一样topWin.document.getElementById("exit").style.visibility = "visible";

         }　

 

1. 简要描述position。

Absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。绝对定位是不占位置的

Relative：生成相对定位的元素，相对于其正常位置进行定位，脱离了文档流，原来所在的位置上偏移参照物，偏移后会把其它的层遮罩住。

Fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。

1. CSS中before和after这两个伪类选择器。

selector:before( sRules ) 它要和content属性一起使用，设置在对象前（依据对象树的逻辑结构）发生的内容；

selector:after( sRules ) 和before用法一样，不过它是设置在对象后（依据对象树的逻辑结构）发生的内容；

1. javascript的同步和异步。

javascript 异步表示async，指：代码执行不按顺序，‘跳过’执行，待其他某些代码执行完后，再来执行，称为“异步”。 

javascript同步表示sync，指：代码依次执行。

1. link和import区别

两者都是外部引用CSS的方式。

区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。

区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

区别4：ink支持使用Javascript控制DOM去改变样式；而@import不支持。

1. http的状态码

200 请求已成功，请求所希望的响应头或数据体将随此响应返回。

404 请求失败，请求所希望得到的资源未被在服务器上发现。

500 服务器遇到了一个未曾预料的状况，导致了它无法完成对请求的处理。一般来说，这个问题都会在服务器的程序码出错时出现。

304：如果网页自请求者上次请求后没有更新，则用304代码告诉搜索，引擎机器人，可节省带宽和开销

1. 行内元素和块级元素

块级元素：div  , p  , form,   ul,  li ,  ol, dl,    form,   address,  fieldset,  hr, menu,  table

行内元素：span,   strong,   em,  br,  img ,  input,  label,  select,  textarea,  cite,  

1. html5和css3的新特性

a) 新的内容标签

b) 更好的表格体系

c) 音频、视频的API

d) Canvas API

e) 地理 API

f) 网页存储 API

CSS3新特性

a) 选择器

b) RGBA和透明度

c) 多栏布局

d) 多背景图

e)  Word Wrap

f) 文字阴影

g) @font-face属性

h) 圆角(边框半径)

i) 边框图片

j) 盒阴影

k) 盒子大小

l) 媒体查询

m) 语音

1. 代码你是怎么优化的

减少Http请求

代码位置优化

避免 CSS expressions

使用外部样式/脚本

代码/页面压缩

CSS代码优化

JavaScript代码优化

1. 简述DIV元素和span元素的区别

SPAN 和 DIV 的区别在于，DIV(division)是一个块级元素，可以包含段落、标题、表格，乃至诸如章节、摘要和备注等。而SPAN 是行内元素，SPAN 的前后是不会换行的，它没有结构的意义，纯粹是应用样式，当其他行内元素都不合适时，可以使用SPAN。

1. 对Web标准化（或网站重构）知道哪些相关知识，简述几条你知道的Web标准；

网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的网站标准也分三方面：结构化标准语言，主要包括XHTML和XML；表现标准语言主要包括CSS；行为标准主要包括对象模型（如W3C DOM）、ECMAScript等

1. 一个网站最多可以用几种颜色?

一般三到四种颜色，背景颜色、栏目颜色、字体颜色搭配起来要看着舒服，通常用同一色系的好一点。

1. 说几条XHTML规范的内容:
   1. 所有的标记都必须要有一个相应的结束标记
   2. 所有标签的元素和属性的名字都必须使用小写
   3. 所有的XML标记都必须合理嵌套
   4. 所有的属性必须用引号""括起来
   5. 把所有<和&特殊符号用编码表示
   6. 给所有属性赋一个值
   7. 不要在注释内容中使“--”

1. 结合<span id="outer"><span id="inner">text</span></span>这段结构，谈谈innerHTML、outerHTML、innerText之间的区别；

innerHTML：

document.getElementById("outer").innerHTML="Amount";//可包括htm标签

结果<span id =" outer">Amount</span>

outerHTML：

var i =document.getElementById("outer").outerHTML;

结果：<span id =" inner">text</span>

outText：text

innerHTML:     <span>内容</span>，带有html标签

innerText:        内容 不带html标签

outerHTML:     <div><span>内容</span></div>

1. 谈谈javaScript数组方法sort()的使用，重点介绍sort()参数的使用及期内部机制；

sort() 方法用于对数组的元素进行排序。

语法: arrayObject.sort(sortby)

参数:sortby 可选。规定排序顺序。必须是函数。

说明:如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。要实现这一点，首先应把数组的元素都转换成字符串（如有必要），以便进行比较。

1. 字符串常用的操作方法。

substr 方法

返回一个从指定位置开始的指定长度的子字符串。

stringvar

必选项。要提取子字符串的字符串文字或 String 对象。

start

必选项。所需的子字符串的起始位置。字符串中的第一个字符的索引为 0。

length

可选项。在返回的子字符串中应包括的字符个数。

1. DOM的操作，增删等

一些常用的 HTML DOM 方法：

appendChild() 把新的子节点添加到指定节点。

removeChild() 删除子节点。

replaceChild() 替换子节点。

insertBefore() 在指定的子节点前面插入新的子节点。

createAttribute() 创建属性节点。

createElement() 创建元素节点。

createTextNode() 创建文本节点。

getAttribute() 返回指定的属性值。

setAttribute() 把指定属性设置或修改为指定的值。

1. Ajax的同步与异步的区别

同步需要等待返回结果才能继续，异步不必等待，一般需要监听异步的结果

同步是在一条直线上的队列，异步不在一个队列上 各走各的

1. Ajax返回值用什么解析

JSON.parse：将"json"字符串(或不规则对象)转成对应的对象或集合。

eval:将可执行的字符串转js代码并执行

1. 浮动产生边距和display：inline产生边距的兼容性问题怎么处理?上下边距怎么处理？

1. 说说栅格系统怎么回事

bootstrap3.x使用了四种栅格选项来形成栅格系统，这四种选项在官网上的介绍如下图，很多人不理解，这里跟大家详解一下四种栅格选项之间的区别，其实区别只有一条就是适合不同尺寸的屏幕设备。我们看class前缀这一项，我们姑且以前缀命名这四种栅格选项，他们分别是col-xs、col-sm、col-md、col-lg，我们懂英文的就知道，lg是large的缩写，md是mid的缩写，sm是small的缩写，xs是***的缩写。这样命名就体现了这几种class适应的屏幕宽度不同。

1. 说几个过滤器？

<p>{{ 5.826 | number:2 }}</p>

我们得到的结果就是5.83(四舍五入的哦)

currency货币过滤器

{{ num | currency:'$' }}

date时间格式化过滤器

{{ today | date }}

1. 有一个select下拉列表，获取选中选项的值，说说你的做法？

javascript原生的方法

  1:获取select对象： var  myselect=document.getElementById("test");

2选中项的索引： var index=myselect.selectedIndex ;

// selectedIndex代表的是你所选中项的index

3:拿到选中项options的value：  myselect.options[index].value;

4:拿到选中项options的text：  myselect.options[index].text;

jquery方法（前提是已经加载了jquery库）

1:var options=$("#test option:selected");  //获取选中的项

2:alert(options.val());   //拿到选中项的值

3:alert(options.text());   //拿到选中项的文本

1. 页面拉到底，然后加载是怎么实现的？

按需加载

生成<img data-src=”url” style="word-wrap: break-word;">标签时，用data-src来保存图片地址；</img data-src=”url”>

记录的图片data-src都保存到数组里；

对滚动条进行事件绑定,假设绑定的函数为function lazyload(){};

在函数lazyload中，按照下面思路实现：计算图片的Y坐标，并计算可视区域的高度height，当Y小于等于(height+ scrollTop)时，图片的src的值用data-src的来替换，从而来实现图片的按需加载；

 

1. 什么是事件冒泡？怎么阻止事件冒泡

当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。

当需要停止冒泡行为时，可以使用

function stopBubble(e) {

//如果提供了事件对象，则这是一个非IE浏览器

if ( e && e.stopPropagation )

    //因此它支持W3C的stopPropagation()方法

    e.stopPropagation();

else

    //否则，我们需要使用IE的方式来取消事件冒泡

window.event.cancelBubble = true;

}

1. angularjs你一般用来做什么？

数据的双向绑定，异步请求

1. jq有哪些选择器？用jq选择div里面直系img？用jq选择div里第一个img？

id选择器，class选择器，element选择器，* 选择器，并列选择器，层次选择器，过滤选择器

$("#divName img").

$("#divName img").eq(0)

 

1. jq有哪些方法？

ready(fn)，bind(type,[data],fn), toggle(fn,fn)，Ajax()，insertBefore, insertAfter

 

1. 把abcdefg的efg去掉,

var str = "abcdefg";

var child = str.substr(0,3);//从下标为0开始截取长度为0的子串

 

1. anglerjs是怎么样实现页面与数据库中数据的双向绑定的

我们在html中先定义一个angular的app,指定一个angular的controller,则该controller会对应于一个作用域(可以用$scope前缀来指定作用域中的属性和方法等). 则在该ngCtl的作用域内的HTML标签, 其值或者操作都可以通过$scope的方式跟js中的属性和方法进行绑定.

 

1. 讲一下什么是闭包，为什么内部函数B可以使用A函数里面的变量？

闭包：闭包是一个拥有许多变量和绑定了这些变量的环境表达式，通常是一个函数 ，因此这些变量也是该表达式的一部分；也就是说JS中所有的function都是一个 闭包，只是嵌套的function所产生的闭包更为强大。

好处：1）创建一个匿名函数，并立即执行，由于外部无法引用内部变量，因此在 执行后能很快释放，不会造成全局污染。

2）缓存，可以将值存储起来，当需要调用的时候，首先在缓存中查找，如果找不 到再进行计算，然后更新缓存并返回值。

3）实现封装。

4）实现面向对象中的对象。

坏处：闭包会导致变量不能释放，引起内存泄露。

1. 会用jQuery Mobile吗？讲一下他有哪些功能？事件？

使用data属性驱动元素生成各种界面组件，我了解有触摸事件，滑动事件，定位事件以及页面事件。

1. css中的rem怎么写？他的作用是什么？

rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。

 

1. ajax运作原理？

1) ajax引擎(XMLHttpRequest)为对象注册一个监听器(事件处理函数，对状态的改变事件(readyStatechange)监听)

2) 等待用户执行操作(例如点击)

3) 触发了事件处理代码

4) 调用ajax引擎

5) 发送请求，ajax引擎被调用后单独向服务器发送请求(不是整个界面)——异步请求

6) 服务器接受到了处理请求--开始处理

7) 服务器将处理结果(xml或者文本)返回给了ajax引擎

8) 监听相应数据

9) 监听器对GUI数据更新

 

1. 对于jsonp有什么了解

主要是用于解决ajax的跨域问题，利用在页面中创建<script>节点的方法向不同域提交HTTP请求，请求完毕之后可以使用callback方式回传结果。

Jsonp缺点是只支持get请求，只支持跨域http请求

1. jquery里的bind,live,on的用法和区别？

用法：

bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数；

live(type,[data],fn) 给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的

on(events,[selector],[data],fn) 在选择元素上绑定一个或多个事件的事件处理函数

区别：

.bind()是直接绑定在元素上

.live()则是通过冒泡的方式来绑定到元素上的。更适合列表类型的，绑定到document DOM节点上。和.bind()的优势是支持动态数据。

.on()则是最新的1.9版本整合了之前的三种方式的新事件绑定机制

 

1. 盒模型是什么？画出每个部分是从哪到哪?

CSS对HTML文档元素生成了一个描述该元素在HTML文档布局中所占空间的矩形元素框(element box),那么我们可以形象地将其看作是一个盒子

由内到外：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。

1. 说一下html5的本地存储是什么？

localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。

localStorage.setItem("key","value");//以“key”为名称存储一个值“value”

localStorage.getItem("key");//获取名称为“key”的值

枚举localStorage的方法：

for(var i=0;i<localStorage.length;i++){

     var name = localStorage.key(i)​;

     var value = localStorage.getItem(name);​

}

删除localStorage中存储信息的方法：

localStorage.removeItem("key");//删除名称为“key”的信息。

localStorage.clear();​//清空localStorage中所有信息

1. ajax的核心对象是什么？

核心对象是XMLHttpRequest它可以提供不重新加载页面的情况下更新网页，在页面加载后在客户端向服务器请求数据，在页面加载后在服务器端接受数据，在后台向客户端发送数据。

1. setInterval和setTimeout的区别。

setTimeout(表达式,延时时间)在执行时,是在载入后延迟指定时间后,去执行一次表达式

setInterval(表达式,交互时间)则不一样,它从载入后,每隔指定的时间就执行一次表达式

1. 跨域问题的解决方案。

1.jsonp。

ajax请求，dataType为jsonp。这种形式需要请求在服务端调整为返回callback([json-object])的形式。如果服务端返回的是普通json对象。那么调试的时候，在chrome浏览器的控制台会报"Uncaught SyntaxError: Unexpected token"错误；在firefox浏览器的控制台会报"SyntaxError: missing ; before statement"错误。

2.iframe跨域。

    页面中增加一个iframe元素，在需要调用get请求的时候，将iframe的src设置为get请求的url即可发起get请求的调用。

var url = "http://xxx.xxx.xxx";

$("#iframe").attr("src", url);//跨域，使用iframe

3.script元素的src属性处理

iframe、img、style、script等元素的src属性可以直接向不同域请求资源，jsonp正是利用script标签跨域请求资源的简单实现，所以这个和jsonp本质一样，同样需要服务端请求返回callback...形式。

var url="http://xxx.xxx.xxx?p1=1";

var script = document.createElement('script');

script.setAttribute('src', url);

document.getElementsByTagName('head')[0].appendChild(script);

4.在服务器使用get处理。

对于业务上没有硬性要求在前端处理的，可以在服务端做一次封装，再服务端发起调用，这样就可以解决跨域的问题。然后再根据请求是发出就完，还是需要获取返回值，来决定代码使用同步或者异步模式。

private static void CreateGetHttpResponse(string url, int? timeout, string userAgent, CookieCollection cookies)

        {

            if (string.IsNullOrEmpty(url))

            {

                throw new ArgumentNullException("url");

            }

            var request = WebRequest.Create(url) as HttpWebRequest;

            request.Method = "GET";

            if (!string.IsNullOrEmpty(userAgent))

            {

                request.UserAgent = userAgent;

            }

            if (timeout.HasValue)

            {

                request.Timeout = timeout.Value;

            }

            if (cookies != null)

            {

                request.CookieContainer = new CookieContainer();

                request.CookieContainer.Add(cookies);

            }

            request.BeginGetResponse(null,null);//异步

            //return request.GetResponse() as HttpWebResponse;

        }

1. 选择JQuery库的原因。

它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器，使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需要定义id即可。

1. 项目中bootstrap和angularJS在前端的主要方法和区别

bootstrap不算是javascript框架，它只是一个前端的ui框架，然后有一些附带的js插件而已

angularjs是一个javascript的mvvm的框架，是为了开发有复杂业务逻辑的CRUD（增）应用而生的。

1. html自带的滚动标签是什么？html5引用多媒体的标签是什么？

<marquee></marquee>，<autio><video>。

1. 怎么实现动画效果的？

Javscript 动画

css3 动画：一种是 transition， 一种是 animation

html5 动画：定义了三种绘图的方式，canvas ,svg, webgl，其中svg做为一种可缩放矢量图形的实现是基于xml标签定义的，它有专门的 animate 标签来定义动画。而为 canvas 或者 webgl 实现动画则需要通过 requestAnimationFrame (简称 raf) 来定期刷新画布。

1. 获取文本框的值和设置？js和jq分别怎么实现？

var obj=$("#文本框的id");

document.getElementById("#文本框的ID").value

 

1. 外部操作iframe内的元素？

通过window.top.document.getElementById("topNav")方法获取了顶部菜单页面（topPage.htm）所在的iframe对象；第二步，通过上一步获取到的iframe对象的contentWindow属性得到了iframe中元素所在的window对象；第三步，通过上一步获取到的window对象来操作iframe框架中的元素，这和操作不在iframe框架中的普通HTML元素是一样的。

function ShowExit() {

             //获取iframe的window对象

Var topWin = window.top.document.getElementById("topNav").contentWindow;

             //通过获取到的window对象操作HTML元素，这和普通页面一样topWin.document.getElementById("exit").style.visibility = "visible";

         }　

 

1. 简要描述position。

Absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。绝对定位是不占位置的

Relative：生成相对定位的元素，相对于其正常位置进行定位，脱离了文档流，原来所在的位置上偏移参照物，偏移后会把其它的层遮罩住。

Fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。

1. CSS中before和after这两个伪类选择器。

selector:before( sRules ) 它要和content属性一起使用，设置在对象前（依据对象树的逻辑结构）发生的内容；

selector:after( sRules ) 和before用法一样，不过它是设置在对象后（依据对象树的逻辑结构）发生的内容；

1. javascript的同步和异步。

javascript 异步表示async，指：代码执行不按顺序，‘跳过’执行，待其他某些代码执行完后，再来执行，称为“异步”。 

javascript同步表示sync，指：代码依次执行。

1. link和import区别

两者都是外部引用CSS的方式。

区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。

区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

区别4：ink支持使用Javascript控制DOM去改变样式；而@import不支持。

1. http的状态码

200 请求已成功，请求所希望的响应头或数据体将随此响应返回。

404 请求失败，请求所希望得到的资源未被在服务器上发现。

500 服务器遇到了一个未曾预料的状况，导致了它无法完成对请求的处理。一般来说，这个问题都会在服务器的程序码出错时出现。

304：如果网页自请求者上次请求后没有更新，则用304代码告诉搜索，引擎机器人，可节省带宽和开销

1. 行内元素和块级元素

块级元素：div  , p  , form,   ul,  li ,  ol, dl,    form,   address,  fieldset,  hr, menu,  table

行内元素：span,   strong,   em,  br,  img ,  input,  label,  select,  textarea,  cite,  

1. html5和css3的新特性

a) 新的内容标签

b) 更好的表格体系

c) 音频、视频的API

d) Canvas API

e) 地理 API

f) 网页存储 API

CSS3新特性

a) 选择器

b) RGBA和透明度

c) 多栏布局

d) 多背景图

e)  Word Wrap

f) 文字阴影

g) @font-face属性

h) 圆角(边框半径)

i) 边框图片

j) 盒阴影

k) 盒子大小

l) 媒体查询

m) 语音

1. 代码你是怎么优化的

减少Http请求

代码位置优化

避免 CSS expressions

使用外部样式/脚本

代码/页面压缩

CSS代码优化

JavaScript代码优化

1. 简述DIV元素和span元素的区别

SPAN 和 DIV 的区别在于，DIV(division)是一个块级元素，可以包含段落、标题、表格，乃至诸如章节、摘要和备注等。而SPAN 是行内元素，SPAN 的前后是不会换行的，它没有结构的意义，纯粹是应用样式，当其他行内元素都不合适时，可以使用SPAN。

1. 对Web标准化（或网站重构）知道哪些相关知识，简述几条你知道的Web标准；

网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的网站标准也分三方面：结构化标准语言，主要包括XHTML和XML；表现标准语言主要包括CSS；行为标准主要包括对象模型（如W3C DOM）、ECMAScript等

1. 一个网站最多可以用几种颜色?

一般三到四种颜色，背景颜色、栏目颜色、字体颜色搭配起来要看着舒服，通常用同一色系的好一点。

1. 说几条XHTML规范的内容:
   1. 所有的标记都必须要有一个相应的结束标记
   2. 所有标签的元素和属性的名字都必须使用小写
   3. 所有的XML标记都必须合理嵌套
   4. 所有的属性必须用引号""括起来
   5. 把所有<和&特殊符号用编码表示
   6. 给所有属性赋一个值
   7. 不要在注释内容中使“--”

1. 结合<span id="outer"><span id="inner">text</span></span>这段结构，谈谈innerHTML、outerHTML、innerText之间的区别；

innerHTML：

document.getElementById("outer").innerHTML="Amount";//可包括htm标签

结果<span id =" outer">Amount</span>

outerHTML：

var i =document.getElementById("outer").outerHTML;

结果：<span id =" inner">text</span>

outText：text

innerHTML:     <span>内容</span>，带有html标签

innerText:        内容 不带html标签

outerHTML:     <div><span>内容</span></div>

1. 谈谈javaScript数组方法sort()的使用，重点介绍sort()参数的使用及期内部机制；

sort() 方法用于对数组的元素进行排序。

语法: arrayObject.sort(sortby)

参数:sortby 可选。规定排序顺序。必须是函数。

说明:如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。要实现这一点，首先应把数组的元素都转换成字符串（如有必要），以便进行比较。

1. 字符串常用的操作方法。

substr 方法

返回一个从指定位置开始的指定长度的子字符串。

stringvar

必选项。要提取子字符串的字符串文字或 String 对象。

start

必选项。所需的子字符串的起始位置。字符串中的第一个字符的索引为 0。

length

可选项。在返回的子字符串中应包括的字符个数。

1. DOM的操作，增删等

一些常用的 HTML DOM 方法：

appendChild() 把新的子节点添加到指定节点。

removeChild() 删除子节点。

replaceChild() 替换子节点。

insertBefore() 在指定的子节点前面插入新的子节点。

createAttribute() 创建属性节点。

createElement() 创建元素节点。

createTextNode() 创建文本节点。

getAttribute() 返回指定的属性值。

setAttribute() 把指定属性设置或修改为指定的值。

1. Ajax的同步与异步的区别

同步需要等待返回结果才能继续，异步不必等待，一般需要监听异步的结果

同步是在一条直线上的队列，异步不在一个队列上 各走各的

1. Ajax返回值用什么解析

JSON.parse：将"json"字符串(或不规则对象)转成对应的对象或集合。

eval:将可执行的字符串转js代码并执行

1. 浮动产生边距和display：inline产生边距的兼容性问题怎么处理?上下边距怎么处理？

1. 说说栅格系统怎么回事

bootstrap3.x使用了四种栅格选项来形成栅格系统，这四种选项在官网上的介绍如下图，很多人不理解，这里跟大家详解一下四种栅格选项之间的区别，其实区别只有一条就是适合不同尺寸的屏幕设备。我们看class前缀这一项，我们姑且以前缀命名这四种栅格选项，他们分别是col-xs、col-sm、col-md、col-lg，我们懂英文的就知道，lg是large的缩写，md是mid的缩写，sm是small的缩写，xs是***的缩写。这样命名就体现了这几种class适应的屏幕宽度不同。

1. 说几个过滤器？

<p>{{ 5.826 | number:2 }}</p>

我们得到的结果就是5.83(四舍五入的哦)

currency货币过滤器

{{ num | currency:'$' }}

date时间格式化过滤器

{{ today | date }}

1. 有一个select下拉列表，获取选中选项的值，说说你的做法？

javascript原生的方法

  1:获取select对象： var  myselect=document.getElementById("test");

2选中项的索引： var index=myselect.selectedIndex ;

// selectedIndex代表的是你所选中项的index

3:拿到选中项options的value：  myselect.options[index].value;

4:拿到选中项options的text：  myselect.options[index].text;

jquery方法（前提是已经加载了jquery库）

1:var options=$("#test option:selected");  //获取选中的项

2:alert(options.val());   //拿到选中项的值

3:alert(options.text());   //拿到选中项的文本

1. 页面拉到底，然后加载是怎么实现的？

按需加载

生成<img data-src=”url” style="word-wrap: break-word;">标签时，用data-src来保存图片地址；</img data-src=”url”>

记录的图片data-src都保存到数组里；

对滚动条进行事件绑定,假设绑定的函数为function lazyload(){};

在函数lazyload中，按照下面思路实现：计算图片的Y坐标，并计算可视区域的高度height，当Y小于等于(height+ scrollTop)时，图片的src的值用data-src的来替换，从而来实现图片的按需加载；

 

1. 什么是事件冒泡？怎么阻止事件冒泡

当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。

当需要停止冒泡行为时，可以使用

function stopBubble(e) {

//如果提供了事件对象，则这是一个非IE浏览器

if ( e && e.stopPropagation )

    //因此它支持W3C的stopPropagation()方法

    e.stopPropagation();

else

    //否则，我们需要使用IE的方式来取消事件冒泡

window.event.cancelBubble = true;

}

1. angularjs你一般用来做什么？

数据的双向绑定，异步请求

1. jq有哪些选择器？用jq选择div里面直系img？用jq选择div里第一个img？

id选择器，class选择器，element选择器，* 选择器，并列选择器，层次选择器，过滤选择器

$("#divName img").

$("#divName img").eq(0)

 

1. jq有哪些方法？

ready(fn)，bind(type,[data],fn), toggle(fn,fn)，Ajax()，insertBefore, insertAfter

 

1. 把abcdefg的efg去掉,

var str = "abcdefg";

var child = str.substr(0,3);//从下标为0开始截取长度为0的子串

 

1. anglerjs是怎么样实现页面与数据库中数据的双向绑定的

我们在html中先定义一个angular的app,指定一个angular的controller,则该controller会对应于一个作用域(可以用$scope前缀来指定作用域中的属性和方法等). 则在该ngCtl的作用域内的HTML标签, 其值或者操作都可以通过$scope的方式跟js中的属性和方法进行绑定.