WEB前端面试题—20170405

来源：互联网发布：apache文件服务器搭建编辑：程序博客网时间：2024/04/30 09:49

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">Left</div> <div class="right">Right</div> </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里的DOMajax请求不能发送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原理本质上是利用<script>标签具有可跨域的特性，由服务端返回预先定义好的javascript函数的调用，并且将服务端数据以该函数参数的形式传递过来。如：    1  <script>    2        function fuc(data){    3          console.log(data.name);    4         }    5  </script>    6      <script src="http://www.baidu.com/api.php?callback=fuc"></script>  比如说我们可以利用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加载数据<script type="text/template" id="template">      <% for(var i=0 ; i< list.length ;i++){ %>          <tr>          <% var item = list[i]; %>          <td><%=item.date%></td>          <td><img src="<%=item.dayPictureUrl%>" alt=""/></td>          <td><img src="<%=item.nightPictureUrl%>" alt=""/></td>          <td><%=item.temperature%></td>          <td><%=item.weather%></td>          <td><%=item.wind%></td>          </tr>       <%}%></script>

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框架<!-- [if It IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script ><![endif]-->如何区分:DOCTYPE声明\新增的结构元素\功能元素HTML5和HTML的区别：　　1、在文档类型声明上　　HTML声明：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">　　<html xmlns="http://www.w3.org/1999/xhtml">HTML5声明：<!doctype html>　　上面的两种声明,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;j<len-1;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

0 0