1.input 元素的哪个类型属性将元素的值设置为表示一定范围内的数字？
range (定义用于精确值不重要的输入数字的控件（比如 slider 控件）。)
emile (定义用于 e-mail 地址的字段。)
file (定义文件选择字段和 “浏览…” 按钮，供文件上传。)
data (定义 date 控件（包括年、月、日，不包括时间）。)
2.title与h1的区别
定义：
title：概括了网站信息，可以告诉搜索引擎或者用户关于这个网站的内容主题是什么
h1：问斩主题内容，告诉蜘蛛我们的网站内容主要是什么
区别：
title是显示在网页标题上，h1是显示在网页内容上
title比h1更重要，对seo帮助更大
网站的logo都是用h1标签包裹的
3.b和strong的区别
定义：
b：实体标签，用来给文字加粗的
strong：逻辑标签，用来加强字符语气的
区别：
b标签只有加粗的样式，没有实际含义
strong表示标签内字符比较重要，用以强调
为了符合css3的规范，b尽量少用
4.i与em的区别
定义：
i：实体标签，用来做文字倾斜的
em：表示标签内字符重要，用以强调的
区别：
i只是一个倾斜标签，没有实际含义
em表示标签内字符重要
i更多的用在字体图标上，em用在术语上（医药、生物……）
5.link与@import的区别
link先有，后有@import（兼容性link比@import强）
加载顺序有区别，浏览器先加载的是link标签，后加载@import
6.title与alt区别
title：鼠标移入到图片显示的值
alt：图片无法加载时显示的值
在seo的层面上，蜘蛛抓取不到图片的内容，使用前端在写img标签的时候为了增加seo效果要加入alt属性来描述这张图是什么内容或关键词
7.png、jpg、gif、webp这些图片格式解释一下分别什么时候用
png：无损压缩，尺寸体积要比jpg/jpeg大，适合做小图标
jpg：采用压缩算法，有一点失真，比png体积要小，适合做中大图片
gif：一般是做动图的
webp：同时支持有损或无损压缩，相同质量的图片，webp具有更小的体积，兼容性不是特别好
8.line-height与height区别
line-height是每一行文字的高，如果文字换行则整个盒子高度会增大（行数 * 行高）
height是一个固定值，就是整个元素的高度
9.CSS选择符有哪些，哪些属性可以继承
CSS选择符：
通配（ * ）
id选择器（#）
类选择器（.）
标签选择器（div、p、h1……）
相邻选择器（+）
后代选择器（ul li） （如果ul li + li{}表示第一个li排除）
子元素选择器（>）
属性选择器（a[href]）
CSS属性继承：
文字系列：font-size color line-height text-align...
10.CSS优先级算法如何计算
优先级比较 !import > 内联样式 > id > class > 标签 > 通配
CSS权重计算
内联样式 权重值：1000
id选择器 权重值：100
类选择器 权重值：10
标签、伪类选择器 权重值：1
通配 权重值：0\
11.对BFC规范的理解
BFC：块级格式化上下文
BFC的原则：如果一个元素具有BFC，那么内部元素再怎么弄都不会影响到外面的元素
如何触发BFC：
float的值非none
overflow的值非visible
display的值为inline-block table-cell...
position的值为absolute、fixed\
12.position有哪些值，分别是根据什么定位的
static （默认）没有定位
fixed 固定定位 相对于浏览器窗口进行定位
relative 相对于自身定位，不脱离文档流
absolute 相对于第一个有relative的父元素，脱离文档流
relative和absolute区别：
relative不脱离文档流，absolute脱离文档流
relative相对于自身，absolute相对于第一个有relative的父元素
relative如果有left、right、top、bottom，但最终生效的只有left、top
absolute有left、right、top、bottom，都会生效\
13.什么是CSS reset
reset.css 是一个css文件，用来重置css样式
Normalize.css为了增强跨浏览器渲染的一致性，一个CSS重置样式库
14.css sprite是什么，有什么优缺点
雪碧图（精灵图），把多个小图标合并成为一张大图片
优点：减少了http请求的次数，提升了性能
缺点：维护性比较差（图片位置进行修改或内容宽高修改）
15.display:none与visibility:hidden区别
占用位置的区别：
display：none 不占位置
visibility:hidden 虽然隐藏了，但是占位置
重绘和回流的区别：
两者都会产生重绘
display：none 还会产生一次回流
产生回流一定造成重绘，但是重绘不一定会造成回流
产生回流的情况：改变元素的位置(left、top...)显示隐藏元素...
产生重绘的情况：样式改变(background、color...)
16.opacity和rgba区别
共同性：实现透明效果
opacity取值范围0到1之间，0表示完全透明，1表示不透明
rgba R表示红色，G表示绿色，B表示蓝色，取值可以在正整数或百分比，A表示透明度取值0到1之间
区别：opacity会继承父元素的opacity属性，而rgba设置的元素的后代元素不会继承不透明属性
17.延迟加载JS有哪些方式
延迟加载：async、defer
defer：等html全部解析完成才会执行js代码，顺次执行js脚本
async：和html解析同步，谁先加载完谁先执行，不是顺次执行js脚本
18.JS数据类型有哪些
基本类型：string、number、boolean、undefined、null、symbol
引用类型：object
19.null和undefined的区别
null是一个表示“无”的对象（空对象指针），转为数值时为0；undefined是一个表示“无”的原始值，转为数值为NaN
20.网络七层模型
物理层 数据链路层 网络层 传输层 会话层 表示层 应用层
21.http与https的区别
http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议 使用不同的链接方式，端口也不同，一般而言，http协议的端口为80，https的端口为443 http的连接简单，是无状态的，https协议是由SSL+HTTP协议构建的，可进行加密传输，身份认证的网络协议，比http协议安全
22.对语义化的理解？
语义化的优点： 代码结构清晰，易于阅读，利于开发和维护 提高用户体验，在样式加载失败是，页面结构清晰 方便其他设备解析（如屏幕阅读器）根据语义渲染网页 有利于搜索引擎优化（SEO），搜索引擎爬虫会根据不同的标签来赋予不同的权重
23.如何优化网站性能？
一、减少HTTP请求次数
- 使用精灵图，通过CSS background 属性来访问图片内容，还可以减少图片总字节数
- 合并CSS和JS文件，利用webpack打包工具可以在发布前将多个CSS或者多个JS合并成一个文件
- 采用懒加载，等到用户操作真正需要的时候立即加载出内容 二、控制资源文件加载优先级 浏览器在加载HTML内容时，是将HTML内容从上至下依次解析，解析到link或者script标签就会加载href或src对应链接内容，为了第一时间展示页面给用户，就需要将CSS提前加载，不要JS加载影响，一般情况下都是CSS在头部，JS在底部
三、利用浏览器缓存 浏览器缓存是将网络资源存储在本地，等待下次请求该资源是，如果资源已经存在就不需要服务器重新请求该资源，直接在本地读取该资源
四、减少重排（reflow） 如果需要DOM操作时添加样式，尽量使用增加class属性，而不是通过style操作样式
五、减少DOM操作
六、图标使用IconFont替换
24.vue-router的两种模式？
hash模式和history模式 hash模式在路由加载的时候会自带# history模式不带#，但是当我们启用history模式的时候，由于我们的项目是一个单页面应用，使用路由跳转的时候，就会出现访问不到静态资源而出现404的情况，这个时候就需要服务端增加一个覆盖所有情况的候选资源：如果URL匹配不到任何静态资源，则应该返回同一个index.html页面
