前端基础面试题1

前端基础面试题涵盖了HTML、CSS和JavaScript三大领域，是检验开发者基础知识的重要环节。以下是对这些知识点的详细说明： **HTML** 1. **HTML结构的语义化**：语义化的HTML有助于搜索引擎优化（SEO），使页面更容易被爬虫理解，同时对视觉障碍用户友好，通过屏幕阅读器可以理解页面内容。此外，它也适用于非主流设备如移动终端和PDA。 2. **title和alt属性**：`title`提供元素的额外信息，通常在鼠标悬停时显示；`alt`是图像的备用文本，当图片无法显示时显示给用户。 3. **HTML5新特性**：包括新的元素（如canvas和video）、离线存储、拖放功能、Web Workers和Web Storage等；移除的元素有frame、frameset、menu等。 **CSS** 1. **水平居中与垂直居中**：可以通过margin、flexbox、grid布局等方式实现。 2. **三列布局**：常见做法有浮动布局、负margin布局、display:table和display:flex等。 3. **BFC（Block Formatting Context）**：用于确定块级元素如何布局，并处理内部元素的浮动，防止父元素高度塌陷。 4. **清除浮动**：clear:both、overflow:hidden、clearfix类等方法可以解决元素因浮动而引起的问题。 5. **CSS3新特性**：包括新的选择器、边框半径、渐变、阴影、动画、过渡、多列布局、Flexbox和Grid布局等。 6. **伪类和伪元素**：伪类如`:hover`、`:active`、`:focus`，伪元素如`::before`和`::after`，用于增加元素的样式表现。 **JavaScript** 1. **基本规范**：包括变量声明、函数定义、代码缩进、命名约定等。 2. **闭包**：闭包是一种函数特性，能访问并操作其词法作用域内的变量，即使该作用域已退出。 3. **原型与原型链**：JavaScript中对象可以通过原型链共享属性和方法，实现对象间的继承。 4. **事件委托**：利用事件冒泡或捕获机制，将事件监听器添加到父元素上，处理子元素的事件。 5. **异步编程**：包括回调函数、Promise、async/await等，用于处理非阻塞的I/O操作。 **浏览器** 1. **存储方式**：包括Cookie、localStorage、sessionStorage、IndexedDB等。 2. **HTTP请求**：GET用于获取资源，POST用于提交数据。 3. **渲染过程**：解析HTML构建DOM树，解析CSS生成CSSOM树，合并成渲染树，然后进行布局和绘制。 4. **HTTP状态码**：200表示成功，404表示未找到，500表示服务器错误等。 5. **浏览器缓存**：通过HTTP头的Cache-Control、ETag等字段控制资源的缓存策略。 **性能优化** 1. **SEO优化**：确保页面内容可被搜索引擎抓取，合理使用关键词等。 2. **CSS优化**：避免使用@import，减少选择器复杂度，合并CSS文件等。 3. **JS优化**：压缩和合并JS文件，避免阻塞页面渲染，合理使用异步加载等。 以上只是部分核心知识点的概述，面试中可能还会涉及更多细节和技术深度。熟练掌握这些基础，将有助于开发者在面试中脱颖而出。