HTML

获取页面所有DOM节点

let element = document.querySelector('html')

const DFS = {
    map:new Map(),
    nodes: [],
    do (root) {
        for (let i = 0;i < root.childNodes.length;i++) {
            var node = root.childNodes[i];
            // 过滤 text 节点、script 节点
            if ((node.nodeType != 3) && (node.nodeName !='SCRIPT')) {
                this.nodes.push(node);
                let count = this.map.get(node.nodeName)?this.map.get(node.nodeName):0
                this.map.set(node.nodeName,++count)
                this.do(node);
            }
        }
        return this.nodes;
    }
}

自结束标签

meta：定义页面说明，方便网络引擎搜索

link:连接外部CSS文件或者脚本

base：页面所有连接的基础定位

br：换行

hr:水平线

input:定义表单元素

img:图像标签

mouseover和mouseenter的区别

mouseover/mouseout：当鼠标移入元素或其子元素都会触发事件，有一个重复触发的冒泡过程

mouseenter/mouseleave：当鼠标移入元素本身（不包含元素的子元素）会触发事件，即不会冒泡

clientHeight, scrollHeight, offsetHeight ,以及scrollTop, offsetTop, clientTop的区别？

clientHeight：可视区域高度，不包含border和滚动条 offsetHeight：可视区域高度，包含border和滚动条 scrollHeight：所有区域高度，包含因滚动被隐藏的部分（不包含border） clientTop：边框border的厚度 scrollTop：滚动后被隐藏的高度，获取对象最顶端与窗口中可见内容最顶端之间的距离 offsetTop：获取指定对象相对于版面或布局中设置position属性的父容器顶端位置的距离

HTML5新增内容

新语义化标签：header、footer、nav、section、aside、article、main、figure
新增input类型：color、url、email、date、week、time、number、range、search、tel
新增表单控件属性：placeholder/设置文本框默认提示文字、autofocus/自动获得焦点、autocomplete/联想关键词
存储：提供了sessionStorage、localStorage和本地离线存储（使用manifest配置文件）
多媒体：音频元素audio、视频元素vedio、source、embed
地理定位、canvas画布、拖放API、多线程编程的webworker、websocket协议

Doctype有什么作用？有哪几种模式？

Doctype声明在文档的最前面，告诉浏览器以哪种方式来渲染页面：

严格模式：又称标准模式，排版和JS运作模式是以该浏览器支持的最高标准运行的混杂模式：向后兼容，模拟老式浏览器，防止浏览器无法兼容页面

DOCTYPE声明叫做文件类型定义（DTD），声明的作用为了告诉浏览器该文件的类型。让浏览器解析器知道应该用哪个规范来解析文档。声明必须在 HTML 文档的第一行，这并不是一个 HTML 标签。

严格模式： 又称标准模式，是指浏览器按照 W3C 标准解析代码。

混杂模式： 又称怪异模式或兼容模式，是指浏览器用自己的方式解析代码。

如何区分：浏览器解析时到底使用严格模式还是混杂模式，与网页中的 DTD 直接相关。

如果文档包含严格DTD----严格模式
有URI的过渡DTD----严格模式；没URI的过渡DTD----混杂模式
DTD不存在或者格式不正确----混杂模式
HTML5没有严格和混杂之分
意义： 严格模式与混杂模式存在的意义与其来源密切相关，如果说只存在严格模式，那么许多旧网站必然受到影响，如果只存在混杂模式，那么会回到当时浏览器大战时的混乱，每个浏览器都有自己的解析模式。

什么是WebSocket？有什么特点？

WebSocket是HTML5中新增的协议，支持永久性连接，解决了HTTP协议通信只能由客户端发起的缺陷。

特点：

服务器可以主动向客户端发送信息，客户端也可以主动向服务器发送信息，实现了双向平等对话
建立在TCP协议之上，服务端的实现比较容易
与HTTP协议有着良好的兼容性。默认端口也是80和443，握手阶段采用HTTP协议，因此不容易屏蔽，且能通过各种HTTP代理服务器
数据格式（帧）比较轻量，性能开销小，通信效率高
可以发送文本或二进制数据
无同源限制，客户端可以与任意服务器通信
协议标识符是ws（加密则为wss），服务器网址就是URL

WebSocket连接如何建立

客户端通过http请求与WebSocket服务端协商升级协议，协议升级完成后，后续的数据交换遵照WebSocket的协议。

客户端申请协议升级，采用标准HTTP报文格式，且只支持GET方法

请求首部：

Connection: Upgrade 表示要升级协议

Upgrade: websocket 表示要升级到websocket协议

Sec-WebSocket-Version 表示websocket版本

Sec-WebSocket-Key 与后续服务端响应首部Sec-WebSocket-Accept配套，提供基本的防护，如恶意的连接或无意的连接
服务端响应协议升级，返回如下内容，状态代码101表示协议切换。至此完成协议升级，后续的数据交互都按照新协议来

Connection: Upgrade

Upgrade: websocket

Sec-WebSocket-Accept 根据Sec-WebSocket-Key计算

WebSocket与Ajax的区别

本质不同

Ajax,即异步JavaScript和XML，是一种创建交互式网页应用的网页开发技术；

WebSocket是HTML5一种新的协议，实现了浏览器与服务器全双工通信。其本质是先通过HTTP/HTTPS协议进行握手后创建一个用于交换数据的TCP连接，服务端与客户端通过此TCP连接进行实时通信。
生命周期不同

websocket建立的是长连接，在一个会话中一直保持连接；而ajax是短连接，数据发送和接受完成后就会断开连接。
适用范围不同

websocket一般用于前后端实时数据交互，而ajax前后端非实时数据交互。
发起人不同

Ajax技术需要客户端发起请求，而WebSocket服务器和客户端可以相互推送信息。

Axios

Vue2.0之后，尤雨溪推荐大家用axios替换JQuery ajax，想必让axios进入了很多人的目光中。 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范，它本身具有以下特征：

1.从浏览器中创建 XMLHttpRequest 2.支持 Promise API 3.客户端支持防止CSRF 4.提供了一些并发请求的接口（重要，方便了很多的操作） 5.从 node.js 创建 http 请求 6.拦截请求和响应 7.转换请求和响应数据 8.取消请求 9.自动转换JSON数据

vue中使用axios

import axios from 'axios'
import Vue from 'vue'
import router from './router'
const http = axios.create({
    // baseURL:process.env.Vue_APP_URL||'/admin/api',
    baseURL:'http://localhost:3000/admin/api'
})

HTML5中的拖放API

在HTML5之前，如果要实现拖放效果，一般会使用mousedown、mousemove和mouseup三个事件进行组合来模拟出拖拽效果，比较麻烦。而HTML5规范实现了原生拖放功能，使得元素拖放的实现更加方便和高效。

dragstart：事件主体是被拖放元素，在开始拖放被拖放元素时触发
drag：事件主体是被拖放元素，在正在拖放被拖放元素时触发
dragenter：事件主体是目标元素，在被拖放元素进入目标元素时触发
dragover：事件主体是目标元素，在被拖放元素在目标元素内移动时触发
dragleave：事件主体是目标元素，在被拖放元素移出目标元素时触发
drop：事件主体是目标元素，在目标元素完全接受被拖放元素时触发
dragend：事件主体是被拖放元素，在整个拖放操作结束时触发

前端面试总结-HTML