2020年Web前端面试大全：HTML, CSS, JS必考点解析

"这份文档包含了2020年web前端领域的全面试题及答案，涵盖了HTML、CSS和JavaScript三个主要方面，特别关注了Vue.js和React.js等热门框架。" 【HTML篇】 1. doctype声明用于指定文档类型，影响浏览器以何种模式解析页面，分为Quirks模式、Almost Standards模式和Standards模式。 2. 这三种模式的主要区别在于渲染规则和对HTML错误的容忍度不同，Standards模式遵循W3C标准，其他两种模式则对老版本浏览器兼容性更好。 3. HTML是超文本标记语言，XHTML是XML和HTML的结合，更严格，XML是可扩展标记语言，主要用于数据交换。 4. data-属性允许自定义数据存储在HTML元素中，方便JavaScript访问。 5. HTML语义化意味着使用合适的标签来表达页面内容结构，有利于搜索引擎优化和无障碍访问。 6. HTML5引入了新的标签、API和离线存储等功能，提高了网页交互性和多媒体支持。 【CSS篇】 1. CSS选择器的优先级根据内联样式、ID选择器、类选择器和标签选择器的数量决定，权重越高优先级越高。 2. link用于外部样式表，页面加载时同步执行；@import在页面解析完成后异步加载样式表。 3. em基于父元素字体大小，px是固定单位，rem基于根元素（html）字体大小。 4. 块级元素水平居中的方法包括使用margin auto、display: flex以及text-align: center等。 5. CSS定位方式包括static、relative、absolute、fixed和sticky，z-index用于控制定位元素的堆叠顺序。 6. z-index仅对定位元素有效，创建了层叠上下文的元素可以设置z-index，决定元素的前后关系。 7. 清除浮动的方法包括clearfix hack、使用overflow、设置after伪元素等，防止父元素高度塌陷。 8. CSS Sprites是将多个小图标合并到一个图片文件中，减少HTTP请求，提高页面加载速度。操作上，通过背景定位显示所需图标。 9. 媒体查询用于根据设备特性应用不同的CSS样式，实现响应式设计。 【JavaScript篇】 1. 变量提升是JavaScript中变量声明会被提升到当前作用域顶部的现象，但赋值不会提升。 2. 闭包是指一个函数能够访问并记住其词法作用域内的变量，即使在其外部调用。 3. JavaScript作用域链是查找变量的过程，从当前作用域到全局作用域逐层查找。 4. ES6模块和CommonJS模块主要区别在于导入导出方式和执行时机，ES6采用静态导入导出，CommonJS是运行时动态导入。 5. JavaScript的类型包括原始类型（null、undefined、boolean、number、bigint、string、symbol）和复杂类型（Object）。 6. null是一个特定值，表示“无”或“空”，而undefined表示未定义或未初始化。 7. 原型链是由原型对象形成的链状结构，允许对象间共享属性和方法。 8. this在JavaScript中根据调用方式不同指向不同，如函数调用时指向全局对象，对象方法调用时指向该对象。 9. 箭头函数的this指向其所在上下文的this，而非函数定义的位置。 10. async/await是ES7引入的异步编程语法，基于Promise，使异步代码看起来更像同步代码，易于理解和维护。 文档详细探讨了前端开发中的基础概念和高级技术，对于学习和复习Web前端知识极具价值。