【初级】前端开发工程师的面试100题（速记版）
以下是答主整理的一份适合初级前端开发工程师的面试题速记版，答案简洁好记。包含HTML、CSS、JavaScript、React、Vue和Webpack等基础知识。祝您面试顺利。
HTML 部分
1. 什么是HTML？
HTML是超文本标记语言（HyperText Markup Language），用于构建网页的结构。
2. HTML文档的基本结构是什么？
一个HTML文档通常由 <!DOCTYPE> 声明、<html> 标签、<head> 标签和 <body> 标签组成。
3. DOCTYPE的作用是什么？
DOCTYPE声明定义了文档类型，告诉浏览器使用哪种HTML或XHTML规范来渲染页面。
4. 如何实现HTML5的语义化标签？
HTML5引入了如<header>、<footer>、<article>等语义化标签，这些标签可以让页面结构更清晰，便于搜索引擎优化。
5. <meta>标签的作用是什么？
<meta>标签用于定义HTML文档的元数据，比如字符集、视口设置等。
6. 如何在HTML中嵌入JavaScript代码？
可以直接在HTML文件中使用<script>标签来嵌入JavaScript代码，比如：
<script>console.log("Hello, World!");
</script>
7. 如何在HTML中嵌入CSS代码？
可以通过<style>标签在HTML文件中嵌入CSS代码，比如：
<style>body {background-color: lightblue;}
</style>
8. HTML5中新增了哪些表单输入类型？
HTML5新增了如<input type="email">、<input type="date">、<input type="number">等输入类型，让表单验证更方便。
9. 如何在HTML中实现多语言支持？
可以通过lang属性设置页面的语言，比如<html lang="en">表示页面语言为英语。
10. HTML5的<canvas>元素有什么作用？
<canvas>元素用于绘制图形、动画等，可以通过JavaScript操作其上下文来绘制内容。
11. 如何在HTML中实现一个简单的表单验证？
可以通过HTML5的表单验证属性（如required、pattern）来实现简单的验证，比如：
<input type="text" required pattern="[A-Za-z]+">
12. HTML5的<video>和<audio>元素如何使用？
可以通过<video>和<audio>元素嵌入视频和音频，比如：
<video src="movie.mp4" controls></video>
<audio src="audio.mp3" controls></audio>
13. 如何在HTML中实现一个弹出框？
可以通过<dialog>元素实现一个弹出框，比如：
<dialog open><p>这是一个弹出框</p>
</dialog>
14. HTML5的<details>和<summary>元素有什么作用？
<details>和<summary>元素用于创建一个可折叠的内容区域，比如：
<details><summary>点击展开</summary><p>这里是隐藏的内容</p>
</details>
15. 如何在HTML中实现一个自定义的进度条？
可以通过<progress>元素实现一个进度条，比如：
<progress value="50" max="100"></progress>
CSS 部分
16. CSS盒模型包括哪些部分？
CSS盒模型包括内容区（content）、内边距（padding）、边框（border）和外边距（margin）。
17. 如何让一个元素水平垂直居中？
可以使用Flex布局，设置display: flex; justify-content: center; align-items: center;。
18. CSS选择器的优先级顺序是什么？
内联样式 > ID选择器 > 类选择器 > 标签选择器。
19. CSS3新增了哪些特性？
CSS3新增了如动画（animation）、过渡（transition）、弹性布局（Flexbox）、网格布局（Grid）等特性。
20. 如何使用CSS实现响应式布局？
可以通过媒体查询（@media）根据不同的屏幕宽度应用不同的样式。
21. 如何清除浮动？
可以通过在浮动元素后面添加一个空的<div>标签并设置clear: both;，或者使用伪元素::after来清除浮动。
22. CSS的position属性有哪些值？
position属性的值包括static（默认值）、relative（相对定位）、absolute（绝对定位）、fixed（固定定位）和sticky（粘性定位）。
23. 如何实现一个简单的响应式图片？
可以通过设置图片的max-width为100%，并设置height为auto，让图片根据容器大小自适应。
24. CSS的flex-wrap属性有什么作用？
flex-wrap属性用于控制Flex容器中的项目是否换行，值包括nowrap（不换行）和wrap（换行）。
25. 如何使用CSS实现一个简单的动画效果？
可以通过@keyframes定义动画的关键帧，然后使用animation属性将动画应用到元素上。
26. 如何使用CSS实现一个简单的响应式导航栏？
可以通过媒体查询和Flex布局来实现响应式导航栏，比如：
nav