zoukankan      html  css  js  c++  java

  • 面试答案知多少

    1.<!DOCTYPE html>中DOCTYPE 有什么作用，去掉会有什么影响？

    答：作用：声明该文档是什么类型的：html类型；

        去掉：一般高版本浏览器默认是html5类型，所以去掉也没事，不过考虑到低版本浏览器的兼容，建议规范的书写，还是声明一下的好。

     

    2.HTML行内元素有哪些，块级元素有哪些？画出css盒模型。

    答：行内元素：span、a、img、input、strong、i、textarea;

        块级元素：div、p、h1-h6、ul、li、form、hr、ol、tr;

        盒子模型：外边距（margin）、边框（border）、内边距（padding）、内容（content）；

    俯视这个盒子，它有上下左右四条边，所以每个属性都包括四个部分：上下左右；这四部分可同时设置，也可分别设置；内边距可以理解为盒子里装的东西和边框的距离，而边框有厚薄和颜色之分，内容就是盒子中间装的东西，外边距就是边框外面自动留出的一段空白。

     

    3.css选择符有哪些？哪些属性可以继承？优先级算法如何计算？内联和!important哪个优先级高？

         答：css选择符：（id：#）、（class：.）、（标签）、（*）；伪类选择器还有很多，既然问的是选择符，这里就不写了。

             属性可继承：font-size、background、width、color（a标签特殊）<下面的做参考>

             所有元素可继承：visibility和cursor。

    内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。

    终端块状元素可继承：text-indent和text-align。

    列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。

             优先级算法：按照10进制算法：important=正无穷，id=100，class=10，元素（标签）=5，*=1；

             内联和!important：css法则里!important永远是最高的。

     

    4.清除浮动的几种方法，各自的优缺点？

          答：a.父级元素定义 height ：

                  原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。 

                  优点：简单、代码少、容易掌握 

                  缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题 

                  建议：不推荐使用，只建议高度固定的布局时使用

              b.结尾处加空div标签 clear:both :

                  原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度 

    优点：简单、代码少、浏览器支持好、不容易出现怪问题 

    缺点：如果页面浮动布局多，就要增加很多空div,增加代码量，维护也不方便。

    建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法 

              c.父级元素定义 伪类:after 和 zoom 

    原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题

    优点：浏览器支持好、不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等） 

    缺点：代码多、不少初学者不理解原理，要两句代码结合使用才能让主流浏览器都支持。 

    建议：推荐使用，建议定义公共类，以减少CSS代码。

     

    5.HTML5存储类型有哪些？

         答：1、本地存储localstorage

                <扩展>存储方式：

    以键值对(Key-Value)的方式存储，永久存储，永不失效，除非手动删除。

    大小：每个域名5M

    支持情况：

    注意：IE9 localStorage不支持本地文件，需要将项目署到服务器，才可以支持！

    检测方法：

    if(window.localStorage){  

    alert('This browser supports localStorage');  

    }else{  

    alert('This browser does NOT support localStorage');  

    }

    常用的API：

    getItem //取记录

    setIten//设置记录

    removeItem//移除记录

    key//取key所对应的值

    clear//清除记录

    存储的内容：

    数组，图片，json，样式，脚本。。。（只要是能序列化成字符串的内容都可以存储）

           2、本地存储sessionstorage

     

    HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的，区别在于 sessionStorage 在关闭页面后即被清空，而 localStorage 则会一直保存。

           3、离线缓存（application cache）

     < 参考：http://blog.csdn.net/s164828378/article/details/52747032>

      

    6.HTTP状态码有哪些，分别代表什么意思？

          答：100： 初始的请求已经接受，客户应当继续发送请求的其余部分；

              101：服务器将遵从客户的请求转换到另外一种协议；

              200：请求数据成功。

              301：客户请求的文档在其他地方，新的URL在Location头中给出，浏览器应该自动地访问新的URL。

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

              505：服务器不支持，或者拒绝支持在请求中使用的 HTTP 版本。

    <参考：http://tool.oschina.net/commons?type=5>

     

    7.css3新增伪类选择器有哪些?

          答：first-of-type、last-of-type、only-of-type、only-child、nth-child(n)、root<选择文档根元素>

    <参考：https://zhidao.baidu.com/question/555177511.html>

     

    8.用css3编写：div旋转90度，0.5秒后变圆，0.5秒后放大2倍。

     div{margin: auto;
    
     width: 100px;height: 100px;background: gold;
    
     transform:rotate(90deg);
    
     -ms-transform:rotate(90deg); /* Internet Explorer */
    
         -moz-transform:rotate(90deg); /* Firefox */
    
         -webkit-transform:rotate(90deg); /* Safari 和 Chrome */
    
         -o-transform:rotate(90deg); /* Opera */
    
         animation: name 0.5s infinite;
    
 }
    
    @keyframes name {
    
   100%{border-radius:50%;
    
       transform:scale(2);
    
   }
    
}
     

    答：

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    9.例举两种强制类型转换和一种隐式类型转换。

      答：强制：a.parsInt(“123456”);b.Number(value);

          隐式：“50”-4；

    10.split()和join()的区别

    答：join() 方法用于把数组中的所有元素放入一个字符串。

    元素是通过指定的分隔符进行分隔的。

    split()方法：用于把一个字符串分割成字符串数组。

    区别：这两个函数之间的主要区别在于 Join 可以使用任何分隔符字符串将多个字符串连接起来，而 Split 只能使用一个字符分隔符将字符串断开。

     

    11.分别解释数组方法pop() push() unshift() shift();

    a、pop():将删除 数组中的最后一个元素，把数组长度减 1，并且返回它删除的元素的值。如果数组已经为空，则 pop() 不改变数组，并返回 undefined 值。

    b、push()：方法可向数组的末尾添加一个或多个元素，并返回新的长度。

    c、Unshift():方法可向数组的开头添加一个或更多元素，并返回新的长度。

    d、Shift():方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。

     

    12.事件绑定和普通事件有什么区别？

    答：普通添加事件的方法不支持添加多个事件，最下面的事件会覆盖上面的，而事件绑定方式添加事件可以添加多个。

     

    13.ajax请求的时候get和post方式的区别

    答：1.get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。

        2.get安全性非常低，post安全性较高。

        3.get会产生缓存，post没有缓存。

        4.当我们在提交表单的时候我们通常用post方式,当我们要传送一个较大的数据文件时,需要用post。当传递的值只需用参数方式(这个值不大于2KB)的时候,用get方式即可。

    <参考：http://www.cnblogs.com/oneword/archive/2011/06/06/2073533.html

           http://blog.csdn.net/jqrsdsy/article/details/6737269 >

     

    14.call和apply的区别。

    答：call:调用一个对象的一个方法，以另一个对象替换当前对象;

    Apply:应用某一对象的一个方法，用另一个对象替换当前对象。

    <提示 : 这题不会没问题，我也不会，咳咳。欲知详情，自个儿百度去。>

     

    15.事件委托是什么?使用事件委托有什么好处？

    答：事件委托是：利用冒泡的原理，把事件加到父级上，触发执行效果；

    好处是：提高性能，较少对dom的频繁操作。

    <参考：http://www.cnblogs.com/leejersey/p/3801452.html >

     

    16.如何阻止事件冒泡和默认事件？

    答：功能:停止事件冒泡:

    function stopBubble(e) {

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

        if ( e && e.stopPropagation ) {

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

            e.stopPropagation();

        } else { 

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

            window.event.cancelBubble = true;

        }

    }
     

         

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    功能：阻止事件默认行为:

     

    function stopDefault( e ) {

         // 阻止默认浏览器动作(W3C)

         if ( e && e.preventDefault ) {

             e.preventDefault();

         } else {

            // IE中阻止函数器默认动作的方式

            window.event.returnValue = false;

        }

        return false;

    }
     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    17.添加 删除 替换 插入到某个DOM的方法

    dom = document.createElement("p");

                    dom.innerHTML="<span style='color:red'> 这是一个被p标记包含的 span 标签</span>";

                    document.body.appendChild(dom);
     

    A.增：

     

     

     

     

     

     

    This.removeChild(dom);
     

    B.删：

     

     

     

     h = document.createElement("h1");

                    h.innerHTML="<span style='color:green'> 这是一个被h1标记包含的 span 标签</span>";

                    document.body.replaceChild(h,dom);

                    dom = null;
     

    C.替换：

     

     

     

     

     

     

    document.appendChild(dom );
     

    D.插入：

     

     

     

     

    18.跨域的方法：

    答：1.jsonp:

    2.通过修改document.domain来跨子域;

    3.使用window.name来进行跨域;

    4.使用HTML5中新引进的window.postMessage方法来跨域传送数据;

    <参考：http://www.cnblogs.com/2050/p/3191744.html >

     

    19.编写一个数组去重的方法

    Array.prototype.unique = function(){

     var res = [];

     var json = {};

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

      if(!json[this[i]]){

       res.push(this[i]);

       json[this[i]] = 1;

      }

     }

     return res;

    }

    var arr = [112,112,34,'你好',112,112,34,'你好','str','str1'];

    alert(arr.unique());

    思路：

    1.创建一个新的数组存放结果

    2.创建一个空对象

    3.for循环时，每次取出一个元素与对象进行对比，如果这个元素不重复，则把它存放到结果数组中，同时把这个元素的内容作为对象的一个属性，并赋值为1，存入到第2步建立的对象中。

    说明：至于如何对比，就是每次从原数组中取出一个元素，然后到对象中去访问这个属性，如果能访问到值，则说明重复。
     

    答：

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    20.AJAX请求JSON数据后如何解析

    //格式化参数

        function formatParams(data) {

            var arr = [];

            for (var name in data) {

                arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name]));

            }

            arr.push(("v=" + Math.random()).replace(".",""));

            return arr.join("&");

        }
     

    答：

     

     

     

     

     

     

     

     

     

     

     

     

     

    《参考：http://caibaojian.com/ajax-jsonp.html 》

     

    至此结束

                                                 

                                                 答案出自：宇哥

                                                 加群有惊喜：535880373

     

     

     

     

     

     

     

     

     

     

    http://websong.gitee.io/songyublog/
  • 相关阅读:
    Hibernate Annotation (Hibernate 注解)
    org/objectweb/asm/Type异常解决办法
    Spring3 MVC 总结（转）
    Spring mvc 3 在controller和视图之间传递参数
    各种树tree的js控件优缺点
    Spring MVC 的请求参数获取的几种方法
    解决javax.persistence.OneToMany.orphanRemoval()Z异常办法
    ModelAndView返回自己的用法
    javax.persistence.Entity异常解决方法
    调用http://WebXml.com.cn/的webservice获取手机号段信息
  • 原文地址：https://www.cnblogs.com/webSong/p/6076011.html
Copyright © 2011-2022 走看看