前端面试基础准备

马上就要参加人生第一次面试了,把较基础的前端知识梳理一下,希望面试成功~

HTML CSS

前端页面有哪三层构成,分别是什么?作用是什么?

  1. 结构层 ( 由 HTML 或 XHTML之类的标记语言负责创建。标签,也就是那些出现在尖括号里的单词,对网页内容的语义含义做出了描述,但这些标签不包含任何关于如何显示有关内容的信息。例如,P标签表达了这样一种语义:“这是一个文本段。” )
  2. 表示层 ( 由 CSS 负责创建。 CSS对“如何显示有关内容”的问题做出了回答。 )
  3. 行为层 ( 负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM主宰的领域。 )

简要说一下CSS的元素分类

  • 块级元素:<div>文档分区<h1>~<h6>一级标题到六级标题<p>段落<hr>水平线<pre>预格式化文本<ul>无序列表<ol>有序列表<table>表格<form>表单<fieldset>表单元素分组<output>表单输出<header>页头<footer>页尾
  • 行内元素 : <span>行内容器<a>定义锚<b>定义粗体<i>定义斜体<br>定义折行<dfn>定义项目<em>着重阅读<strong>定义加强<img>定义图片

块元素总是独占一行,margin对内联元素上下不起作用

CSS清除浮动的几种方法(解决高度塌陷)

浮动元素下方本来就有元素,那我们可以直接对该元素设置 clear:both ,若没有其他元素需要展示,我们往往会写一个空白标签来清除浮动,会增加浏览器的渲染负担

使用CSSoverflow属性(overflow:hidden),不能和position配合使用,因为超出的尺寸的会被隐藏)

使用CSS:after伪元素(代替第一种的标签)

使用邻接元素处理;

页面导入样式时有几种方法,它们之间有区别?

  1. link标签引入,也是当下用的最多的一种方式,它属于XHTML标签,除了能加载css外,还能定义rel(链接样式表)、type(加载被连接文档)、media(媒介类型)等属性;

  2. @import引入,@importCSS提供的,只能用于加载CSS;

  3. style嵌入方式引入,减少页面请求(优点),但只会对当前页面有效,无法复用、会导致代码冗余,不利于项目维护(缺点),此方式一般只会项目主站首页使用(腾讯、淘宝、网易、搜狐)等大型网站主页,之前有看到过都是这种方式,但后来有些也舍弃了

你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?

Ie(Ie内核) 火狐(Gecko) 谷歌(webkit,Blink) opera(Presto) Safari(wbkit)

什么是语义化的HTML?

直观的认识标签 对于搜索引擎的抓取有好处,用正确的标签做正确的事情

html语义化就是让页面的内容结构化,便于对浏览器、搜索引擎解析

在没有样式CCS情况下也以一种文档格式显示,并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重,利于SEO

使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解

html xhtml 和 html5 的一些区别

XHTMLHTML 4.01 标准没有太多的不同, XHTML1.0XML风格的HTML4.01,标签的规范更加严格

  • xhtml 元素必须被正确地嵌套
  • xhtml 元素必须被关闭
  • xhtml 标签名必须用小写字母
  • xhtml 文档必须拥有根元素

HTML5增加了很多语义化的HTML标签(header,footer), 还有audiovideo, 文档声明变的更加简单, 新增了字符串编码的meta, 删除了上世纪90年代的一些html标签(font, frameset)等….

什么是盒子模型

在我们平时看到的网页中,内部的每一个标签元素它都是有几个部分构成的:内容content、外边距margin、内边距padding、边框border,四个部分组成,当你说完这些面试官是不会满意这个答案的,因为还有一个重点(IE盒模型和标准盒模型的区别)———IE盒模型的content包括borderpadding

盒子模型

说说 cookies,sessionStorage 、 localStorage 你对它们的理解?

  • cookie是网站为了标示用户身份而储存在用户本地终端上的数据(通常经过加密),cookie数据始终在同源的http请求中携带,记会在浏览器和服务器间来回传递。
  • sessionStoragelocalStorage不会自动把数据发给服务器,仅在本地保存。
  • 大小: cookie数据大小不能超过4k,sessionStoragelocalStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。
  • 时效:localStorage 存储持久数据,浏览器关闭后数据不丢失除非用户主动删除数据或清除浏览器/应用缓存;sessionStorage 数据在当前浏览器窗口关闭后自动删除。

position的static、relative、absolute、fixed它们的区别?

  • absolute:绝对定位,元素会相对于值不为 static 的第一个父元素进行定位(会一直往父级节点查找),且它是脱离正常文档流、不占位的(使用float脱离文档流时,其他盒子会无视这个元素,但其他盒子内的文本依然会为这个元素让出位置,环绕在周围,而对于使用absolute脱离文档流的元素,其他盒子与其他盒子内的文本都会无视它。)
  • fixed:同样是绝对定位,但元素会相对于浏览器窗口进行定位,而不是父节点的position (IE9以下不支持)
  • relative:相对定位,元素相对于自身正常位置进行定位,属于正常文档流
  • static: position的默认值,也就是没有定位,当元素设置该属性后( top、bottom、left、right、z-index )等属性将失效
  • inherit:貌似没用过,查了一下文档“规定从父元素继承 position 属性的值”

display:none 与 visible:hidden 的区别

  • display:none视为不存在且不加载,即,不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失
  • visibility:hidden隐藏,但在浏览时保留位置,即,使对象在网页上不可见,但该对象在网页上所占的空间没有改变

如何让一个元素垂直/水平(垂直水平)都居中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="div-demo"></div>
<style>
.div-demo{
width:100px;
height:100px;
background-color:#06c;
margin: auto;
position:absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
.div-demo{
width:100px;
height:100px;
background-color:#06c;
margin: auto;
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<body class="container">
<div class="div-demo"></div>
<style>
html,body{
height:100%;
}
.container{
display: box;
display: -webkit-box;
display: flex;
display: -webkit-flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
}

.div-demo{
width:100px;
height:100px;
background-color:#06c;
}
</style>
</body>

更多请参考这里

JS

原始类型有哪几种?null 是对象嘛?

在 JS 中,存在着 6 种原始值,分别是:

  • boolean
  • null
  • undefined
  • number
  • string
  • symbol

首先原始类型存储的都是值,是没有函数可以调用的,比如undefined.toString()

原始类型数据

对于 null 来说,很多人会认为他是个对象类型,其实这是错误的。虽然 typeof null 会输出 object,但是这只是 JS 存在的一个悠久 Bug。在 JS 的最初版本中使用的是 32 位系统,为了性能考虑使用低位存储变量的类型信息,000 开头代表是对象,然而null表示为全零,所以将它错误的判断为object 。虽然现在的内部类型判断代码已经改变了,但是对于这个 Bug 却是一直流传下来

typeof 是否能正确判断类型?

typeof 对于原始类型来说,除了 null 都可以显示正确的类型

1
2
3
4
5
typeof 1 // 'number'
typeof '1' // 'string'
typeof undefined // 'undefined'
typeof true // 'boolean'
typeof Symbol() // 'symbol'

typeof 对于对象来说,除了函数都会显示 object,所以说 typeof 并不能准确判断变量到底是什么类型

1
2
3
typeof [] // 'object'
typeof {} // 'object'
typeof console.log // 'function'

如果我们想判断一个对象的正确类型,这时候可以考虑使用 instanceof,因为内部机制是通过原型链来判断的

1
2
3
4
5
6
7
8
9
const Person = function() {}
const p1 = new Person()
p1 instanceof Person // true

var str = 'hello world'
str instanceof String // false

var str1 = new String('hello world')
str1 instanceof String // true

== 和 === 有什么区别?

对于 == 来说,如果对比双方的类型不一样的话,就会进行类型转换

假如我们需要对比 xy 是否相同,就会进行如下判断流程:

  1. 首先会判断两者类型是否相同。相同的话就是比大小了
  2. 类型不相同的话,那么就会进行类型转换
  3. 会先判断是否在对比 nullundefined,是的话就会返回 true
  4. 判断两者类型是否为 stringnumber,是的话就会将字符串转换为 number
  5. 判断其中一方是否为 boolean,是的话就会把 boolean 转为 number 再进行判断
  6. 判断其中一方是否为 object 且另一方为 stringnumber 或者 symbol,是的话就会把 object 转为原始类型再进行判断
1
2
3
'1' == { name: 'cxk' }

'1' == '[object Object]'
0%