web前端面试基础

1.简述XMLHttpRequest、JSONP的适用场景，并针对两种请求形式简述如何检测请求错误？

1. XMLHttpRequest 用于浏览器端与服务器端异步请求数据从面实现对页面的无刷新修改，支持GET/POST请求，一般用于非跨域的场景。如果需要使用XMLHttpRequest跨域请求数据，需要通过CORS头支持。 JSONP用于跨域请求数据的场景，只支持GET请求。
2. XMLHttpRequest 异常判断一般通过该对象的readystate和http状态码status来判断，JSONP的异常判断一般是onerror事件和超时timer来判断。

2.CSS样式主要包含以下三种类型：
（1）行内样式（内嵌样式）：结构的内部，即写在标签内的样式；写在标签的开始部分内部，style属性当中。

<标记 style=“样式的属性名1：样式的属性值1；属性名2：属性值2；…”></标记>

（2）内部样式（内联样式）：写在HTML页面内部，存放于head标记当中，样式写在style标记内。

（3）外部样式（外联样式）：写在css文件内。

<link type="text/css" rel="stylesheet" href="css/main.css" />

3.HTML5 事件可以触发多少次？
多次
4.关于块级元素和行内元素？
----> 块级元素 在浏览器显示时，通常以新行来开始（和结束）。
块级元素按照其应用于结构内容分为三种：

结构化块状元素： 这类元素用于构造文档的结构，没有语义上的含义，仅仅划分出了文档的组织方式，并没有体现文档的内容。
终端块状元素：这类元素用于从结构转向内容，拥有语义上的含义，能够表明内容的性质。终端块状元素属于结构的终点，它们不能再包含其他块级元素，只能包含文本或行级元素。
多目标块状元素：多目标指的是可以自由的扩展或嵌套文档的结构，以可以终端的形式出现。当多目标块状元素以结构化的方式使用时就含有结构化的内涵，以终端的形式使用就含有语义的内涵。

----> 行内元素 基于语义级(semantic)的基本元素，只能容纳文本或其它内联元素。

简单判断方法 :

块级元素：会独占一行，默认情况下，其宽度自动填满其父元素宽度。
行内元素：不会独占一行，相邻的行内元素会排列在同一行里，直到一行排不下，才会换行，其宽度随元素的内容而变化。

5.内联元素加上display：block后被块级化，块级元素一般是其他元素的容器，可容纳其他内联元素和其他块状元素。块状元素排斥和其他元素一行，高度和宽度起作用，因此可以定义宽高。

block:将行级别元素转为块级别元素。
inline:将块级别元素转为行级别元素。
inline-block:不能自动换行,但是可以设置宽高。

6.id与class之间的区别？
id在文档中只能使用一次，而class可以多次使用。
id比class具有更高的样式优先级。
一个元素只能有一个id属性值，却拥有多个class属性值。
7.link和@import区别？
（1）link除了引用样式文件，还可以引用图片等资源文件，而import只引用样式文件。

<link rel="icon" sizes="any" mask href="//www.baidu.com/img/baidu.svg">

（2）兼容性不同，link不存在兼容性的问题，import在IE5以上支持，是css2.1新增的。
（3）在样式表文件可以使用import导入其它的样式表文件，而link不可以。
（4）link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
（5）link支持使用Javascript，控制DOM去改变样式；而@import不支持。
8. display：none指的是元素完全不陈列出来，不占据空间，涉及到了DOM结构，故产生reflow与repaint
visibility：hidden指元素不可见但存在，保留空间，不影响结构，故只产生repaint，不可触发绑定事件。
opacity=0：指元素不可见但存在，保留空间，不影响结构。
9.reflow是什么？
reflow(回流)是指浏览器为了重新渲染部分或者全部的文档，重新计算文档中的元素的位置和几何构造的过程。
以下操作会引起回流：

① 改变窗口大小 ② font-size大小改变 ③ 增加或者移除样式表 ④ 内容变化（input中输入文字会导致） ⑤
激活CSS伪类（:hover） ⑥ 操作class属性，新增或者减少 ⑦ js操作dom ⑧ offset相关属性计算 ⑨设置style的值

10.四种触摸事件。
touchstart: //手指放到屏幕上时触发
touchmove: //手指在屏幕上滑动式触发
touchend: //手指离开屏幕时触发
touchcancel: //系统取消touch事件的时候触发
11.JavaScript中：
concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。
append() 方法在被选元素的结尾（仍然在内部）插入指定内容。
appendTo() 方法在被选元素的结尾（仍然在内部）插入指定内容。
pop() 方法用于删除并返回数组的最后一个元素。