CDNmetting前端面试题

前端面试题汇总

2017-06-28  本文已影响436人  clark124

<a name='html'>HTML</a>

    （1）link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;

    （2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;

    （3）import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;

    * HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
          绘画 canvas;
          用于媒介回放的 video 和 audio 元素;
          本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;
          sessionStorage 的数据在浏览器关闭后自动删除;
          语意化更好的内容元素，比如 article、footer、header、nav、section;
          表单控件，calendar、date、time、email、url、search;
          新的技术webworker, websocket, Geolocation;

      移除的元素：
          纯表现的元素：basefont，big，center，font, s，strike，tt，u;
          对可用性产生负面影响的元素：frame，frameset，noframes；

    * 支持HTML5新标签：
         IE8/IE7/IE6支持通过document.createElement方法产生的标签，
         可以利用这一特性让这些浏览器支持HTML5新标签，
         浏览器支持新标签后，还需要添加标签默认的样式。

         当然也可以直接使用成熟的框架、比如html5shim;
         <!--[if lt IE 9]>
            <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
         <![endif]-->

    * 如何区分HTML5： DOCTYPE声明\新增的结构元素\功能元素

<a name='css'>CSS</a>

*  水平居中：给div设置一个宽度，然后添加margin:0 auto属性

        div{
            width:200px;
            margin:0 auto;
         }

*  让绝对定位的div居中

        div {
            position: absolute;
            width: 300px;
            height: 300px;
            margin: auto;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background-color: pink; /* 方便看效果 */
        }

*  水平垂直居中一

        确定容器的宽高 宽500 高 300 的层
        设置层的外边距

        div {
            position: relative;     /* 相对定位或绝对定位均可 */
            width:500px;
            height:300px;
            top: 50%;
            left: 50%;
            margin: -150px 0 0 -250px;      /* 外边距为自身宽高的一半 */
            background-color: pink;     /* 方便看效果 */

         }

*  水平垂直居中二

        未知容器的宽高，利用 `transform` 属性

        div {
            position: absolute;     /* 相对定位或绝对定位均可 */
            width:500px;
            height:300px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: pink;     /* 方便看效果 */

        }

*  水平垂直居中三

        利用 flex 布局
        实际使用时应考虑兼容性

        .container {
            display: flex;
            align-items: center;        /* 垂直居中 */
            justify-content: center;    /* 水平居中 */

        }
        .container div {
            width: 100px;
            height: 100px;
            background-color: pink;     /* 方便看效果 */
        }  

假设你现在正用一台显示设备来阅读这篇文章，同时你也想把它投影到屏幕上，或者打印出来，
而显示设备、屏幕投影和打印等这些媒介都有自己的特点，CSS就是为文档提供在不同媒介上展示的适配方法

<!-- link元素中的CSS媒体查询 -->
当媒体查询为真时，相关的样式表或样式规则会按照正常的级联规被应用。
当媒体查询返回假， <link> 标签上带有媒体查询的样式表 仍将被下载 （只不过不会被应用）。

<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

<!-- 样式表中的CSS媒体查询 -->
包含了一个媒体类型和至少一个使用 宽度、高度和颜色等媒体属性来限制样式表范围的表达式。
CSS3加入的媒体查询使得无需修改内容便可以使样式应用于某些特定的设备范围。

<style>
    @media (min-width: 700px) and (orientation: landscape){
      .sidebar {
        display: none;
      }
    }
</style>

<a name='js'>JavaScript</a>

同步：浏览器访问服务器请求，用户看得到页面刷新，重新发请求,等请求完，页面刷新，新内容出现，用户看到新内容,进行下一步操作。

异步：浏览器访问服务器请求，用户正常操作，浏览器后端进行请求。等请求完，页面不刷新，新内容也会出现，用户看到新内容。



（待完善）

      例子中用 add 来替换 sub，add.call(sub,3,1) == add(3,1) ，所以运行结果为：alert(4);

      注意：js 中的函数其实是对象，函数名是对 Function 对象的引用。

        function add(a,b)
        {
            alert(a+b);
        }

        function sub(a,b)
        {
            alert(a-b);
        }

        add.call(sub,3,1);

    *jQuery是一个js库，主要提供的功能是选择器，属性修改和事件绑定等等。

    *jQuery UI则是在jQuery的基础上，利用jQuery的扩展性，设计的插件。
     提供了一些常用的界面元素，诸如对话框、拖动行为、改变大小行为等等

jQuery中没有提供这个功能，所以你需要先编写两个jQuery的扩展：

    $.fn.stringifyArray = function(array) {
        return JSON.stringify(array)
    }

    $.fn.parseArray = function(array) {
        return JSON.parse(array)
    }

    然后调用：
    $("").stringifyArray(array)

    参考：http://www.tuicool.com/articles/ArQZfui
    function commafy(num) {
        return num && num
            .toString()
            .replace(/(\d)(?=(\d{3})+\.)/g, function($0, $1) {
                return $1 + ",";
            });
    }
    console.log(commafy(1234567.90)); //1,234,567.90

<a name='other'>ECMAScript6 相关</a>

<a name='other'>前端框架相关</a>

<a name='other'>其他问题</a>

    1、事件不同之处：

        触发事件的元素被认为是目标（target）。而在 IE 中，目标包含在 event 对象的 srcElement 属性；

        获取字符代码、如果按键代表一个字符（shift、ctrl、alt除外），IE 的 keyCode 会返回字符代码（Unicode），DOM 中按键的代码和字符是分离的，要获取字符代码，需要使用 charCode 属性；

        阻止某个事件的默认行为，IE 中阻止某个事件的默认行为，必须将 returnValue 属性设置为 false，Mozilla 中，需要调用 preventDefault() 方法；

        停止事件冒泡，IE 中阻止事件进一步冒泡，需要设置 cancelBubble 为 true，Mozzilla 中，需要调用 stopPropagation()；

    *（优点）因为Node是基于事件驱动和无阻塞的，所以非常适合处理并发请求，
      因此构建在Node上的代理服务器相比其他技术实现（如Ruby）的服务器表现要好得多。
      此外，与Node代理服务器交互的客户端代码是由javascript语言编写的，
      因此客户端和服务器端都用同一种语言编写，这是非常美妙的事情。

    *（缺点）Node是一个相对新的开源项目，所以不太稳定，它总是一直在变，
      而且缺少足够多的第三方库支持。看起来，就像是Ruby/Rails当年的样子。

<a name='web'>前端学习网站推荐</a>

1. 极客标签：     http://www.gbtags.com/

2. 码农周刊：     http://weekly.manong.io/issues/

3. 前端周刊：     http://www.feweekly.com/issues

4. 慕课网：       http://www.imooc.com/

5. div.io：       http://div.io

6. Hacker News： https://news.ycombinator.com/news

7. InfoQ：       http://www.infoq.com/

8. w3cplus：     http://www.w3cplus.com/

9. Stack Overflow： http://stackoverflow.com/

10.w3school：    http://www.w3school.com.cn/

11.mozilla：     https://developer.mozilla.org/zh-CN/docs/Web/JavaScript

<a name='web'>文档推荐</a>

  1. jQuery 基本原理

  2. JavaScript 秘密花园

  3. CSS参考手册

  4. JavaScript 标准参考教程

  5. ECMAScript 6入门

上一篇下一篇

猜你喜欢

热点阅读