HTML部分：

1.html语义化标签的理解seo优化

语义化简单的说就是用正确的含义的标签做正确的事eg：头部：header 导航：nav等，语义化的优点是易于修改和维护，支持无障碍阅读，搜索引擎友好，方便seo，面向未来的 HTML，浏览器在未来可能提供更丰富的支持。

2.seo优化

三剑客：<title> 标签、<meta name="description"> 标签和 <meta name="keywords"> 标签。顾名思义，它们分别代表当前页面的标题、内容摘要和关键词

robots文件告知搜索引擎可以抓取的内容和相关页面

sitemap文件辅助搜索引擎访问网站的工具（协议）

3.说一说你对Doctype的理解

DOCTYPE标签是一种标准通用标记语言的文档类型声明，它的目的是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义（DTD）来解析文档。 1.​声明必须处于HTML文档的头部，在标签之前，HTML5中不区分大小写 ​2.声明不是一个HTML标签，是一个用于告诉浏览器当前HTMl版本的指令 3.现代浏览器的html布局引擎通过检查doctype决定使用兼容模式还是标准模式对文档进行渲染，一些浏览器有一个接近标准模型。 4.在HTML4.01中<!doctype>声明指向一个DTD，由于HTML4.01基于SGML，所以DTD指定了标记规则以保证浏览器正确渲染内容 5.HTML5不基于SGML，所以不用指定DTD

4.h5新增属性和标签

0.增强型表单color

类型	描述
color	主要用于选取颜色
data	选取日期
datetime	选取日期(UTC时间)
datetime-local	选取日期（无时区）
month/week/time	选择一个月份/ 选择周和年/ 选择一个时间
email	包含e-mail地址的输入域
number	数值的输入域
url	url地址的输入域
tel	定义输入电话号码和字段
range	一个范围内数字值的输入域
search	用于搜索域

1.表单属性：

属性	描述
autofocus	自动地获得焦点
multiple	可选择多个值
required	规定不能为空
placehoder	输入框默认提示文字
required	要求输入的内容是否可为空
pattern	述一个正则表达式验证输入的值
min/max	设置元素最小/最大值
step	为输入域规定合法的数字间隔、
height/wdith	用于image类型<input>标签图像高度/宽度

2.连接属性：size target 超链接 3.defer:加载完脚本后并不执行，而是等整个页面加载完之后再执行 4.async:加载完脚本后立刻执行，不用等整个页面都加载完，属于异步执行。 5.多媒体标签 video audio source 等多媒体标签，还有时间time等新标签。 6.其它标签

• header：定义文档的页眉 头部
• nav：定义导航链接的部分
• footer：定义文档或节的页脚 底部
• article：定义文章。
• section：定义文档中的节（section、区段）
• aside：定义其所处内容之外的内容 侧边(还有很多)

7.h5新增api localStorage：永久储存，多窗口共享，最大20mb sessionStorage： 生命周期为关闭浏览器窗口，关闭当前窗口数据存储失效；可以在同一窗口下访问，不可以多窗口共享，数据大小为5mb 新增dom操作document.querySelector("选择器"); document.querySelectorAll('选择器'); 新增class操作可以删除替换class等操作

8.WebSocket WebSocket协议为web应用程序客户端和服务端之间提供了一种全双工通信机制。 特点： （1）握手阶段采用HTTP协议，默认端口是80和443 （2）建立在TCP协议基础之上，和http协议同属于应用层 （3）可以发送文本，也可以发送二进制数据。 （4）没有同源限制，客户端可以与任意服务器通信。 （5）协议标识符是ws（如果加密，为wss），如ws://localhost:8023

9.webworker（html5新特性） Web Worker 的作用，就是为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行。在主线程运行的同时，Worker 线程在后台运行，两者互不干扰。等到 Worker 线程完成计算任务，再把结果返回给主线程。这样的好处是，一些计算密集型或高延迟的任务，被 Worker 线程负担了，主线程（通常负责 UI 交互）就会很流畅，不会被阻塞或拖慢。 Worker 线程一旦新建成功，就会始终运行，不会被主线程上的活动（比如用户点击按钮、提交表单）打断。这样有利于随时响应主线程的通信。但是，这也造成了 Worker 比较耗费资源，不应该过度使用，而且一旦使用完毕，就应该关闭。 10.Canvas元素 Canvas 元素用于在网页上绘制图形，该元素标签强大之处在于可以直接在HTML上进行图形操作。

5.Canvas和SVG图形的区别是什么

SVG先绘制后记忆，换句话说任何使用SVG绘制的形状都能被记忆和操作，浏览器可以再次显示 Canvas则是先绘制后忘记，一旦绘制完成你就不能访问像素和操作它 SVG对于创建图形例如CAD软件是良好的，一旦东西绘制，用户就很难操作它 Canvas则用于绘制和遗忘类似动漫和游戏的场画。为了之后的操作， SVG需要记录坐标，所以比较缓慢。因为没有记住以后事情的任务，所以Canvas更快。

6.src与href的区别

href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。 src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。

CSS部分

7.css选择器和权重

类型	权重
! important	无穷
行间样式	1000
id	100
class/属性/和伪类	10
标签选择器	1
通配符	0

如果优先级相同，则最后出现的样式生效； 继承得到的样式的优先级最低； 通用选择器（*）、子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以它们的权值都为 0 样式表的来源不同时，优先级顺序为：内联样式 > 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式。

8.哪些属性可以继承

不可继承的: baidisplay、dumargin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、 bottom、float、clear、table-layout、vertical-align、page-break-after、 page-bread-before和unicode-bidi。

可继承的： 所有子元素可继承：visibility和cursor、z-index。 内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction。 块状元素可继承：text-indent和text-align。 列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。 表格元素可继承：border-collapse。

9.BFC机制

请看详解BFC（特点、作用、条件）

10.盒模型

css3有两种盒模型：标准盒子模型、IE盒子模型，通过box-sizeing属性来修改元素的盒模型，标准盒模型和IE盒模型的区别在于width和height时的范围不同。 在 标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。 IE盒子模型中，width 和 height 指的是内容区域+border+padding的宽度和高度。 box-sizing有那些值，有什么区别？ box-sizing：border-box表示盒模型基于IE的盒模型，width和height决定盒模型的content区、padding区和border区。 box-sizing：content-box表示盒模型基于标准盒模型，width和height只决定盒模型的content区 box-sizing：inherit表示继承自父元素。

11.css模块化开发

css模块化是指的是把页面分割成不同的组成部分，这些组成部分没有依赖关系，我们要达到的目的是，当我们去修改其中一部分css时，不会对其他部分产生意料之外的影响。 所有的预处理器（比如Sass或者LESS）都提供了把分散的CSS文件合并成一个文件的功能。预处理器会从base.scss中引入基础样式，并从每个模块文件引入相应的模块样式，然后输出一个包含所有样式的样式表文件。这样每个模块都单独拥有一个便于维护的文件。 css预处理起，一般来说他们是基于css扩展了一套属于自己的dsl，来解决我们书写css时难以解决的问题：

• 语法不够强大，无法嵌套书写导致模块化开发中需要书写很多重复的选择器
• 没有变量和合理样式复用机制，是得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护。

所以预处理器的目标就是：提供css缺失的样式层复用机制，减少冗余代码，提高样式代码的可维护性。

12.水平垂直居中

/*已知容器的宽高 设置层的外边距*/
div {
 position: relative;		/* 相对定位或绝对定位均可 */
 width:500px;
 height:300px;
 top: 50%;
 left: 50%;
 margin: -150px 0 0 -250px;     	/* 外边距为自身宽高的一半 */
}
 
/*不知宽高-水平垂直居中 利用 `transform` 属性*/
div {
 position: absolute;		/* 相对定位或绝对定位均可 */
 width:500px;
 height:300px;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}
div{
	position: fixed;
	width:500px;
 	height:300px;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}
/*利用flex布局*/
.container {
 display: flex;
 align-items: center; 		/* 垂直居中 */
 justify-content: center;	/* 水平居中 */
}
 
/*让绝对定位的div居中*/
div {
 position: absolute;
 width: 300px;
 height: 300px;
 margin: auto;
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
}

13.css3中新增加的属性

transform属性应用于元素的2d到3d的转换，这个属性允许你将元素，旋转，缩放，倾斜等 transition属性可以设置元素的过渡效果，四个属性transition-property：指定CSS属性的name，transition效果， transition-duration： 指定效果需要多少秒或者毫秒才能完成，transition-timing-function：指定transition效果的转速曲线 transition-delay：指定transition效果开始的时候 animation动画属性 通过@keyframes xxx来定义一个动画 然后在需要添加动画的盒子里面使用animation:xxx 2s; 2s是指的动画执行的时间长度

14.布局

1.标准文档流（padding+margin+负margin）+浮动float+定位 定义：标准文档流就是元素排版过程中，元素会默认的自动从左往右，从上往下的 流式排列方式。前面内容发生了变化，后面的内容位置也会随着发生变化。 2.百分比布局(流式布局): px单位 用 %代替, 占父级元素的百分比 定义：流式布局，就是百分比布局，也称非固定像素布局，通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。不过需要注意的是需要定义页面的最大和最小支持宽度。 3.flex弹性布局: 主轴 辅助轴的几个属性 定义：Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以使用flex布局 采用flex布局的元素，称为flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为flex项目，简称项目 采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目“。 容器默认存在两根轴：水平主轴和垂直交叉轴，主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫main end 交叉轴的开始位置叫做cross start 结束叫做cross end。

它有六种属性可以设置在容器上

• flex-direction： 绝对主轴的方向 默认水平方向，从左侧开始
• flex-wrap：决定容器内是否换行，默认不换行
• flex-flow：是flex-direction和flex-wrap的缩写
• justify-content：定义了主轴的对齐方式
• align-items：定义了在交叉轴上的方式
• align-content：定义了多跟轴线的对齐方式

参数有这些

flex-direction: row | row-reverse | column | column-reverse; flex-wrap: nowrap | wrap | wrap-reverse; flex-flow: ; justify-content: flex-start | flex-end | center | space-between | space-around; align-items: flex-start | flex-end | center | baseline | stretch; align-content: flex-start | flex-end | center | space-between | space-around | stretch;

栅格布局 框架中的类名来替代 如element bootstrap等…

15.请解释一下为什么需要清除浮动？清除浮动的方式

清除浮动是为了清除使用浮动元素产生的影响。浮动的元素，高度会塌陷，而高度的塌陷使我们页面后面的布局不能正常显示。 1、父级div定义height； 2、父级div 也一起浮动； 3、浮动元素的父级div定义伪类:after , clear：both用来闭合浮动的

&::after,&::before{
  content: " ";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}

4.给父元素添加overflow:hidden;属性。

js基础

16.变量数据类型及检测

基本+引用 JavaScript共有八种数据类型，分别是Undefine，null，boolean，number，string，object，bigint，symbol。 其中bigint和symbol是es6新增的数据类型：

• Symbol代表创建后独一无二且不可变的数据类型，他主要是为了解决可能出现的全局变量冲突的问题。
• Bigint是一个数字类型的数据，他可以表示任意精度格式的整数，使用Bigint可以安全的存储和使用大整数。

这些数据可以分为原始数据类型和引用数据类型：可以根据存储的位置不同分为：

• 栈：原始数据类型（undefined、 null、 Boolean、 number、 string）
• 堆： 引用数据类型（对象 数组和函数） 这两种数据的区别主要在于存储的位置不同：
• 原始数据类型直接存储在栈中简单的数据段，占据空间小，大小固定，属于被频繁使用的数据
• 引用数据存在在堆（heap）中的对象，占据空间大，大小不固定。如果存在栈中，将会影响程序的运行性能；引用数据在栈中存储了指针，该指针会指向堆中改实体的起始地址。当解释器寻找引用值时，会首先检索其中在栈的地址，然后从地址中获取堆中的实体。

检测方式

1.typeof

console.log(typeof true); // boolean 
console.log(typeof 'str'); // string 
console.log(typeof []); // object 
console.log(typeof function(){}); // function 
console.log(typeof {}); // object 
console.log(typeof undefined); // undefined 
console.log(typeof null); // object
//其中对数组对象还有null都会判断为object 

2.instanceof instanceof可以正确判断对象的类型，内部运行机制是判断在其原型链中是否能找到该类型的原型。instanceof只能正确判断引用数据类型，而不能判断基本数据类型。instanceof运算符可以用来测试一个对象在其原型链上是否存在一个构造函数的prototype属性。instanceof的基本逻辑如下 3.constructor constructor有两个作用，一个是判断数据的类型，二是对象实例通过constructor对象访问他们的构造函数。但是创建一个对象然后去改变他的原型，constructor就不能用来判断数据类型了 4.Object.prototype.toString.call() Object.prototype.toString.call()使用Object对象的原型方法toString来判断数据类型，但是同样是检测对象obj调用toString方法，obj.toString的结果和Object.prototype.toString.call的结果是不一样的。这是因为toString是Object的原型方法，Array，function等类型作为Object的实例，都重写了toString方法，不同对象类型的toString方法，根据原型链的知识，调用的是重写之后的方法，而不是调用object上的toString，所以obj.toString是不能的带其对象类型的。

17.JavaScript原型，原型链 ? 有什么特点？

稍等待还会有

JavaScript中是使用构造函数来创建一个新对象的，每个构造函数都具有prototype这个属性，这个属性值是一个对象，他包含了由该构造函数所有实例共享的属性和方法。使用构造函数创建一个新对象的时候，这个对象里面有一个指针，这个指针将指向构造函数的prototype属性对应的值，构造函数的prototype属性对应的值，会通过__proto_这个属性指向构造函数。 当访问一个对象的属性时，如果这个对象内部不存在这个属性，呢么它将会去他的原型对象里面去寻找这个属性，这个对象又会有自己的原型，会一直找下去，直到object.prototype，object.prototype将会指向null，一般来说原型链的尽头是null。 JavaScript对象是通过引用来传递的，创建的每个新对象实体中并没有一份属于自己的副本，所以修改原型师，与之相关的对象也会继承这个一改变。

18.This对象的理解。

this的指向简单易懂

19.函数定义, 调用方式

1.函数的定义

    //式函声明 
    function fn(){}  
    //这种函数定义方式需要显式的指定函数名称，在代码执行前就被解释器加载到作用域中，这个特性可以让我们在函数定义之前就调用该函数。我们可以通过代码来验证这一点。
    
    //函数表达式 
    let fn = function(){} 
    //数表达式必须先声明，再调用。通过函数直接量生成的函数，函数名称可以省略，此时就是一个匿名函数。如下例所示：这样可以使代码更为紧凑。函数定义表达式特别适合用来定义那些只会用到一次的函数。
    
	//箭头函数 
	()=>{} 
    let fn = ()=>{} 
    //如果{}内容只有一行{}和return关键字可省,
 
    //构造函数 
    let fn = new Fcuntion()
    //声明Fcuntion为一个对象。使用Function构造函数定义函数的方式是一个函数表达式,这种方式会导致解析两次代码，影响性能。第一次解析常规的JavaScript代码，第二次解析传入构造函数的字符串

20.call apply bind 区别与应用

参考：call apply bind 区别与应用

21.作用域, 作用域链闭包

参考：深度理解请看 经典面试题：循环中使用闭包解决 var 定义函数的问题这个运行的结果会输出一堆 ，原因：for循环中用var来申明变量i，此时var存在变量提升问题，并且6次循环中全都共用一个变量，所以当setTimeout中的延迟函数开始执行时，循环已经结束，此时i=6，所以会打印出6个6。

for (var i = 1; i <= 5; i++) {
    setTimeout(function timer() { 
        console.log(i) 
    }, i * 1000) 
}
//第一种方法解决
for (let i = 1; i <= 5; i++) {
    setTimeout(function timer() { 
        console.log(i) 
    }, i * 1000) 
}
// /第一种方法闭包
for(var i=1;i<=5;i++) {
  (function(j){
    setTimeout(() => {
       console.log(j)
    }, j* 1000)
  })(i)
}
// 第三种方法定
for(var i=1;i<=5;i++) {
  setTimeout((j) => {
    console.log(j)
  }, i* 1000, i)
}

22.null，undefined 的区别？

null表示一个对象是“没有值”的值，也就是值为“空”； undefined 表示一个变量声明了没有初始化(赋值)； undefined不是一个有效的JSON，而null是； undefined的类型(typeof)是undefined； null的类型(typeof)是object； Javascript将未赋值的变量默认值设为undefined； Javascript从来不会将变量设为null。它是用来让程序员表明某个用var声明的变量时没有值的。

23.JS 深浅拷贝

参考：JS 深浅拷贝

24.函数上下文, this指向

参考：执行上下文this指向简单易懂

25.js的运行机制, 事件队列和循环

参考：js的运行机制

26.js对象遍历方法

参考：js对象遍历总结

27.防抖和节流

参考：防抖和节流的区别和应用

浏览器

28.问题：前端页面有哪三层构成，分别是什么？作用是什么？

分成：结构层、表示层、行为层。 结构层（structural layer） 由 HTML 或 XHTML之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P标签表达了这样一种语义：“这是一个文本段。” 表示层（presentation layer） 由 CSS 负责创建。 CSS对“如何显示有关内容”的问题做出了回答。 行为层（behaviorlayer） 负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM主宰的领域

29.你知道TCP协议、IP协议、HTTP协议分别在哪一层吗？

TCP协议在传输层，IP协议在网络层，HTTP协议在应用层。

30.请说出三种减少网页加载时间的方法

1.服务器角度 采取CDN加速 开启gzip压缩 允许使用强缓存或协商缓存 增加服务器带宽 2.客户端角度 合理组织CSS、JavaScript代码位置 减少DOM操作、添加事件委托 部分操作可设置防抖和节流 对于可预见的操作采取preload或prerender的预加载 对于图片可以懒加载 合并CSS图片（精灵图/雪碧图） 减少使用iframe 资源优化打包角度 3.资源优化打包角度 使用打包工具将Js文件、CSS文件和静态文件进行恰当打包处理。

31.什么情况下会遇到跨域问题

跨域问题来自于浏览器的同源策略，即当协议、域名、端口号任意一个不同时，都会引发跨域问题。 jsonp、CORS可以用来解决跨域问题

未完持续更新