前端基础面试题

创建时间:2020-09-14 10:51

字数:2.5k 阅读:

HTML篇
CSS篇

HTML篇

1.Doctype作用，HTML5为什么只需要写

doctype是一种标准通用标记语言的文档类型声明，目的是告诉标准通用标记语言解析器要使用什么样的文档类型定义DTD来解析文档<!DOCTYPE>声明必须是HTML文档的第一行，位于html标签之前HTML5不基于SGML，所以不需要引用DTD。在HTML5中<!DOCTYPE>只有一种SGML：标准通用标记语言，是现时常用的超文本格式的最高层次标准

2.行内元素有哪些，块级元素有哪些，空(void)元素有哪些

行内元素：a span i img input select b 等等
块级元素：div ul li ol h1-h6 p table 等等
空(void)元素：hr br link等等

3.简述一下你对HTML语义化的理解

简单来说，就是合适的标签做合适的事情，这样具有以下好处：
有助于构建良好的HTML结构；有利于搜索引擎的建立索引、抓取，利于SEO；有利于不同设备的解析；有利于构建清晰的机构，有利于团队的开发、维护

4.常见的浏览器内核有哪些，介绍一下你对浏览器内核的理解

Trident内核：IEGecko内核：NETSCAPE6及以上版本，火狐
Presto内核：Oprea7及以上。【Opera内核原为Presto,现为Blink;】
Webkit内核：Safari，Chrome等。【Chrome的Blink(Webkit的分支)】
浏览器内核又可以分成两部分：渲染引擎和JS引擎。渲染引擎主要负责取得网页的内容、整理讯息、计算网页的显示方式等，JS引擎则是解析JavaScript语言，执行JavaScript语言来实现网页的动态效果。

5.html5有哪些新特性

(1)语义化标签：hearder、footer、nav、section、article、aside等
(2)增强型表单：
date(从一个日期选择器选择一个日期) email(包含e-mail地址的输入域) number(数值的输入域) range(一定范围内数字值的输入域) search(用于搜索域) tel(定义输入电话号码字段)等
(3)视频和音频：audio video
(4)Canvas绘图 SVG绘图
(5)地理定位：Geolocation
(6)拖放API：drag
(7)web worker：是运行在后台的JavaScript，独立于其他脚本，不会影响页面的性能
(8)web storage：localStorage sessionStorage
(9)WebSocker:HTML5开始提供的一种在单个TCP连接上进行全双工通讯的协议

6.描述一下cookie，sessionStorage和localStorage的区别

(1)localStorage长期存储数据，浏览器关闭后，数据不丢失
(2)sessionStorage数据在浏览器关闭后自动删除
(3)cookie是网站为了标识用户身份而存储在用户本地终端（Client Side）上的数据（通常经过加密）。cookie始终在同源的http请求中携带（即使不需要）都会在浏览器和服务器端间来回传递。sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存；
(4)存储大小：cookie数据大小不会超过4K，sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或者更多
(5)有效时间：localStorage存储持久数据，浏览器关闭后数据不丢失，除非自动删除数据。sessionStorage数据在当前浏览器窗口关闭后自动删除。cookie设置的cookie过期时间之前一直有效，即使窗口或者浏览器关闭

7.如何实现浏览器内多个标签页之间的通信

使用localStorage：localStorage.setItem(key.value)、localStorage.getItem(key)、websocket协议
webworker

8.HTML5的离线存储怎么使用，解释一下工作原理

9.src与href的区别

区别：src用于替代这个元素，而href用于建立这个标签与外部资源之间的关系
<link href="style.css" rel="stylesheet">浏览器加载到这里的时候，html的渲染和解析不会暂停，css文件的加载是同时进行的
<script src="script.js"></script>当浏览器解析到这句代码时，页面的加载和解析都会暂停直到浏览器拿到并执行完这个js文件

10.表单提交中Get和Post方式的区别

Get一般用于从服务器上获取数据，Post向服务器传送数据
Get传输的数据是拼接在Url之后的，对用户是可见的；Post的传输数据对用户是不可见的
Get传送的数据量较小，不能大于2KB。Post传送的数据量较大，一般被默认为不受限制
Get安全性非常低，Post安全性较高
在Form提交的时候，如果不指定method，则默认为get请求

CSS篇

1.css盒子模型，box-sizing属性的理解

css的盒模型由conten(内容)、padding(内边距)、border(边框)、margin(外边距)组成。但盒子的大小由content+padding+border这几部分决定
box-sizing是一个css3属性，与盒子模型有着密切联系。即决定元素的宽高如何计算，box-sizing有三个属性：
box-sizing：content-box| border-box | inherit;
content-box：使得元素的宽高即为内容区的宽高（默认模式）
border-box：计算方式content + padding + border = 元素本身大小，即缩小了content大小
inherit：指定box-sizing属性的值，应该从父元素继承

2.清除浮动

浮动的元素是脱离文档标准流的，如果我们不清除浮动，那么就会造成父元素高度塌陷，影响页面布局。
清除浮动的方式：
(1)为父元素设置高度
(2)为父元素添加overflow:hidden

overflow:hidden可以触发BFC机制
BFC：块级格式化上下文，创建了BFC的元素就是一个独立的盒子，它规定了内部如何布局，并且与这个独立盒子里的布局不受外部影响，当然它也不会影响到外面的元素，计算BFC的高度时，浮动元素也参与计算

(3)伪元素

.fix::after{
    content:"";
    display:block;
    clear:both;
}

使用伪元素的好处：不增加冗余的DOM节点，符合语义化

3.如何让一个不定宽高的盒子水平垂直居中

(1)position=absolute,lrtb=0,margin=auto,包含块一定是容器。（原理：绝对定位盒模型的特性）
left+right+width+padding+margin = 包含块的宽度
top+bottom+height+padding+margin = 包含块的高度
(2)position=absolute,lt=50%,包含块一定是容器，margin-top/margin-left为负的自身的一半
(3)position=absolute,lt=50%,包含块一定是容器，transform:translate(-50%,-50%)
(4)flex

4.px、em和rem的区别

px：像素，相对长度单位。像素px是相对于显示器屏幕分辨率而言的
em的值并不是固定的，会继承父级元素的字体大小，代表倍数
rem的值并不是固定的，始终是基于根元素<html>的，也代表倍数

5.position的值有哪些

static：默认值。没有定位，元素出现在正常的文档流中
relative：相对定位，相对于其正常位置进行定位
absolute：绝对定位，相对于static定位以外的第一个父元素进行定位
fixed：固定定位，相对于浏览器窗口进行定位

6.display:none与visibility:hidden的区别

区别display:none与visibility:hidden的是：一个占据空间，一个不占据任何空间，在文档渲染时，该元素如同不存在(但依然存在文档对象模型树中)，该元素空间依旧存在是否渲染会触发reflow(回流)，进行渲染只会触发repaint(重绘)，因为没有发现位置变化，不进行渲染；是否是继承属性，元素及其子元素都会消失是继承属性，若子元素使用了visibility:visible，则不继承，这个子孙元素又会显现出

7.CSS中link和@import的区别

link属于XHTML标签，@import完全是CSS提供的一种方式，只能加载CSS；
(1)CSS加载顺序的差别，当一个页面被加载的时候，link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载
(2)兼容性的差别：由于@import是CSS2.1提出的，所以老的浏览器不支持，而link标签无此问题，当使用JavaScript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的

8.什么是响应式设计，响应式设计的基本原理是什么

响应式网站设计是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。基本原理是通过媒体查询，检测不同的设备屏幕尺寸做处理

9.为什么要初始化CSS样式

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异，初始化样式会对SEO有一定的影响

10.CSS3有哪些新特性

(1)实现圆角border-radius，阴影box-shadow，边框图片border-image
(2)对文字加特效text-shadow，强制文本换行word-wrap，线性渐变linear-gradient
(3)实现旋转transform:rotate(90deg)，缩放scale(0.85,0.90)，translate(0px,-30px)定位，倾斜skew(-9deg,0deg)
(4)增加了更多的CSS选择器、多背景、rgba()
(5)唯一引入的伪元素是 ::selection
(6)实现媒体查询@media，多栏布局flex
(7)过渡 transiton 动画animation

11.::before和:after中双冒号和单冒号有什么区别？

单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。(伪元素由双冒号和伪元素名称组成)，双冒号是在之前规范中引入的，用于区分伪类和伪元素

12.CSS优化、提高性能的方法有哪些

(1)移除空的css规则
(2)正确使用display属性
(3)不滥用浮动、web字体
(4)不声明过多的font-size
(5)不在选择符中使用ID标识符
(6)遵守盒模型规则
(7)尽量减少页面重排、重绘
(8)抽象提取公共样式，减少代码量

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 541143263@qq.com