前端学习知识点总结（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;
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的推荐标准。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。