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. <script> src="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攻击

posted on 2018-04-20 14:48  vsmart  阅读(9835)  评论(0)  编辑  收藏  举报

Powered by: 博客园 Copyright © 2025 vsmart
Powered by .NET 9.0 on Kubernetes