Web前端面试必备知识点总结

“面试刷题必备 - 传智播客web前端面试总结，涵盖HTML+CSS、JavaScript等核心知识点，帮助考生复习和查漏补缺。” 本文档是传智播客提供的Web前端与移动开发面试宝典，旨在帮助面试者准备前端相关的面试题目，覆盖了HTML+CSS、JavaScript等多个关键领域的知识。以下是文档中提及的一些重点知识点： **HTML+CSS部分** 1. **垂直水平居中**：可以通过绝对定位、 Flexbox 或 Grid 实现。 2. **position属性**：包括static、relative、absolute、fixed，分别对应默认定位、相对定位、绝对定位和固定定位。 3. **px、em、rem的区别**：px是像素单位，em相对于父元素的字体大小，rem相对于根元素的字体大小。 4. **BFC（块格式化上下文）**：用于解决元素浮动带来的布局问题，创建BFC可以防止内容溢出。 5. **表格自动换行**：通过设置`word-wrap: break-word;`或`table-layout: fixed;`实现。 6. **box-sizing**：控制元素的边框和内填充是否包含在元素的总宽度和高度中。 7. **transition**：定义元素从一种样式过渡到另一种样式的持续时间和效果。 8. **translate**：用于元素的位置转换，不改变文档流。 9. **选择器优先级**：ID选择器 > 类选择器 > 标签选择器 > 通配符选择器，内联样式优先级最高。 10. **CSS3选择器**：如伪类选择器（`:hover`, `:active`, `:focus`）、属性选择器、兄弟选择器等。 11. **Iframe**：用于在网页中嵌入另一个网页，常用于实现页面局部刷新。 12. **CSS3新特性**：如阴影、圆角、动画、多列布局、Flexbox、Grid布局等。 13. **XHTML与HTML区别**：XHTML更严格，要求所有标签闭合，语法更接近XML。 14. **CSS引入方式**：link和@import，link是行内样式表，加载同步；@import导入外部样式表，加载异步。 15. **title与alt属性**：title为元素提供额外信息，如鼠标悬停提示；alt是图像替换文本，当图片无法显示时显示。 16. **cssreset**：重置浏览器默认样式，确保跨浏览器一致性。 17. **csssprites**：合并多个小图到一张大图，减少HTTP请求，提高页面加载速度。 18. **清除浮动**：使用clear属性、overflow属性或创建新的BFC来解决元素因浮动造成的布局问题。 19. **z-index**：控制元素的堆叠顺序，数值越大，层级越高。 20. **适应不同分辨率**：响应式设计，利用媒体查询@media调整布局。 **JavaScript部分** 1. **AJAX请求数据步骤**：创建XMLHttpRequest对象、打开连接、发送请求、处理响应。 2. **新窗口打开链接**：使用`target="_blank"`属性。 3. **结构与表现分离**：结构指的是HTML，负责内容；表现指的是CSS，负责样式。 4. **Web语义化**：使用有意义的HTML标签，提高可读性和可访问性。 5. **DOCTYPE**：声明文档类型，影响浏览器以何种模式解析文档。 6. **CSS选择器**：包括标签选择器、类选择器、ID选择器等，优先级由组合计数决定。 7. **display:none与visibility:hidden**：前者隐藏元素并释放空间，后者隐藏元素但保留空间。 8. **浏览器兼容性问题**：例如IE与其他浏览器对某些CSS特性的支持不同，需要使用条件注释或特性检测进行修复。 这些题目涵盖了前端开发者应知的基础和进阶知识，对准备面试或提升技能非常有帮助。