前端工程师面试题汇总

HTML知识点


1. **文档类型声明(DOCTYPE)**: Doctype的作用是告诉浏览器使用哪种HTML版本来解析页面，严格模式(标准模式)和混杂模式(怪异模式)是浏览器渲染页面的两种模式。严格模式遵循HTML标准，而混杂模式模拟老版本浏览器的行为。


2. **HTML5新特性**: HTML5增加了许多新元素如`<audio>`、`<video>`等，并移除了过时元素如`<font>`、`<center>`等。识别HTML和HTML5可以通过检查文档类型声明。


3. **页面结构元素**: 理解行内元素(如`<span>`、`<a>`), 块级元素(如`<div>`、`<p>`), 和空元素(如`<img>`、`<br>`、`<input>`等)对页面布局和样式设计至关重要。


4. **CSS导入方式**: `link`标签在页面加载时同时加载样式，而`@import`是在页面加载完成后，JavaScript操作CSSDOM时导入样式。


5. **浏览器内核**: 浏览器内核处理网页的渲染、布局、脚本执行等，常见内核有Gecko、Blink、WebKit等。


6. **HTML5离线存储**: 利用`localStorage`、`sessionStorage`和`IndexedDB`等API，为用户提供离线数据存储功能。


7. **标签页通信**: 使用`BroadcastChannel`、`SharedWorker`或`localStorage`事件来实现不同标签页间的数据通信。


8. **兼容性问题**: 了解不同浏览器的特性，尤其是低版本浏览器对现代HTML和CSS支持的问题。


9. **语义化**: HTML语义化是指在编写页面代码时，确保代码的可读性和易用性，以及使用合适的标签以增强页面结构。


10. **页面可见性API**: 该API可以用来检测用户是否在查看当前页面，从而做出相应的响应，如暂停视频播放等。


#### CSS知识点


1. **盒子模型**: CSS的盒子模型包含内容(content)、内边距(padding)、边框(border)和外边距(margin)。旧版IE的盒子模型不包括padding和border在width和height内。


2. **选择器**: CSS选择器分为多种类型，如类选择器、ID选择器、元素选择器等。一些属性如`font-size`和`color`可以继承，而`margin`和`padding`等则不行。


3. **样式优先级**: CSS的优先级由选择器权重、继承、重要性声明等因素决定。


4. **CSS3新特性**: 包括新增伪类选择器、渐变、阴影、动画等。


5. **Flexbox布局**: Flexbox是CSS3中一个强大的布局模型，适用于各种屏幕大小和设备，具有高度的灵活性。


6. **响应式设计**: 响应式设计通过媒体查询、流式布局等技术，使得网页能够适应不同设备的屏幕尺寸。


7. **清除浮动**: 清除浮动是为了防止父元素高度塌陷，确保布局的稳定性。


8. **浏览器兼容性问题**: 解决兼容性问题通常涉及CSS hack技术，或使用浏览器前缀、特性检测等手段。


9. **初始化CSS样式**: CSS重置是为了消除不同浏览器的默认样式差异，提供统一的样式基准。


10. **性能优化**: CSS性能优化方法包括合并选择器、减少嵌套、使用缩写属性、避免CSS表达式等。


通过深入理解和掌握这些知识点，前端工程师可以更有效地编写出兼容性好、易于维护和性能优越的网页。