精华内容
下载资源
问答
  • <div><h1>Web性能领域常见的专业术语 测量与排查网页的性能瓶颈,是一名专业Web性能优化者的基本功。本章将详细介绍Web性能领域的一些专业术语,通过这些术语也可以侧面了解是哪些因素在影响加载性能。 ...
  • 以下是收集一些面试中经常会遇到经典面试题以及自己面试过程中有一些未解决问题,通过对知识整理以及...在网页中,一个元素占有空间大小由几个部分构成,其中包括元素的内容(content),元素的内边距(paddi

     

    以下是收集一些面试中经常会遇到的经典面试题以及自己面试过程中有一些未解决的问题,通过对知识的整理以及经验的总结,重新巩固自身的前端基础知识,如有错误或更好的答案,欢迎指正,水平有限,望各位不吝指教。:)

     
     

    HTML/CSS部分

     

    1、什么是盒子模型?

    在网页中,一个元素占有空间的大小由几个部分构成,其中包括元素的内容(content),元素的内边距(padding),元素的边框(border),元素的外边距(margin)四个部分。这四个部分占有的空间中,有的部分可以显示相应的内容,而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的盒模型。

     

    2、行内元素有哪些?块级元素有哪些? 空(void)元素有那些?

    行内元素:a、b、span、img、input、strong、select、label、em、button、textarea
    块级元素:div、ul、li、dl、dt、dd、p、h1-h6、blockquote
    空元素:即系没有内容的HTML元素,例如:br、meta、hr、link、input、img

     

    3、CSS实现垂直水平居中

    一道经典的问题,实现方法有很多种,以下是其中一种实现:
    HTML结构:

    
        <div class="wrapper">
            <div class="content"></div>
        </div>    

    CSS:

    
        .wrapper {
          position: relative;
          width: 500px;
          height: 500px;
          background-color: #ddd;
         }
        .content{
            background-color:#6699FF;
            width:200px;
            height:200px;
            position: absolute;        //父元素需要相对定位
            top: 50%;
            left: 50%;
            margin-top:-100px ;   //二分之一的height,width
            margin-left: -100px;
        } 
     

    4、简述一下src与href的区别

    href 是指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,用于超链接。

    src是指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;在请求src资源时会将其指向的资源下载并应用到文档内,例如js脚本,img图片和frame等元素。当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等元素也如此,类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

     

    5、什么是CSS Hack?

    一般来说是针对不同的浏览器写不同的CSS,就是 CSS Hack。
    IE浏览器Hack一般又分为三种,条件Hack、属性级Hack、选择符Hack(详细参考CSS文档:css文档)。例如:

        // 1、条件Hack
       <!--[if IE]>
          <style>
                .test{color:red;}
          </style>
       <![endif]-->
       // 2、属性Hack
        .test{
        color:#090\9; /* For IE8+ */
        *color:#f00;  /* For IE7 and earlier */
        _color:#ff0;  /* For IE6 and earlier */
        }
       // 3、选择符Hack
        * html .test{color:#090;}       /* For IE6 and earlier */
        * + html .test{color:#ff0;}     /* For IE7 */
       
     

    6、简述同步和异步的区别

    同步是阻塞模式,异步是非阻塞模式。
    同步就是指一个进程在执行某个请求的时候,若该请求需要一段时间才能返回信息,那么这个进程将会一直等待下去,直到收到返回信息才继续执行下去;
    异步是指进程不需要一直等下去,而是继续执行下面的操作,不管其他进程的状态。当有消息返回时系统会通知进程进行处理,这样可以提高执行的效率。

     

    7、px和em的区别

    px和em都是长度单位,区别是,px的值是固定的,指定是多少就是多少,计算比较容易。em得值不是固定的,并且em会继承父级元素的字体大小。
    浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em

     

    8、什么叫优雅降级和渐进增强?

    渐进增强 progressive enhancement:
    针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

    优雅降级 graceful degradation:
    一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。

    区别:

    a. 优雅降级是从复杂的现状开始,并试图减少用户体验的供给

    b. 渐进增强则是从一个非常基础的,能够起作用的版本开始,并不断扩充,以适应未来环境的需要

    c. 降级(功能衰减)意味着往回看;而渐进增强则意味着朝前看,同时保证其根基处于安全地带

     

    9、浏览器的内核分别是什么?

    IE: trident内核
    Firefox:gecko内核
    Safari:webkit内核
    Opera:以前是presto内核,Opera现已改用Google Chrome的Blink内核
    Chrome:Blink(基于webkit,Google与Opera Software共同开发)

     

    JavaScript部分

     

    怎样添加、移除、移动、复制、创建和查找节点?

    1)创建新节点
    createDocumentFragment() //创建一个DOM片段
    createElement() //创建一个具体的元素
    createTextNode() //创建一个文本节点

    2)添加、移除、替换、插入
    appendChild() //添加
    removeChild() //移除
    replaceChild() //替换
    insertBefore() //插入

    3)查找
    getElementsByTagName() //通过标签名称
    getElementsByName() //通过元素的Name属性的值
    getElementById() //通过元素Id,唯一性

     

    实现一个函数clone,可以对JavaScript中的5种主要的数据类型(包括Number、String、Object、Array、Boolean)进行值复制。

    
        /**
     * 对象克隆
     * 支持基本数据类型及对象
     * 递归方法
     */
    function clone(obj) {
        var o;
        switch (typeof obj) {
            case "undefined":
                break;
            case "string":
                o = obj + "";
                break;
            case "number":
                o = obj - 0;
                break;
            case "boolean":
                o = obj;
                break;
            case "object": // object 分为两种情况 对象(Object)或数组(Array)
                if (obj === null) {
                    o = null;
                } else {
                    if (Object.prototype.toString.call(obj).slice(8, -1) === "Array") {
                        o = [];
                        for (var i = 0; i < obj.length; i++) {
                            o.push(clone(obj[i]));
                        }
                    } else {
                        o = {};
                        for (var k in obj) {
                            o[k] = clone(obj[k]);
                        }
                    }
                }
                break;
            default:
                o = obj;
                break;
        }
        return o;
    }
     

    如何消除一个数组里面重复的元素?

    // 方法一:
    var arr1 =[1,2,2,2,3,3,3,4,5,6],
        arr2 = [];
    for(var i = 0,len = arr1.length; i< len; i++){
        if(arr2.indexOf(arr1[i]) < 0){
            arr2.push(arr1[i]);
        }
    }
    document.write(arr2); // 1,2,3,4,5,6
     

    在Javascript中什么是伪数组?如何将伪数组转化为标准数组?

    伪数组(类数组):无法直接调用数组方法或期望length属性有什么特殊的行为,但仍可以对真正数组遍历方法来遍历它们。典型的是函数的argument参数,还有像调用getElementsByTagName,document.childNodes之类的,它们都返回NodeList对象都属于伪数组。可以使用Array.prototype.slice.call(fakeArray)将数组转化为真正的Array对象。

    
    function log(){
          var args = Array.prototype.slice.call(arguments);  
    //为了使用unshift数组方法,将argument转化为真正的数组
          args.unshift('(app)');
     
          console.log.apply(console, args);
    };
     

    Javascript中callee和caller的作用?

    caller是返回一个对函数的引用,该函数调用了当前函数;

    callee是返回正在被执行的function函数,也就是所指定的function对象的正文。

     

    请描述一下cookies,sessionStorage和localStorage的区别

    sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。而localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。

    web storage和cookie的区别

    Web Storage的概念和cookie相似,区别是它是为了更大容量存储设计的。Cookie的大小是受限的,并且每次你请求一个新的页面的时候Cookie都会被发送过去,这样无形中浪费了带宽,另外cookie还需要指定作用域,不可以跨域调用。
    除此之外,Web Storage拥有setItem,getItem,removeItem,clear等方法,不像cookie需要前端开发者自己封装setCookie,getCookie。但是Cookie也是不可以或缺的:Cookie的作用是与服务器进行交互,作为HTTP规范的一部分而存在 ,而Web Storage仅仅是为了在本地“存储”数据而生。

     

    统计字符串中字母个数或统计最多字母数。

    
    var str = "aaaabbbccccddfgh";
    var obj  = {};
    for(var i=0;i<str.length;i++){
        var v = str.charAt(i);
        if(obj[v] && obj[v].value == v){
            obj[v].count = ++ obj[v].count;
        }else{
            obj[v] = {};
            obj[v].count = 1;
            obj[v].value = v;
        }
    }
    for(key in obj){
        document.write(obj[key].value +'='+obj[key].count+'&nbsp;'); // a=4  b=3  c=4  d=2  f=1  g=1  h=1 
    }   
     

    jQuery的事件委托方法on、live、delegate之间有什么区别?

     

    如何理解闭包?

     

    跨域请求资源的方法有哪些?

     

    谈谈垃圾回收机制方式及内存管理

     

    开发过程中遇到的内存泄露情况,如何解决的?

     

    HTTP

     

    一次完整的HTTP事务是怎样的一个过程?

    基本流程:

    a. 域名解析

    b. 发起TCP的3次握手

    c. 建立TCP连接后发起http请求

    d. 服务器端响应http请求,浏览器得到html代码

    e. 浏览器解析html代码,并请求html代码中的资源

    f. 浏览器对页面进行渲染呈现给用户

     

    HTTP的状态码有哪些?

     

    HTTPS是如何实现加密?

     

    算法相关

     

    手写数组快速排序

    关于快排算法的详细说明,可以参考阮一峰老师的文章快速排序
    "快速排序"的思想很简单,整个排序过程只需要三步:
    (1)在数据集之中,选择一个元素作为"基准"(pivot)。
    (2)所有小于"基准"的元素,都移到"基准"的左边;所有大于"基准"的元素,都移到"基准"的右边。
    (3)对"基准"左边和右边的两个子集,不断重复第一步和第二步,直到所有子集只剩下一个元素为止。
    参考代码:

    
     var quickSort = function(arr) {
      if (arr.length <= 1) { return arr; }
      var pivotIndex = Math.floor(arr.length / 2);
      var pivot = arr.splice(pivotIndex, 1)[0];
      var left = [];
      var right = [];
      for (var i = 0; i < arr.length; i++){
        if (arr[i] < pivot) {
          left.push(arr[i]);
        } else {
          right.push(arr[i]);
        }
      }
      return quickSort(left).concat([pivot], quickSort(right));
    };
     

    JavaScript实现二分法查找

    二分法查找,也称折半查找,是一种在有序数组中查找特定元素的搜索算法。查找过程可以分为以下步骤:
    (1)首先,从有序数组的中间的元素开始搜索,如果该元素正好是目标元素(即要查找的元素),则搜索过程结束,否则进行下一步。
    (2)如果目标元素大于或者小于中间元素,则在数组大于或小于中间元素的那一半区域查找,然后重复第一步的操作。
    (3)如果某一步数组为空,则表示找不到目标元素。
    参考代码:

    
         // 非递归算法
            function binary_search(arr, key) {
                var low = 0,
                    high = arr.length - 1;
                while(low <= high){
                    var mid = parseInt((high + low) / 2);
                    if(key == arr[mid]){
                        return  mid;
                    }else if(key > arr[mid]){
                        low = mid + 1;
                    }else if(key < arr[mid]){
                        high = mid -1;
                    }else{
                        return -1;
                    }
                }
            };
            var arr = [1,2,3,4,5,6,7,8,9,10,11,23,44,86];
            var result = binary_search(arr,10);
            alert(result); // 9 返回目标元素的索引值       
    
    
        // 递归算法
            function binary_search(arr,low, high, key) {
                if (low > high){
                    return -1;
                }
                var mid = parseInt((high + low) / 2);
                if(arr[mid] == key){
                    return mid;
                }else if (arr[mid] > key){
                    high = mid - 1;
                    return binary_search(arr, low, high, key);
                }else if (arr[mid] < key){
                    low = mid + 1;
                    return binary_search(arr, low, high, key);
                }
            };
            var arr = [1,2,3,4,5,6,7,8,9,10,11,23,44,86];
            var result = binary_search(arr, 0, 13, 10);
            alert(result); // 9 返回目标元素的索引值  
     

    Web安全

     

    你所了解到的Web攻击技术

    (1)XSS(Cross-Site Scripting,跨站脚本攻击):指通过存在安全漏洞的Web网站注册用户的浏览器内运行非法的HTML标签或者JavaScript进行的一种攻击。
    (2)SQL注入攻击
    (3)CSRF(Cross-Site Request Forgeries,跨站点请求伪造):指攻击者通过设置好的陷阱,强制对已完成的认证用户进行非预期的个人信息或设定信息等某些状态更新。

     

    前端性能

     

    如何优化图像、图像格式的区别?

     

    浏览器是如何渲染页面的?

     

    设计模式

     

    对MVC、MVVM的理解

     

    正则表达式

     

    写一个function,清除字符串前后的空格。(兼容所有浏览器)

    
    function trim(str) {
        if (str && typeof str === "string") {
            return str.replace(/(^\s*)|(\s*)$/g,""); //去除前后空白符
        }
    }
     

    使用正则表达式验证邮箱格式

    
        var reg = /^(\w)+(\.\w+)*@(\w)+((\.\w{2,3}){1,3})$/;
        var email = "example@qq.com";
        console.log(reg.test(email));  // true  
     

    职业规划

     

    对前端工程师这个职位你是怎么样理解的?

    a. 前端是最贴近用户的程序员,前端的能力就是能让产品从 90分进化到 100 分,甚至更好

    b. 参与项目,快速高质量完成实现效果图,精确到1px;

    c. 与团队成员,UI设计,产品经理的沟通;

    d. 做好的页面结构,页面重构和用户体验;

    e. 处理hack,兼容、写出优美的代码格式;

    f. 针对服务器的优化、拥抱最新前端技术。

     
     
     

    【关于我们】

    奈园(微信公众号:inaiyuan),专注于国内各大互联网公司社会招聘内推。关注后回复关键词“内推”查看最新互联网名企(包括但不限于今日头条、网易游戏、BAT、网易互联网、小米、京东、乐视、携程等名企)内推信息,有技术岗、有产品岗、有运营岗、有设计岗、有交互岗、有销售岗,更有其他N多相关岗位!更多内推信息请扫描以下二维码关注查阅。

     

     

     

     

     

     

     

    展开全文
  •  好了,通过第三章学习,我们已经了解了一些XML和DTD基本术语,但是我们还知道怎样来写这些文件,需要遵循什么语法,在下一章,将重点介绍有关撰写XML和DTD文档语法。 第四章 XML语法 七.DTD语法...
  • 我暂时还懂这个伪类是什么意思,但是我们知道CSS是html网页的表现形式,所以这个伪类肯定也是和设置网页的效果有关。带着这样念头我们继续学习。 伪类包括:状态伪类和结构伪类。 状态伪类 状态伪类是基于元素...

    CSS伪类

    伪类的定义是:添加一些选择器的特殊效果。
    选择器常见的有:id,tag,class,属性[attr=attrval]等。我暂时还不懂这个伪类是什么意思,但是我们知道CSS是html网页的表现形式,所以这个伪类肯定也是和设置网页的效果有关。带着这样的念头我们继续学习。
    伪类包括:状态伪类和结构伪类。

    状态伪类

    状态伪类是基于元素当前状态进行选择的。在与用户的交互过程中元素的状态是动态变化的,因此该元素会根据其状态呈现不同的样式。当元素处于某状态时会呈现该样式,而进入另一状态后,该样式也会失去。常见的状态伪类主要包括:

    :link 应用于未被访问过的链接;
    
    :hover 应用于鼠标悬停到的元素;
    
    :active 应用于被激活的元素;
    
    :visited 应用于被访问过的链接,与:link互斥。
    
    :focus 应用于拥有键盘输入焦点的元素。
    

    从状态伪类我们来理解一下伪类的定义,在设置每个元素属性的时候,通常我们的步骤是:元素名+{属性},但是遇到想要设置例如元素的状态,在被点击前后,悬停等,我们通过伪类来辅助,而不需要设置其他的选择器来设置,这样在我看来使得代码简洁了,查询资料获得的好处是:正确的利用伪元素和伪类能够让我们的html结构更清晰合理,也能在一定程度上减少js对dom的操作!之后再来理解吧。

    结构性伪类

    结构性伪类是css3新增选择器,利用dom树进行元素过滤,通过文档结构的互相关系来匹配元素,能够减少class和id属性的定义,使文档结构更简洁。顾名思义,结构性伪类,就是对于构成一个元素的结构中的子元素做设置属性,例如:first-child 选择某个元素的第一个子元素;常见的有:

    :first-child 选择某个元素的第一个子元素;
    
    :last-child 选择某个元素的最后一个子元素;
    
    :nth-child() 选择某个元素的一个或多个特定的子元素;
    
    :nth-last-child() 选择某个元素的一个或多个特定的子元素,从这个元素的最后一个子元素开始算;
    
    :nth-of-type() 选择指定的元素;
    
    :nth-last-of-type() 选择指定的元素,从元素的最后一个开始计算;
    
    :first-of-type 选择一个上级元素下的第一个同类子元素;
    
    :last-of-type 选择一个上级元素的最后一个同类子元素;
    
    :only-child 选择的元素是它的父元素的唯一一个子元素;
    
    :only-of-type 选择一个元素是它的上级元素的唯一一个相同类型的子元素;
    
    :empty 选择的元素里面没有任何内容。
    

    伪元素

    伪元素是对元素中的特定内容进行操作,而不是描述状态。它的操作层次比伪类更深一层,因此动态性比伪类低很多。实际上,伪元素就是选取某些元素前面或后面这种普通选择器无法完成的工作。控制的内容和元素是相同的,但它本身是基于元素的抽象,并不存在于文档结构中!常见的伪元素选择器包括:

    :first-letter 选择元素文本的第一个字(母)。
    
    :first-line 选择元素文本的第一行。
    
    :before 在元素内容的最前面添加新内容。
    
    :after 在元素内容的最后面添加新内容。
    

    导航栏=链接列表

    导航栏可以作为是用CSS做的实例来理解了,是一个网页最重要的部分了,我认为。导航栏就是链接列表,就是链接的集合。

    创建垂直导航栏:

    首先我们知道导航栏就是链接的集合,链接一般都是内联形式,所以第一步就需要将链接样式改成块元素,使得链接变成一块可点击链接的区域。其他的部分就是需要对以链接为元素的列表设置颜色等属性。

    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        width: 200px;
        background-color: #f1f1f1;
    }
     
    li a {
        display: block;
        color: #000;
        padding: 8px 16px;
        text-decoration: none;
    }
     
    /* 鼠标移动到选项上修改背景颜色 */
    li a:hover {
        background-color: #555;
        color: white;
    }
    

    创建水平导航栏

    通过上面的学习我们知道,导航栏就是链接作为列表的集合,而列表的li元素是块级元素,因此,如果我们要想实现水平的导航栏,我们需要将li的显示属性改成内联的,示例如下:

    			  ul{
        				list-style-type: none;
        				width: 100%;
        				height: 30px;
        				margin: 0;
        				padding: 0;
        				overflow: hidden;
        				background-color: #969896;
        			}
        			li{
        				float: left;
        			}
        			li a{
        				display: block;
        				color: #000000;
        				text-align: center;
        				padding: 10px 20px;
        				text-decoration: none;
        			}
        			li a:hover{
        				background-color: #00FFFF;
        			}
    
    
    展开全文
  • 有几种常见的方式来标识 DOM 节点: <ul><li>使用 xPath</li><li>使用 CSS Selector 语法</li><li>使用 tagName + index</li></ul> 这里选择了使用第三种方式来快速实现。需要注意一点,我们通过 ...
  • 书的英文书名,然后单击Search,再单击该书名,切换到能够下载源代码的网页。在该网站,也可找到有 些编程练习的解决方案。 本书分为17章和10个附录。 第1章:预备知识 本章介绍了Bjarne Stroustrup如何在...
  • 书的英文书名,然后单击Search,再单击该书名,切换到能够下载源代码的网页。在该网站,也可找到有 些编程练习的解决方案。 本书分为17章和10个附录。 第1章:预备知识 本章介绍了Bjarne Stroustrup如何在...
  • 书的英文书名,然后单击Search,再单击该书名,切换到能够下载源代码的网页。在该网站,也可找到有 些编程练习的解决方案。 本书分为17章和10个附录。 第1章:预备知识 本章介绍了Bjarne Stroustrup如何在...
  • 21天学通javascript(第2版)(顾宁燕) pdf扫描版

    千次下载 热门讨论 2014-09-26 12:40:11
    7.4.9 生成特定数据—获取数组中一部分元素 151 7.4.10 置换数据—颠倒数组元素的顺序 151 7.4.11 数据排序—对数组元素进行排序 152 7.4.12 数据转换—将对象转换为本地字符串 154 7.5 小结 155 7.6 习题 ...

空空如也

空空如也

1 2 3
收藏数 54
精华内容 21
关键字:

常见的网页元素不包括什么