### 前端工程师面试题知识点汇总
#### HTML部分
1. **Doctype作用及模式区分**
- **Doctype作用**：文档类型声明（Document Type Declaration），它用来告诉浏览器文档使用哪种HTML或XHTML规范。
- **严格模式与混杂模式**：这两种模式会影响页面的渲染方式。严格模式按照W3C标准来解析和展现文档；混杂模式则按照浏览器自己的行为来解析和展现文档。通常是因为DOCTYPE声明不正确或者HTML标记不符合规范导致浏览器进入混杂模式。
2. **HTML5简化的原因**
- **简化原因**：HTML5的DOCTYPE简化是为了更好地向前兼容，并减少网络传输的负担。其语法更加简洁且容易记忆。
3. **行内元素与块级元素**
- **行内元素**：`a`, `span`, `img`, `input`, `select`, `label`, `button`等。
- **块级元素**：`div`, `p`, `ul`, `ol`, `li`, `table`, `form`等。
- **空元素**：`br`, `hr`, `meta`, `link`, `img`等。
4. **`link`与`@import`的区别**
- `link`用于定义文档与外部资源的关系，如样式表。它在HTML文档中被解析时就会加载样式，适用于CSS文件的引入。
- `@import`用于CSS文件内部导入其他样式表。它在浏览器解析到这个规则时才会去加载样式，可能会导致页面先闪现未样式化的状态。
5. **浏览器内核的理解**
- 浏览器内核负责解析HTML、CSS和执行JavaScript，将网页呈现给用户。主要分为渲染引擎和JS引擎两大部分。
- **常见内核**：WebKit（Safari, Chrome）、Gecko（Firefox）、Blink（基于WebKit，Chrome和Opera）、Trident（IE）。
6. **HTML5新特性与移除元素**
- **新特性**：增加了语义化标签如`<header>`、`<footer>`、`<nav>`等，支持多媒体元素`<video>`、`<audio>`等。
- **移除元素**：`frame`、`frameset`等。
- **兼容处理**：通过添加前缀如`class="ie7"`等方式，使用Polyfill来模拟新的HTML5特性。
7. **HTML语义化**
- 指的是用正确的标签做正确的事情。例如，使用`<article>`表示独立的文章内容，使用`<section>`表示页面的一个逻辑分区等。
- 优点包括提高搜索引擎的友好性、改善可读性和可维护性等。
8. **HTML5离线存储**
- HTML5提供了离线存储机制，使得应用程序可以在没有网络连接的情况下运行。
- **工作原理**：通过`manifest`文件定义离线可用的资源列表，浏览器会在后台下载并缓存这些资源。
9. **浏览器管理离线资源**
- 浏览器会根据`manifest`文件中的资源列表下载资源并缓存在本地。
- 当用户在线时，浏览器会检查是否有更新的资源，如果有则下载最新的资源。
10. **Cookies、sessionStorage与localStorage的区别**
- **Cookies**：数据量小，每次HTTP请求都会携带cookie信息，主要用于身份验证。
- **sessionStorage**：会话级别的存储，关闭浏览器窗口即销毁。
- **localStorage**：持久化存储，除非主动清除或使用期限到达。
11. **`iframe`的缺点**
- 安全问题，如XSS攻击。
- 性能问题，额外的HTTP请求。
- 不利于SEO优化。
12. **`label`的作用**
- `label`用于关联表单控件，增强用户体验。可通过`for`属性指定与之关联的`input`元素。
13. **关闭HTML5表单自动完成**
- 通过设置`autocomplete="off"`属性。
14. **多标签页通信**
- 可以通过`localStorage`或`IndexedDB`来进行通信，也可以使用`PostMessage`API。
15. **WebSocket兼容低版本浏览器**
- 使用polyfill库如`ws`。
- 或者采用降级方案，如轮询、长轮询等。
16. **页面可见性API用途**
- 可以用于暂停视频播放、停止计费、优化性能等场景。
17. **CSS选择符**
- 包括基本选择符（如`element`, `#id`, `.class`），组合选择符（如`parent > child`, `element + element`），伪类选择符（如`:hover`, `:first-child`）等。
18. **CSS优先级算法**
- 由具体性（Specificity）、来源（Source）、重要性（!important）三个维度决定。
19. **CSS3新特性**
- 包括新的布局模型（Flexbox、Grid）、过渡与动画、渐变、阴影、圆角等。
20. **Flexbox适用场景**
- 适用于复杂布局需求，如导航栏、卡片布局、网格布局等。
21. **纯CSS创建三角形原理**
- 通过设置宽高为0的元素，使用`border`属性来实现。
22. **满屏品字布局设计**
- 可以使用Flexbox或Grid布局来实现。
23. **常见兼容性问题及解决方案**
- **问题**：如IE8及以下版本对CSS3特性的支持不足。
- **解决方法**：使用条件注释、Polyfills等。
24. **初始化CSS样式的必要性**
- 为了消除浏览器默认样式差异，确保页面在所有浏览器中具有一致的表现。
25. **`absolute`的containing block计算方式**
- `absolute`元素的包含块是由最近的非`static`定位祖先元素决定的。
26. **`visibility: collapse`属性值**
- 表示隐藏元素，但不占用空间。仅适用于表格单元格。
27. **`position`与其他属性的交互**
- 如`float`会使元素脱离普通文档流，`position`会影响元素的位置布局等。
28. **BFC规范的理解**
- BFC是指一个隔离的独立容器，其中的元素不会影响到容器外面的元素。通过设置`overflow`、`float`等属性可以创建BFC。
29. **CSS权重优先级计算**
- CSS选择器的权重由ID选择器（100）、类选择器（10）、标签选择器（1）组成。
30. **清除浮动的方法**
- 使用`clear`属性、`overflow`属性或`::after`伪元素等。
31. **媒体查询**
- 用于响应式设计，根据不同设备的屏幕尺寸调整布局。
32. **响应式设计**
- 一种设计思想，旨在使网站能够在不同设备和屏幕尺寸上自适应显示。
33. **视差滚动效果**
- 实现时需要对每个元素设置不同的滚动速度，从而产生层次感。
34. **`::before`和`:after`的区别**
- 在CSS3中，`::before`和`::after`是伪元素，用于在元素前后插入内容。双冒号是CSS3中的写法，单冒号是CSS2中的写法。
35. **修改Chrome记住密码后的自动填充背景**
- 可以通过设置`-webkit-text-fill-color`属性来改变文本颜色，使其与背景色相同。
36. **`line-height`的理解**
- 指文本行之间的距离，可以通过设置数值或单位来控制行间距。
37. **移动端布局**
- 可以使用百分比、媒体查询等技术实现响应式设计。
38. **CSS优化方法**
- 减少不必要的选择器，合并CSS文件，使用压缩工具等。
39. **浏览器解析CSS选择器**
- 浏览器会按照从右到左的顺序解析选择器，找到匹配的元素并应用样式。
40. **`margin`与`padding`的使用场景**
- `margin`用于控制元素之间的距离，`padding`用于控制元素内容与边框之间的距离。
#### CSS部分
以上总结了前端工程师面试中涉及的HTML和CSS相关知识点，覆盖了基础知识、高级特性、兼容性问题等多个方面，帮助面试者全面掌握前端技术要点。
