目录
1、说说HTML5
2、link标签要放到head之后，script标签要放到body标签结束之前，为什么
3、HTML语义化重要性
4、meta中的viewport干嘛的
5、P标签中的文字如何水平垂直居中
6、怎么将两个span标签在p标签内水平居中
7、子元素父元素不给宽高，怎么垂直水平居中
8、怎么将多列字体大小不同的子元素之间互相居中排列
9、怎么实现移动端适配
10、移动端如何实现0.5px边框
11、如何解决加载css出现不断闪烁空白问题
12、选择器
13、js中的数据类型
14、let var的区别
15、说说你还知道哪些ES6特性
16、原型和原型链
17、说说你是怎么理解闭包的
18、说说数组中你用到的哪些方法
19、利用flat方法如何将多维数组变为一维数组
20说说DOM事件有哪三个
21、stopPropagation preventDefault的区别
22、如何设置localStorage存活一定时间
23、如何实现人为垃圾回收强制delete 设置为null
24、适合字符串转数值型
HTML5新特性
一、语义标签
语义标签使得页面的内容结构化，见名知义
header：定义了文档的头部区域
footer：定义了文档的尾部区域
nav：定义了文档的导航
section：定义了文档中的节
article：定义页面独立的内容区域
aside：定义页面的侧边栏内容
detailes：用于描述文档或文档某个部分的细节
summary：标签包含details元素的标题
dialog：定义对话框比如提示框
二、增强型表单
HTML5拥有多个新的表单input输入类型，这些新特性提供了更好的输入控制和验证
color：用于选取颜色
date：从一个日期选择器选择一个日期
datetime：选择一个日期（UTC时间）
datetimelocal：选择一个日期和时间（无时区）
email：包含email地址的输入域
month：选择一个月份
number：数值的输入域
range：一定范围内数字值的输入域
search：用于搜索域
tel：定义输入电话号码字段
time：选择一个时间
url：url地址的输入域
week：选择周和年
HTML5也新增以下表单元素
datalist：元素规定输入域的选项列表，使用<input>元素的list属性与<datalist>元素的id绑定
Keygen：提供一种验证用户的可靠方法，标签规定用于表单的密钥对生成器字段
output：用于不同类型的输出，比如计算或脚本输出
HTML5新增的表单属性
placehoder属性，简短的提示在用户输入值前会显示在输入域上。即我们常见的输入框默认提示，在用户输入后消失
required属性：是一个boolean属性，要求填写的输入域不能为空
pattern属性：描述了一个正则表达式用于验证input元素的值
min和max属性：设置元素最小值和最大值
step属性：为输入域规定合法的数字间隔
height属性和width属性，用于Image类型的input标签的高度和宽度
autofocus属性，是一个Boolean属性，规定在页面加载时，域自动地获得焦点
multiple属性：是一个boolean属性，规定input元素中可选择多个值
三、视频和音频
HTML5提供了播放音频文件的标准，即使用audio元素
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>control属性供添加播放、暂停和音量控件。
在audio之间需要插入浏览器不支持的audio元素的提示文本
audio元素允许使用多个source元素，source元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件
目前，audio元素支持三种音频格式文件MP3，WAV和org
HTML5规定了一种通过video
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>control提供了播放、暂停和音量控件来控制视频。也可以使用dom操作来控制视频的播放暂停，如play和pause方法
同时video元素也提供了width和height属性控制元素的尺寸，如果设置的高度和宽度，所需的视频空间会在页面加载时保留。如果设置的高度和宽度，所需的视频空间会在页面加载时保留，如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能在加载时保留特定的空间，页面就会根据原始视频的大小而改变。
与标签之间插入的内容时提供给不支持video元素的浏览器显示的
video元素支持多个source元素，元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式（MP4，webm和Ogg）
四、canvas绘图
五、SVG绘图
SVG是指可伸缩的矢量图形
六、地理定位
七、拖放API
八、WebSocket
css文件放在head里面，防止布局错乱，其实是放在任何位置都可行的，之所以推荐放在head标签里是因为浏览器代码解析是从上到下的，如果把css放在底部，当网速慢时，HTML代码加载完成后而css没加载完的话，会导致页面没有样式而难以阅读，所以先加载css样式能让页面正常显示
js放在body最后，防止js加载慢内容不显示
语义化标签，就是让标签有自己的含义，利用本身传达它所包含内容的一些信息，使浏览器和搜索引擎直观的认识标签和属性的用途和作用
过去我们常常采用DIV+CSS的方式布局页面，但DIV标签本身没有独特的含义，这样做的结果就是文档不够清晰，不利于浏览器对页面的读取，在分离CSS样式后，用户体验不友好
所以HTML5新增了很多语义化标签，使文档更具可读性，页面结构更清晰
为什么要用HTML5语义化标签？
1、代码结构清晰，可读性高，减少差异化，便于团队开发和维护
2、在页面没有加载CSS的情况下，也能呈现良好的内容结构，增加用户体验
3、对搜索引擎友好，良好的结构和语义，有助于爬虫抓取更多的有效信息
meta viewport是专为移动设备下显示所设计的，只有检测到移动设备上使用包含meta的文档时，meta标签才会起作用
width表示移动设设备下显示的宽度为设备宽度(device-width)
height表示移动设设备下显示的宽度为设备宽度.
user-scalable表示用户缩放能力, no表示不允许.
initial-scale表示设备与视口的缩放比率
maximum和minimum分别表示缩放的最大最小值, 要注意的是, maximum必须必minimum大.
上面的meta标签就是告诉浏览器, 不要在移动端显示的时候缩放.
html中p标签字体居中的方法。首先P标签给出宽和高，呈块状显示，水平居中属性text-align：center；垂直居中line-height：px；这里的line-height值和你给p标签的高度值是同一个值。
将p标签设置属性：display：block；将它设置成块元素，然后
水平居中
行内元素：如果父元素是块级元素，则给它的父元素设置text-align：center，如果不是，则先把它的父元素设置为块级元素，再给父元素设置text-align：center
块级元素：一、如果宽度确定，给其设置margin 0 ，auto；不限制宽度，这时候默认子元素和父元素一样，这时候需要设置子元素为display：inline-block;即将其转换为行内块级/行内元素，给父元素设置text-align：center；二、使用定位元素；首先设置父元素为相对定位，再设置子元素为绝对定位，设置子元素的left：50%，即让子元素的左上角居中，定宽度，设置绝对子元素的margin-left：-元素宽度的一半px，或者设置transform：translateX-50%；不限宽度：transform：translateX（-50%）三、利用flex布局实现，宽度定不定都可以，只需要给待处理的块级元素的父元素添加display：flex；justify-content：center
垂直居中
单行的行内元素，使其行高等于盒子的高度
定位：top：50%，margin-top：-元素高度的一半px，transform：translateY-50%
flex：align-items：center
水平垂直居中：一、top：0；right：0；bottom：0；left：0；margin：auto
方案二：设置父元素为相对定位，给子元素设置绝对定位，left：50%；top：50%；margin-left-元素宽度的一半px；margin-top：-元素高度的一半px
给子元素设置绝对定位，left：50%；top：50%
transform：translateX（-50%） translateY（-50%）
设置父元素为flex定位，justify-content：center；align-items：center
了解viewport
viewport即视窗，视口，用于显示网页部分的区域，在PC端视口即是浏览器窗口区域，在移动端，为了让页面展示更多的内容，视口的宽度默认不为设备的宽度，在移动端视口有三个概念：布局视口，视觉视窗，理想视窗
布局视窗：在浏览器窗口css的布局区域，布局视口的宽度限制css布局的宽。为了能在移动设备上正常显示那些为PC端浏览器设置的网站，移动设备上的浏览器都会把自己默认的viewport设为980px或其他值，一般都比移动端浏览器可视区域大很多，所以就会出现浏览器出现滚动条的情况
视觉视窗：终端设备显示网页的区域
理想视窗：针对当前设备最理想的展示页面的视窗，不会出现横向滚动条，页面全部展现在视窗内，理想视窗也就是终端屏幕的宽度
viewport详细设置
通过设置viewport可以设置页面大小，通过meta标签可以设置viewport信息，代码如下：
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-sacle=1, maximum-scale=1" >
viewport需要搭配如下几个属性使用：
width：定义视口的宽度，单位为像素
height：定义视口的高度，单位为像素
initial-scale：定义网页初始缩放值
maximum-scale：定义缩放最大值
user-scaleable：定义用户是否可以缩放
适配方案
将页面的宽度设置为设置的视窗宽度后，即可进行移动端适配工作了
从适配的目的是在屏幕大小不同的终端设备拥有统一的界面，让拥有更大屏幕的终端展示更多的内容，从上面两个角度出发，核心思路是页面内容充满整个视窗
1、rem布局
rem是CSS3新增的一个相对单位，它以HTML元素的font-size为比例：
/* 设置html元素的字体大小为 16px，即 1rem = 16px */
html {
font-size: 16px;
}
/* 设置box元素宽 160px，10rem = 160px */
.box {
width: 10rem; /* 160px */
}
修改HTML元素的字体大小可以成比例的调整以rem为单位的属性，通过这一特性，我们可以实现将视窗按一定比例划分为一份一份的，当页面内元素刚好分完所有的分数，页面内容即充满整个视窗且无横向滚动条
以宽度为750像素的设计稿为例，有两个元素，一个占550个像素，另一个占750个像素：
// ...
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div class="w-550px"></div>
<div class="full"></div>
<style>
*{
padding: 0;
margin: 0;
}
.w-550px {
width: 550rem;
height: 100px;
background-color: rgb(209, 255, 240);
}
.full {
width: 750rem;
height: 100px;
background-color: rgb(195, 200, 199);
}
</style>
<script>
function setRem() {
// 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改
const scale = document.documentElement.clientWidth / 750;
document.documentElement.style.fontSize = scale + 'px';
}
setRem();
window.onresize = setRem;
</script>
页面伸缩，网页布局也会进行伸缩。运行效果如下：
目前，除了IE8和更早版本外，所有浏览器均已经支持rem
2、VW/VH布局
vw/vh方案与rem方案类似，都是将页面分成一份一份的，只不过vw/vh是将页面分成100份，1vw=device-width/100
像素是屏幕上显示最小的单位，在一个1080p的屏幕上，它的像素数量是1920*1080，即横边有1920个像素，而竖边有1080个
像素本身有大小，如果一个像素越小，那么在同样大小的屏幕上，需要的像素点就越多，像素就越密集
一、直接设置0.5px
如果我们直接设置0.5px，在不同的浏览器会有不同的表现
二、使用scale缩放
<style>
.hr.scale-half {
height: 1px;
transform: scaleY(0.5);
}
</style>
<p>1px + scaleY(0.5)</p>
<div class="hr scale-half"></div>线性渐变linear-gradient
boxshadow
选择器有：
1、通用选择器（如：*，即选择所有元素）
2、标签选择器（如：body，div，p，ul，li）
3，ID选择器
4、类选择器
5，后代选择器，如#head .nav ul li
6,子元素选择器（如：div>p)
7,伪类选择器（就是链接样式a元素的伪类，4中不同的状态：link，visited，active，hover）
8、伪元素选择器
！important>行内样式>ID选择器>类选择器>标签>通配符>继承>浏览器默认属性
基本数据类型：undefined、null、Boolean、number、string。基本数据类型的访问是按值访问的。基本类型的值是不可变的，任何方法都不能改变基本类型的值，比如对一个字符串调用投UpperCase方法，原始的字符串并不会发生改变，而会返回一个新的字符串。
基本类型的比较是值的比较
基本类型的变量是存放在栈区的，栈区包括了变量的标识符和变量的值
引用类型：Object、Array、function、date
引用类型的值是可变的，可以为引用类型添加属性和方法，也可以删除其属性和方法
引用类型的存储需要内存的栈区和堆区（堆区指内存里的堆内存）共同完成，栈区内存保存变量标识符和指向堆内存中该对象的指针，也可以说是该对象在堆内存的地址。
引用类型的比较时引用的比较,就是比较两个对象的堆内存中的地址是否相同
var与let的区别
（1）作用域
用var声明的变量的作用域是它当前的执行上下文，即如果是在任何函数外面，则是全局执行上下文，如果在函数里面，则是当前函数执行上下文。换句话说，var声明的变量的作用域只能是全局或者整个函数块的。
而let声明的变量的作用域则是它当前所处代码块，即它的作用域可以是全局或者整个函数块，也可以是if，while，switch等用{}限定的代码块
另外，var和let的作用域规则都是一样的，其声明的变量只在其声明的块或子块中可用
function varTest() {
var a = 1;
{
var a = 2; // 函数块中，同一个变量
console.log(a); // 2
}
console.log(a); // 2
}
function letTest() {
let a = 1;
{
let a = 2; // 代码块中，新的变量
console.log(a); // 2
}
console.log(a); // 1
}
varTest();
letTest();
从上述实例中可以看出，let声明的变量的作用域可以比var声明的变量的作用域有更小的限定范围，更具灵活
（2）重复声明
var允许在同一作用域中重复声明，而let不允许在同一作用域中重复声明，否则会抛出异常
var相关示例代码
var a = 1;
var a = 2;
console.log(a) // 2
function test() {
var a = 3;
var a = 4;
console.log(a) // 4
}
test()
varTest();
letTest();
let相关示例代码
if(false) {
let a = 1;
let a = 2; // SyntaxError: Identifier 'a' has already been declared
}
switch(index) {
case 0:
let a = 1;
break;
default:
let a = 2; // SyntaxError: Identifier 'a' has already been declared
break;
}
从上述示例中可以看出，let 声明的重复性检查是发生在词法分析阶段，也就是在代码正式开始执行之前就会进行检查。
（3）绑定全局对象
var在全局环境声明变量，会在全局对象里新建一个属性，而let在全局环境声明变量，则不会在全局对象里创建一个属性
示例代码：
var foo = 'global'
let bar = 'global'
console.log(this.foo) // global
console.log(this.bar) // undefined
那这里就一个疑问，let在全局环境变量不在全局对象的属性中，那它是保存在哪的呢？
var foo = 'global'
let bar = 'global'
function test() {}
console.dir(test)
在Chrome浏览器的控制台中，通过执行上述代码，查看 test 函数的作用域链，其结果如图：
由上图可知，let 在全局环境声明变量 bar 保存在[[Scopes]][0]: Script这个变量对象的属性中，而[[Scopes]][1]: Global就是我们常说的全局对象。
（4)变量提升与暂停死区
var 声明的变量在执行上下文创建阶段就会被「创建」和「初始化」，因此对于执行阶段来说，可以在声明之前使用。
let 声明的变量在执行上下文创建阶段只会被「创建」而不会被「初始化」，因此对于执行阶段来说，如果在其定义执行前使用，相当于使用了未被初始化的变量，会报错。
3let与const异同
const 与 let 很类似，都具有上面提到的 let 的特性，唯一区别就在于 const 声明的是一个只读变量，声明之后不允许改变其值。因此，const 一旦声明必须初始化，否则会报错。
示例代码：
let a;
const b = "constant"
a = "variable"
1、let const
块级作用域，不具备变量提升，不能重复声明
const块级作用域，变量声明不提升，在声明时必须被赋值，声明要大写，不可修改
2、箭头函数
不需要function关键字来创建函数，省略return关键字，继承当前上下文的this关键字
3、允许对函数参数设置默认值
4、spread/rest操作符，指的是运算符...；spread可以简单理解为分散，rest可以简单理解为合并
5、对象词法扩展，ES6运行声明在对象字面量时使用简写语法，来初始化属性变量和函数的定义方法，并且允许在对象属性中进行计算操作
6，二进制和八进制字面量
ES6支持二进制和八进制的字面量，通常在数字前面添加0o，或者0o即可将其转换为八进制，二进制使用0b或者0B
7.，对象和数组的解构
8，对象超类，ES6中允许使用super方法
9for...ofvSfor...in
for...of用来遍历一个迭代器，如数组
for...in用来遍历对象中的属性
一、原型
这个图生动的表达了js中的构造函数，实例对象以及原型对象的关系
每个对象都有__proto__属性，并且指向它的原型对象
每个构造函数都有它的prototype原型对象
prototype原型对象里的constructor指向它的构造函数
new一个构造函数会形成它的实例对象
原型链
从概念上来看，每个对象都有一个原型，这个原型还可以有它自己的元素，以此类推，形成一个原型链
那么什么时候会用到一个原型链呢？当我们查找特定属性的时候，我们先去这个对象里找，如果没有的话就去它的原型对象里面去，如果还是没有的话，再去原型对象的原型对象里去寻找，这个操作就被委托在原型链上
如果没找到，会一直找下去吗？原型链是有终点的，不会一直找下去，当Object.prototype.__proto__===null时，查找结束，返回undefined
JavaScript语言的特别之处就在于函数内部可以读取全局变量，但是在函数外部无法获取函数内部的变量
处于种种原因，有时候需要获取内部的局部变量，正常情况下是办不到的，只有通过变通的方法才能实现，那就是在函数内部，再定义一个函数
JavaScript语言特有的链式作用域结构，子对象会一级一级地向上寻找父对象的变量，所以，父对象的所有变量，子对象都是可见的，反之则不成立
闭包就是能够读取其他函数内部变量的函数，闭包的用途一个是可以读取函数内部的变量，另一个是让这些变量始终保存在内存中，由于闭包会使得函数中的变量都被保存在内存中，所以内存消耗很大，不能滥用闭包，否则会造成网页的性能问题，在IE中可能会导致内存泄漏，解决的方法是在推出函数之前，将不使用的局部变量全部删除
闭包会在函数外部，改变父函数内部的值，所以，如果你把父函数当做对象使用，把闭包当做它的公用方法，把内部变量当做它的私有属性，这时一定要小心，不要随便改变父函数的内部变量值
连接两个或多个数组：concat
push、unshift添加元素，push末尾加，unshift开头加
shift，pop删除元素，shift删除第一个，pop删最后一个
sort数组排序
reverse反转数组
slice截取数组
indexOf()lastINdexOf()索引方法，不改变原数组，两个方法都是返回要查找的项在数组中首次出现的位置，没找到的话，就返回-1
forEach遍历
DOM2级事件规定事件流包含三个阶段：事件捕获阶段，处于目标阶段，事件冒泡阶段
stopPropagation阻止事件冒泡到父元素
preventDefault()通知web浏览器不要执行与事件关联的默认行为
return false，同时阻止事件冒泡和默认事件
一转换函数
parseInt、parseFloat
二、强制类型转换
Boolean把给定的值转换成Boolean型
Number把给定的值转换为数字
STring把给定的值转换成字符串
三、利用js变量弱类型转换
str-0