前端学习知识点总结（1）

1.你做页面在哪些浏览器测试过？这些浏览器的内核是什么？

（1）IE浏览器：Trident内核
（2）火狐浏览器：Gecko内核
（3）Safari浏览器：Webkit内核
（4）Opera浏览器：以前是Presto内核，现在是Blink内核
（5）谷歌浏览器：Blink内核
浏览器的内核是分为两个部分的，一是渲染引擎，另一个是JS引擎。现在JS引擎比较独立，内核更加倾向于说渲染引擎。

2.HTML开头的Doctype是用来干嘛的？

（1）告知浏览器浏览文档要使用的HTML规范 , 告知浏览器以何种规范解析页面
（2）声明对大小写不敏感

3.div+css布局较table布局有哪些优点？

（1）符合W3C标准，结构、样式和行为分离，代码结构清晰，可维护性好
（2）布局精准，网站版面布局修改简单
（3）页面的加载速度快
（4）节省站点的空间、流量
（5）用只包含结构化内容的HTML代替嵌套的标签，提高搜索引擎对网页的搜索效率

4.img的title和alt有何异同？strong和em的异同？

alt 用于图片没显示时在图片显示区域显示一个说明文字。title 表示鼠标在图片上停留时，显示一个悬浮框，其中显示的文字。
strong：粗体强调标签，强调，表示内容的重要性；
em：斜体强调标签，更强烈的强调，表示内容的强调点，即一个是粗体，一个是斜体，都表示强调。

5.src和href的区别？

（1）src表示来源地址，在img、script、iframe等元素上。src的内容，是网络地址，是页面必不可少的一部分，是引入。src指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内。
（2）href是超文本引用表示文件的录入地址，在link和a等元素上使用。href的内容，是与该页面有关联，是引用。href指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接。
（3）src用于替代这个元素，而href用于建立这个标签与外部资源之间的关系。

6.网页制作用到的图片格式？这些格式有什么区别？

（1）pdf格式，是photoshop图像处理软件的专用文件格式，文件扩展名是．psd
（2）gif图片格式，gif是一种调色板型（palette type）（或者说是索引型）的图片。它含有多达256种的颜色。每一个象素点都有一个对应的颜色值。因为这种格式不再存在专利权的问题。
（3） png图片格式，png的图片又分为 png-8 、 png-24 两种，其中，png-8 与 gif 类似，支持 256 色调色板 ，而 png-24 只支持 48 位真彩色，凡是 gif 拥有的优势 png-8 都拥有，gif 所没有的优势 png-8 也有，同样的文件，png-8 格式比 gif 要小
（4）jpeg图片格式，是目前网络上最流行的图像格式，是可以把文件压缩到最小的格式，在 photoshop软件中以jpeg格式储存时，提供11级压缩级别，以0—10级表示。其中0级压缩比最高，图像品质最差。即使采用细节几乎无损的10 级质量保存时，压缩比也可达 5：1。目前各类浏览器均支持JPEG这种图像格式，因为JPEG格式的文件尺寸较小，下载速度快。
（5）bmp图片格式，bmp是英文bitmap（位图）的简写，它是windows操作系统中的标准图像文件格式，在windows环境下运行的所有图象处理软件都支持bmp图象文件格式。
（6）tga图片格式: tga的结构比较简单，属于一种图形、图像数据的通用格式，在多媒体领域有着很大影响，在做影视编辑时经常使用,例如3ds max输出tga图片序列导入到ae里面进行后期编辑。

（7）Webp格式：，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有 JPEG 的 2/3，并能节省大量的服务器带宽资源和数据空间。Facebook Ebay 等知名网站已经开始测试并使用 WebP 格式。在质量相同的情况下，WebP 格式图像的体积要比 JPEG 格式图像小 40%

7.说说你对HTML结构语义化的理解？

（1）用正确的标签做正确的事情。
（2）html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;
（3）即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;
（4）搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO（搜索引擎优化）;
（5）使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

8.有哪些方式可以对一个DOM设置它的CSS样式？

设置样式的话，就分为两种了，css或者js。
　　（1）一种是直接用css，结合css选择器进行设置内当前元素的display属性为容none值。
　　p{display:none;}
　　#p1{display:none;}
　　.p1{display:none;}
　　（2）还有一种是用js，一般js可以动态地改变dom元素的样式
　　比如这段代码obj.style.display=“none”;
　　这段代码就是将当前的obj的display属性改成了none值，也就是不显示该元素

9.什么是外边距重叠？重叠的结果是什么？

外边距重叠指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的高度如果都是正边界，边界宽度是相邻边界宽度中最大的值。如果出现负边界，则在最大的正边界中减去绝对值最大的负边界。如果没有正边界，则从零中减去绝对值最大的负边界。只有外边距才可以是负值，内边距不允许为负值。
（1）当一个元素出现在另一个元素上面时，第一个元素的底边界与第二个元素的顶边界发生合并。

当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的顶和底边界也发生合并：
假设有一个空元素，它有边界，但是没有边框或填充。在这种情况下，顶边界与底边界就碰到了一起，它们会发生叠加：

（2）外边距重叠的作用：
当我们上下排列一系列规则的块级元素时，那么块元素之间因为外边距重叠的存在，段落之间就不会产生双倍的距离，这样各处距离就一致了：

（3）外边距不重叠的情况：
a.水平margin永远不会重合
b.设置了overflow属性(visible除外)的元素和它的子元素之间的margin不会重叠
c.设置了绝对定位（position:absolute）的盒模型，垂直margin不会被重叠，和子元素之间也不重叠
d.设置了display:inline-block的元素，垂直margin不会重叠，和子元素之间也不重叠
e.根元素(如html)与body的margin不会重叠
（4）防止外边距重叠的方法：
a.元素绝对定位postion:absolute;一般用在内层元素
b.内层元素 加float:left;或display:inline-block;
c.外层元素用padding增加边距
d.外层元素设置overflow:hidden;
e.内层元素透明边框border:1px solid transparent;

10.rgba()和opacity的透明效果有什么不同？

opacity作用于元素dao，以及元素内的所有zhi内容的透明度
rgba()只作用dao于元素的颜色或其背景色（设置rgba透明的元素的子元素不会继承透明效果）

11.CSS中可以让文字在垂直和水平方向上重叠的两个属性？

垂直方向：line-height ：设置大小比字体大小小，即可实现垂直方向上重叠。
水平方向：letter-spacing ： 设置成负值即可实现水平方向上重叠。
letter-spacing可以用于消除inline-block元素间的换行符空格间隙问题

12.如何垂直居中一个浮动元素？

（1）已经知道元素的宽高

// 子盒子
#div1{
    width:200px;
    height:200px;
    position: absolute;        //父元素需要相对定位
    top: 50%;
    left: 50%;
    margin-top:-100px ;   //二分之一的height，width
    margin-left: -100px;
    }

（2）未知父元素高宽

//子盒子
  #div1{
    width: 200px;
    height: 200px;
    margin:auto;
    position: absolute;        //父元素需要相对定位
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: red;
   }

（3）flex使盒子居中

// 父盒子
    .da{
        width: 500px;
        height: 500px;
        background: green;
        display: flex; // 使用flex
        align-items: center; // 上下居中
        justify-content: center; // 左右居中
    }

（4）css3中的新属性transform实现盒子居中

.da{
        /*父盒子*/
        width: 500px;
        height: 500px;
        background: green;
        position: relative;
    }
      #er{
        /*我是子盒子我要居中*/
        width: 200px;
        height: 200px;
        background: red;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);  //translate表示移动
       }

（5）利用css3的新增属性table-cell, vertical-align:middle;

.da{
        /*父盒子*/
        width: 500px;
        height: 500px;
        background: green;
        display: table-cell;
        vertical-align: middle;   //垂直居中
    }
      #er{
        /*我是子盒子我要居中*/
        width: 200px;
        height: 200px;
        background: red;
        margin: auto;
       }

13.px和em、rem的区别？

（1）px：相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
（2）em：相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。em的值并不是固定的，em会继承父级元素的字体大小。任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。
（3）rem：使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。

14.你所理解的HTML、CSS、JS、VUE?

（1）HTML:

超文本标记语言。是一种标示性的语言，含有很多标签。所谓超文本，就时标签里面不仅可以写文本，还可以有图片、链接、音乐，甚至程序等非文字元素。本质上来看，HTML其实和我们日常交流使用的语言没什么两样，不同在于自然语言是人与人之间的交流，而HTML则是用于人与计算器之间的交流。

（2）CSS：

层叠样式表。是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

（3）JS：

a.是一种解释性脚本语言（代码不进行预编译）。
b.主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。
c.可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。
d.跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）。

（4）VUE：

Vue.js（Vue）是一套用于构建用户界面的开源渐进式JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

组件是 Vue 最为强大的特性之一。为了更好地管理一个大型的应用程序，往往需要将应用切割为小而独立、具有复用性的组件。在 Vue 中，组件是基础 HTML 元素的拓展，可方便地自定义其数据与行为。

框架的定义：形象一点说吧，假如你盖房子，你是自己一砖一瓦的盖简单呢，还是拿一个现成的架子往上面添东西简单呢？结果不言而喻吧，有一个半成品的架子，你只需要添上一些你自己额外需要加的东西就好了。这就是框架的好处。
其实框架，就是别人写好了包装起来的一套工具，把你原先必须要写的，必须要做的一些复杂的东西都写好了放在那里，你只要调用他的方法，就可以实现一些本来要费好大劲的功能。
假如，好多好多地方都要用这么一套逻辑，那么我们会定义成一个方法（函数），就免去了导出写同样代码的麻烦，其实这个方法，就是一个框架啦，只不过非常小而已。
web开发的mvc模式，m是模型，v是视图（表现层），c是控制层。
框架就是m层啦，他把一套不涉及任何业务相关的东西都写好了包装起来，你去用就可以了，c的控制层，他是没法写的，因为不同的系统有不同的业务逻辑，框架不可能帮你把业务逻辑也写进去啦。就好比你盖房子的架子，他只能做到一个架子，不是因为他不能完全弄好，而是因为他没法去加，他也不知道你到底是需要什么颜色的瓦片，但是相比来看，框架把很多复杂的东西都弄好了，你只要在上面添加你独有的东西就可以了。

主流的三大框架：Vue、Angular、React

15.var、let、const的区别？

ECMAScript 6（简称ES6）是JavaScript语言的下一代标准

let声明的是变量，const声明的是常量，只读，修改值会报错，const保存的是内存地址,可以给对象或数组添加属性或元素，但是不能重新复写。
let、const声明的变量仅在块级作用域内有效，var 声明变量是全局的，没有块级作用域功能
let 、const 不存在变量提升 , var 存在变量提升
let 、const不能在同一块级作用域内重复申请
let不会进行预处理，var会，比如：

console.log(a)
let a = 1;    //运行之后会报错

console.log(a)
var a = 1;    //运行之后不会报错，只会提示未定义

16.display:none和visibility:hidden的区别？

display:none; 使用该属性后，html元素（对象）的宽度、高度等各种属性值都将“丢失”;

visibility:hidden; 使用该属性后，html元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在

17.简述盒子模型

W3C组织建议把所有网页上的对象都放在一个盒子（box）中，就是所说的盒子模型，CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：实际内容(content)、填充(padding)、边框(border)，边界(margin)。一个div就是一个盒子。

18.为什么要初始化样式？

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

19.HTML和XHTML有什么区别？

XHTML，是可扩展超文本标记语言，是一种置标语言，表现方式与超文本标记语言（HTML）类似，不过语法上更加严格。从继承关系上讲，HTML是一种基于标准通用置标语言的应用，是一种非常灵活的置标语言，而XHTML则基于可扩展标记语言，可扩展标记语言是标准通用置标语言的一个子集。XHTML 1.0在2000年1月26日成为W3C的推荐标准。

XHTML元素必须合理嵌套；
XHTML文档必须格式正确；
XHTML文档中对应的标签名称必须是小写；
所有XHTML元素必须关闭。
XHTML DTD定义强制元素；
属性名称必须为小写；
属性值使用双引号；
属性简写是不允许的；
用id属性来替代原来的name属性。

20.b和strong标签，i和em标签的区别？

对于搜索引擎来说strong和em比b和i要重视的多。

b和i都只是视觉上的加粗和斜体（物理元素），strong和em则是内容上的强调（逻辑元素），HTML语义为强调，表示语气上的强调、加重

21.前端页面由哪三层构成，分别是什么？作用是什么？

（1）结构层（HTML）：用 HTM L实现页面结构。
（2）表示层（CSS）：用 CSS 完成页面的表现与风格。
（3）行为层（JS）：是客户端脚本语言，实现一些客户端的功能与业务。

22.JS的typeof返回哪些数据类型？

“undefined” ——未定义
“boolean”——布尔值
“string”——字符串
“number”——数值
“object”——对象或者null;
“function”——函数

23.pop()和push()，shift()和unshift()的区别？

pop()：删除数组的最后一个元素并返回删除的元素。
push()：向数组的末尾添加一个或更多元素，并返回新的长度。
shift()：删除并返回数组的第一个元素。
unshift()：向数组的开头添加一个或更多元素，并返回新的长度。

24.JS是一种什么样的语言？它有什么特点？

（1）一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为javascript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML网页上使用，用来给HTML网页增加动态功能。JavaScript兼容于ECMA标准，因此也称为ECMAScript。
（2）简单性、动态性、跨平台性、安全性

25.JS的数据类型有哪些？

number 数字类型
string 字符串类型
boolean 布尔类型
function 函数
object 对象
null
undefined 没有定义类型

26.JS中判断等于和强等于有什么区别？

(1) "’“叫做相等运算符，”="叫做严格运算符。
(2) ，equality -> 等同 的意思， 两边值类型不同的时候，要先进行类型转换为同一类型后，再比较值是否相等。
=，identity -> 恒等 的意思，不做类型转换，类型不同的结果一定不等。
(3) "“表示只要值相等即可为真，而”="则要求不仅值相等，而且也要求类型相同。

27.document.write和innerHTML的区别？

document.write是直接写入到页面的内容流，每次写完关闭之后重新调用该函数，会导致页面被重写。
innerHTML则是DOM页面元素的一个属性，代表该元素的html内容。如果需要修改，不会导致页面全部重绘。

28.JS中的强制类型转换和自动类型转换？

（1）强制类型转换
a.转换为String
toString():null和undefined这两个值没有toString()方法，调用会报错

String():null和undefined这两个值可以转换为String,null和undefined，不会调用toString()方法，而是直接转换成“null”、“undefined”

b.转换为Number
Number()：如果字符串中有非数字的内容或者是undefined，则转换成NaN，如果字符串是空串或者空格或者是Null,转换为0

parseInt() / parseFloat()
parseInt()：从左往右依次读取，把有效的整数内容取出来，遇到第一个非数字 内容就停止读取，如果第一个字符就是非数字则转换为NaN；
parseFloat()：用法和paeseInt相同，对非String使用，它会先将其转换为String，然后再操作

c.转换为Boolean
Boolean()：数字转布尔值，除了0和NaN都是true；字符串转为布尔值，除了空串都是true；null和undefined转换为布尔值，都是false；对象也会转换为true

（2）隐式类型转换
a.转换为String
算法运算符（+）， 任何值和字符串做 + 时，都会先转换为字符串，然后再和字符串做拼串操作；多个值 + 时 ，从左向右运算，注意数值类型；
可以利用这一特点，来将任意数据类型转换为String，只需（任意字符串 + “”）即可转换为String；这是一种隐式类型转换，由浏览器自动完成，实际上也是调用了String()函数；

b.转换为Number
算法运算符（- * / %），任何值做 - * /，都会将其转换为Number,再做运算；可以利用这一特点，来将任意数据类型转换为Number，只需（任意字符串 - 0）（任意字符串 * 1）（任意字符串 / 1）即可转换为Number，这是一种隐式类型转换，由浏览器自动完成，实际上也是调用了Number()函数
一元运算符（+(正号) ），对于非Number类型的值，它会先转换为Number，然后再运算；可以对一个其他数据类型使用+，来将其装换为number，隐式类型转换，它的原理和Number()函数一样；

c.转换为Boolean
逻辑计算符（!非），! 对一个布尔值做取反运算；如果对非布尔值取反，则会将其转换为布尔值，再取反；可以利用其特点，将其他数据类型取两次反，转换为布尔值；原理和Boolean()一样；

29.split()和join()的区别？

（1）split()：把字符串分割为字符串数组。返回数组
（2）join()：把数组的所有元素放入一个字符串，元素通过指定的分隔符进行分隔。返回一个字符串

splite("")可以将字符串按某个字符或者其他分割，返回数组；
如"hello".split(“e”) //[“h”,“llo”]

join是相反，把数组拼接为字符串。
如 [“a”,“b”,“c”].join(",") //“a,b,c”

30.事件绑定和普通事件有什么区别？

//普通添加事件的方法
var btn = document.getElementById('hello');
btn.onclick = function () {
    alert(1) // 不执行
}
btn.onclick = function () {
    alert(2) // 执行
}
//执行上面的代码只会执行2

//事件绑定添加事件
var btn = document.getElementById('hello');
btn.addEventListener('click', function () {
    alert(1) // 执行
}, false)
btn.addEventListener('click', function () {
    alert(2) // 执行
}, false)
//执行上面的代码会一次执行 1 2

普通添加事件的方法不支持添加多个事件，最下面的事件会覆盖上面的，而事件绑定（addEventListener）方式添加事件可以添加多个。
提示：addEventListener不兼容低版本IE，使用addEventListener添加事件之前，请先处理兼容问题

31.解释jsonp的原理，以及为什么不是真正的ajax？

jsonp的原理：动态创建script标签，回调函数

JSONP(JSON with Padding)是JSON的一种"使用模式"，可用于解决主流浏览器的跨域数据访问的问题。用JSONP抓到的资料并不是JSON，而是任意的javaScript，用javaScript直译器执行而不是用JSON解析器解析。

1、ajax和jsonp这两种技术在调用方式上"看起来"很像，目的也一样，都是请求一个url，然后把服务器返回的数据进行处理，因此jquery和ext等框架都把jsonp作为ajax的一种形式进行了封装；

2、但ajax和jsonp其实本质上是不同的东西。ajax的核心是通过XmlHttpRequest获取非本页内容，而jsonp的核心则是动态添加

3、所以说，其实ajax与jsonp的区别不在于是否跨域，ajax通过服务端代理一样可以实现跨域，jsonp本身也不排斥同域的数据的获取。

4、还有就是，jsonp是一种方式或者说非强制协议，如同ajax一样，它也不一定非要json格式来传递数据，如果你愿意，字符换也行，只不过这样不利于jsonp提供公开服务。

总而言之，jsonp不是ajax的一个特例，哪怕jquery等巨头把jsonp封装进了ajax，也不能改变这一点。

32.如何在HTML中添加事件？几种方法？

（1）标签内联的书写方式

<div onclick="alert('点击此处弹窗')">你的名字叫什么</div>

（2）在JavaScript代码中绑定—JavaScript代码与HTML标签分离，文档结构清晰，便于管理和开发

<input type="button" value="按钮" id="button" />
		<script>
			document.getElementById("button").onclick=function(){
				console.log("hello world!");
			}
		</script>

（3）绑定事件监听函数

<input type="button" value="按钮" id="button" />
		<script>
			document.getElementById("button").addEventListener("click",function(){
				console.log("hello world!");
			})
		</script>

33.BOM对象有哪些？列举window对象？

（1）window对象 ，是JS的最顶层对象，其他的BOM对象都是window对象的属性；

（2）document对象，文档对象；

（3）location对象，浏览器当前URL信息；

（4）navigator对象，浏览器本身信息；

（5）screen对象，客户端屏幕信息；

（6）history对象，浏览器访问历史信息；

34.typeof的返回类型有哪些？

（1）number
（2）string
（3）boolean
（4）undefine
（5）object
（6）function
（7）symbol

35.简述link和import的区别？

差别1：老祖宗的差别：link属于XHTML标签，而@import完全是CSS提供的一种方式。 link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS。

差别2：加载顺序的差别：当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式。

差别3：兼容性的差别。：@import是CSS2.1提出的，所以老的浏览器不支持，@import只t在IE5以上的才能识别，而link标签无此问题。

差别4：使用dom控制样式时的差别：当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的.

36.HTTP状态消息200、302、304、403、404、500分别表示什么？

（1）200：请求成功
（2）302：临时重定向
（3）304：响应禁止包含消息体，因此始终以消息头后的第一个空行结尾
（4）403：服务器拒绝请求
（5）404：网页无法找到
（6）500：服务器内部错误
（7）502：服务器网关错误

37.详细解释ajax工作原理？

ajax 的原理简单来说通过 XmlHttpRequest 对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。

（1）什么是ajax？

ajax = 异步JS和XML
ajax是一种用于创建快速动态网页的技术

通过在后台与服务器进行少量数据交换，ajax可以使网页实现异步更新。这意味着可以在不重新加载整个页面的情况下，对网页的部分内容进行更新。

（2）ajax实例解释

div部分用于显示来自服务器的信息。当按钮被点击时，它负责调用名为 loadXMLDoc() 的函数：

<html>
<body>

<div id="myDiv"><h3>Let AJAX change this text</h3></div>
<button type="button" οnclick="loadXMLDoc()">Change Content</button>

</body>
</html>

接下来，在页面的 head 部分添加一个

<head>
<script type="text/javascript">
function loadXMLDoc()
{.... AJAX script goes here ...}
</script>
</head>

（ajax的详细介绍）

38.HTTP协议中，get和post有什么区别？分别适用什么场景？

get 传送的数据长度有限制，post 没有
get 通过 url 传递，在浏览器地址栏可见，post 是在报文中传递

适用场景：
post 一般用于表单提交
get 一般用于简单的数据查询，严格要求不是那么高的场景