zoukankan      html  css  js  c++  java
  • 2018前端面试题及参考答案整理(二)

    1.HTML5中的DataList是什么?

    <datalist>定义选项列表,与input元素配合使用,来定义input可能的值。datalist及其选项不会被显示出来,他仅仅是合法的输入值列表

    2.SVG是什么?

    svg(Scalable Vector Graphics,可伸缩矢量图形)由万维网联盟(W3C)推出的基于xxxxim编码的开放式图形、图像标准。他虽然是一种二维矢量图形格式,但其中包含矢量图形、光栅图像及文本等。

    3.HTML5canvas是什么?

    定义图形,比如图表和其他图像

    4.如何使用canvas来画一条线?

    [html] view plain copy
     
    1. <canvas id="canvas" style="border:1px solid #aaa;display: block;margin:50px auto;">"></canvas>  
    2. <script>  
    3.   
    4.    window.onload= function() {  
    5.      var canvas = document.getElementById('canvas')  
    6.      var context = canvas.getContext('2d')  
    7.      canvas.width = 1024  
    8.      canvas.height = 768  
    9.      context.moveTo(100,100)  
    10.      context.lineTo(700,700)  
    11.      context.lineWidth = 5  
    12.      context.strokeStyle  = 'red'  
    13.      context.stroke()  
    14.    }  
    15.   
    16.  </script>  

    5.HTML5中如何实现应用缓存?

    [html] view plain copy
     
    1. <!DOCTYPE html>  
    2. <!--如需启动应用程序缓存,请在文档<html>标签中包含manifest属性-->  
    3. <html lang="en" manifest="demo.appcache">  
    4. <head>  
    5.     <meta charset="UTF-8">  
    6.     <title>HTML应用缓存的实现</title>  
    7. </head>  
    8. <body>  
    9.   文档内容。。。。  
    10. </body>  
    11. </html>  
    12. <!--CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存-->  
    13. <!--NETWORK - 在此标题下列出的文件需要与服务器的连接,且不会被缓存-->  
    14. <!--FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面(比如 404 页面)-->  
    15.   
    16.   
    17. <!--完整Mainfest文件-->  
    18. CACHE MANIFEST  
    19. # 2012-02-21 v1.0.0  
    20. /theme.css  
    21. /logo.gif  
    22. /main.js  
    23.   
    24. NETWORK:  
    25. login.php  
    26.   
    27. FALLBACK:  
    28. /html/ /offline.html  

    6.本地存储和cookie(存储在用户本地终端上的数据)之间的区别是什么?

    cookie数据始终在同源http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递;cookie数据还有路径的概念,可以限制cookie只属于某个路径下。存储大小限制不同,cookie数据不能超过4k,同时因为每次http请求都会携带cookie,所以cookie只适合保存很小的数据,如回话标识。数据有效期不同,cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。

    7.HTML5为什么只需要写<!DOCTYPEHTML>?

    HTML5不基于SGML,因此不需要对DTD进行引用,但是需要doctype来规范浏览器行为(让浏览器按照他们应该的方式来运行)而HTML4基于SGML,所以需要对DTD进行引用,才能告知浏览器文档所使用的文档类型

    8.行内元素有哪些?块级元素有哪些? 空(void)元素有哪些?

    行内元素:a b span img select strong    块级元素:div ul ol li dl dt h1 p 空元素: <br> <hr> <img> <link> <meta>

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

    1.link属于XHTML标签,而@import完全是css提供的一种方式。link标签除了可以加载css外,还可以做很多其他的事情。比如定义RSS,定义rel属性等, 而@import就只能加载css了。

    2.加载顺序的区别。当一个页面被加载的时候,link引用的css会同时被加载,而@import引用的css会等到页面全部被下载完再被加载。

    3.兼容性的差别。由于@import是css2.1提出的,所以老的浏览器不支持,@import只有在IE5以上的浏览器才能是识别,而link标签无此问题。

    4.使用dom控制样式的差别。当使用javascript控制dom去改变样式的时候,只能使用link标签因为@import不是dom可以控制的。

    10.HTML5有哪些特性、移除了哪些元素?如何处理HTML5新标签的浏览器兼容性?

    主要是关于图像,位置,存储,多任务等功能的增加。

    语义化更好的标签:header , nav , footer , aside , article , section

    音频,视频:  audio video

    画布:canvas

    本地离线存储localstorage长期存储数据,浏览器关闭后数据不丢失,sessionStorage的数据在浏览器关闭后自动删除

    表单控件:calendar、date、time、email、url、search

    新的技术:webworker,websock,Geolacation

    移除的元素:basefont,big,center,font,s,frame等

    兼容性处理:IE8/IE7/IE6支持通过document.createElement方法产生的标签,可以利用这一特性让这些浏览器支持HTML5标签,浏览器支持新标签后,还需要添加标签默认样式。当然最后的方式是直接利用成熟的框架,使用最多的是html5shim框架

    [html] view plain copy
     
    1. <strong><!--[if lt IE 9]</strong>  
    [html] view plain copy
     
    1. <scriptsrc="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>   
    [html] view plain copy
     
    1. <![endif]-->   

    11.如何区分HTML和HTML5?

    1.在文档类型声明上

    HTML:

    [html] view plain copy
     
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "  
    2. http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    3. <html xmlns="http://www.w3.org/1999/xhtml">  

    HTML5:

    [html] view plain copy
     
    1. <!DOCTYPE html>  
     2、在结构语义上
      HTML:没有体现结构语义化的标签,通常都是这样来命名的<div id="header"></div>,这样表示网站的头部。
      HTML5:在语义上却有很大的优势,提供了一些新的HTML5标签比如: article、footer、header、nav、section,这些通俗易懂。

    12.HTML5的离线存储怎么使用,工作原理能不能解释一下?

    在用户没有因特网链接时,可以正常访问站点或应用,在用户与因特网连接时,更新用户机器上的缓存文件.

    原理:HTML5的离线储存是基于一个新建的 .appcache文件的缓存机制(不是缓存技术),通过这个文件上的解析清单离线存储资源,这些资源就会像cookie一样被存储下来。之后网络在处于离线状态下时,浏览器会通过被离线存储的数据进行页面展示。

    如何使用:

    1、页面头部像下面一样加入一个manifest的属性;

    2、在cache.manifest文件的编写离线存储的资源;

    CACHE MANIFEST

    #v0.11

    CACHE:

    js/app.js

    css/style.css

    NETWORK:

    resourse/logo.png

    FALLBACK:

    / /offline.html

    3、在离线状态时,操作window.applicationCache进行需求实现。

    13.HTML5常见的兼容性问题?

    1.让老式浏览器支持HTML5

    2.让老式浏览器兼容css3

    14.简述css的盒子模型?

    css盒子模型,又称框模型,包含了元素内容(content)、内边距(padding)、边框(border)、外边距(margin)几个元素。

    16.css选择符有哪些?哪些属性可以继承?优先级算法如何计算?css3有哪些新属性?

        css选择符:

        1. id选择器(#myid)
        2. 类选择器(.myclassname)
        3. 标签选择器(div,h1, p)
        4. 相邻选择器(h1 + p)
        5. 子选择器(ul > li)
        6. 后代选择器(li a)
        7. 通配符选择器(*)
        8. 属性选择器(a[rel = 'external'])
        9. 伪类选择器(a:hover,li:nth-child)

    可继承属性:

    1. font-size
    2. font-family
    3. color
    4. text-indent

    优先级算法:

    1. 优先级就近原则,同权重情况下样式定义最近者为准;
    2. 载入样式以最后载入的定位为准
    3. !import > id > class > tag
    4. important 比内联优先级搞,但内联比id要高

    17.如何居中div?如何居中一个浮动元素?

    18.dispaly:inline-block 什么时候会显示间隙?

    真正意义的inline-block水平呈现的元素间,换行显示或者空格分隔的情况下会有间隙

    19.简述一下 src 和 href 的区别?

    scr用于替换当前元素,href用于在当前文档和引用资源之间确立关系。

    src是source的缩写,指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在的位置;在请求src资源时会将其指向的资源下载并应用到文档内,列如js脚本,img图片,和iframe等元素。当浏览器解析到该元素时,会暂停其他资源的加载,直到将该资源加载、编译、执行完毕,图片和框架等元素也如此,类似将所指向资源嵌入当前标签内。

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

    如果我们在文档中添加

    <link href="common.css" rel="stylesheet"/>

    那么浏览器会识别该文档为css文件,就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css,而不是使用@import方式。

    20.浏览器的内核分别是什么?

    1.Trident内核:代表作品是IE

    2.Gecko内核:代表作品Firefox

    3.Webkit内核:代表作品是Safari

    4.prosto内核:Opera

    5.Blink内核:chrome

    21.请给出异步加载js方案,不少于两种方案。

    1.defer,只支持IE

    2.async

    3. 创建script,插入到DOM中,加载完毕后callBack

    22.请写出jquery绑定事件的方法,不少于两种

    1.bind

    2.delegate

    3.live

    4.on

    23.ajax是什么?

    是一种用于创建快速动态网页技术,无需重新加载整个网页的情况下,能够更新部分网页的技术。

    24.同一个页面中,能否加载多个document.ready事件?

    可以

    25.如何实现浏览器内多个标签之间通信?

    1.使用localStorage

    2.使用cookie+setInterval

    26.http响应中content-type包含哪些内容?

    定义网络文件的类型和网页的编码,决定浏览器将以什么形式、什么编码读取这个文件

    27.一个ajax建立的过程是怎么样的,主要用到哪些状态码?

    常用状态码(status)及其含义:

    404 没找到页面(not found)
    403 禁止访问(forbidden)
    500 内部服务器出错(internal service error)
    200 一切正常(ok)
    304 没有被修改(not modified)(服务器返回304状态,表示源文件没有被修改 )

     

    28.简单介绍一下promise,它解决了什么问题?

    29.简述XSS和CSRF攻击

  • 相关阅读:
    HDU 4389 X mod f(x)
    SRM 400(1-250pt, 1-500pt)
    FZU 2113 Jason的特殊爱好
    POJ 3208 Apocalypse Someday
    HDU 4734 F(x)
    HDU 3555 Bomb
    HDU 2089 不要62
    poj2488(A Knight's Journey)
    poj3267(The Cow Lexicon)
    poj2513(Colored Sticks)
  • 原文地址:https://www.cnblogs.com/vsmart/p/8890890.html
Copyright © 2011-2022 走看看