2018前端面试题及参考答案整理(二)

时间 2019-11-09

标签端面试题参考答案整理繁體版

原文原文链接

1.HTML5中的DataList是什么？javascript

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

2.SVG是什么?css

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

3.HTML5canvas是什么?html5

定义图形，好比图表和其余图像java

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

[html] view plain copy

<canvas id="canvas" style="border:1px solid #aaa;display: block;margin:50px auto;">"></canvas>
<script>
window.onload= function() {
var canvas = document.getElementById('canvas')
var context = canvas.getContext('2d')
canvas.width = 1024
canvas.height = 768
context.moveTo(100,100)
context.lineTo(700,700)
context.lineWidth = 5
context.strokeStyle = 'red'
context.stroke()
}
</script>

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

[html] view plain copy

<!DOCTYPE html>
<html lang="en" manifest="demo.appcache">
<head>
<meta charset="UTF-8">
<title>HTML应用缓存的实现</title>
</head>
<body>
文档内容。。。。
</body>
</html>
CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.php
FALLBACK:
/html/ /offline.html

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

cookie数据始终在同源http请求中携带（即便不须要），即cookie在浏览器和服务器间来回传递；cookie数据还有路径的概念，能够限制cookie只属于某个路径下。存储大小限制不一样，cookie数据不能超过4k，同时由于每次http请求都会携带cookie，因此cookie只适合保存很小的数据，如回话标识。数据有效期不一样，cookie只在设置的cookie过时时间以前一直有效，即便窗口或浏览器关闭。ajax

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

<strong><!--[if lt IE 9]> </strong>

[html] view plain copy

<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>

[html] view plain copy

<![endif]-->

11.如何区分HTML和HTML5？

1.在文档类型声明上

HTML：

[html] view plain copy

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

HTML5：

[html] view plain copy

<!DOCTYPE html>

　二、在结构语义上
　　HTML:没有体现结构语义化的标签，一般都是这样来命名的<div id="header"></div>，这样表示网站的头部。
　　HTML5:在语义上却有很大的优点，提供了一些新的HTML5标签好比: article、footer、header、nav、section，这些通俗易懂。

12.HTML5的离线存储怎么使用，工做原理能不能解释一下？

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

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

如何使用：

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

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

CACHE MANIFEST

#v0.11

CACHE:

js/app.js

css/style.css

NETWORK:

resourse/logo.png

FALLBACK:

/ /offline.html

三、在离线状态时，操做window.applicationCache进行需求实现。

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

1.让老式浏览器支持HTML5

2.让老式浏览器兼容css3

14.简述css的盒子模型？

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

16.css选择符有哪些？哪些属性能够继承？优先级算法如何计算？css3有哪些新属性？

css选择符：

1. 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）

可继承属性：

font-size
font-family
color
text-indent

优先级算法：

优先级就近原则，同权重状况下样式定义最近者为准；
载入样式以最后载入的定位为准
！import > id > class > tag
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攻击