前言
前端的面试和学习都是不可或缺的事情，在这里收集一些高频面试题，供自己现在和以后查阅和查缺补漏的同时，也希望对小伙伴有所帮助。
HTML
1、HTML语义化的理解
1、用正确的标签做正确的事情！
2、HTML语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；
3、在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的。
4、搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。
5、使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解
2、HTML5有哪些新特性、移除了那些元素？
HTML5现在已经不是SGML的子集，主要是关于图像，位置，存储，多任务等功能的增加
绘画 canvas
用于媒介回放的 video和audio 元素
本地离线存储localStorage长期存储数据，浏览器关闭后数据不丢失
语意化更好的内容元素，比如article、footer、header、nav、section
表单控件，calendar、date、time、email、url、search
新的技术
移除的元素：
纯表现的元素：basefont、big、center、font、 s、strike、tt、u
对可用性产生负面影响的元素：frame、frameset、noframes
支持HTML5新标签：
IE8/IE7/IE6支持通过document.createElement方法产生的标签
可以利用这一特性让这些浏览器支持HTML5新标签
浏览器支持新标签后，还需要添加标签默认的样式
当然也可以直接使用成熟的框架、比如html5shim
3、的title和alt有什么区别
alt 是图片加载失败时，显示在网页上的替代文字；
title 是鼠标放上面时显示的文字。
alt是img必要的属性，而title不是。
4、从浏览器地址栏输入url到显示页面的步骤
浏览器根据请求的URL交给DNS域名解析，找到真实IP，向服务器发起请求；
服务器交给后台处理完成后返回数据，浏览器接收文件(HTML、JS、CSS、图象等)；
浏览器对加载到的资源(HTML、JS、CSS等)进行语法解析，建立相应的内部数据结构(如HTML的DOM)；
载入解析到的资源文件，渲染页面，完成。
5、HTML全局属性(global attribute)有哪些
class:为元素设置类标识
data-*: 为元素增加自定义属性
draggable: 设置元素是否可拖拽
id: 元素id，文档内唯一
lang: 元素内容的的语言
style: 行内css样式
title: 元素相关的建议信息
6、介绍一下你对浏览器内核的理解？
主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎
渲染引擎：负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入CSS等)，以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核
JS引擎则：解析和执行javascript来实现网页的动态效果
最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎
7、请描述一下 cookies，sessionStorage 和 localStorage 的区别？
cookie是网站为了标示用户身份而储存在用户本地终端(Client Side)上的数据(通常经过加密)
cookie数据始终在同源的http请求中携带(即使不需要)，记会在浏览器和服务器间来回传递
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存
存储大小：
cookie数据大小不能超过4k
sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大
有期时间：
localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据
sessionStorage 数据在当前浏览器窗口关闭后自动删除
cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
8、行内元素有哪些？块级元素有哪些？空(void)元素有那些？行内元素和块级元素有什么区别？
行内元素有：a b span img input select strong
块级元素有：div ul ol li dl dt dd h1 h2 h3 h4… p
空元素：
行内元素不可以设置宽高，不独占一行
块级元素可以设置宽高，独占一行
9、如何在页面上实现一个圆形的可点击区域？
svg
border-radius
纯js实现 需要求一个点在不在圆上简单算法、获取鼠标坐标等等
10、HTTP状态码及其含义
1XX：信息状态码
2XX：成功状态码
3XX：重定向
4XX：客户端错误
5XX: 服务器错误
11、你能描述一下渐进增强和优雅降级之间的不同吗
渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
12、渲染优化
1、使用CSS3代码代替JS动画(尽可能避免重绘重排以及回流)
2、页面中空的 href 和 src 会阻塞页面其他资源的加载 (阻塞下载进程)
3、用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能
4、当需要设置的样式很多时设置className而不是直接操作style
5、少用全局变量、缓存DOM节点查找的结果。减少IO读取操作
6、图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳
13、如何进行网站性能优化
1、减少HTTP请求：合并文件、CSS精灵、inline Image
2、将样式表放到页面顶部
3、不使用CSS表达式
4、使用不使用@import
5、将脚本放到页面底部
6、将javascript和css从外部引入
7、压缩javascript和css
CSS
1、盒子模型
盒模型分为两类: IE盒模型和标准盒模型。 两者的区别在于:
IE盒模型的width/height = content + border + padding
标准盒模型的width/height = content
2、CSS优先级算法如何计算？
优先级就近原则，同权重情况下样式定义最近者为准
载入样式以最后载入的定位为准
优先级为: !important > id > class > tag; !important 比 内联优先级高
3、CSS3有哪些新特性
新增各种css选择器
圆角 border-radius
多列布局
阴影和反射
文字特效text-shadow
线性渐变
旋转transform
CSS3新增伪类有那些？
:after 在元素之前添加内容,也可以用来做清除浮动。
:before 在元素之后添加内容。
:enabled 已启用的表单元素。
:disabled 已禁用的表单元素。
:checked 单选框或复选框被选中。
4、CSS常用选择器
通配符：*
ID选择器：#ID
类选择器：.class
元素选择器：p、a 等
后代选择器：p span、div a 等
伪类选择器：a:hover 等
属性选择器：input[type="text"] 等
5、link与@import的区别
link是HTML方式， @import是CSS方式
link最大限度支持并行下载，@import过多嵌套导致串行下载，出现FOUC(文档样式短暂失效)
link可以通过rel="alternate stylesheet"指定候选样式
浏览器对link支持早于@import，可以使用@import对老浏览器隐藏样式
@import必须在样式规则之前，可以在css文件中引用其他文件
总体来说：link优于@import
6、如何创建块级格式化上下文(block formatting context),BFC有什么用
什么是BFC?
BFC格式化上下文，它是一个独立的渲染区域，让处于 BFC 内部的元素和外部的元素相互隔离，使内外元素的定位不会相互影响
如何产生BFC?
display: inline-block
position: absolute/fixed
BFC作用
BFC最大的一个作用就是：在页面上有一个独立隔离容器，容器内的元素和容器外的元素布局不会相互影响
解决上外边距重叠;重叠的两个box都开启bfc;
解决浮动引起高度塌陷;容器盒子开启bfc
解决文字环绕图片;左边图片div,右边文字容器p,将p容器开启bfc
7、绝对定位和相对定位的区别
position: absolute
绝对定位：是相对于元素最近的已定位的祖先元素
position: relative
相对定位：相对定位是相对于元素在文档中的初始位置
8、display:inline-block 什么时候不会显示间隙？
移除空格
使用margin负值
使用font-size:0
letter-spacing
word-spacing
9、清除浮动的几种方式，各自的优缺点
父级div定义height
结尾处加空div标签clear:both
父级div定义伪类:after和zoom
父级div定义overflow:hidden
父级div也浮动，需要定义宽度
结尾处加br标签clear:both
比较好的是第3种方式，好多网站都这么用
10、为什么要初始化CSS样式?
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化
11、自适应布局
思路：
左侧浮动或者绝对定位，然后右侧margin撑开
使
使用flex
12、position有哪些值？有什么作用？
static。默认值，不脱离文档流，top，right，bottom，left等属性不生效。
relative。不脱离文档流，依据自身位置进行偏离，当子元素设置absolute，将依据它进行偏离。
absolute。脱离文档流，依据top，right，bottom，left等属性在正常文档流中偏移位置。
fixed。通过浏览器窗口进行定位，出现滚动条的时候，不会随之滚动。
13、垂直居中有哪些方法？
单行文本的话可以使用height和line-height设置同一高度。
position+margin：设置父元素:position: relative;，子元素height: 100px;
position:absolute;top: 50%; margin: -50px 0 0 0;(定高)
position+transform：设置父元素position:relative,子元素：position: *
absolute;top: 50%;transform: translate(0, -50%);(不定高)
百搭flex布局(ie10+)，设置父元素display:flex;align-items: center;(不定高)
14、水平居中的方法
元素为行内元素，设置父元素text-align:center
如果元素宽度固定，可以设置左右margin为auto;
如果元素为绝对定位，设置父元素position为relative，元素设left:0;right:0;margin:auto;
使用flex-box布局，指定justify-content属性为center
display设置为tabel-ceil
15、Flex布局
display: flex //设置Flex模式
flex-direction: column //决定元素是横排还是竖着排
flex-wrap: wrap //决定元素换行格式
justify-content: space-between //同一排下对齐方式，空格如何隔开各个元素
align-items: center //同一排下元素如何对齐
align-content: space-between //多行对齐方式
16、stylus/sass/less区别
均具有“变量”、“混合”、“嵌套”、“继承”、“颜色混合”五大基本特性
Scss和LESS语法较为严谨，LESS要求一定要使用大括号“{}”，Scss和Stylus可以通过缩进表示层次与嵌套关系
Scss无全局变量的概念，LESS和Stylus有类似于其它语言的作用域概念
Sass是基于Ruby语言的，而LESS和Stylus可以基于NodeJS NPM下载相应库后进行编译；
20、知道css有个content属性吗？有什么作用？有什么应用？
css的content属性专门应用在 before/after伪元素上，用于来插入生成内容。最常见的应用是利用伪类清除浮动。
21、CSS在性能优化方面的实践
css压缩与合并、Gzip压缩
css文件放在head里、不要用@import
尽量用缩写、避免用滤镜、合理使用选择器
22、CSS3动画(简单动画的实现，如旋转等)
依靠CSS3中提出的三个属性：transition、transform、animation
transition：定义了元素在变化过程中是怎么样的，包含transition-property、transition-duration、transition-timing-function、transition-delay。
transform：定义元素的变化结果，包含rotate、scale、skew、translate。
animation：动画定义了动作的每一帧(@keyframes)有什么效果，包括animation-name，animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
扫一扫
245
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
