前端面试问题总结

HTML
1、XHTML和HTML有什么区别
1）HTML是一种基本的web网页设计语言，XHTML是基于XML（可扩展标记语言）的置标语言
2）XHTML 元素必须被正确地嵌套， 元素必须被关闭，标签名必须用小写字母， 文档必须拥有根元素
2、语义化的HTML
1）直观的认识标签，用正确的标签做正确的事
2）让页面的内容结构化，便于对浏览器、搜索引擎解析；
3）使阅读源代码的人更容易将网站分块，便于阅读维护理解。
3、HTML5 为什么只需要写 !DOCTYPE HTML？
HTML5不基于SGML（标准通用标记语言），因此不需要DTD（文档类型定义）来解析文档，但还是需要doctype来规范浏览器的行为。
4、HTML5新特性
绘画canvas、视频播放的video、音频播放的audio、本地存储localStorage 、临时存储sessionStorage
5、 cookies，sessionStorage 和 localStorage 的区别？
Cookie是在浏览器和服务器间来回传递数据，而sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地存储。sessionStorage和localStorage的存储空间大，有自己独立的存储空间、有很多接口。
6、如何实现浏览器内多个标签页之间的通信?
调用localStorage或者Cookie等存储方式

CSS
1、CSS的元素分类
块级元素：div、p、form 、h1、ul、li
行内元素：input、img、a、span、strong
2、CSS隐藏元素的几种方法
Display:none；opacity:0；visibility:hidden
样式“display:none”会完全隐藏元素，不再占据页面空间！
样式“visibility:hidden”仅仅是隐藏了元素的显示效果，但是仍然占据页面空间！
3、CSS清除浮动的方法
1）使用after伪元素
.clearfix:after {
clear: both;
content: “”;
display: block;
}
2）使用clear:both
3）使用overflow属性
4、伪类伪元素区别
1）伪类基于的是当前元素处于的状态或者是特性，因为状态是动态变化的，所以一个元素达到一个状态时，可能得到一个伪类的样式，当状态变化时，又会失去这个伪类的样式。常见的伪类有active、hover、focus、link、visited、first-child
2）伪元素是对元素中的特定内容进行操作，例如before是在元素内容的最前面添加一行、after是在元素内容的最后添加一行。
5、CSS的盒子模型
1、IE盒子模型：标准的W3C盒子模型，content部分包含了border和padding
2、盒模型：内容（content）、填充(padding)、边界(margin)、 边框(border)
6、CSS的选择符有哪些
id选择器、类选择器、属性选择器、标签选择器、相邻选择器、后代选择器、子选择器、通配符选择器
7、CSS3有哪些新特性
1）border-radius实现圆角；2）box-shadow实现阴影；3）text-shadow 文字阴影
4）gradient 线性变换；5）transform：2D或3D转换；

JavaScript
1、Json
JSON是用于存储和传输数据的格式，通常用于服务端向网页传递数据。JSON.parse(str)从一个字符串中解析出JavaScript 对象，JSON.stringify(a)从一个对象解析出字符串。
2、事件委托是什么
利用事件冒泡的的原理，让自己所触发的事情，让它的父元素代替执行，
事件冒泡是自下而上的去触发事件，Jquery的e.stopPropagation会阻止冒泡。
3、对this的理解
This是JavaScript的一个关键字，this指的是调用函数的那个对象。作为方法调用，那么this就是指这个对象
4、数据类型返回
Typeof返回6种数据类型：string、object、undefined、function、boolean、number
NaN 的数据类型是 number；数组(Array)的数据类型是 object；日期(Date)的数据类型为 object；null 的数据类型是 object；未定义变量的数据类型为 undefined；
5、constructor 属性
返回所有 JavaScript 变量的构造函数。例：

6、JavaScript 类型转换
1) 转换为字符串：
全局方法String()可以将数字转换为字符串并返回，例：

Number 方法 toString() 也是有同样的效果。例：

2)转换为数字：
全局方法 Number() 可以将字符串转换为数字。例：

Operator + 可用于将变量转换为数字，例：

3)自动转化类型
当 JavaScript 尝试操作一个 “错误” 的数据类型时，会自动转换为 “正确” 的数据类型。例：

4)自动转换为字符串
当你尝试输出一个对象或一个变量时 JavaScript 会自动调用变量的 toString() 方法，例：

7、字符串/数组常用方法
1)字符串使用 indexOf() 来定位字符串中某一个指定的字符首次出现的位置
2)match()函数用来查找字符串中特定的字符，并且如果找到的话，则返回这个字符。找不到则返回null。
3)replace() 方法在字符串中用某些字符替换另一些字符。
4)字符串使用split()函数转为数组。
5)javascript 中可以使用反斜线（\）插入特殊符号.
6)slice(start,end) 方法可从已有的数组中返回选定的元素。返回一个新的数组，包含从 start 到end（不包括该元素）的 arrayObject 中的元素。
7)splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目，该方法会改变原始数组。


8）map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。map() 方法按照原始数组元素顺序依次处理元素。map() 既不会对空数组进行检测，也不会改变原始数组。
8、Date常用方法
1）创建 Date 对象： new Date().

9、Math常用方法

10、Number常用方法

11、ajax发起请求到接收数据的过程
1）创建XMLHttpRequest对象，其用于和服务器交换数据。
2）创建一个新的HTTP请求，并指定该HTTP请求的方法、URL及验证信息，使用 XMLHttpRequest 对象的open()方法，Open：规定请求的类型（get or post）、URL以及是否异步处理请求。Get\post比较：
a.与post相比，get更快更简单，在大部分情况下使用。
b.必须使用post请求的情况：更新服务器上的文件或数据库；向服务器发送大量数据；发送包含未知字符的用户输入，post比get更稳定也更可靠。
3）设置响应HTTP请求状态变化的函数。从创建XMLHttpRequest对象开始，XMLHttpRequest对象一共会经历以下5中状态：
a.未初始化状态，此时XMLHttpRequest对象的readystate属性值为0
b.初始化状态，此时XMLHttpRequest对象的readystate属性值为1
c.发送数据状态，此时XMLHttpRequest对象的readystate属性值为2
d.接收数据状态，此时XMLHttpRequest对象的readystate属性值为3
e.完成状态，此时XMLHttpRequest对象的readystate属性值为4
只有在XMLHttpRequest对象完成了以上5个步骤之后，才可以获取从服务器端返回的数据。
4）设置获取服务器返回数据的语句。通过XMLHttpRequest对象的responseText属性或responseXml属性来获取数据。
responseText：获得字符串形式的响应数据；
responseXml：获得XML形式的响应数据。
5）发送HTTP请求，使用XMLHttpRequest对象的send()方法。
6）通过Ajax的异步调用获得服务器端的数据。
7）使用JavaScript或DOM将网页中的数据进行局部更新。
12、深拷贝与浅拷贝的区别
浅拷贝：只是对指针的拷贝，拷贝后两个指针指向同一个内存空间。
深拷贝：不但对指针进行拷贝，而且对指针指向的内容进行拷贝。经深拷贝后的指针是指向两个不同地址的指针。