前端面试题及答案（一）
1、什么是W3C标准？
WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。
2、bootstrap响应式原理
是通过栅格系统和媒体查询实现的 // 小屏幕（平板，大于等于 768px）@media (min-width: @screen-sm-min) { ... }// 中等屏幕（桌面显示器，大于等于 992px）@media (min-width: @screen-md-min) { ... }// 大屏幕（大桌面显示器，大于等于 1200...
3、HTML/XHTM的区别
XHTML 与 HTML 4.01 标准没有太多的不同。
XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名必须用小写字母。
XHTML 文档必须拥有根元素。
4、页面构架和布局
布局可以是编码方面的，也可以是视觉方面的。
编码方面的涉及到语义化标签(也包含了div+css)布局、iframe框架(特殊地方使用)布局和表格布局(只用于一些特殊的地方，不推荐全站使用)，具体你可以百度下了解学习下相关知识。
如果是视觉交互方面的，就比较多了，每年都会有新的设计布局，高级一点的比如视差类型布局，全屏布局，瀑布流，无缝拼图布局等，这些都不局限于传统的布局方式；传统电子商务、信息类的大多采用单栏、两栏或者三栏布局，还有更多栏布局；分辨率相关的宽屏布局和窄屏布局，感应式布局。太多的选择了，要学习的东西也比较多，要慢慢了解啦。还有更多的布局需要慢慢摸索和体验。我把我知道的说了。
至于手机端，例举一些：竖排列表、横排方块、九宫格、TAB切换式、手风琴布局(有多个分类及其内容同时展示)、抽屉/侧边栏、标签场景式），因为屏幕小，要增加用户体验都可以根据具体情况用不同的布局方式。
5、BootStrap学习笔记，优缺点总结
优点：
- BT的优势之一就是可以根据用户屏幕尺寸调整页面，使其在各个尺寸上都表现良好。
- BT预先定义了很多CSS类，使用的时候直接给class赋予对应的类名即可，如text-left，text-align，.table等。最有代表性的就是btn类，BT定义了一个.bt的基础类，如果还想要其他样式可以在这个基础类上进行扩展，实现不同的视觉效果。
- BT的JavaScript插件非常丰富，既可以用现成的也可以自己扩充，BT提供了一个集成板的BT.js您可以直接拿过来使用也可以单个使用引入*.js即可。
不足：
- 对IE兼容也存在不小的问题，BT将所有的元素盒模型都设置成了border-box，这是IE混杂模式下的盒模型，光这点就导致了不能兼容IE。此外还用到了大量的H5标签以及CSS3语法，这些语法标签兼容性方面同样存在不小的问题，当然网上存在很多兼容IE的办法，但需要引入其他文件，有些还不小，势必导致加载速度变慢，影响用户体验。
- BT对IE6，7的兼容性肯定不好，对IE8的支持也需要一些额外的文件。
IE8的媒体查询需要response.js的配合才能实现 - BT 不支持 IE 古老的兼容模式。为了让 IE 浏览器运行最新的渲染模式下，建议将此 <meta> 标签加入到你的页面中：
<meta http-equiv="X-UA-Compatible" content="IE=edge">
按 F12 键打开 IE 的调试工具，就可以看到 IE 当前的渲染模式是什么。
BT属于前端UI库，可以快速搭建前端页面，以及设计响应式界面，还可以使用saas重新设计组件，
6、JQeury学习笔记，优缺点总结
优点:
- jQuery实现脚本与页面的分离，是操作DOM的首选js库。
- 最少的代码做最多的事情
最少的代码做最多的事情，这是jQuery的口号，而且名副其实。使用它的高级selector，开发者只需编写几行代码就能实现令人惊奇的效果。开发者无需过于担忧浏览器差异，它除了还完全支持Ajax，而且拥有许多提高开发者编程效率的其它抽象概念。jQuery把JavaScript带到了一个更高的层次。以下是一个非常简单的示例：
代码如下:
$("p.neat").addClass("ohmy").show("slow");
通过以上简短的代码，开发者可以遍历“neat”类中所有的<p>元素，然后向其增加“ohmy”类，同时以动画效果缓缓显示每一个段落。开发者无需检查客户端浏览器类型，无需编写循环代码，无需编写复杂的动画函数，仅仅通过一行代码就能实现上述效果。 - 性能
在大型JavaScript框架中，jQuery对性能的理解最好。尽管不同版本拥有众多新功能，其最精简版本只有18KB大小，这个数字已经很难再减少。jQuery的每一个版本都有重大性能提高。 - 插件
基于jQuery开发的插件目前已经有大约数千个。开发者可使用插件来进行表单确认、图表种类、字段提示、动画、进度条等任务。 - 节省开发者学习时间
当然要想真正学习jQuery，开发者还是需要投入一点时间，尤其是如果你要编写大量代码或自主插件的话，更是如此。但是，开发者可以采取“各个击破”的方式，而且jQuery提供了大量示例代码，入门是一件非常容易的事情。
不足：
- 不能向后兼容
- 插件兼容性。
- jQuery的稳定性
- 在大型框架中，jQuery核心代码库对动画和特效的支持相对较差。
7、”高内聚 ，低耦合“到底是什么意思？
‘高内聚，低耦合’是相对于代码而言，一个项目中：
每个模块之间相互联系的紧密程度，模块之间联系越紧密，则耦合性越高，模块的独立性就越差！反之同理；
一个模块中各个元素之间的联系的紧密程度，如果各个元素（语句、程序段）之间的联系程度越高，则内聚性越高，即‘高内聚’ ！
如: 一个项目中有20个方法调用良好，但是要修改了其中一个，另外的19个都要进行修改，这就是高耦合！独立性太差！
现在的软件结构设计，都会要求“高内聚，低耦合”，来保证软件的高质量！mark！
8、对前后端联合开发 的技术原理（Ajax、Json）有一定认识，理解DOM、Xml概念， 熟悉前后台交互方式。
- Ajax异步交互原理：Ajax其核心有JavaScript、XMLHTTPRequest、DOM对象组成，通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用JavaScript来操作DOM而更新页面。
- Json：一般我用的比较多的是通过AJAX异步来获取JSON数据。
//HTML
<span id="showdata">查看资料</span>
<div style="display:none;" id="box">
<h2>用户信息</h2>
<p id="info"><img src="loading.gif" /></p>
</div>
//JS
$('#showdata').on('click',function(){
$('#box').show();
$.getJSON('/ajax/userdata/',function(oData){
// oData = {"username":"nimojs","userid":1}
$('#info').html('用户名：' + oData.username + '<br>用户ID：' + oData.userid);
})
})
- DOM：文档对象模型，一个网页中所有的东西都是dom节点，根节点是<html>，它可以无线嵌套。用来获取或设置文档中标签的属性，例如获取或者设置input表单的value值。
- BOM：浏览器对象模型。用来获取或设置浏览器的属性、行为，例如：新建窗口、获取屏幕分辨率、浏览器版本号等。
- XML：被设计用来传输和存储数据，被设计用来格式化和显示数据。仅仅是纯文本。
-前后台交互方式：
9、GET和POST请求的区别
- GET提交的数据会放在URL之后，以?分割URL和传输数据，参数之间以&相连，如EditPosts.aspx?name=test1&id=123456. POST方法是把提交的数据放在HTTP包的Body中.
- GET提交的数据大小有限制（因为浏览器对URL的长度有限制），而POST方法提交的数据没有限制.
- GET方式需要使用Request.QueryString来取得变量的值，而POST方式通过Request.Form来获取变量的值。
- GET方式提交数据，会带来安全问题，比如一个登录页面，通过GET方式提交数据时，用户名和密码将出现在URL上，如果页面可以被缓存或者其他人可以访问这台机器，就可以从历史记录获得该用户的账号和密码.
