前端工程师热门面试题（一）

一、HTML相关

1. HTML5的新特性有哪些？
   • 答案要点：HTML5引入了许多新特性和API，如语义化更好的标签（如article、footer、header等）、表单控件（如date、time、email等）、多媒体元素（如video、audio）、本地存储（如localStorage、sessionStorage）、Canvas绘图、Web Workers、WebSocket、Geolocation等。
2. DOCTYPE的作用是什么？
   • 答案要点：DOCTYPE声明位于HTML文档的第一行，用于告诉浏览器使用哪个版本的HTML规范来解析和渲染页面。它的存在和正确性对页面的渲染模式（标准模式或混杂模式）有直接影响。
3. HTML语义化的重要性是什么？
   • 答案要点：HTML语义化有助于提升网页的可读性、可维护性和可访问性。搜索引擎能够更好地理解网页内容，从而提高网站的SEO表现。同时，语义化的HTML也有助于无障碍阅读器的解析，提升网站的可访问性。

二、CSS相关

1. CSS选择器有哪些？它们的优先级如何？
   • 答案要点：CSS选择器包括标签选择器、类选择器、ID选择器、属性选择器、伪类选择器、伪元素选择器等。它们的优先级从低到高依次为：通配符选择器（*）、元素选择器（如div）、类选择器（如.class）、属性选择器（如[type="text"]）、伪类选择器（如:hover）、ID选择器（如#id）、内联样式（在元素内部通过style属性定义）。
2. CSS盒模型有哪些？
   • 答案要点：CSS盒模型包括标准盒模型和IE盒模型（也称为怪异盒模型）。标准盒模型的宽度和高度只包括内容（content）的宽度和高度，而IE盒模型的宽度和高度则包括内容、内边距（padding）、边框（border）和外边距（margin）的总和。通过box-sizing属性可以设置元素的盒模型类型。
3. CSS3新增了哪些特性？
   • 答案要点：CSS3新增了许多强大的特性，如圆角（border-radius）、阴影（box-shadow、text-shadow）、渐变（linear-gradient、radial-gradient）、动画（@keyframes、animation）、过渡（transition）、弹性盒布局（Flexbox）、网格布局（Grid Layout）、媒体查询（Media Queries）等。

三、JavaScript相关

1. JavaScript中的数据类型有哪些？
   • 答案要点：JavaScript中的数据类型分为原始数据类型和对象数据类型两大类。原始数据类型包括Undefined、Null、Boolean、Number、String、Symbol（ES6新增）、BigInt（ES2020新增）。对象数据类型则包括Object、Array、Function等。
2. JavaScript中的事件模型是什么？
   • 答案要点：JavaScript中的事件模型主要包括事件冒泡（Event Bubbling）和事件捕获（Event Capturing）两种。事件冒泡是指事件从目标元素开始，然后逐级向上传播到DOM树的根节点；而事件捕获则相反，事件从DOM树的根节点开始，然后逐级向下传播到目标元素。
3. JavaScript中的闭包是什么？有什么作用？
   • 答案要点：闭包是指一个函数能够访问并操作函数之外的变量。闭包的作用主要有两个方面：一是可以封装私有变量，避免全局变量的污染；二是可以创建模块化的代码，实现数据的持久化存储。

四、框架与库相关

1. React和Vue的主要区别是什么？
   • 答案要点：React和Vue都是流行的前端框架，它们的主要区别在于设计理念、数据流动方式、组件化实现等方面。React采用自上而下的数据流动方式，通过props和state来管理组件的状态；而Vue则采用双向数据绑定（通过v-model指令）和组件化的开发方式，通过Vue实例的data属性来管理组件的状态。
2. Angular的核心概念有哪些？
   • 答案要点：Angular是一个功能强大的前端框架，其核心概念包括组件（Components）、指令（Directives）、服务（Services）、管道（Pipes）、模块（Modules）、路由（Routing）等。组件是Angular应用的基本构建块，用于封装相关的HTML模板、CSS样式和TypeScript代码。指令用于在HTML模板中添加额外的