一、简单介绍一下HTML、CSS、JavaScript 。

二、给一个元素设置宽度、高度、有几种方式 ？

//1、通过内联样式表<div style="background-color: aqua; width: 100px; height: 100px"></div>//2、标签外部style
<style>div{width: 100px;height: 100px;}
</style>//3、外联样式表
<link rel="stylesheet" type="text/css" href="./css/index.css" />//4、JavaScript获取dom元素直接在style添加属性（内联）<div></div><script>var div = document.querySelector("div");div.style.width = "100px";  // 修改内联样式div.style.height = "100px";div.style.background = "#000000";//5、JavaScript添加style标签（修改的是外部style标签）
<div>33</div>
<script>var head = document.querySelector("head");var createStyle = document.createElement("style");createStyle.innerHTML = "div{ width:100px;height:100px;background:#000;}";head.appendChild(createStyle);
</script>

三、简单讲讲JavaScript的事件与事件流。

事件流都会经历三个阶段：

• 事件捕获阶段(capture phase)
• 处于目标阶段(target phase)
• 事件冒泡阶段(bubbling phase)
  
  

标准事件模型

在该事件模型中，一次事件共有三个过程:

• 事件捕获阶段：事件从document一直向下传播到目标元素, 依次检查经过的节点是否绑定了事件监听函数，如果有则执行
• 事件处理阶段：事件到达目标元素, 触发目标元素的监听函数
• 事件冒泡阶段：事件从目标元素冒泡到document, 依次检查经过的节点是否绑定了事件监听函数，如果有则执行

IE事件模型

IE事件模型共有两个过程:

• 事件处理阶段：事件到达目标元素, 触发目标元素的监听函数。
• 事件冒泡阶段：事件从目标元素冒泡到document, 依次检查经过的节点是否绑定了 事件监听函数，如果有则执行

四、href与src区别

href是Hypertext Reference的缩写，表示超文本引用。用来建立当前元素和文档之间的链接。常用的有：link、a。

src是source的缩写，src的内容是页面必不可少的一部分，是引入。src指向的内容会嵌入到文档中当前标签所在的位置。常用的有：img、script、iframe。
src用于替换当前元素；href用于在当前文档和引用资源之间建立联系。

五、为什么JavaScript需要写在最后面

• JavaScript的加载、解析与执行会阻塞DOM的构建，也就是说，在构建DOM时，HTML解析器若遇到了JavaScript，那么它会暂停构建DOM，将控制权移交给JavaScript引擎，等JavaScript引擎运行完毕，浏览器再从中断的地方恢复DOM构建。
  也就是说，如果你想首屏渲染的越快，就越不应该在首屏就加载 JS 文件，这也是都建议将 script 标签放在 body 标签底部的原因。当然在当下，并不是说 script 标签必须放在底部，因为你可以给 script 标签添加 defer 或者 async 属性（下文会介绍这两者的区别）。

• JS文件不只是阻塞DOM的构建，它会导致CSSOM也阻塞DOM的构建。
  原本DOM和CSSOM的构建是互不影响，井水不犯河水，但是一旦引入了JavaScript，CSSOM也开始阻塞DOM的构建，只有CSSOM构建完毕后，DOM再恢复DOM构建。

• 这是什么情况？
  这是因为JavaScript不只是可以改DOM，它还可以更改样式，也就是它可以更改CSSOM。前面我们介绍，不完整的CSSOM是无法使用的，但JavaScript中想访问CSSOM并更改它，那么在执行JavaScript时，必须要能拿到完整的CSSOM。所以就导致了一个现象，如果浏览器尚未完成CSSOM的下载和构建，而我们却想在此时运行脚本，那么浏览器将延迟脚本执行和DOM构建，直至其完成CSSOM的下载和构建。也就是说，在这种情况下，浏览器会先下载和构建CSSOM，然后再执行JavaScript，最后在继续构建DOM。

六、== 与 ===

简单来说： ==代表相同， ===代表严格相同, 为啥这么说呢，
这么理解： 当进行双等号比较时候： 先检查两个操作数数据类型，如果相同， 则进行===比较， 如果不同， 则愿意为你进行一次类型转换， 转换成相同类型后再进行比较， 而===比较时， 如果类型不同，直接就是false.

操作数1 == 操作数2， 操作数1===操作数2
比较过程：
　　双等号==：
　　（1）如果两个值类型相同，再进行三个等号(===)的比较
　　（2）如果两个值类型不同，也有可能相等，需根据以下规则进行类型转换在比较：
　　　　1）如果一个是null，一个是undefined，那么相等
　　　　2）如果一个是字符串，一个是数值，把字符串转换成数值之后再进行比较
　　
　　三等号===:
　　（1）如果类型不同，就一定不相等
　　（2）如果两个都是数值，并且是同一个值，那么相等；如果其中至少一个是NaN，那么不相等。（判断一个值是否是NaN，只能使用isNaN( ) 、Number.isNaN()来判断）
　　（3）如果两个都是字符串，每个位置的字符都一样，那么相等，否则不相等。
　　（4）如果两个值都是true，或是false，那么相等
　　（5）如果两个值都引用同一个对象或是函数，那么相等，否则不相等
　　（6）如果两个值都是null，或是undefined，那么相等

1、等于操作符（==）

等于操作符用两个等于号（ == ）表示，如果操作数相等，则会返回 true

JavaScript中存在隐式转换。等于操作符（==）在比较中会先进行类型转换，再确定操作数是否相等

遵循以下规则：

如果任一操作数是布尔值，则将其转换为数值再比较是否相等

let result1 = (true == 1); // true

如果一个操作数是字符串，另一个操作数是数值，则尝试将字符串转换为数值，再比较是否相等

let result1 = ("55" == 55); // true

如果一个操作数是对象，另一个操作数不是，则调用对象的 valueOf()方法取得其原始值，再根据前面的规则进行比较

let obj = {valueOf:function(){return 1}}
let result1 = (obj == 1); // true

null和undefined相等

let result1 = (null == undefined ); // true

如果有任一操作数是 NaN ，则相等操作符返回 false

let result1 = (NaN == NaN ); // false

如果两个操作数都是对象，则比较它们是不是同一个对象。如果两个操作数都指向同一个对象，则相等操作符返回true

let obj1 = {name:"xxx"}
let obj2 = {name:"xxx"}
let result1 = (obj1 == obj2 ); // false

下面进一步做个小结：

• 两个都为简单类型，字符串和布尔值都会转换成数值，再比较
• 简单类型与引用类型比较，对象转化成其原始类型的值，再比较
• 两个都为引用类型，则比较它们是否指向同一个对象
• null 和 undefined 相等
• 存在 NaN 则返回 false

2、全等操作符（===）

全等操作符由 3 个等于号（ === ）表示，只有两个操作数在不转换的前提下相等才返回 true。即类型相同，值也需相同

let result1 = ("55" === 55); // false，不相等，因为数据类型不同
let result2 = (55 === 55); // true，相等，因为数据类型相同值也相同

undefined 和 null 与自身严格相等

let result1 = (null === null)  //true
let result2 = (undefined === undefined)  //true

3、区别

相等操作符（==）会做类型转换，再进行值的比较，全等运算符不会做类型转换

let result1 = ("55" === 55); // false，不相等，因为数据类型不同
let result2 = (55 === 55); // true，相等，因为数据类型相同值也相同
null` 和 `undefined` 比较，相等操作符（==）为`true`，全等为`false
let result1 = (null == undefined ); // true
let result2 = (null  === undefined); // false

小结

相等运算符隐藏的类型转换，会带来一些违反直觉的结果

'' == '0' // false
0 == '' // true
0 == '0' // truefalse == 'false' // false
false == '0' // truefalse == undefined // false
false == null // false
null == undefined // true' \t\r\n' == 0 // true

但在比较null的情况的时候，我们一般使用相等操作符==

const obj = {};if(obj.x == null){console.log("1");  //执行
}

等同于下面写法

if(obj.x === null || obj.x === undefined) {...
}

使用相等操作符（==）的写法明显更加简洁了

所以，除了在比较对象属性为null或者undefined的情况下，我们可以使用相等操作符（==），其他情况建议一律使用全等操作符（===）

七、<a>链接伪类顺序

<a>元素的作用是可以创建一个链接，链接对应4个状态：未访问，已访问，鼠标悬停，鼠标点击瞬间。
　　为了给链接的4个状态应用样式，引入伪类的概念。
　　什么是伪类呢？简单点说，就是你没定义这个类，但它确实作为一个类来使用。（这些类确实存在，浏览器在后台会向这些类增加和删除元素）
　　我在看《CSS设计指南》时，它说到四个伪类的书写顺序一定要正确，否则浏览器可能不会显示预期的结果。

也即这样写：

a:link{color:black;}
a:visited{color:gray;}
a:hover{color:red;}
a:active{color:blue;}

为什么必须得按顺序呢？
　　这个问题可以这样来解答。

• 首先注意关键的两点：1.这4个伪类特指度相同。2.一个链接可能同时处于多种状态，即同时属于多个伪类。

好，现在来详细剖析。

• 未点击链接前，link伪类长期处于激活状态，鼠标悬停（或点击）时，<a>链接同时处于link和hover(或active)状态，由于它们特指度相同，在同时激活的情况下，后出现的伪类样式会覆盖前面的伪类样式，故link状态必须写在hover(或active)之前。
• 再讨论hover和active的顺序，若把hover放在active后面，当点击链接一瞬，实际你在激活active状态的同时触发了hover伪类,hover在后面覆盖了active的颜色，所以无法看到active的颜色。故hover在active之前
• 其次，若把visited放在hover后面，那已访问过的链接一直触发着visited伪类，会覆盖hover样式。
• 最后，其实link、visited两个伪类之间顺序无所谓。（因为它俩不可能同时触发，即又未访问同时又已访问。）
• 记这顺序有个小招数，“LoVe？ HA!”。

八、如何判断一个数是否为NAN

var nan = NaN;console.log(nan === nan); // 这是唯一一个自身不等于自身的一个值，不存在兼容性问题
console.log(Number.isNaN(nan)); //  true    Number.isNaN()  是ES6新出的函数 ，修复了isNaN("string") 也是为 true的问题，但是存在兼容性问题
console.log(Number.isNaN("nan")); //  false
console.log(isNaN(nan)); // true  
console.log(isNaN("nan")); // true  

九、DOM和BOM的区别

在浏览器中运行的JavaScript可以认为由三部分组成：ECMAScript描述了该语言的语法和基本对象，DOM文档对象模型描述了处理网页内容的方法和接口，BOM浏览器对象模型描述了与浏览器进行交互的方法和接口。

DOM

• DOM是Document Object Model的缩写，即文档对象模型。
• DOM是W3C的标准。
• DOM最根本对象是document，即window.document。

DOM全称是Document Object Model即文档对象模型，是针对XML的基于树的API，描述了处理网页内容的方法和接口，是HTML和XML的API，DOM把整个页面规划成由节点层级构成的文档。DOM和文档有关，这里的文档指的是网页，也就是HTML文档。网页是由服务器发送给客户端浏览器的，无论用什么浏览器，接收到的HTML都是一样的，所以DOM和浏览器无关，其关注的是网页本身的内容，由于是相对独立于浏览器的，所以可以制定标准。
DOM定义了Node等对象做为这种实现的基础，就是说为了能以编程的方法操作这个HTML的内容，例如添加元素、修改元素、删除元素等，我们把这个HTML结构看做一个对象树DOM树，其本身和里面的所有东西例如<div></div>这些标签都看做一个对象，每个对象都叫做一个节点Node，节点可以理解为DOM中所有Object的父类。

BOM

• BOM是Browser Object Model的缩写，即浏览器对象模型。
• BOM没有相关标准。
• BOM的最根本对象是window。

BOM是Browser Object Model即浏览器对象模型，DOM是为了操作文档出现的接口，而BOM就是为了控制浏览器的行为而出现的接口，例如跳转页面、前进、后退、书签等等，程序还可能需要获取屏幕的大小之类的参数，所以BOM就是为了解决这些事情出现的接口，例如我们要让浏览器跳转到另一个页面就需要Location对象。
由于没有标准，不同的浏览器实现同一功能，可以需要不同的实现方式，所以对于上面说的功能，不同的浏览器的实现功能所需要的JavaScript代码可能不相同。虽然BOM没有一套标准，但是各个浏览器的常用功能的JavaScript代码还是大同小异的，对于常用的功能实际上已经有默认的标准了，所以不用过于担心浏览器兼容问题，不是每个浏览器都有自己的BOM，也不需要为每个浏览器都学习一套BOM，只是个别浏览器会有新增的功能会在BOM上体现出来。

十、说说你对BOM的理解，常见的BOM对象你了解哪些？

1、是什么

BOM (Browser Object Model)，浏览器对象模型，提供了独立于内容与浏览器窗口进行交互的对象

其作用就是跟浏览器做一些交互效果,比如如何进行页面的后退，前进，刷新，浏览器的窗口发生变化，滚动条的滚动，以及获取客户的一些信息如：浏览器品牌版本，屏幕分辨率

浏览器的全部内容可以看成DOM，整个浏览器可以看成BOM。区别如下：

2、window

Bom的核心对象是window，它表示浏览器的一个实例

在浏览器中，window对象有双重角色，即是浏览器窗口的一个接口，又是全局对象

因此所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法

var name = '青藤';
function lookName(){alert(this.name);
}console.log(window.name);  //青藤
lookName();                //青藤
window.lookName();         //青藤

关于窗口控制方法如下：

• moveBy(x,y)：从当前位置水平移动窗体x个像素，垂直移动窗体y个像素，x为负数，将向左移动窗体，y为负数，将向上移动窗体
• moveTo(x,y)：移动窗体左上角到相对于屏幕左上角的(x,y)点
• resizeBy(w,h)：相对窗体当前的大小，宽度调整w个像素，高度调整h个像素。如果参数为负值，将缩小窗体，反之扩大窗体
• resizeTo(w,h)：把窗体宽度调整为w个像素，高度调整为h个像素
• scrollTo(x,y)：如果有滚动条，将横向滚动条移动到相对于窗体宽度为x个像素的位置，将纵向滚动条移动到相对于窗体高度为y个像素的位置
• scrollBy(x,y)：如果有滚动条，将横向滚动条向左移动x个像素，将纵向滚动条向下移动y个像素

window.open() 既可以导航到一个特定的url，也可以打开一个新的浏览器窗口

如果 window.open() 传递了第二个参数，且该参数是已有窗口或者框架的名称，那么就会在目标窗口加载第一个参数指定的URL

window.open('htttp://www.vue3js.cn','topFrame')
==> <a href="http://www.vue3js.cn" target="topFrame"></a>

window.open() 会返回新窗口的引用，也就是新窗口的 window 对象

const myWin = window.open('http://www.vue3js.cn','myWin')

window.close() 仅用于通过 window.open() 打开的窗口

新创建的 window 对象有一个 opener 属性，该属性指向打开他的原始窗口对象

3、location

url地址如下：

http://foouser:barpassword@www.wrox.com:80/WileyCDA/?q=javascript#contents

location属性描述如下：

属性名	例子	说明
hash	“#contents”	utl中#后面的字符，没有则返回空串
host	www.wrox.com:80	服务器名称和端口号
hostname	www.wrox.com	域名，不带端口号
href	http://www.wrox.com:80/WileyCDA/?q=javascript#contents	完整url
pathname	“/WileyCDA/”	服务器下面的文件路径
port	80	url的端口号，没有则为空
protocol	http:	使用的协议
search	?q=javascript	url的查询字符串，通常为？后面的内容

除了 hash之外，只要修改location的一个属性，就会导致页面重新加载新URL

location.reload()，此方法可以重新刷新当前页面。这个方法会根据最有效的方式刷新页面，如果页面自上一次请求以来没有改变过，页面就会从浏览器缓存中重新加载

如果要强制从服务器中重新加载，传递一个参数true即可

4、navigator

navigator 对象主要用来获取浏览器的属性，区分浏览器类型。属性较多，且兼容性比较复杂

下表列出了navigator对象接口定义的属性和方法：

5、screen

保存的纯粹是客户端能力信息，也就是浏览器窗口外面的客户端显示器的信息，比如像素宽度和像素高度

6、history

history对象主要用来操作浏览器URL的历史记录，可以通过参数向前，向后，或者向指定URL跳转

常用的属性如下：

• history.go()

接收一个整数数字或者字符串参数：向最近的一个记录中包含指定字符串的页面跳转，

history.go('maixaofei.com')

当参数为整数数字的时候，正数表示向前跳转指定的页面，负数为向后跳转指定的页面

history.go(3) //向前跳转三个记录
history.go(-1) //向后跳转一个记录

• history.forward()：向前跳转一个页面
• history.back()：向后跳转一个页面
• history.length：获取历史记录数

十一、说说你对DOM的理解，常见的操作有哪些？

1、DOM

文档对象模型 (DOM) 是 HTML 和 XML 文档的编程接口

它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容

任何 HTML或XML文档都可以用 DOM表示为一个由节点构成的层级结构

节点分很多类型，每种类型对应着文档中不同的信息和（或）标记，也都有自己不同的特性、数据和方法，而且与其他类型有某种关系，如下所示：

<html><head><title>Page</title></head><body><p>Hello World!</p></body>
</html>

DOM像原子包含着亚原子微粒那样，也有很多类型的DOM节点包含着其他类型的节点。接下来我们先看看其中的三种：

<div><p title="title">content</p>
</div>

上述结构中，div、p就是元素节点，content就是文本节点，title就是属性节点

2、操作

日常前端开发，我们都离不开DOM操作

在以前，我们使用Jquery，zepto等库来操作DOM，之后在vue，Angular，React等框架出现后，我们通过操作数据来控制DOM（绝大多数时候），越来越少的去直接操作DOM

但这并不代表原生操作不重要。相反，DOM操作才能有助于我们理解框架深层的内容

下面就来分析DOM常见的操作，主要分为：

• 创建节点
• 查询节点
• 更新节点
• 添加节点
• 删除节点

2.1创建节点

createElement

创建新元素，接受一个参数，即要创建元素的标签名

const divEl = document.createElement("div");

createTextNode

创建一个文本节点

const textEl = document.createTextNode("content");

createDocumentFragment

用来创建一个文档碎片，它表示一种轻量级的文档，主要是用来存储临时节点，然后把文档碎片的内容一次性添加到DOM中

const fragment = document.createDocumentFragment();

当请求把一个DocumentFragment 节点插入文档树时，插入的不是 DocumentFragment自身，而是它的所有子孙节点

createAttribute

创建属性节点，可以是自定义属性

const dataAttribute = document.createAttribute('custom');
consle.log(dataAttribute);

2.2获取节点

querySelector

传入任何有效的css 选择器，即可选中单个 DOM元素（首个）：

document.querySelector('.element')
document.querySelector('#element')
document.querySelector('div')
document.querySelector('[name="username"]')
document.querySelector('div + p > span')

如果页面上没有指定的元素时，返回 null

querySelectorAll

返回一个包含节点子树内所有与之相匹配的Element节点列表，如果没有相匹配的，则返回一个空节点列表

const notLive = document.querySelectorAll("p");

需要注意的是，该方法返回的是一个 NodeList的静态实例，它是一个静态的“快照”，而非“实时”的查询

关于获取DOM元素的方法还有如下，就不一一述说

document.getElementById('id属性值');返回拥有指定id的对象的引用
document.getElementsByClassName('class属性值');返回拥有指定class的对象集合
document.getElementsByTagName('标签名');返回拥有指定标签名的对象集合
document.getElementsByName('name属性值'); 返回拥有指定名称的对象结合
document/element.querySelector('CSS选择器');  仅返回第一个匹配的元素
document/element.querySelectorAll('CSS选择器');   返回所有匹配的元素
document.documentElement;  获取页面中的HTML标签
document.body; 获取页面中的BODY标签
document.all[''];  获取页面中的所有元素节点的对象集合型

除此之外，每个DOM元素还有parentNode、childNodes、firstChild、lastChild、nextSibling、previousSibling属性，关系图如下图所示

2.3更新节点

innerHTML

不但可以修改一个DOM节点的文本内容，还可以直接通过HTML片段修改DOM节点内部的子树

// 获取<p id="p">...</p>
var p = document.getElementById('p');
// 设置文本为abc:
p.innerHTML = 'ABC'; // <p id="p">ABC</p>
// 设置HTML:
p.innerHTML = 'ABC <span style="color:red">RED</span> XYZ';
// <p>...</p>的内部结构已修改

innerText、textContent

自动对字符串进行HTML编码，保证无法设置任何HTML标签

// 获取<p id="p-id">...</p>
var p = document.getElementById('p-id');
// 设置文本:
p.innerText = '<script>alert("Hi")</script>';
// HTML被自动编码，无法设置一个<script>节点:
// <p id="p-id">&lt;script&gt;alert("Hi")&lt;/script&gt;</p>

两者的区别在于读取属性时，innerText不返回隐藏元素的文本，而textContent返回所有文本

style

DOM节点的style属性对应所有的CSS，可以直接获取或设置。遇到-需要转化为驼峰命名

// 获取<p id="p-id">...</p>
const p = document.getElementById('p-id');
// 设置CSS:
p.style.color = '#ff0000';
p.style.fontSize = '20px'; // 驼峰命名
p.style.paddingTop = '2em';

2.4添加节点

innerHTML

如果这个DOM节点是空的，例如，<div></div>，那么，直接使用innerHTML = '<span>child</span>'就可以修改DOM节点的内容，相当于添加了新的DOM节点

如果这个DOM节点不是空的，那就不能这么做，因为innerHTML会直接替换掉原来的所有子节点

appendChild

把一个子节点添加到父节点的最后一个子节点

举个例子

<!-- HTML结构 -->
<p id="js">JavaScript</p>
<div id="list"><p id="java">Java</p><p id="python">Python</p><p id="scheme">Scheme</p>
</div>

添加一个p元素

const js = document.getElementById('js')
js.innerHTML = "JavaScript"
const list = document.getElementById('list');
list.appendChild(js);

现在HTML结构变成了下面

<!-- HTML结构 -->
<div id="list"><p id="java">Java</p><p id="python">Python</p><p id="scheme">Scheme</p><p id="js">JavaScript</p>  <!-- 添加元素 -->
</div>

上述代码中，我们是获取DOM元素后再进行添加操作，这个js节点是已经存在当前文档树中，因此这个节点首先会从原先的位置删除，再插入到新的位置

如果动态添加新的节点，则先创建一个新的节点，然后插入到指定的位置

const list = document.getElementById('list'),
const haskell = document.createElement('p');
haskell.id = 'haskell';
haskell.innerText = 'Haskell';
list.appendChild(haskell);

insertBefore

把子节点插入到指定的位置，使用方法如下：

parentElement.insertBefore(newElement, referenceElement)

子节点会插入到referenceElement之前

setAttribute

在指定元素中添加一个属性节点，如果元素中已有该属性改变属性值

const div = document.getElementById('id')
div.setAttribute('class', 'white');//第一个参数属性名，第二个参数属性值。

2.5删除节点

删除一个节点，首先要获得该节点本身以及它的父节点，然后，调用父节点的removeChild把自己删掉

// 拿到待删除节点:
const self = document.getElementById('to-be-removed');
// 拿到父节点:
const parent = self.parentElement;
// 删除:
const removed = parent.removeChild(self);
removed === self; // true

删除后的节点虽然不在文档树中了，但其实它还在内存中，可以随时再次被添加到别的位置

十二、HTML语义化

语义化可以总结为 根据内容选择标签，用最恰当的标签来标记内容。
例如网页中的标题使用<h1>~<h6>这样的标签，而不是使用<div>+css。

语义化好处

• 使HTML结构变得清晰，有利于维护代码和添加样式。
• 通常语义化HTML会使代码变的更少，使页面加载更快。
• 即使在没有CSS样式的条件下，也能很好地呈现出内容结构、代码结构。
• 便于团队开发和维护，语义化更具可读性，遵循W3C标准，可以减少差异化。
• 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页。
• 提升搜索引擎优化(SEO)的效果。和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息，爬虫可以依赖于标签来确定上下文和各个关键字的权重。

注意语义化编写

• 尽可能少的使用无语义的标签<div>和<span>。
• 不要使用纯样式标签，如<b>是纯样式标签，而<strong>的语义为加粗。
• 在<lable>标签中设置for来让说明文本和相对应的<input>关联起来。
• 表单域要用<fieldset>标签包起来，并用<legend>标签说明表单的用途。
• 需要强调的文本，可以包含在strong或者em标签中，<strong>默认样式是加粗，<em>是斜体。
• 使用表格时，标题要用<caption>，表头用<thead>，主体部分用<tbody>包围，尾部用<tfoot>包围。表头和一般单元格要区分开，表头用<th>，单元格用<td>。

常用语义化标签

• <h1>~<h6> 定义页面的标题，<h1>-<h6>元素等级依次降低。
• <header> 页眉通常包括网站标志、主导航、全站链接以及搜索框。
• <nav> 提供当前文档内或其他文档的导航链接，导航部分的常见示例是菜单，目录和索引。
• <main> 主要内容区域由与文档的中心主题或应用程序的中心功能直接相关或扩展的内容组成。
• <article> 专注于单个主题的博客文章，报纸文章或网页文章。
• <address> 提供了一个或多个人员或组织的联系信息。
• <section> 定义文档中的节，表示HTML文档中包含的独立部分。
• <aside> 表示文档的一部分，其内容仅与文档的主要内容间接相关,通常显示为侧边栏。
• <footer> 定义文档的底部区域，通常包含文档的作者，著作权信息，联系信息等。
• <hgroup> 表示文档部分的多级标题，它对一组<h1>~<h6>元素进行分组。
• <ul> 表示项目的无序列表，通常呈现为项目符号列表。
• <ol> 表示项目的有序列表，通常呈现为编号列表。
• <li> 表示列表中的项目。
• <strong> 表示强调突出重点内容，浏览器通常以粗体显示内容。
• <em> 标记强调重点的文本，可以嵌套<em>元素，嵌套的每个级别都表示强调程度更高。
• <small> 代表旁注和小字体，例如版权和法律文本，独立于其样式表示。
• <abbr> 表示缩写或首字母缩写词。
• <cite> 用于描述对引用的创意作品的引用，并且必须包括该作品的标题。
• <figure> 表示独立的内容，可能带有可选的标题，该标题使用<figcaption>元素指定。
• <figcaption> 表示说明其父<figure>元素的其余内容的标题或图例。
• <blockquote> 定义块引用，可以使用<cite>元素提供文本表示
• <mark> 表示被标记或突出显示以供参考或标记目的的文本。
• <time> 表示特定的时间。
• <date> 表示特定的日期。
• <dfn> 用于表示在定义短语或句子的上下文中定义的术语。
• <code> 计算机代码的简短片段的方式显示其内容的样式。
• <samp> 输出的示例或引用的内联文本或样本文本。
• <kbd> 表示文本是从键盘上键入的，它经常用在与计算机相关的文档或手册中。
• <del> 表示已从文档中删除的文本范围。
• <ins> 表示已添加到文档中的文本范围。
• <menu> 表示用户可以执行或激活的一组命令，例如上下文菜单等。
• <dialog> 表示对话框或其他交互式组件，例如检查器或子窗口。
• <summary> 元素为<details>元素的显示框指定摘要，标题或图例。
• <details> 描述文档或文档某个部分的细节。
• <bdi>: 允许设置一段文本，使其脱离其父元素的文本方向设置。
• <progress>: 定义任何类型的任务的进度。
• <ruby>: 定义ruby注释（中文注音或字符）。
• <rt>: 定义字符（中文注音或字符）的解释或发音。
• <rp>: 在ruby注释中使用，定义不支持ruby元素的浏览器所显示的内容。
• <wbr>: 规定在文本中的何处适合添加换行符。
• <meter>: 定义度量衡，仅用于已知最大和最小值的度量。

弃用的HTML元素

这些是旧的HTML元素，已弃用，不应继续使用。
不要在新项目中使用它们，应尽快在旧项目替换它们，即使它们现在依然可以使用。

<acronym>、<applet>、<basefont>、<bgsound>、<big>、<blink>、<center>、<command>、<content>、<dir>、<element>、<font>、<frame>、<frameset>、<image>、<isindex>、<keygen>、<listing>、<marquee>、<menuitem>、<multicol>、<nextid>、<nobr>、<noembed>、<noframes>、<plaintext>、<shadow>、<spacer>、<strike>、<tt>、<xmp>

HTML节点操作

HTML节点的基本操作，添加节点，替换节点，删除节点，绑定事件，访问子节点，访问父节点，访问兄弟节点。
文档对象模型Document Object Model，简称DOM，是W3C组织推荐的处理可扩展标记语言XML的标准编程接口，是一种与平台和语言无关的应用程序接口API。
根据W3C的HTML DOM标准，HTML文档中的所有内容都是节点：整个文档是一个文档节点，每个HTML元素是元素节点，HTML元素内的文本是文本节点，每个HTML属性是属性节点，注释是注释节点。HTML DOM将HTML文档视作树结构。这种结构被称为节点树：HTML DOM Tree实例。

添加节点

    <div id="t1"></div><script type="text/javascript">var d1 = document.createElement("div");  // 创建一个节点d1.style.color = "blue"; // 设置一下颜色d1.setAttribute("id","d1"); // 设置一个属性d1.innerText="innerText"; // innerText会一次性替换所有内容var tn1=document.createTextNode(" CreateTextNode"); // createTextNode可以做动态添加d1.appendChild(tn1); // 追加文本节点var node = document.getElementById("t1").appendChild(d1); // 将d1节点追加到t1节点后var b1 = document.createElement("div");b1.innerText="添加到d1前";document.getElementById("t1").insertBefore(b1,document.getElementById("d1")); // 将b1节点添加到t1节点内的d1节点前</script>

替换节点

    <div id="t2"><div>被替换的节点</div></div><script type="text/javascript">var d2 = document.createElement("div");d2.style.color = "green";d2.innerText="被我替换了";document.getElementById("t2").replaceChild(d2,document.querySelector("#t2 > div:first-child")); // 第一个参数是要替换的节点，第二个参数是被替换的节点</script>

删除节点

    <div id="t3"><div>下边的兄弟被删除了</div><div>我要被删除了</div></div><script type="text/javascript">document.getElementById("t3").removeChild(document.querySelector("#t3 > div:nth-child(2)"));</script>

绑定事件

    <div id="t4" style="color: red;">点我</div><script type="text/javascript">document.getElementById("t4").addEventListener('click',(e) => {alert("点击事件");})   </script<!-- 事件流模型见 https://github.com/WindrunnerMax/EveryDay/blob/master/JavaScript/JS%E4%BA%8B%E4%BB%B6%E6%B5%81%E6%A8%A1%E5%9E%8B.md#dom0%E7%BA%A7%E6%A8%A1%E5%9E%8B -->

访问子节点

    <div id="t5" style="color: grey;"><div>1</div><div>2</div></div><script type="text/javascript">console.log(document.getElementById("t5").childNodes); // 获取所有子节点 // 注意每个换行也会有一个#text文本节点console.log(document.getElementById("t5").childElementCount); // 获取子节点数量console.log( document.getElementById("t5").firstChild); // 获取第一个子节点，注意也会匹配#textconsole.log(document.getElementById("t5").firstElementChild); // 获取第一个子节点console.log(document.getElementById("t5").lastChild); // 获取最后一个子节点，注意也会匹配#textconsole.log(document.getElementById("t5").lastElementChild); // 获取最后一个子节点</script>

访问父节点

    <div style="color: yellow;"><div id="t6">1</div></div><script type="text/javascript">console.log(document.getElementById("t6").parentNode);</script>

访问兄弟节点

    <div style="color: brown;"><div>1</div><div id="t7">2</div><div>3</div></div><script type="text/javascript">console.log(document.getElementById("t7").previousSibling); // 注意也会匹配#textconsole.log(document.getElementById("t7").previousElementSibling); // 不匹配文本节点、注释节点console.log(document.getElementById("t7").nextSibling); // 注意也会匹配#textconsole.log(document.getElementById("t7").nextElementSibling); // 不匹配文本节点、注释节点</script>

代码示例

<!DOCTYPE html>
<html>
<head><title>HTML节点操作</title><meta charset="utf-8">
</head>
<body><div id="t1"></div><script type="text/javascript">var d1 = document.createElement("div");  // 创建一个节点d1.style.color = "blue"; // 设置一下颜色d1.setAttribute("id","d1"); // 设置一个属性d1.innerText="innerText"; // innerText会一次性替换所有内容var tn1=document.createTextNode(" CreateTextNode"); // createTextNode可以做动态添加d1.appendChild(tn1); // 追加文本节点var node = document.getElementById("t1").appendChild(d1); // 将d1节点追加到t1节点后var b1 = document.createElement("div");b1.innerText="添加到d1前";document.getElementById("t1").insertBefore(b1,document.getElementById("d1")); // 将b1节点添加到t1节点内的d1节点前</script><div id="t2"><div>被替换的节点</div></div><script type="text/javascript">var d2 = document.createElement("div");d2.style.color = "green";d2.innerText="被我替换了";document.getElementById("t2").replaceChild(d2,document.querySelector("#t2 > div:first-child")); // 第一个参数是要替换的节点，第二个参数是被替换的节点</script><div id="t3"><div>下边的兄弟被删除了</div><div>我要被删除了</div></div><script type="text/javascript">document.getElementById("t3").removeChild(document.querySelector("#t3 > div:nth-child(2)"));</script><div id="t4" style="color: red;">点我</div><script type="text/javascript">document.getElementById("t4").addEventListener('click',(e) => {alert("点击事件");})   </script><!-- 事件流模型见 https://github.com/WindrunnerMax/EveryDay/blob/master/JavaScript/JS%E4%BA%8B%E4%BB%B6%E6%B5%81%E6%A8%A1%E5%9E%8B.md#dom0%E7%BA%A7%E6%A8%A1%E5%9E%8B --><div id="t5" style="color: grey;"><div>1</div><div>2</div></div><script type="text/javascript">console.log(document.getElementById("t5").childNodes); // 获取所有子节点 // 注意每个换行也会有一个#text文本节点console.log(document.getElementById("t5").childElementCount); // 获取子节点数量console.log( document.getElementById("t5").firstChild); // 获取第一个子节点，注意也会匹配#textconsole.log(document.getElementById("t5").firstElementChild); // 获取第一个子节点console.log(document.getElementById("t5").lastChild); // 获取最后一个子节点，注意也会匹配#textconsole.log(document.getElementById("t5").lastElementChild); // 获取最后一个子节点</script><div style="color: yellow;"><div id="t6">1</div></div><script type="text/javascript">console.log(document.getElementById("t6").parentNode);</script><div style="color: brown;"><div>1</div><div id="t7">2</div><div>3</div></div><script type="text/javascript">console.log(document.getElementById("t7").previousSibling); // 注意也会匹配#textconsole.log(document.getElementById("t7").previousElementSibling); // 不匹配文本节点、注释节点console.log(document.getElementById("t7").nextSibling); // 注意也会匹配#textconsole.log(document.getElementById("t7").nextElementSibling); // 不匹配文本节点、注释节点</script>
</body>
</html>

十一、 解释下什么是事件代理？应用场景？

1、是什么

事件代理，俗地来讲，就是把一个元素响应事件（click、keydown…）的函数委托到另一个元素

前面讲到，事件流的都会经过三个阶段：捕获阶段 -> 目标阶段 -> 冒泡阶段，而事件委托就是在冒泡阶段完成

事件委托，会把一个或者一组元素的事件委托到它的父层或者更外层元素上，真正绑定事件的是外层元素，而不是目标元素

当事件响应到目标元素上时，会通过事件冒泡机制从而触发它的外层元素的绑定事件上，然后在外层元素上去执行函数

下面举个例子：

比如一个宿舍的同学同时快递到了，一种笨方法就是他们一个个去领取
较优方法就是把这件事情委托给宿舍长，让一个人出去拿好所有快递，然后再根据收件人一一分发给每个同学在这里，取快递就是一个事件，每个同学指的是需要响应事件的 DOM元素，而出去统一领取快递的宿舍长就是代理的元素

所以真正绑定事件的是这个元素，按照收件人分发快递的过程就是在事件执行中，需要判断当前响应的事件应该匹配到被代理元素中的哪一个或者哪几个

2、应用场景

如果我们有一个列表，列表之中有大量的列表项，我们需要在点击列表项的时候响应一个事件

<ul id="list"><li>item 1</li><li>item 2</li><li>item 3</li>......<li>item n</li>
</ul>

如果给每个列表项一一都绑定一个函数，那对于内存消耗是非常大的

// 获取目标元素
const lis = document.getElementsByTagName("li")
// 循环遍历绑定事件
for (let i = 0; i < lis.length; i++) {lis[i].onclick = function(e){console.log(e.target.innerHTML)}
}

这时候就可以事件委托，把点击事件绑定在父级元素ul上面，然后执行事件的时候再去匹配目标元素

// 给父层元素绑定事件
document.getElementById('list').addEventListener('click', function (e) {// 兼容性处理var event = e || window.event;var target = event.target || event.srcElement;// 判断是否匹配目标元素if (target.nodeName.toLocaleLowerCase === 'li') {console.log('the content is: ', target.innerHTML);}
});

还有一种场景是上述列表项并不多，我们给每个列表项都绑定了事件

但是如果用户能够随时动态的增加或者去除列表项元素，那么在每一次改变的时候都需要重新给新增的元素绑定事件，给即将删去的元素解绑事件如果用了事件委托就没有这种麻烦了，因为事件是绑定在父层的，和目标元素的增减是没有关系的，执行到目标元素是在真正响应执行事件函数的过程中去匹配的

举个例子：

下面html结构中，点击input可以动态添加元素

<input type="button" name="" id="btn" value="添加" />
<ul id="ul1"><li>item 1</li><li>item 2</li><li>item 3</li><li>item 4</li>
</ul>

使用事件委托

const oBtn = document.getElementById("btn");
const oUl = document.getElementById("ul1");
const num = 4;//事件委托，添加的子元素也有事件
oUl.onclick = function (ev) {ev = ev || window.event;const target = ev.target || ev.srcElement;if (target.nodeName.toLowerCase() == 'li') {console.log('the content is: ', target.innerHTML);}};//添加新节点
oBtn.onclick = function () {num++;const oLi = document.createElement('li');oLi.innerHTML = `item ${num}`;oUl.appendChild(oLi);
};

可以看到，使用事件委托，在动态绑定事件的情况下是可以减少很多重复工作的

3、总结

适合事件委托的事件有：click，mousedown，mouseup，keydown，keyup，keypress

从上面应用场景中，我们就可以看到使用事件委托存在两大优点：

• 减少整个页面所需的内存，提升整体性能
• 动态绑定，减少重复工作

但是使用事件委托也是存在局限性：

• focus、blur这些事件没有事件冒泡机制，所以无法进行委托绑定事件
• mousemove、mouseout这样的事件，虽然有事件冒泡，但是只能不断通过位置去计算定位，对性能消耗高，因此也是不适合于事件委托的

十二、JavaScript深入理解之对象创建

在 JavaScript中虽然 Object 构造函数或对象字面量都可以用来创建单个对象，但是这些方法都有一个明显的缺点：使用同一个接口创建很多对象，会产生大量的重复代码。为了解决这些问题，人们提出了很多对象创建的解决办法，下面是我对JavaScript 对象创建的一些理解和总结。

工厂模式

工厂模式是软件工程领域一种广为人知的设计模式，这种模式抽离了创建对象的具体过程。考虑到在 ECMAScript 中无法创建类，开发人员发明以一种函数，用函数来封装以特定接口创建对象的细节。如下面的例子所示

function createPerson(name, age, job){var o = new Object();o.name = name;o.age = age;o.job = job;o.sayName = function(){alert(this.name);};return o;
}var person1 = createPerson("james"，9，"student");var person2 = createPerson("kobe"，9，"student");

优点：解决了创建多个相似对象时，代码的复用问题

缺点：使用工厂模式创建的对象，没有解决对象识别的问题（就是怎样知道一个对象的类型是什么）

构造函数模式

前面我们提到过，ECMAScript 中的构造函数可用来创建特定类型的对象。像 Object 和 Array这样的原生构造函数，在运行时会自动出现在执行环境中。此外我们也可以创建自定义的构造函数，从而定义对象类型的属性和方法。我们使用构造函数的方法可以将前面的例子重写如下

function createPerson(name, age, job){this.name = name;this.age = age;this.job = job;this.sayName = function(){alert(this.name);};return o;
}var person1 = new createPerson("james"，9，"student");var person2 = new createPerson("kobe"，9，"student");

当我们使用构造函数实例化一个对象的时候，对象中会包含一个 __proto__属性指向构造函数原型对象，而原型对象中则包含一个 constructor 属性指向构造函数。因此在实例对象中我们可以通过原型链来访问到 constructor 属性，从而判断对象的类型。

优点：解决了工厂模式中对象类型无法识别的问题，并且创建自定义的构造函数意味着将来可以将它的实例标识为一种特定的类型。

缺点：我们知道 ECMAScript 中的函数是对象，在使用构造函数创建对象时，每个方法都会在实例对象中重新创建一遍。拿上面的例子举例，这意味着每创建一个对象，我们就会创建一个 sayName 函数的实例，但它们其实做的都是同样的工作，因此这样便会造成内存的浪费。

原型模式

我们知道，我们创建的每一个函数都有一个 prototype属性，这个属性指向函数的原型对象，这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。我们通过使用原型对象可以让所有的对象实例共享它所包含的属性和方法，因此这样也解决了代码的复用问题。如下面所示：

function Person(){}Person.prototype.name = "james";
Person.prototype.age = 9;
Person.prototype.job = "student";
Person.prototype.sayName = function(){alert(this.name);
}var person1 = new Person();
person1.sayName(); // "james"var person2 = new Person();
person2.sayName(); // "james"console.log(person1.sayName === person2.sayName) // true

与构造函数模式不同的是，原型对象上的属性和方法是有所有实例所共享的。也就是说，上面 person1 和 person2 访问的都是同一组属性和同一个 sayName() 函数。

优点：解决了构造函数模式中多次创建相同函数对象的问题，所有的实例可以共享同一组属性和函数。

缺点：

1. 首先第一个问题是原型模式省略了构造函数模式传递初始化参数的过程，所有的实例在默认情况下都会取得默认的属性值，会在一定程度上造成不方便。
2. 因为所有的实例都是共享一组属性，对于包含基本值的属性来说没有问题，但是对于包含引用类型的值来说（例如数组对象），所有的实例都是对同一个引用类型进行操作，那么属性的操作就不是独立的，最后导致读写的混乱。我们创建的实例一般都是要有属于自己的全部属性的，因此单独使用原型模式的情况是很少存在的。

组合使用构造函数模式和原型模式

创建自定义类型的最常见方式，就是组合使用构造函数模式和原型模式。构造函数模式用于定义实例属性，而原型模式用于定义方法和共享的属性。使用这种模式的好处就是，每个实例都会拥有自己的一份实例属性的副本，但同时又共享着对方法的引用，最大限度地节省了内存。而且这中混成模式还支持向构造函数传递参数，可以说是及两种模式之长。

下面我们通过这种方法来重写一下上面的例子

function Person(name, age, job){this.name = name;this.age = age;this.job = job;
}Person.prototype = {constructor: Person,sayName: function(){alert(this.name);}
}var person1 = new createPerson("james"，9，"student");var person2 = new createPerson("kobe"，9，"student");console.log(person1.name); // "james"
console.log(person2.name); // "kobe"
console.log(person1.sayName === person2.sayName); // true

优点：采用了构造函数模式和原型模式的优点，这种混成模式是目前使用最广泛，认同度最高的一种创建自定类型的方法。

缺点：由于使用了两种模式，因此对于代码的封装性来说不是很好。

动态原型模式

由于上面混成模式存在封装性的问题，动态原型模式是解决这个问题的一个方案。这个方法把所有信息都封装到了构造函数中，而在构造函数中通过判断只初始化一次原型。下面我们来看一下例子

function Person(name, age, job){this.name = name;this.age = age;this.job = job;if(typeof this.sayName !== "function" ){Person.prototype.sayName: function(){alert(this.name);} } 
}var person1 = new createPerson("james"，9，"student");person1.sayName(); // "james"

注意在 if 语句中检查的可以是初始化后应该存在的任何属性或方法，不必要检查每一个方法和属性，只需要检查一个就行。

优点：解决了混成模式中封装性的问题

寄生构造函数模式

如果在前面几种模式不适用的情况下，可以使用寄生构造函数模式。这种模式的基本思想是创建一个函数，该函数的作用仅仅是封装创建对象的代码，然后返回新创建的对象。如下面的例子所示：

function Person(name, age, job){var o = new Object();o.name = name;o.age = age;o.job = job;o.sayName = function(){alert(this.name);};return o;
}var person1 = new Person("james"，9，"student");

通过上面的例子我们可以发现，其实这个模式和工厂模式基本上是一摸一样的，只不过我们是采用 new 操作符最后来创建对象。

注意在构造函数不返回值的情况下，默认会返回新创建的对象，而通过在构造函数的末尾添加一个 return 语句，可以重写调用构造函数时返回的值。

优点：我对这个模式的理解是，它主要是基于一个已有的类型，在实例化时对实例化的对象进行扩展。这样既不用修改原来的构造函数，也达到了扩展对象的目的。

缺点：和工厂模式一样的问题，不能依赖 instanceof 操作符来确定对象的类型。

稳妥构造函数模式

Douglas Crockford 发明了JavaScript中的稳妥对象这个概念。所谓稳妥对象，指的就是，没有公共属性，而且其方法也不使用this的对象。稳妥对象最适合在一些安全的环境中（这些环境中会禁止使用 this和 new），或者在防止数据被其他应用程序改动时使用。

稳妥构造函数遵循与寄生构造函数类似的模式，但有两点不同：一是新创建的对象的实例方法不引用 this ；二是不使用 new 操作符调用构造函数。因此我们可以将前面的例子改写如下：

function Person(name, age, job){//创建要返回的对象var o = new Object();//可以在这里定义私有变量和函数//添加方法o.sayName = function(){console.log(this.name);}//返回对象return o;
} var person1 =  Person("james"，9，"student");person1.sayName(); // "james"

优点：以上面为例，除了 sayName 方法外，没有别的方法可以访问数据成员，这就是稳妥构造函数提供的安全性。

缺点：和寄生构造函数一样，没有办法使用 instanceof 操作符来判断对象的类型

十七、css中几种常见的单位？

（1）px (pixel，像素)：最常用到的 绝对长度单位，相对于显示器分辨率而定的单位，兼容性好。是一个虚拟长度单位，是计算机系统的数字化图像长度单位，如果px要换算成物理长度，需要指定精度DPI(Dots Per Inch，每英寸像素数)，在扫描打印时一般都有DPI可选。Windows系统默认是96dpi，Apple系统默认是72dpi。

（2）em(相对长度单位，相对于当前对象内文本的字体尺寸)：常见 相对长度单位，取决于目标元素字体尺寸。是一个相对长度单位，最初是指字母M的宽度，故名em。现指的是字符宽度的倍数，用法类似百分比，如：0.8em, 1.2em,2em等。通常1em=16px。

（3）pt (point，磅)：绝对长度单位，多用于字体尺寸，1px = 0.75pt。是一个物理长度单位，指的是72分之一英寸。pt=1/72(英寸), px=1/dpi(英寸)

（4）rem（root em，根em）：CSS3中加入的 相对长度单位，取决于文档根元素（通常为:root）的字体尺寸，适用于依据字体尺寸进行的排版，适用于自适应。是CSS3新增的一个相对单位，这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。

（5）百分比：常见相对长度单位，相对于父元素的尺寸的取值，实际使用中，如果父元素是一个非稳定的取值，可能会导致父元素被撑开，而实际值取决于其祖先元素中最近的一个拥有稳定取值的元素。整数取值，并不适用于解决自适应问题。

（6）vw & vh：CSS3中加入的 相对长度单位，取决于浏览器视窗的宽（高），1vw即为浏览器视窗宽度的1/100，适用于依据屏幕宽或高进行的排版，适用于自适应。

（7）vmin &vmax：CSS3中加入的 相对长度单位，取决于浏览器视窗的宽或高中最小（最大）尺寸的轴，适用于依据屏幕最值宽或高进行的排版，适用于自适应。

注：绝对长度单位换算公式： 1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px

十八、常见的布局方式？

常见的布局方式：固定布局、流式布局、弹性布局、浮动布局、定位布局、margin和padding

十九、undefined 与 undeclared 的区别？

已在作用域中声明但还没有赋值的变量，是undefined的。相反，还没有在作用域中声明
过的变量，是undeclared的。对于 undeclared 变量的引用，浏览器会报引用错误，如
ReferenceError: b is not defined。但是我们可以使用typeof的安全防范机制来避免
报错，因为对于undeclared（或者not defined）变量，typeof 会返回"undefined"。

二十、null 和 undefined 的区别？

首先 undefined和null都是基本数据类型，这两个基本数据类型分别都只有一个值，
就是 undefined 和 null。undefined 代表的含义是未定义，null代表的含义是空对象。一
般变量声明了但还没有定义的时候会返回 undefined，null主要用于赋值给一些可能会返回对
象的变量，作为初始化。undefined在 js 中不是一个保留字，这意味着我们可以使用
undefined 来作为一个变量名，这样的做法是非常危险的，它会影响我们对 undefined 值的
判断。但是我们可以通过一些方法获得安全的 undefined 值，比如说void 0。当我们对两种类型使用 typeof进行判断的时候，null类型化会返回 “object”，这是一个历史遗留的问题。
当我们使用双等号对两种类型的值进行比较时会返回true，使用三个等号时会返回 false。

css清除浮动float的七种常用方法总结和兼容性处理

在清除浮动前我们要了解两个重要的定义：

• 浮动的定义：使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。
• 高度塌陷：浮动元素父元素高度自适应（父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷）

知道浮动和为什么要清除浮动之后我们可以开始学习如何清除浮动了，这时候我们就需要用到清除浮动的属性clear,
clear:left | right | both | none | inherit;元素的某个方向上不能有浮动元素
clear:both;在左右两侧均不允许浮动元素。

1、clear清除浮动（添加空div法）

在浮动元素下方添加空div,并给该元素写css样式

{clear:both;height:0;overflow:hidden;
}

2、方法：给浮动元素父级设置高度

我们知道了高度塌陷是应为给浮动元素的父级高度是自适应导致的，那么我们给它的设置适当的高度就可以解决这个问题了。
缺点：在浮动元素高度不确定的时候不适用

3、方法：以浮制浮（父级同时浮动）

何谓“以浮制浮”呢？就是让浮动元素的父级也浮动。
缺点：需要给每个浮动元素父级添加浮动，浮动多了容易出现问题。

4、方法：父级设置成inline-block

缺点：父级的margin左右auto失效，无法使用margin: 0 auto;居中了

5、 <br/> 清浮动

<div class=”box”>
<div class=”top”></div>
<br clear=”both” />
</div>

br 标签自带clear属性，将它设置成both其实和添加空div原理是一样的。
问题：不符合工作中：结构、样式、行为，三者分离的要求。

6、给父级添加overflow:hidden 清浮动方法；

问题：需要配合 宽度 或者 zoom 兼容IE6 IE7；

overflow: hidden;
*zoom: 1;

7、万能清除法 after伪类 清浮动（现在主流方法，推荐使用）

选择符:after{
content:".";
clear:both;
display:block;
height:0;
overflow:hidden;
visibility:hidden;
}

下列代码解释

1、隐式调用

相关文章； 函数柯里化 https://blog.csdn.net/qq_45768871/article/details/110365885

var a = [1,2,3];
var b = [1,2,3];
var c = "1,2,3";  
a == c;  // true  与字符串比较时，会调用toSting()方法
a == b;  // false// 解释
var a = [1, 2, 3];
var b = [1, 2, 3];
var c = "1,2,3";
// 修改a里面的toString方法
a.toString = function () {console.log("tostring被隐式调用");
};console.log(a == c); // 这里出现数组对比字符串也会隐式调用一次toString
a == c; // tostring被隐式调用  与字符串比较时会隐式调用toString方法，
console.log(a==b); // false  与数组比较时比较地址
console.log([1, 2, 3].toString()); // "1,2,3"

2 、执行上下文

<script>var scope = "global";function fn(){console.log(scope);  // undefind     var scope = "local";console.log(scope);  // local}fn();// var 定义变量存在变量提升，会将变量声明放在执行上下文最顶部//fn()等价于var scope = "global";function fn(){var scope;console.log(scope); // undefind     scope = "loacl";console.log(scope)   // local}fn();</script>

3、this指向问题、new 关键都做了什么

相关文章： this指向与new 关键字

 // 一、function Person() {this.name = "哈哈";}var person = new Person();console.log(person.name);  // 哈哈//   二、function People() {this.age = 12;return {age: 45,};}var people = new People();console.log(people.age);// 三、function Animal() {this.name = "Animal";return function () {this.name = "children animal";};}//   3.1var animal = new Animal();console.log(animal.name);  // "" , 此时的animal是一个函数 // 3.2var animal2 = new new Animal()();console.log(animal2.name);// "children animal"

4、JavaScript深入理解之执行上下文示例分析

var a = "global var";function foo(){console.log(a);
}function outerFunc(){var b = "var in outerFunc";console.log(b);function innerFunc(){var c = "var in innerFunc";console.log(c);foo();}innerFunc();
}outerFunc();

执行这段代码，我们很容易判断得到如下结果：

var in outerFunc
var in innerFunc
global var

下面我们来分析一下这段代码的执行过程。

执行分析

4.1全局代码执行

首先在执行全局代码之前， JavaScript 引擎会首先对全局代码进行解析，创建全局执行上下文 globalContext 。

1. 首先会创建全局执行上下文的第一个属性全局变量对象 globalVO 。

  // 省略全局对象其他属性globalContext.globalVO = {a: undefined,foo: reference to function foo,outerFunc: reference to function outerFunc};

2. 然后将 globalVO 压入全局上下文作用域链的顶端。

   globalContext.[[Scope]] = [ globalContext.globalVO ];

3. 然后将全局上下文的作用域链赋值给 globalVO 中所有的函数的 [[Scope]] 属性。

   foo.[[Scope]] = globalContext.[[Scope]];outerFunc.[[Scope]] = globalContext.[[Scope]];

全局执行上下文创建好后，进入到全局执行代码的执行阶段，首先将全局执行上下文压入执行上下文栈中，然后按顺序依次执行代码。

1. 在执行代码前判断得到全局执行上下文中的 this 指向 globalVO;

2. 执行第一行代码 var a = "global var"; ,为 globalVO 中的 a 属性赋值为 "global var";

    globalContext.globalVO = {a: "global var",foo: reference to function foo,outerFunc: reference to function outerFunc};

3. 执行代码 outerFunc();，进入outerFunc()函数执行阶段。

4.2outerFunc() 函数执行阶段

在执行 outerFunc() 函数前，Javascript 引擎会先对 outerFunc 函数代码进行解析，创建 outerFunc 函数的执行上下文 outerFuncContext。

1. 创建 outerFunc 函数执行上下文的活动对象 outerFuncAO。

   outerFuncContext.outerFuncAO = {b: undefined,innerFunc: reference to function innerFunc};

2. 复制outerFunc 函数的 [[Scope]] 属性，为函数执行上下文的作用域链赋值，然后将函数执行上下文的活动对象压入作用域链顶端。

   outerFuncContext.[[Scope]] = [outerFuncContext.outerFuncAO,globalContext.globalVO];

3. 然后将作用域链赋值给outerFuncAO 中所有函数的 [[Scope]] 属性。

  innerFunc.[[Scope]] = outerFuncContext.[[Scope]];

outerFunc函数执行上下文创建后，进入函数代码的执行阶段，将 outerFuncContext压入执行上下文栈中，按顺序依次执行代码。

1. 在执行代码前，根据函数调用方式，判断得到 outerFuncContext 的 this 指向为 globalVO。

2. 执行第一行代码 var b = "var in outerFunc"; ，为 outerFuncAO 的 b 属性赋值。

   outerFuncContext.outerFuncAO = {b: "var in outerFunc",innerFunc: reference to function innerFunc};

3. 然后执行代码 console.log(b); ，打印 b 的属性值。

4. 然后执行代码 innerFunc(); ，进入 innerFunc 函数的执行阶段。

4.3innerFunc() 函数执行阶段

在执行 innerFunc()函数前，Javascript 引擎会先对 innerFunc 函数代码进行解析，创建innerFunc 函数的执行上下文innerFuncContext。

1. 创建 innerFunc 函数执行上下文的活动对象 innerFuncAO。

   innerFuncContext.innerFuncAO = {c: undefined};

2. 复制 innerFunc 函数的 [[Scope]] 属性，为函数执行上下文的作用域链赋值，然后将函数执行上下文的活动对象压入作用域链顶端。

  innerFuncContext.[[Scope]] = [innerFuncContext.innerFuncAO,outerFuncContext.outerFuncAO,globalContext.globalVO];

innerFunc 函数执行上下文创建后，进入函数代码的执行阶段，将 innerFuncContext 压入执行上下文栈中，按顺序依次执行代码。

1. 在执行代码前，根据函数调用方式，判断得到 innerFuncContext 的 this 指向为 globalVO。

2. 执行第一行代码 var c = "var in innerFunc"; ，为 innerFuncAO 的 c 属性赋值。

   innerFuncContext.innerFuncAO = {c: "var in innerFunc"};

3. 然后执行代码 console.log(c); ，打印 c 的属性值。

4. 然后执行代码 foo(); ，进入 foo 函数的执行阶段，注意这里我们是通过作用域链找到的 foo 函数的引用。

4.4foo() 函数执行阶段

在执行 foo() 函数前，Javascript 引擎会先对 foo 函数代码进行解析，创建 foo 函数的执行上下文 fooContext。

1. 创建 foo 函数执行上下文的活动对象 fooAO。

  fooContext.fooAO = {};

2. 复制 foo 函数的 [[Scope]] 属性，为函数执行上下文的作用域链赋值，然后将函数执行上下文的活动对象压入作用域链顶端。

  fooContext.[[Scope]] = [fooContext.fooAO,globalContext.globalVO];

foo 函数执行上下文创建后，进入函数代码的执行阶段，将 fooContext 压入执行上下文栈中，按顺序依次执行代码。

1. 在执行代码前，根据函数调用方式，判断得到 fooContext 的 this 指向为 globalVO。
2. 然后执行代码 console.log(a); ，根据作用域链找到 a 的属性值，然后打印它。

4.5执行结束阶段

我们先来看一下此时的执行上下文栈

函数执行完成后是一个执行上下文弹栈的过程。

1. 在 foo()函数代码执行完成后，执行上下文栈将fooContext弹栈，在没有其他引用的情况下，fooContext中的数据都将被销毁，然后将控制权交还给innerFuncContext。
2. 继续执行innerFunc函数，因为没有其余可执行代码，所以innerFunc()函数执行完成，执行上下文栈将innerFuncContext 弹栈，在没有其他引用的情况下，innerFuncContext中的数据都将被销毁，然后将控制权交还给outerFuncContext。
3. 继续执行 outerFunc函数，因为没有其余可执行代码。所以 outerFunc()函数执行完成，执行上下文栈将 outerFuncContext弹栈，在没有其他引用的情况下，outerFuncContext中的数据都将被销毁，然后将控制权交还给globalContext。
4. 继续执行全局代码，在应用退出时，globalContext弹栈，整段代码执行结束。