WEB前端面试题—20170405
1、行内元素有哪些？块级元素有哪些？空（void）元素有哪些？
行内元素：a b span img input select strong
块级元素:div ul ol li dl dt dd h1 h3 h4 p
空元素:<br> <hr> <img> <input> <link> <meta>2、清除浮动的几种方式，各自的优缺点。
方法一：
结尾处加空div标签 clear:both
原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度
优点：简单、代码少、浏览器支持好、不容易出现怪问题
缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不好
方法二：
<style type="text/css">
.div1{background:#000080;border:1px solid red;}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
/*清除浮动代码*/
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.clearfloat{zoom:1}
style>
<div class="div1 clearfloat">
<div class="left">Leftdiv>
<div class="right">Rightdiv>
div>
<div class="div2">
div2
div>
父级div定义 伪类:after 和 zoom
原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题
优点：浏览器支持好、不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）
缺点：代码多、不少初学者不理解原理，要两句代码结合使用才能让主流浏览器都支持。
方法三：
父级div定义 overflow:hidden
原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度
优点：简单、代码少、浏览器支持好
缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。3、移动端常用的自适应布局方案，简述他们的特点
目前比较常用的方法有：
首先要让页面大小铺满屏幕又不能溢出。只需要在html<head>标签内加入viewport(如下),参数分别表示:页面速度 = 屏幕宽度，最大和最小伸缩比都是1，不允许用户拉缩。
<meta name="viewport" content="width=device-width,maxmun=1.0,minmun=1.0,user-scalable=no">
百分百自适应：把长度单位转化为百分比来表示，这样在不同的宽度下，元素的长宽也会随之变化。
优点：宽度之间无缝对接，操作起来也相对比较方便。
缺点：字体大小需要另外一套自适应方法来调整；当屏幕宽度大于700px后，继续按照百分比元素会偏大，这个时候调整起来会比较麻烦。
rem、em自适应：用媒体查询的方法，确定在不同屏幕宽度下，改变<html>或<body>的fontsize。
再用em、rem替代px作为单位实现自适应。
优点：可以根据不同屏幕设置，可以完美解决上面说的屏幕偏大时的比例问题，字体的大小也不存在问题。
缺点：根据宽度区间来设置，无法实现无缝变换。4、JSONP的原理及应用场景
解释：在进行网站开发的过程中经常会用到第三方的数据，但是由于同源策略的限制导致ajax不能发送请求，因此也无法获取数据。
1、同源：
同源是一种浏览器的一种安全策略，所谓同源是指，域名，协议，端口号完全相同
目的：保护用户信息安全
限制：cookie、localStorage和IndexDB无法获取
无法操作跨域的iframe里的DOM
ajax请求不能发送
2、跨域
不同源则为跨域
http://api.csdn/detail.html 不同源 域名不同
https://www.csdn.com/detail.html 不同源 协议不同
http://www.csdn.com:8080/detail.html 不同源 端口不同
http://api.csdn.com:8080/detail.html 不同源 域名、端口不同
https://api.csdn.com/detail.html 不同源 协议、域名不同
https://www.csdn.com:8080/detail.html 不同源 端口、协议不同
http://www.csdn.com/detail/index.html 同源 只是目录不同
3、jsonp原理
本质上是利用
6
比如说我们可以利用jsonp访问百度天气
1 $(function () {
2 // 发送jsonp请求
3 $.ajax({
4 type:"get",
5 url:'http://api.map.baidu.com/telematics/v3/weather?output=json&ak=0A5bc3c4fb543c8f9bc54b77bc155724',
6 data:{
7 location:$("#city").val()||"上海"
8 },
9 dataType:"jsonp",
10 success: function (data) {
11 //渲染模版
12 var html = template('template',{list:data.results[0].weather_data})
13 $('tbody').html(html);
14
15 }
16 });
17 });
使用template加载数据
5、html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？
如何区分HTML和HTML5？
新特性
拖拽释放(Drag and drop)API
语义化更好的内容标签(header、nav、footer、aside、article、section)
音频、视频API(audio、video)
画布(canvas)API
地理(Geolocation)API
本地离线存储 localStorage长期存储数据、浏览器关闭后数据不丢失
sessionStorage的数据在浏览器关闭后自动删除
表单控件 calendar、date、time、email、url、search
新技术 webworker、websocket、Geolocation
移除的元素
纯表现的元素：basefont、big、center、fonts、strike、tt、u
对可用性产生负面影响的元素：frame、framset、noframes
支持HTML5新标签
IE8/IE7/IE6支持通过document.createElement方法产生的标签，
可以利用这一特性让浏览器支持HTML5标签
浏览器支持新标签后，还需要添加默认标签的样式
当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
如何区分:
DOCTYPE声明\新增的结构元素\功能元素
HTML5和HTML的区别：
1、在文档类型声明上
HTML声明：
<html xmlns="http://www.w3.org/1999/xhtml">
HTML5声明：
上面的两种声明,HTML5声明简洁方便人们的记忆，HTML声明太长了并且很难记住这段代码。
在结构语义上
HTML:没有体现结构语义化的标签，通常都是这样来命名的<div id="header">div>，这样表示网站的头部。
HTML5:在语义上却有很大的优势，提供了一些新的HTML5标签比如: article、footer、header、nav、section，这些通俗易懂。6、请简述什么是事件代理
事件代理又称事件委托，JavaScript高级程序设计上讲：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。
事件代理是利用事件的冒泡原理来实现的，何为事件冒泡呢？就是事件从最深的节点开始，然后逐步向上传播事件，比如说：页面上有这样的节点树，div>ul>li>a；比如给最里面的a加一个click点击事件，那么这个事件会一层一层的往外执行，执行顺序是a>li>ul>div，有这样的机制，那么给最外面的div加点击事件，那么里面的ul，li，a做点击事件的时候，都会冒泡到最外层的div上，所以都会触发，这就是事件委托，委托他们父级为执行事件。JavaScript事件代理和委托（Delegation）
s中的事件委托或是事件代理详解
7、简述ajax请求的时候get和post方式的区别。
1、使用Get请求时，参数在URL中显示，而使用Post方式，则不会显示出来
2、使用Get请求发送数据量少，Post请求发送量大
Get方法
用get方式可以传简单数据，但大小一般限制在1kb一下，数据追加到url中发送(http的header传送)，也就是说，浏览器将各个表单字段元素及其数据按照URL参数的格式附加在请求行中的资源路径后面。另外最重要的一点是，他会被客户端的浏览器缓存起来，那么，别人就可以从浏览器的历史记录中，读取到此客户的数据，比如账号和密码等。因此，在某些情况下，get方法会带来严重的安全问题。
POST方法
当使用post方法时，浏览器把各表单字段元素及其数据作为HTTP消息的实体内容发送给web服务器，而不是作为URL地址的参数进行传递，使用post方式传递的数据量要比使用GET方式传送的数据量大的多。
总之，GET方式传送数据量小，处理效率高，安全性低，会被缓存，而POST反之。8、JQuery框架中$.ajax()的常用参数有哪些？写一个post请求并带有发送数据和返回数据的样例
$.ajax({
url:'请求地址',
type:'POST', //请求方式 GET or POST
async:true, //是否异步 true or false
data:{//发送数据
name:'zhangsan',
age:25
},
timeout:5000, //超出时间
dataType:'json', //返回数据的格式: json/xml/html/script/jsonp/text
beforeSend:function(){
console.log(xhr)
console.log('发送前')
},
success:function(data,textStatus,jqXHR){
console.log(data)
console.log(textStatus)
console.log(jqXHR)
},
error:function(xhr,textStatus){
console.log('错误')
console.log(xhr)
console.log(textStatus)
},
complete:function(){
console.log('结束')
}
})
9、谈谈你对闭包的理解
闭包的作用
①可以读取函数内部的变量
②让这些变量始终保持在内存中
举个例子：
(function(){
var hello = "hello,world";
function welcome(hi){
alert(h1);//解析到作用域的第一个对象的属性
alert(hello); //解析到作用域链的第二个对象
}
welcome("It's easy");
})();运行结果很简单，一个弹出”It’s easy”,一个弹出hello world；
解析：
对于函数welcome()，定义welcome的时候会产生一个作用域链对象，为了表示方便，记作scopechain。scopechain是个有顺序的集合对象。
scopechain的第一个对象：为了方便表示记作sc1， sc1有若干属性，引用本函数的参数和局部变量，如sc1.hi ；
scopechain的第二个对象：为了方便表示记作sc2，sc2有若干属性，引用外层函数的参数和局部变量，如sc2.hello；
…
scopechain的最后一个对象：为了方便表示记作scn，scn引用的全局的执行环境对象，也就是window对象！，如scn.eval()；
这里之所以可以弹出hello，world，原因就是变量解析时在welcome函数作用域链的第一个对象上找不到hello属性，然后就去第二个对象上找去了
所有闭包根本上还是变量解析，而之所以可以实现，还是因为变量解析会在作用域链中依次寻找对应属性导致的。
10、display、position有哪些属性，并解释作用
display的常用属性有
none //此元素不会被显示；
block //此元素将显示为块级元素;
inline //默认，显示为内联元素
inline-block行内元素
inherit 规定应该从父元素继承display属性的值。
position 常用的属性有：
absolute 绝对定位
fixed 相对于浏览器窗口进行定位
relative生成相对定位
static默认值，没有定位
inherit 规定应该从父元素继承position属性的值。
代码题：
实现冒泡排序，并做简单优化。
function bubbleSort(arr){
var len=arr.length,j;
var temp;
while(len>0){
for(j=0;j1;j++){
if(arr[j]>arr[j+1]){
temp=arr[j];
arr[j]=arr[j+1];
arr[j+1]=temp;
}
}
i--;
}
return arr;
} 冒泡排序的思想，比较相邻两个数，如果前者大于后者，就把两个数交换位置；这样一来，第一轮就可以选出一个最大的数放在最后面；那么经过n-1轮，就完成了所有数的排序；
1、video有哪些属性？
autoplay //视频就绪后马上播放
controls //向用户显示控件
height 视频播放器高度
width 视频播放器宽度
loop 是否循环播放
preload //在视频在页面加载时进行加载，并预备播放。如果使用autoplay，则忽略该属性。
src //要播放的视频url
1、如何阻止事件冒泡和默认事件
//阻止事件冒泡，使成为捕获事件触发机制
function stopBubble(e){
//如果提供了事件对象，则这是一个非IE浏览器
if(e && e.stopPropagation){
//因此它支持W3C的stopPropagation()方法
e.stopPropagation();
}else{
//否则，我们需要使用IE的方式来取消事件冒泡
window.event.cancelBubble = true;
}
}
//当按键后,不希望按键继续传递给如HTML文本框对象时,可以取消返回值.即停止默认事件默认行为.
//阻止浏览器的默认行为
function stopDefault(e){
//阻止默认浏览器动作(w3c)
if(e && e.prevetDefault){
e.preventDefault();
}else{
window.event.returnValue = false;
return false;
}
}2、b继承a的方法
function A(name){
this.name = name;
this.sayHello = function(){alert(this.name+” say Hello!”);};
}
function B(name,id){
this.temp = A;
this.temp(name); //相当于new A();
delete this.temp;
this.id = id;
this.checkId = function(ID){alert(this.id==ID)};
}3、写一个获取非行间样式的函数
function getStyle(obj,attr,value) {
if (!value) {
if (obj.currentStyle) {
return obj.currentStyle[attr]
}else {
obj.getComputedStyle(attr,false)
}
}
else {
obj.style[attr] = value
}
}4、javascript的本地对象、内置对象和宿主对象
http://www.cnblogs.com/sun-mile-rain/p/4037424.html
http://www.cnblogs.com/luckyXcc/p/5892896.html
5、强制类型转换和隐式类型转换
JS 数据类型转换主要有三种 方法主要有三种
转换函数、强制类型转换、利用js变量弱类型转换
①、转换函数：
js提供了parseInt()和parseFloat()两个转换函数。前者把值转换成整数，后者把值转换成浮点数。只有对String类型调用这些方法，这两个函数才能正确运行；对其他类型返回的都是NaN
②、强制类型转换
还可使用强制类型转换（type casting）处理转换值的类型。使用强制类型转换可以访问特定的值，即使它是另一种类型的。
ECMAScript中可用的3种强制类型转换如下：
Boolean(value)——把给定的值转换成Boolean型；
Number(value)——把给定的值转换成数字（可以是整数或浮点数）；
String(value)——把给定的值转换成字符串。
最后一种强制类型转换方法String()是最简单的，因为它可把任何值转换成字符串。要执行这种强制类型转换，只需要调用作为参数传递进来的值的 toString()方法，即把1转换成 “1 “，把true转换成 “true “，把false转换成 “false “，依此类推。强制转换成字符串和调用toString()方法的唯一不同之处在于，对null或undefined值强制类型转换可以生成字符串而不引 发错误；
隐式类型转换
隐式类型转换是最为隐蔽的地方，不加注意的话很容易在这一点上出错，对这一点的掌握也体现了JavaScript程序员经验。 JavaScript会自动转换表达式中对象的类型以完成表达式求值。
四则运算
加法运算符+是双目运算符，只要其中一个是String类型，表达式的值便是一个String。
对于其他的四则运算，只有其中一个是Number类型，表达式的值便是一个Number。
对于非法字符的情况通常会返回NaN：
判断语句
判断语句中的判断条件需要是Boolean类型，所以条件表达式会被隐式转换为Boolean。 其转换规则同Boolean的构造函数。比如：
var obj = {};
if(obj){
while(obj);
}
6、前端页面有哪三层构成，分别是什么？作用是什么？
分成：结构层、表示层、行为层
结构层（structural layer）
由 HTML 或 XHTML之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P标签表达了这样一种语义：“这是一个文本段。”
表示层（presentation layer）
由 CSS 负责创建。 CSS对“如何显示有关内容”的问题做出了回答。
行为层（behaviorlayer）
负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM主宰的领域。
7、css的基本语句构成是？
选择器{属性1:值1;属性2:值2;……}
8、事件绑定和普通事件有什么区别？
普通事件中的onclick是DOM0级事件只支持单个事件，会被其他onclick事件覆盖，而事件绑定中的addEventListener是DOM2级事件可以添加多个事件而不用担心被覆盖
9、javascript的同源策略
脚本只能读取和所属文档来源相同的窗口和文档的属性。
注意一点：脚本本身的来源并不作为判断是否同源的依据，而是将脚本所属文档的来源作为判断依据。
如果两个页面拥有 相同 的 协议（protocol），端口（如果指定），和 主机，那么这两个页面就属于同一个源（origin）
10、编写一个数组去重的方法
http://blog.csdn.net/xyphf/article/details/51855190