1、简述一下HTML5新个性

1)减少了section footer header nav等自定义语义化标签

2)减少了表单输入框新time color number tel search等个性

3)提供了视频音频标签

4)增加了canvas绘画性能

5)反对展现SVG矢量图形

6)应用getCurrentPosition()办法获取以后终端地理位置

7)提供drag拖拽,任何元素都能被拖拽

8)webStorage是HTML5最风行的缓存之一

sessionStorage缓存是基于浏览器会话的缓存,敞开浏览器就会革除缓存

localStroage缓存没有工夫限度,只能手动革除

9)提供WebSocket全双工通信机制

客户端与服务器单方握手采纳http协定,默认80、443端口

没有同源限度,任何客户端能够与服务器通信,罕用于长期社交通信,例如聊天室

10)WebWork

WebWork基本原理是在以后JavaScript主线程中,加载一个js文件从而创立一个新线程

目标为了起到相互不阻塞运行其余脚本文件

WebWork线程与主线程之间能够实现数据传输

var webWorker =new Worker("webWorker.js");webWorker.postMessage("主线程发送的数据");webWorker.onmessage = function(event){  console.log(event)}

2、讲述一下js的循环有哪些形式

// 传统的for循环形式for(var i = 0;i < 20;i++){  console.log(i);// 输入索引}// ES6for形式,用于循环json对象var arr = [{b:2},{c:3}];for(var i in arr){    console.log(i);// 输入索引  console.log(arr[i]);// 输入对象值1,2,3}// ES5foreach循环获取key、value,但过程中不能跳出循环var array = ['1','2','3'];array.forEach((currentValue, index, arr)=>{  console.log(currentValue); // 输入1,2,3  console.log(index); // 输入索引  console.log(arr); // 输入arr数组自身})

3、浏览器及浏览器内核

IE浏览器:Trident内核

Chrome谷歌:之前始终都是和苹果共用Webkit内核,当初的谷歌浏览器是Blink内核,Blink是在webkit根底上衍生而来的

Firefox火狐:Gecko内核

Safari苹果浏览器:Webkit内核

Opera欧朋浏览器:由Presto内核,转成Webkit内核,再转成Blink内核

360、搜狗、漫游、QQ等一系列浏览器基本上为Trident(兼容模式)+Webkit(高速模式)双核浏览器

4、不同浏览器有不同兼容问题,如何解决?

兼容性问题太多,此处列举3处

1)默认内外边距的不同,设置通配符选择器

*{margin:0;padding:0;}

2)在IE6、7中设置float浮动再设置margin后,会呈现双边距景象,如何解决?

.dom{display:inline;}

3)margin边距重叠问题

高低两div之间别离设置5px、10px

量元素之间的间距造成重叠为10px

解决:两元素最好给下面的元素设置margin-bottom

或者将元素再套一层div,再设置margin

5、HTML网页的造成过程

浏览器先解析html源代码,生成一个DOM树,再解析css代码,计算出款式数据,两者合为渲染树,再由浏览器将渲染树绘制到浏览器页面中

6、jQuery异步接口申请代码

get是从服务器上获取数据,post是向服务器传送数据

get参数通过地址栏传递,post放在request body中

get申请只能进行encodeURI编码,而post反对多种编码方式

get传送的数据量较小,不能大于2KB。post传送的数据量较大,个别被默认为不受限制

get参数类型只承受ASCII字符串类型,而post没有限度

get安全性非常低,可间接裸露在地址栏中,post安全性较高

get在浏览器回退时是有害的,而post会再次提交申请

get申请会被浏览器被动cache,而post不会,除非手动设置

$.ajax({  type: "POST",  url: "http://xxxxxx.com/requestUrl",  data: {    name:$("#name").val(),  },  dataType: "json",  success: function(result,status,xhr){    // 输入申请胜利返回后果    console.log(result);  },  error:function(xhr,status,error){    // 输入申请失败回调  }})

7、长度有哪些单位

px

%百分比

em

rem

vw、vh

8、盒模型了解

盒模型包含:content内容体、padding内边距、border边框、margin外边距

9、革除浮动形式

父级元素增加overflow:hidden;

子级元素增加<div style="clear:both;"></div>

10、图片的title和alt有什么区别?

alt是图片加载失败时,在网页上显示的代替文字

title是鼠标放在图片上显示的提醒文字

11、相对定位和绝对定位的区别?

position:absolut

相对定位:以后元素是绝对于最近定位的先人元素进行定位

position:relative

绝对定位:以后元素是绝对于该元素的初始地位进行挪动

12、display:inline-block怎么不显示间隙?

margin设置负值

或者父级元素设置font-size:0

13、垂直居中有哪些办法?

单行文本垂直居中能够把hight和ilne-hight设置雷同的高度值

块级元素能够应用子绝父相+指定高度解决,例如:

父元素设置position:relative; 子元素设置hight :10px;position:absolute;top:50%;margin-top:-5px;

或者应用子绝父相+transform,不必指定高度也能够解决,例如:

父元素设置position:relative;子元素设置position:absolute;top:50%;transform:translate (0 -50%);

14、程度居中有哪些办法?

行内元素能够设置父元素text-align:center;

元素宽度固定时,也能够设置元素的左右margin值为auto

子元素为相对定位时,能够设置父元素绝对定位,子元素设置left:0;right:0;margin:auto;

15、content属性有什么作用?能够怎么利用?

content属性用在before和after伪类元素里,用来生成插入内容;常见的利用是作用在伪类元素里革除浮动

16、CSS优先级怎么确定?

优先级关系:

!important>内联款式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器

存在多个优先级时,相加计算比拟;优先级雷同时,显示后写的款式;