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");
  • 相关阅读:
    数学+高精度 ZOJ 2313 Chinese Girls' Amusement
    最短路(Bellman_Ford) POJ 1860 Currency Exchange
    贪心 Gym 100502E Opening Ceremony
    概率 Gym 100502D Dice Game
    判断 Gym 100502K Train Passengers
    BFS POJ 3278 Catch That Cow
    DFS POJ 2362 Square
    DFS ZOJ 1002/HDOJ 1045 Fire Net
    组合数学(全排列)+DFS CSU 1563 Lexicography
    stack UVA 442 Matrix Chain Multiplication
  • 原文地址:https://www.cnblogs.com/cherishli/p/6885575.html
Copyright © 2011-2022 走看看