zoukankan      html  css  js  c++  java
  • 前端面试题重点整理汇总

    1.①讲述一下Doctype的作用,②标准模式与兼容模式之间有什么区别?

    ①<!DOCTYPE>声明位于位于HTML文档中的第一行,处于 <html> 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。

    ②标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中,页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

    2.页面导入样式时,使用link和@import之间有什么区别?

    link标签是标准的html标签,import不是

    link可以连接各种形式的文件,而import只能导入CSS

    link使用的是连接的方式,相当于桥梁,边加载边连接

    import使用的是导入方式,会在文档加载时,将CSS文件导入到HTML中,它在HTML完全加载完成后再倒入CSS文件。
    <style type=”text/css”>
    
             @import url(“相对路径”);
    
    </style>
    
    <link rel=”stylesheet” type=”text/css” href=”相对路径” />

    3.介绍一下你对浏览器内核的理解?

    主要分成两部分:渲染引擎(layout engineer或Rendering Engine)和JS引擎。

    渲染引擎:负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入CSS等),以及计算网页的显示方式,然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同,所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。

     JS引擎:解析和执行javascript来实现网页的动态效果。最开始渲染引擎和JS引擎并没有区分的很明确,后来JS引擎越来越独立,内核就倾向于只指渲染引擎。

    4.常见的浏览器内核有哪些?

    Trident内核:IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]

    Gecko内核:Netscape6及以上版本,FF(火狐),MozillaSuite/SeaMonkey等

    Presto内核:Opera7及以上。      [Opera内核原为:Presto,现为:Blink;]

    Webkit内核:Safari,Chrome等。   [ Chrome的:Blink(WebKit的分支)]

    5.①html5有哪些新特性、移除了那些元素?②如何处理HTML5新标签的浏览器兼容问题?

     ①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新标签,

         浏览器支持新标签后,还需要添加标签默认的样式。

    当然也可以直接使用成熟的框架:

      <!--[if lt IE 9]>
            <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
      <![endif]-->

    6.简述一下你对HTML语义化的理解?

    用正确的标签做正确的事情。

    html语义化让页面的内容结构化(比如<section><article><header>这些标签),结构更清晰,便于对浏览器、搜索引擎解析;

    即使在没有样式CSS情况下也以一种文档格式显示,并且是容易阅读的;

    搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重,利于SEO;

    使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解。

    7.Label的作用是什么?是怎么用的?

    label标签来定义表单控制间的关系,当用户选择该标签时,浏览器会自动将焦点转到和标签相关的表单控件上。

    <label for="Name">Number:</label>
    
    <input type=“text“name="Name" id="Name"/>
    
    <label>Date:<input type="text" name="B"/></label>

    8.iframe有那些缺点?

    ①iframe会阻塞主页面的Onload事件;

    ②搜索引擎的检索程序无法解读这种页面,不利于SEO;

    ③iframe和主页面共享连接池,而浏览器对相同域的连接有限制,所以会影响页面的并行加载。

    所以现在不建议使用iframe

    9.JQuery Ajax使用Post请求怎么传递参数?写出一个可通用的JQuery二次封装函数?

    $.post("url",{"key":"data"},function(){},,function(){},"JSON");
    function func(url,Object,str){
        var  geshi  = str?str:"json";
        $.post(url,object,function(data){
            return data;
        },function(){
            return error;
        }str);
    }
    
    var data = func(url,{},"json");

    10.在不同分辨率不同设备访问Web网站,如何适配?
      ① 媒体查询 @media all and (max-970px)

      ② JS JQ 等实现响应式

      ③ BootStrap等第三方响应式框架。

    11.JQuery绑定事件的方法及区别?
       JQ控件.onclick = function(){}
       JQ控件.on("click",function(){}) // off解除
       祖先元素.on("click",dom,function);//事件委派
       JQ控件.bind("click",function(){});//1.7+淘汰

    on: ① 可以给同一控件绑定多个同类型事件
           ② 可以通过off解除事件绑定
           ③ (委派)页面新增同类型dom时也会绑定该事件

    12. 写出一段闭包代码并解释器作用?
     

     function func(){
            var num = 1;
            function func2(){
                alert(num);
            }
            return func2;
        }
        var f = func();
        f(); //调用func2()  !func()();

    闭包:在函数内部套用函数,并且通过return将内部函数返回。  
    作用:①访问函数内部作用域。②确保函数内部变量不被释放。

    13.解决子元素浮动,父容器高度塌陷的问题:
    ① 在父容器上加上属性:overfolw:hidden;
    ② 子容器上:after{}
    ③ 改为inline-block/使用弹性布局
    ④ 父容器:float
    14.给子容器加margin-top父容器一块跟着下来的解决办法
    ① 给父容器加padding-top
    ② 给父容器加 border
    ③ 给父容器加上 overfolw:hidden;
    15.各种缩写形式❤
    ①Background
        color  image  repeat  attachment  position
    ②Font
        style weight size/line-height family
    ③List-style
        type  position  image
        square inside url("img/img.jpg");
  • 相关阅读:
    图片 滚动切换效果(五) 高级篇
    图片 滚动切换效果(四)
    图片 滚动切换效果(三)
    图片 滚动切换效果(二)
    图片 滚动切换效果(一)
    新年第一篇 之 (摄像机可视区域)
    SuperSocket源码解析之开篇 (转)
    矮人国之战 之 阵型 模仿(二)
    Web Service
    XML于JSON
  • 原文地址:https://www.cnblogs.com/cherishli/p/6885575.html
Copyright © 2011-2022 走看看