前言
2019届校招陆陆续续开始了,整理了一些高频的面试题。
HTML部分
1. 什么是<!DOCTYPE>?
DOCTYPE是html5标准网页声明,且必须声明在HTML文档的第一行。来告知浏览器的解析器用什么文档标准解析这个文档。
文档解析类型有:
-
BackCompat
:怪异模式,浏览器使用自己的怪异模式解析渲染页面。(如果没有声明DOCTYPE,默认就是这个模式) -
CSS1Compat
:标准模式,浏览器使用W3C的标准解析渲染页面。
2. meta标签
提供给页面的一些元信息(名称/值对),有助于SEO。
属性值:
-
name
:名称/值对中的名称。author、description、keywords、generator、revised、others。 把 content 属性关联到一个名称。 -
http-equiv
:没有name时,会采用这个属性的值。content-type、expires、refresh、set-cookie。把content属性关联到http头部 -
content
: 名称/值对中的值, 可以是任何有效的字符串。 始终要和 name 属性或 http-equiv 属性一起使用 -
scheme
: 用于指定要用来翻译属性值的方案
3. HTML语义化
- 用正确的标签做正确的事情。
- html语义化让页面的内容结构化,结构更清晰,便于对浏览器,搜索引擎解析;
- 即使在没有样式CSS情况下也以一种文档格式显示,并且是容易阅读的;
- 搜索引擎的爬虫也依赖于HTML标记确定上下文和各个关键字的权重,利于SEO;
- 使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解。
4. 常见的浏览器内核
- Trident内核:IE,MaxThon,TT,The Word,360,搜狗浏览器等。
- Gecko内核:Netscape6及以上版本,FF,MozillaSuite/SeaMonkey等;
- Presto内核:Opera7及以上。[现为:Blink]
- Webkit内核:Safari,Chrome等。[Chrome的:Blink(Webkit的分支)]
5. 简单介绍对浏览器内核的理解
主要分成两部分:渲染引擎和JS引擎。
- 渲染引擎:将代码转换成页面。负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入CSS等)、以及计算网页的显示方式,然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同,所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其他需要编辑、显示网络内容的应用程序都需要内核。
- JS引擎:解析和执行javascript来实现网页的动态效果。
最开始渲染引擎和JS引擎并没有区分得很明确,后来JS引擎越来越独立,内核就倾向于只指渲染引擎。
6. HTML5有哪些新特性,移除了哪些元素?如何处理HTML5新标签的浏览器兼容问题?
- 新特性:
(1) 用于绘画的canvas元素;
(2) 用于媒介回放的video和audio元素;
(3) 对本地离线存储有更好的支持,localStorage长期存储数据,浏览器关闭后数据不丢失;sessionStorage的数据在浏览器关闭后自动删除;
(4) 语意化更好的内容元素,比如header,nav,section,article,footer;
(5) 新的表单控件:calendar,date,time,email,url,search;
(6) 新的技术webworker,websockt、Geolocation;
- 移除元素:
(1) 纯表现的元素:basefont,big,center,font,s,strike,tt,u;
(2) 对可用性产生负面影响的元素:frame,frameset,noframes;
- 处理兼容性问题:
IE8/IE7/IE6支持document.createElement方法产生的标签,可以利用这一特性让这些浏览器支持HTML5新标签,浏览器支持新标签后,还需要添加标签默认的样式。
7. html5哪些标签可以做SEO优化?
title、meta、header、footer、nav、article、aside
8. src和href的区别
- src是指向外部资源的位置,指向的内容会嵌入到文档中当前标签所在的位置,在请求src资源时会将其指向的资源下载并应用到文档内,如js脚本,img图片和frame等元素。当浏览器解析到该元素时,会暂停其他资源的下载和处理,知道将该资源加载、编译、执行完毕,所以一般js脚本会放在底部而不是头部。
- href是指网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,用于超链接。
9. 渐进增强和优雅降级
-
渐进增强
:针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能,达到更好的用户体验。 -
优雅降级
:一开始就构建完整的功能,然后再针对低版本的浏览器进行兼容。
10. defer和async的区别
-
defer
要等到整个页面在内存中正常渲染结束(DOM结构完全生成,以及其他脚本执行完成),才会执行。多个defer脚本会按照它们在页面出现的顺序加载。==“渲染完再执行”== -
async
一旦下载完,渲染引擎就会中断渲染,执行这个脚本以后,再继续渲染。多个async脚本是不能保证加载顺序的。==“下载完就执行”==
11. 如何实现浏览器内多个标签页之间的通信?
方法一:调用localstorge
标签页1:
<input id="name">
<input type="button" id="btn" value="提交">
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
var name=$("#name").val();
localStorage.setItem("name", name); //存储需要的信息
});
});
</script>
标签页2:
$(function(){
window.addEventListener("storage", function(event){
console.log(event.key + "=" + event.newValue);
}); //使用storage事件监听添加、修改、删除的动作
});
方法二:使用cookie+setInterval
将要传递的信息存储在cookie中,每隔一定时间读取cookie信息,即可随时获取要传递的信息。
标签页1:
$(function(){
$("#btn").click(function(){
var name=$("#name").val();
document.cookie="name="+name;
});
});
标签页2:
$(function(){
function getCookie(key) {
return JSON.parse("{\"" + document.cookie.replace(/;\s+/gim,"\",\"").replace(/=/gim, "\":\"") + "\"}")[key];
}
setInterval(function(){
console.log("name=" + getCookie("name"));
}, 10000);
});
CSS部分
1. css盒模型
- IE盒模型 box-sizing:border-box;(怪异模式);
- W3C标准盒模型 box-sizing:content-box;(标准模式)。
应用场景:
(1)表单:
表单中有一些input元素其实还是展现的是传统IE盒模型,带有一些默认的样式,而且在不同平台或者浏览器下的表现不一,造成了表单展现的差异。此时我们可以通过box-sizing属性来构建一个风格统一的表单元素。
(2)设置子类元素的margin或者border时,可能会撑破父层元素的尺寸,这时我就需要使用box-sizing: border-box来将border包含进元素的尺寸中,这样就不会存在撑破父层元素的情况了。
2. 行内元素和块级元素的区别?行内块级元素的兼容性使用?(IE8以下)
-
块级元素
:div,p,h1,form,ul,li
(1)各占一行,垂直方向排列;
(2)可以包含其他块级或者行内元素;
(3)高度、行高以及外边距和内边距都可控制;
(4)默认宽度是它本身父容器的100%(和父元素的宽度一致),与内容无关。
-
行内元素
:span,a,label,input,img,strong,em
(1)水平方向排列,不会自动换行;
(2)不可以包含块级元素,但是可以包含其他行内元素或者文本;
(3)行内元素设置width、height无效(可以设置line-height),margin和padding上下无效;
(4)宽度就是它的文字和图片的宽度,不可改变。
- 行内块级元素在IE8以下的兼容性(块元素模拟inline-block)
div {
display: inline-block;
zoom: 1; //在IE下触发hasLayout
display:inline;//一旦触发了hasLayout设置display:inline和display:block效果相似。
}
haslayout 是IE7-浏览器的特有属性。hasLayout是一种只读属性,有两种状态:true或false。当其为true时,代表该元素有自己的布局,否则代表该元素的布局继承于父元素。
注意: 通过element.currentStyle.hasLayout可以得出当前元素的hasLayout情况。
3. 页面导入样式时,使用link和@import有什么区别?
(1)link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS。
(2)link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。
(3)link是XHTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器(IE5以下)不支持。
(4)link支持使用Javascript控制DOM去改变样式;而@import不支持。
4. 清除浮动有哪些方式?
(1)在浮动元素下方添加一个非浮动元素
<div>
<div style="float:left;width:45%;"></div>
<div style="float:right;width:45%;"></div>
<div style="clear:both;"></div>
</div>
父容器现在必须考虑非浮动子元素的位置,而后者肯定出现在浮动元素下方,所以显示出来,父容器就把所有子元素都包括进去了。这种方法比较简单,但是要在页面中增加冗余标签,违背了语义网的原则。
(2)将父容器也改成浮动定位
<div style="float:left;">
<div style="float:left;width:45%;"></div>
<div style="float:right;width:45%;"></div>
</div>
这种方法不用修改HTML代码,但是缺点在于父容器变成浮动以后,会影响到后面元素的定位,而且有时候,父容器是定位死的,无法变成浮动。
(3)父容器设置overflow: hidden或者auto。(开启BFC)
<div style="overflow: hidden;">
<div style="float:left;width:45%;"></div>
<div style="float:right;width:45%;"></div>
</div>
缺点
:一个是IE6不支持,另一个是一旦子元素的大小超过父容器的大小,就会出显示问题。
(4)利用:after伪选择符,在父容器的尾部自动创建一个子元素 ==(推荐这种)==
.clearfix:after {
content: "";
display: block;
clear: both;
}
//兼容ie6:激活父元素的"hasLayout"属性,让父元素拥有自己的布局
.clearfix {
zoom: 1; //或者height:1%;
}
5. 简单介绍BFC和IFC
BFC —— 块级格式化上下文
(1)BFC触发条件:
- 根元素或其他包含他的元素
- 浮动元素 float:left/right
- position:absolute/fixed
- display:inline-block,table-cell,table-caption
- overflow不为visible
- 弹性盒子:display: flex 或 inline-flex
(2)BFC特性
- 内部的Box会在垂直方向上一个接一个的放置;
- 垂直方向的距离有margin决定(属于同一个BFC的两个相邻Box的margin会发生重叠,与方向无关);
- 每个元素的margin box的左边, 与包含块border; box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此;
- BFC的区域不会与float的元素区域重叠;
- 计算BFC的高度时,浮动子元素也参与计算,可以解决父元素高度塌陷问题;
- BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面元素,反之亦然;
- 文档流中的BFC元素, width为auto时,会占满当前行的剩余宽度。
(3)应用
- 阻止两个相邻的普通流中的块元素垂直方向上的margin折叠;
- BFC可以包含浮动元素,撑开父元素;
- BFC可以阻止元素被浮动元素覆盖。
(4)BFC与hasLayout
IE6-7不支持BFC,而是使用私有属性hasLayout,要用zoom:1触发hasLayout属性。Zoom用于设置或检索元素的缩放比例,值为“1”即使用元素的实际尺寸。
IFC —— 行内格式化上下文
(1)创建方式:
和BFC相比,它的创建方式是被动的、隐式的,是由所包含的子元素来创建:只有在一个区域内仅包含可水平排列的元素时才会生成,这些子元素可以是文本、inline-level元素或inline-block-level元素。
(2)特性:
- IFC内部的元素,按从左到右、从上到下的顺序排布;
- IFC内部的每个元素,都可以通过设置vertical-align属性,来调整在垂直方向上的对齐;
- 包含这些内部元素的矩形区域,形成的每一行,被称为line box(行框)。
6. 选择器优先级
!important>行内样式>id选择器>类选择器>标签选择器>通配符>继承
权重算法
:(0,0,0,0) ——> 第一个0对应的是important的个数,第二个0对应的是id选择器的个数,第三个0对应的类选择器的个数,第四个0对应的是标签选择器的个数,合起来就是当前选择器的权重。
比较
:先从第一个0开始比较,如果第一个0大,那么说明这个选择器的权重高,如果第一个相同,比较第二个,依次类推。
7. 怎么实现水平垂直居中
(1)行内元素的水平居中
text-align: center;
line-height: 100px;
(2)块级元素水平居中
margin: 0 auto;
(3)已知高度宽度元素的水平垂直居中
- 利用绝对定位和负边距实现
.container{
width: 600px;
height: 600px;
position: relative;
}
.center{
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
margin: -150px 0 0 -150px;
}
- 利用绝对定位和margin
.container{
width: 600px;
height: 600px;
position: relative;
}
.center{
width: 300px;
height: 300px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
(4)未知高度和宽度元素的水平垂直居中
- 被居中的元素是inline或者inline-block元素
.container{
width: 600px;
height: 600px;
display: table-cell;
text-align: center;
vertical-align: middle;
}
- css3的transform属性
.container{
width: 100%;
height: 600px;
position: relative;
}
.center{
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
- flex布局
.container{
width: 100%;
height: 600px;
display: flex;
justify-content: center;
align-items: center;
}
- 最简单的写法:
.container{
display: flex;
height: 600px;
}
.center{
margin : auto;
}
8. 实现左边定宽,右边自适应布局
(1)左盒子左浮动,右盒子width=100%
(2)左盒子左浮动,右盒子margin-left=左盒子宽度
(3)左盒子左浮动,右盒子右浮动,设置width: calc(100% – 左盒子宽度)
(4)父容器设置display:flex,右盒子flex:1
9. 实现中间自适应宽度,左右两栏固定宽度布局
10. 脱离文档流
(1) 浮动脱离文档流:使用float脱离文档流时,其他盒子会无视这个元素,但其他盒子内的文本依然会为这个元素让出位置,环绕在周围。
(2) 绝对定位脱离文档流:使用absolute: position | fixed 脱离文档流的元素,其他盒子与其他盒子内的文本都会无视它。
11. CSS3新特性
- 颜色:新增RGBA、HSLA模式
- 文字阴影(text-shadow)
- 边框:圆角(border-radius)边框阴影:box-shadow
- 盒子模型:box-sizing
- 背景:background-size设置背景图片的尺寸,background-origin设置背景图片的原点,background-clip设置背景图片的裁剪区域,以“,”分隔可以设置多背景,用于自适应布局
- 渐变:linear-gradient、radial-gradient
- 过渡:transition可实现动画
- 自定义动画
- 在CSS3中唯一引入的伪元素是::selection
- 多媒体查询、多栏布局
- border-image
- 2D转换:transform:translate(x,y)rotate(x,y)skew(x,y)scale(x,y)
- 3D转换
12. display:none;与visibility:hidden的区别是什么?
(1) display:none;
HTML元素(对象)的宽高,高度等各种属性值都将“丢失”,视为不存在,而且不加载。
(2) visibility:hidden;
HTML元素(对象)仅仅是在视觉上看不见(完全透明),而它所占据的空间位置仍然存在,也即是说它仍然具有高度,宽度等属性值。
13. 响应式布局原理
媒体查询,查询到当前屏幕(媒介媒体)的宽度,针对不同的屏幕宽度设置不同的样式来适应不同屏幕。
14. flex布局
flex布局可以看阮一峰老师的这两篇文章: Flex 布局教程:语法篇 , Flex 布局教程:实例篇 ,讲的非常详细。
(1)设置在容器上的属性
-
flex-direction:row | row-reverse | column | column-reverse
项目的排列方向 -
flex-wrap:nowrap | wrap | wrap-reverse
是否换行 -
flex-flow:<flex-direction> || <flex-wrap>
flex-direction和 flex-wrap的简写 -
justify-content:flex-start | flex-end | center | space-between | space-around
在水平方向上的对齐方式 -
align-items: flex-start | flex-end | center | baseline | stretch
定义在垂直方向上的对齐方式 -
align-content: flex-start | flex-end | center | space-between | space-around | stretch
定义了多根轴线的对齐方式,如果项目只有一根轴线,那么该属性将不起作用(item有多行时)
(2)设置在项目上的属性
-
order:<number>
定义项目在容器中的排列顺序,数值越小,排列越靠前,默认值为 0 -
flex-basis:<length> | auto
定义了在分配多余空间之前,项目占据的主轴空间,浏览器根据这个属性,计算主轴是否有多余空间 -
flex-grow: <number>
定义项目的放大比例。默认值为 0,即如果存在剩余空间,也不放大 -
flex-shrink: <number>
定义项目的缩小比例。默认值: 1,即如果空间不足,该项目将缩小,负值对该属性无效。 -
flex:none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
flex-grow, flex-shrink 和 flex-basis的简写 默认值:0 1 auto, 即不放大,可缩小,大小就是项目本身的大小。 -
align-self:auto | flex-start | flex-end | center | baseline | stretch
允许单个项目有与其他项目不一样的对齐方式
之后仍会继续更新…
关于HTTP方面的相关知识,可以看我总结的这篇文章: HTTP协议知识点总结
JavaScript相关的基础知识可以看这两篇思维导图: 你不知道的JavaScript(上卷) , 你不知道的JavaScript(中卷)第一部分
中卷第二部分和下卷还在整理中。