【HTML篇】

1. HTML语义化的目的是什么？简述一下你对HTML语义化的理解

（1）根据内容的语义化，选择合适的标签。便于开发人员阅读和写出更优雅的代码，也便于团队后期的开发和维护；

（2）在没有CSS，或者CSS尚未加载的时候，页面也能够呈现出很好的内容结构、代码结构（如标题和正文分开）；

（3）有利于搜索引擎优化。搜索引擎依赖于标签来确定上下文和各个关键字的权重，语义化标签，有助于爬虫获取到更多有效的信息

2.HTML5有哪些新标签、新特性？

（1）canvas 标签，可以实现使用 javascript 在网页上绘制图像，如坐标轴、折线图；

（2）支持 svg（可伸缩矢量图形），svg 图像在放大的时候图像质量不会降低；

（3）新增 Geolocation API，可以获取用户的地理位置；

（4）新增 Local Storage（本地离线存储），使得 web 应用程序可以在本地浏览器中长期存储数据，关闭浏览器后数据不会删除；

3.href、url、src 的区别是什么？

（1）href，标签属性，超文本引用，用来建立当前文档和引用文档之间的链接。可以是绝对、相对URL。常用于 <link> <a> 等标签。如：

<img src="./images/test.jpg" alt="测试图片” />
// 告诉浏览器，在此处嵌入一张图片，图片地址是xxx.jpg
（3）url，值类型，统一资源定位符，描述互联网资源的位置及访问方法，也就是网址，组成：协议类型:主机host.域名domain:端口port/路径path/资源名称filename

https:baike.baidu.com/item/hello url 分为 “绝对url” 和 “相对url” 。

4、<img>的title和alt有什么区别?

1、alt： 图片加载失败时，显示在网页上的替代文字
2、title： 鼠标放在上面时显示的文字
3、alt 是必要属性，title 非必要

【CSS篇】

1.css水平或者垂直居中的写法，有哪些？能写多少写多少

一般用到最多的就是文本居中：text-align: center;
margin:0 auto
line-height: height;//行高设置与高度一致
flex布局，给父元素添加display: flex，
主轴对齐方式使用justify-content：center侧轴对齐方式目标：使用 align-items

2.清除浮动的几种方式，什么情况下会触发BFC？

3、行内元素和块级元素有什么区别？

行内元素

1、设置宽高无效
2、对margin仅设置左右方向有效，上下无效；padding上下左右都有效，会撑大空间
3、不会自动进行换行

块级元素

1、能够识别设置宽高
2、margin和padding的上下左右均对其有效
3、独占一行

行内块元素

能够识别设置宽高
margin和padding的上下左右均对其有效
不会自动进行换行

4、CSS样式覆盖规则

!important > 内联样式 > id选择 > （class选择 = 伪类选择） > (标签选择 = 伪元素选择)

5、介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？

盒子大小 = content + border + padding + margin  // 自己带入一下上下左右的数据
盒子的宽等于content的宽
盒子的高等于content的高

6、::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用

单冒号 ':' 表示伪类（即一种行为后的样式）
双冒号 '::' 表示伪元素（即不存在dom结构中的元素，但页面依然可以呈现出效果）
::before 在元素之前添加一个伪元素
::after 在元素之后添加一个伪元素

7、重绘和回流(重排)

当 Render Tree 中部分或者全部元素的尺寸、结构、布局等发生改变时，浏览器就会重新渲染部分或全部文档的过程称为回流。
由于节点(元素)的样式的改变并不影响它在文档流中的位置和文档布局时(比如：color、background-color、outline等), 称为重绘。
重绘不一定引起回流，而回流一定会引起重绘。

【JS篇】

1、JavaScript中的==与===

“==” 的比较规则

先检查两个操作数的数据类型是否相同
如果相同，则比较两个数是否相等
如果不同，则先将两个数转换为相同数据类型，再进行比较
js自动进行了一次数据类型转换，将字符串、数组、布尔值转为数字，再进行比较。

“===”的比较规则

先检查两个操作数的数据类型是否相同
若不同，直接返回false
若相同，则比较二者是否相等
跟==不同，当数据类型不同时，不进行数据类型转换，直接返回false

2、null和undefined

undefined表示声明了变量，但未赋值
null表示声明的变量赋值了，但赋值为空
0是一个数值
' '表示长度为0的字符串

3、闭包是什么？

闭包的实质是因为函数嵌套而形成的作用域链
闭包的定义即：函数 A 内部有一个函数 B，函数 B 可以访问到函数 A 中的变量，那么函数 B 就是闭包

4、setInterval和setTimeout的区别

setinterval是重复执行，第一次执行会延迟
setTimeout是延迟执行，只执行一次
setTimeout 结合递归函数，能模拟 setInterval 重复执行
clearTimeout 清除由 setTimeout 创建的定时任务

【node篇】

1、说几条 Web 前端优化策略

减少 HTTP 请求数
把css链接文件在head中
把js链接文件在body中
合并css/js
数据的懒加载

2、localstorage,sessionstorage和cookie相同和不同？

localStorage：

生命周期永久生效，除非手动删除，
可以多窗口共享，
以键值对的方式存储

sessionStorage：

生命周期为关闭浏览器窗口，
可以多窗口共享，
以键值对的方式存储

3、什么是跨域？解决跨域的几种方式？

浏览器从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一个不同，就是跨域

jsonp跨域
Nginx反向代理
cros

5.简述浏览器加载和渲染过程？

【vue篇】

1、请讲述下VUE的MVVM的理解？

MVVM 是 Model-View-ViewModel的缩写，即将数据模型与数据表现层通过数据驱动进行分离，从而只需要关系数据模型的开发，而不需要考虑页面的表现，具体说来如下：

Model代表数据模型：主要用于定义数据和操作的业务逻辑。

View代表页面展示组件（即dom展现形式）：负责将数据模型转化成UI 展现出来。

ViewModel为model和view之间的桥梁：监听模型数据的改变和控制视图行为、处理用户交互。通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉

在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的，因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。

2、v-if和v-show的区别？

共同点：都能控制元素的显示和隐藏；

不同点：

实现本质方法不同，v-show本质就是通过控制css中的display设置为none，控制隐藏，只会编译一次；
v-if是动态的向DOM树内添加或者删除DOM元素，若初始值为false，就不会编译了。而且v-if不停的销毁和创建比较消耗性能。

如果要频繁切换某节点，使用v-show(切换开销比较小，初始开销较大)。如果不需要频繁切换某节点使用v-if（初始渲染开销较小，切换开销比较大）。

常见前端面试题整理（带答案）相关推荐

最新前端面试题整理和答案（全）一直更新
最新前端面试题整理和答案(全) 参考地址:https://blog.csdn.net/wdlhao/article/details/79079660 javascript: JavaScript中如何 ...
软件测试之python面试题_常见Python面试题整理带答案
总结了一些经常遇到的Python面试题,让我们一起撸起来. 01.求出1-100之间的和 # coidng:utf-8 a = 0 for i in range(0,100): a += (i+1) ...
前端面试题整理汇总（一）
前端面试题整理汇总(一) 优才网关于前端面试题,优优之前推荐过,如下,点击即可查看: 5个经典的前端面试问题 2016年十家知名公司前端面试经验总结前端面试会问哪些问题? 前端开发面试题汇总[HT ...
前端面试题整理2020
前端面试题整理2020 1.一些开放性题目 1.自我介绍:除了基本个人信息以外,面试官更想听的是你与众不同的地方和你的优势. 2.项目介绍 3.如何看待前端开发? 4.平时是如何学习前端开发的? 5. ...
想进互联网大公司？那这些题你总得会吧？前端面试题2022及答案前端面试题2022及答案
长文噩梦预警! 如果你想进大型互联网公司本文掌握程度90%~100% 想进中大企业掌握程度70%~85% 想进小企业掌握程度45%~80% 想家里蹲掌握程度:undefined 咳咳,如果你 ...
前端面试题2021及答案
身为三本的我就是凭借这些前端面试题拿到百度京东offer的,前端面试题2021及答案... 此文转载自:https://blog.csdn.net/qq_33277654/article/detail ...
前端面试题整理——（第一弹 HTML和CSS）
文章目录前端面试题整理--(第一弹 HTML和CSS) 1. 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? 2. 每个HTML文件里开头都有个很重要的东西,Doctype,知道这是干什 ...
前端面试题整理-ing---kalrry
前端面试题整理-ing---kalrry 前言一.Html/Css面试题 1. img中的alt和title的区别 2. rem/em/vw的区别 3. BFC 是什么 4. @media all ...
前端面试题整理（定期更新）
前言因为面试的原因,最近又开始关注前端面试题,浏览过网上很多面试题集合,有很多小伙伴整理的很全面,但是我发现其中有很多技术点在当下已不再流行,而面试题一般都是映射开发中常遇到的一些技能和问题,再结合 ...

常见前端面试题整理（带答案）

【HTML篇】

1. HTML语义化的目的是什么？简述一下你对HTML语义化的理解

2.HTML5有哪些新标签、新特性？

3.href、url、src 的区别是什么？

4、<img>的title和alt有什么区别?

【CSS篇】

1.css水平或者垂直居中的写法，有哪些？能写多少写多少

2.清除浮动的几种方式，什么情况下会触发BFC？

3、行内元素和块级元素有什么区别？

4、CSS样式覆盖规则

5、介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？

6、::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用

7、重绘和回流(重排)

【JS篇】

1、JavaScript中的==与===

2、null和undefined

3、闭包是什么？

4、setInterval和setTimeout的区别

【node篇】

1、说几条 Web 前端优化策略

2、localstorage,sessionstorage和cookie相同和不同？

3、什么是跨域？解决跨域的几种方式？

【vue篇】

1、请讲述下VUE的MVVM的理解？

2、v-if和v-show的区别？

常见前端面试题整理（带答案）相关推荐

最新文章

热门文章

常见前端面试题整理（带答案）

【HTML篇】

1. HTML语义化的目的是什么？简述一下你对HTML语义化的理解

2.HTML5有哪些新标签、新特性？

3.href、url、src 的区别是什么？

4、<img>的title和alt有什么区别?

【CSS篇】

1.css水平或者垂直居中的写法，有哪些？能写多少写多少

2.清除浮动的几种方式，什么情况下会触发BFC？

3、行内元素和块级元素有什么区别？

4、CSS样式覆盖规则

5、介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？

6、::before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的作用

7、重绘和回流(重排)

【JS篇】

1、JavaScript中的==与===

2、null和undefined

3、闭包是什么？

4、setInterval和setTimeout的区别

【node篇】

1、说几条 Web 前端优化策略

2、localstorage,sessionstorage和cookie相同和不同？

3、什么是跨域？解决跨域的几种方式？

【vue篇】

1、请讲述下VUE的MVVM的理解？

2、v-if和v-show的区别？

常见前端面试题整理（带答案）相关推荐

最新文章

热门文章

6、::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用