前言
本文主要是为了整理前端所有的面试题,方便后续便于阅读
HTML
1.Doctype的作用
Doctype是作用于文档最顶部的文档声明，是告诉浏览器是以标准模式还是以怪异模式展示该页面。Doctype不存在或格式错误都会导致页面以怪异模式展示页面。
2.标准模式和怪异模式的区别
标准模式的页面排版和JS运作模式都是浏览器支持的最高标准，而怪异模式是向后兼容，模拟老浏览器模式行为，防止页面无法正常工作
3.行内元素/块级元素/空元素有哪些
行内元素: a/img/span/b/strong/input/select/section
块级元素: div/p/table/ul/ol/li/h1-h6
空元素: br/hr/img/input/link/meta
4.介绍一下你对浏览器内核的理解
浏览器主要分为两个部分:渲染引擎和JS引擎
渲染引擎：主要负责获取页面内容和排版渲染页面
JS引擎：解析和执行JS来实现页面的动态效果，以及交互内容
5.常用浏览器的内核有哪些
6.浏览器是怎么对HTML5的离线储存资源进行管理和加载的
在线的情况下，浏览器发现 html 标签有 manifest 属性，它会请求 manifest 文件
如果是第一次访问app，那么浏览器就会根据 manifest 文件的内容下载相应的资源并且进行离线存储
如果已经访问过app且资源已经离线存储了，浏览器会对比新的 manifest 文件与旧的 manifest 文件，如果文件没有发生改变，就不做任何操作。如果文件改变了，那么就会重新下载文件中的资源并进行离线存储
离线的情况下，浏览器就直接使用离线存储的资源。
7.描述一下cookies/sessionStorage和localStorage的区别
cookies是网站为了表示用户身份而储存在用户本地终端上的数据,Cookies的数据始终在同源的http请求中携带,会在浏览器和服务器中来回传递,大小不能4K(通常经过加密,所以不用担心账号被盗,同源策略同源是指"协议+域名+端口"三者相同可以防止XSS和CSRF攻击浏览器,XSS就是用过浏览器的cookies,截取用户数据,CSRF是模拟用户在网页上面的操作,完成数据请求.异步策略牵扯到了JSONP)
sessionStorage和localStorage的数据都是在本地存储,不会把数据发给服务器,localStorage是关闭浏览器,数据还存在不会丢失,而sessionStorage是离开浏览器后,数据会自动删除
8.HTML5新特性有哪些？如何处理HTML5新标签的兼容性问题？如何区分HTML和HTML5
HTML5新特性：
绘图方面：加入了canvas绘图和SVG绘图；
媒体方面： 加入了video和audio标签
语义化标签： 比如header、nav、footer、section、article
本地离线存储： localStorage 和sessionStorage两种本地离线缓存
localStorage是长期储存数据,关闭浏览器后数据不会丢失
sessionStorage是关闭浏览器后数据自动删除
表单控件: calendar、date、time、email、url、search ;
以及一些新技术: webwoker / websocket / GelolCation 如何区分HTML和HTML5: 通过Doctype声明/新增的结构元素/功能元素
9.简述一下你对HTML语义化的理解
用正确的标签做正确的事情，html语义化让页面的内容结构更加简单易懂，便于搜索引擎解析，便于阅读维护和理解
10.HTML5离线缓存怎么使用，工作原理能不能解释一下
用户在没有联网时，可以正常访问站点或应用，等用户联网时，更新用户的缓存文件
浏览器是怎么对HTML5进行离线缓存资源进行管理和加载的?：在联网情况下，html头部有manifest属性，会请求manifest文件，如果是第一次访问，浏览器会根据manifest的内容下载相应的资源并且进行离线缓存，如果不是第一个，会加载成为新的manifest文件，新旧manifest文件对比，如果一致，则不发生变化，如果不一致，那么会重新下载文件中的资源并进行离线缓存
11.页面导入样式时,使用link和@import有什么区别
link属于XHTML标签,除了加载CSS之外还能用于定义RSS,@import是CSS提供的,只能用于加载CSS
link加载的文件,在页面加载的时候,link文件会同时加载,而@import引入的CSS文件,是页面在加载完成后再加载的
@import有兼容性问题,IE5以下的浏览器是无法识别的,而link无兼容性问题
12.Iframe有哪些缺点
Iframe会阻碍页面的onload事件
浏览器的搜索引擎一般读无法解读iframe页面,不利于SEO的搜索
Iframe和主页面共享链接池,会影响页面的并行加载
使用js动态添加iframe src属性,可以避免一三问题
13.Label的作用是什么?怎么用
label标签是定义表单控制间的关系,当用户点击label里面的文字时,浏览器会自动把光标转载表单控件上
14.HTML5的form如何关闭自动完成功能
给不想要提示form或某个input设置autocomplete = off
15.如何实现浏览器内多个标签之间的通信
Websocket/SharedWorker 都是可以将不同线程共享为一个线程,他们的数据也是共享的
LocalStorage 也可以实现浏览器多个标签页之间的通信· localStorage在另一个浏览器被添加/删除/修改时,会触发一个事件,我们可以通过对loacalStorage监听事件,控制他的值来进行信息通信
16.页面可见性有哪些用途?(visibility API)
可以通过visibilityState检测当前页是否可见,以及打开网页的时间,可以 控制页面在被切换后,停止视频和音频的播放
17.如何在页面上实现一个圆形的可点击区域
Border-radius或者JS canvas
18.网页验证码是干嘛的,解决了什么安全问题
区分用户是计算机还是人的公告全自动程序,可以防止恶意破解密码,刷票等
19.Title和h1的区别,b与strong的区别,i和em的区别
title属性没有明确的标题,只是HTML语义化的一个标签,而h1则是层次明确的标题,h1标签里的文字,字体较大,并且会加粗
b与strong都有加粗字体的作用,strong只是更加语义化,是加重语气的意思
i和em,em是强化文本的内容,而所有浏览器对重要内容都是以斜体形式显示的,i则是表示,标签内文本为斜体
20.img标签的title和alt有什么区别
title是当鼠标划到图片元素时显示的图片描述
alt是img的特有属性，是图片内容的等价描述，用于图片无法加载时显示、读屏器阅读图片。可提高图片可访问性，除了纯装饰性图片外都需要设置有意义的值，搜索引擎会重点分析
21.Web标准以及W3C标准是什么
标签闭合、标签小写、不乱嵌套，使用外链css和js、结构行为表现的分离
22.xhtml和html有什么区别
功能上的差别：
主要是xhtml可兼各大浏览器、手机以及PDA，并且浏览器也能快速正确地编译网页
书写习惯的差别：
xhtml元素必须被正确嵌套，闭合、区分大小写，文档必须拥有根元素
23.Canvas和Svg有什么区别
svg绘制出来的每一个图形的元素都是独立的DOM节点,能够方便的绑定事件或用来修改。canvas输出的是一副画布
svg输出的图形是矢量图形，后期可以修改参数来自由放大缩小，不会失真和锯齿。而canvas输出标量画布，就像一张图片一样，放大会失真或者锯齿
24.Canvas跨域问题 ? 如何解决
当canvas绘制一张外部链接图片时, 我们会遇到跨域问题, 在浏览器打开这个页面的时候, 会发现这个问题
Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
这是由于canvas受限于CORS策略, 会存在跨域问题, 虽然可以使用图像, 但是绘制到画布上会污染画布, 一旦一个画布被污染, 就无法提取画布的数据. 比如无法使用画布toBlod() , toDataURL() 或者getImageData() 方法
解决方案:
1.img标签上新增了crossorgin属性, 这个属性决定了图片获取过程1. 中是否开启CORS功能( 存在兼容性问题 )image.setAttribute(‘crossorgin’,’anonymous’)
2.将文件读入到blob文件对象, 然后使用URL.createObjectURL转换成src可用的地址
CSS
1.浏览器盒模型
盒模型分为两种: IE盒模型和W3C盒模型
W3C标准盒模型: 宽度/padding/border/margin都是单独分开的
IE盒模型: 宽度 = 内容宽度+padding+border 是一起的
2.清除浮动的方式
1. 在子元素并级后面添加一个新元素，添加clear：both属性
优点：通俗易懂，容易掌握
缺点：添加无意义空标签，不方便后期维护
2. 给父元素添加overflow:hidden
优点：代码较少，简单方便
缺点：不能配合定位使用
- :after方法（作用于浮动元素的父元素）
.clearfix:after{
content:"";
display: block;
height:0;
clear:both;
visibility:hidden;
}
/* 为兼容IE6,IE7，因为ie6,ie7不能用after伪类 */
.clearfix{
zoom:1;
}
优点：结构和语义化完全正确
缺点：复用方式不当，会造成代码量增加
3.CSS选择器有哪些?哪些属性可以继承
选择器:
ID选择器 (#ID)
Class选择器 (.class名)
标签选择器 (标签)
通配符 (*)
相邻选择器 (div+p)
子选择器 (div>p)
后代选择器 (div p)
多个选择器 (div,p,a,ul)
伪类选择器 (a:hover)
伪类选择器和伪元素的区别:
伪类用于向某些选择器添加特殊效果 (单冒号)
伪元素用于将某个特殊的东西添加到某些元素的前后 (双冒号)
伪类:
伪元素:
after/:after与::before/:before的区别
:before在元素之前添加效果/:after是在元素之后添加效果
:after/:before是CSS2提出的,兼容IE8
::after/::before是CSS3为了区分伪类和伪元素的做出的差别,为了避免兼容性问题,习惯性的还是写:after/:before;
可继承样式: font-size/fon-family/color [ul/li/ol/dl/dd/dt]
不可继承样式:width/height/margin/padding/border
4.CSS样式优先级计算法
三条标准:
1/就近原则,后加样式优于前面的样式
2/内嵌样式>内联样式>外联样式
3/!Important 大于一切样式
权重计算规则:
内联样式:style=””-----权值1000
ID选择器: #ID -----权值100
类/伪类/属性选择器 -----权值10
类型选择器和伪元素 :div/p------权值1
继承的样式没有权值
5.CSS3新特性和伪类有哪些
新特性:
border-radius(圆角)/box-shadow(阴影)
text-shadow(文字阴影)/线性渐变(line-gradient)/transform各种样式(旋转/缩放/定位[xyz]/倾斜)
增加了更多的CSS旋转武器,背景颜色加入了rgba
Border-images/媒体查询/多栏布局
新增伪类:
P: first-of-type 选择属于其父元素中的同类型的第一个P元素
P:last-of-type 选择其父元素中的同类型的最后一个P元素
::after/::before在元素之前或之后添加内容
::disabled 控制表单控件的禁用状态
::checked 单选框或复选框被选中
6.less的一些优势
1. 结构清晰，便于扩展
2. 可以方便的屏蔽浏览器私有语法差异
3. 可以轻松实现多重继承
4. 完全兼容CSS代码，可以方便的应用到老项目中。Less知识在CSS语法上做了扩展，所以老的CSS代码也可以与Less代码一同编译
7.如何居中div
水平居中使用
margin(0 auto)
垂直居中:
position:absolute;
top:50%;
Left:50%;
transform:translate(-50%,-50%)
或者
display:table-cell;
Text-align:center;
Vertical-align:middle;
8.Display有哪些哪些值?说明他们的作用
| 属性值 | 说明 |
|---|---|
| block | 元素转化为块级元素 |
| inline | 元素转化为行内元素 |
| inline_block | 元素转化问行内块元素 |
| None | 次元素不会显示,脱离文档流 |
| List-item | 元素转化为行内样式,并添加列表样式(如UL下的li) |
| Table | 元素会以块级表格来显示 |
| Inherit | 继承父元素display属性 |
9.Position的值
| 属性值 | 说明 |
|---|---|
| relative | 相对定位(相对于原来位置定位,不脱离文档流) |
| absolute | 绝对定位(相对于他最近的定位父元素定位,脱离文档流) |
| fixed | 窗口定位(相对于浏览器窗口进行定位,脱离文档流) |
| static | 默认值,不定位 |
| inherit | 继承父元素的position属性 |
10.flex布局以及常用属性
11.请解释一下CSS3的flexbox(弹性盒布局模型),以及适用场景
是一个用于页面布局的新CSS功能 ,规定框内的子元素是否可以伸缩器尺寸
12.纯 CSS 实现三角形的 3 种方式
1.triangle up 上三角形
#triangle-up{
width:0;
height:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-bottom:100px solid black;
}
2.triangle down 下三角形
#triangle-down{
width：0；
height：0；
border-left：50px solid transparent；
border-right:50px solid transparent;
border-top:100px solid black;
}
3.triangle left 左三角形
#triangle-left{
width：0；
height：0；
border-top：50px solid transparent；
border-bottom:50px solid transparent;
border-right:100px solid black;
}
4.triangle right 右三角形
#triangle-right{
width：0；
height：0；
border-top：50px solid transparent；
border-bottom:50px solid transparent;
border-left:100px solid black;
}
5.triangle top left 左上三角形
#triangle-topleft{
width：0；
height：0；
border-top：100px solid black；
border-right:100px solid transparent;
}
6.triangle top right 右上三角形
#triangle-topright{
width：0；
height：0；
border-top：100px solid black；
border-left：100px solid transparent；
}
7.triangle bottom left 左下三角形
#triangle-bottomleft{
width：0；
height：0；
border-bottom：100px solid black；
border-right：100px solid transparent；
}
8.triangle bottom right 右下三角形
#triangle-bottomright{
width：0；
height：0；
border-bottom：100px solid black；
border-left：100px solid transparent；
}
13.li与li之间有看不见的空白间隙是什么原因引起来的
这种情况一般是标签之间的空格引起的,一般可以通过删除空格或者设置父元素font-size:0来解决
14.为什么要初始化css样式
浏览器的兼容性问题,有些浏览器对标签的默认值是不一样的,如果没有 设置CSS初始化,浏览器之间的页面会有差异,最简单的方式:
{ padding ; 0 ; margin : 0 ; }
15.CSS中的visibility属性的collapse属性是干嘛的?
1、一般情况和visibility：hidden一样，不脱离文档流
2、在table的tr元素，脱离文档流
3、在table的td元素中，不脱离文档流
16.外边距合并是指的什么意思
是指两个垂直的margin相遇,会合并在一起,margin高度是以最大的margin值为准;
17.移动端的布局用过媒体查询吗
媒体查询主要用于响应式页面,媒体查询通过页面浏览设备的窗口宽度,完成相应的样式
<style>@media(min-width)and(max-width){样式}</style>
18.CSS媒体查询的原理是什么
窗口的onresize事件，得到窗口大小匹配对应的样式修改
19.使用CSS预处理的优缺点分别是什么
优点：
提高CSS可维护性
易于编写嵌套选择器
引入变量，增添主题功能。可以在不同的项目中共享主题文件。
缺点：
需要预处理工具
重新编译的时间可能会很慢
20.浏览器是怎么解析CSS选择器的
样式系统优先从关键选择器开吃匹配,通过权重,先找祖先元素,再一级一级查下去,如果匹配则使用样式,如果不匹配则放弃
21.Margin与padding的区别
Margin是控制元素与元素之间的距离,padding是分元素与内容之间的距离
22.Css如何实现横向滚动与竖向滚动
横向滚动:父元素:overflow-x:auto; overflow-y:hidden;
竖向滚动:父元素 overflow-x:hidden;overflow-x:auto;
23.怎么让chrome支持小于12px的文字
1、是使用图片
2、12号字体基本就已经是浏览器的自小号字体,如果字太小,用户阅读内容会很容易产生视觉疲劳感,所以页面中通常是使用12px或者大于12px的字体,比如:16/18/24/32号字体,是比较常用的字体大小
24.如果需要手写动画,最小时间间隔是多少
显示器默认60Hz,一秒刷新60次,1000/60,约为16.7ms
25.Png/jpg/gif这些图片格式解释一下
jpg是正常的图片格式/png主要设置无背景图片/gif是动态图片
26.Style标签写在body前还是body后
正常是写在body前的,而且style也可以body中,但是这回导致CSS重新渲染一次页面,占用一定的时间
27.有什么不同的方式可以隐藏内容
visibilty：hidden：元素任然在文档流中，并占用空间；
display：none：元素脱离文档流，不占用空间；
position：left：-999999px：将内容至于屏幕之外
text-index：-9999：只适用于block元素中的文本
28.消除transition闪屏
.css {
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
}
过渡动画（在没有启动硬件加速的情况下）会出现抖动的现象，以上的解决方案只是改变视角来启动硬件加速的一种方式；
启动硬件加速的另外一种方式：
.css {
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
启动硬件加速最常用的方式：translate3D，translateZ，transform
opacity属性/过渡动画(需要动画执行的过程中才会创建合成层，动画没有开始或结束后元素还会回到之前的状态)
will-chang属性（这个比较偏僻），一般配合opacity使用（而且经测试，除了上述可以引发硬件加速的属性外，其它属性并不会变成复合层）
弊端：硬件加速会导致CPU性能占用量过大，电池电量消耗加大；因此，尽量避免泛滥使用硬件加速
29.CSS实现单行文本移除显示...
overflow : hidden ;
text-overflow : ellipsis ;
white-space : nowrap ;
30.实现多行文本溢出显示...
display : -wedkit-box ;
-webkit-box-orient : vertical ;
-webkit-line-clamp : 3 ;
overflow : hidden ;
31.visibility：hidden与display：none的区别
两个css样式都有隐藏元素的效果，但是它们的区别在于：display：none隐藏元素，可以脱离文档流，而visibility隐藏的元素不会脱离文档流，会占有原来的位置
32.em，rem，px的区别
px像素单位-----相对长度单位，相对于显示屏分辨率。
特点： IE无法调整那些使用px作为单位的字体大小
国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位
Firefox能够调整px和em、rem，但是96%以上的中国网民使用IE浏览器或（内核）
em-------相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸（浏览器的默认字体大小是16px。未经调整的浏览器都符合1em = 16px）
特点： em的值不是固定的
em会继承父级元素的字体大小
rem-----rem是CSS3新增的一个相对访问（root em，根em），这个单位引起了广泛关注。rem与em的区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的是HTML根元素。这个单位可以根据修改根元素就成比例的调整字体大小。可避免字体大小逐层复合的连锁反应
33.css动画与js动画的差异
1. js动画代码相对复杂一些
2. 动画运行时，对动画的控制程度上，js能够让动画暂停、取消、终止，css动画不能添加事件
动画性能看，js动画多了一个js解析的过程，性能不如css动画好
34.CSS sprite是什么？有什么优缺点？
精灵图，将多个小图片拼接到一个图片中。通过background-position和元素尺寸调节需要显示的背景图案
优点：
减少http请求数，极大的提高页面加载速度
增加图片信息重复度，提高压缩比，减少图片大小
更换风格方便，只需在一张或几张图片上修改颜色或样式即可实现
缺点：
图片合并麻烦
不方便维护
35.CSS在性能优化方面的方法
css压缩与合并、Gzip压缩
css文件放在head中，不要使用@import
尽量用缩写、避免用滤镜、合理使用选择器
stylus、sass、less区别
均具有变量、混合、嵌套、继承、颜色混合五大基本特性
Sass和Less语法较为严谨，Less要求一定要使用大括号{ }，Sass和Stylus可以通过缩进表示层次与嵌套关系
Sass无全局变量的概念，Less和Stylus有类似于其他语言的作用于概念
Sass是基于Ruby语言的，而Less和Stylus可以基于NodeJS NPM下载相应库就进行编译
