前端面试题总结：HTML, CSS, JavaScript 基础与实践

"这是一份面试题总结，涵盖了HTML、CSS和JavaScript的基础及实际工作中的常见问题，旨在帮助准备面试者复习和理解Web开发的核心概念。" 面试题总结详细解答： 1. HTML是一种标记语言，用于构建网页结构，提供内容如文本、图片等。 2. CSS（层叠样式表）用于定义网页的外观和布局，包括颜色、字体、大小、位置等。 3. 行内元素（如`<span>`, `<a>`）在一行内显示，不允许设置宽高，但可以设置`padding`和`margin`。块级元素（如`<div>`, `<p>`）独占一行，可设置宽高，`padding`和`margin`。 4. HTML语义化意味着使用正确的标签来表示内容的结构，有助于搜索引擎优化、屏幕阅读器的使用，以及提高页面可访问性。 5. `rgba()`允许指定颜色的透明度，而`opacity`设置整个元素的透明度，影响元素及其所有子元素。 6. DOCTYPE声明用于告诉浏览器文档使用哪种HTML或XHTML标准，影响浏览器的解析模式。 7. 浏览器内核主要有Trident（IE）、Gecko（Firefox）、WebKit（Safari, Chrome）和Blink（Chrome, Opera）。它们负责解析和渲染网页内容。 8. CSS选择器权重由ID、类、属性、元素等决定，权重越高，优先级越高。 9. WEB标准是指一套规范，确保内容能在各种设备上一致展示，W3C是制定这些标准的组织。 10. 优雅降级是在主要功能在旧浏览器上可用，但可能不完全美观；渐进增强则是先确保基本功能在所有浏览器上可用，然后添加高级特性给支持的浏览器。 11. BFC（块格式化上下文）是CSS布局中的一个重要概念，决定了元素如何对其内容进行布局。 12. 清除浮动的方法有：clearfix hack、使用`overflow`、使用伪元素`::before`和`::after`等。 13. HTML常见兼容性问题包括CSS样式、JavaScript语法、浏览器对新特性的支持等。 14. `reset.css`用于消除浏览器默认样式差异，`normalize.css`则保留基本的样式一致性，两者目的不同。 15. BFC可以帮助实现三栏布局，两侧固定宽度，中间自适应。 16. 精灵图可以减少HTTP请求，提高页面加载速度，但可能导致图片过大，不易维护。 JavaScript基础部分： 1. 数据类型包括基本类型（Undefined、Null、Boolean、Number、String、Symbol、BigInt）和引用类型（Object）。 2. `==`比较值，忽略类型，`===`比较值且类型必须相同。 3. 常用内置对象如Array、Date、Math，常用方法如Array的push、pop等。 4. 闭包是指有权访问另一个函数作用域中的变量的函数，创建闭包的常见方式是内部函数引用外部变量。 5. 原型链是JavaScript中实现继承的基础，每个对象都有一个`__proto__`指向其构造函数的原型。 6. 继承方式有原型链继承、构造函数继承、组合继承、原型式继承、寄生式继承、寄生组合式继承等。 7. 字符串方法如slice、substring、indexOf、replace等。 8. DOM操作包括创建、查找、修改和删除节点。 9. 预解析是JavaScript解析器先解析变量和函数声明的过程。 10. 变量名提升是指变量声明会被提升到当前作用域顶部。 11. `typeof`能返回"undefined"、"boolean"、"number"、"string"、"object"、"function"、"symbol"和"bigint"。 12. 创建函数的方式有函数声明、函数表达式、箭头函数等。 13. 排序并去重可以通过数组的sort和filter方法实现。 14. A、B、C、D的输出结果分别取决于JavaScript的逻辑运算规则。 15. 函数内的`foo`变量被重新声明，所以内部的`console.log(foo)`输出2，外部的输出1。 移动Web模块： 1. 适应不同分辨率和终端的方案通常涉及响应式设计，利用媒体查询、百分比单位、REM等实现。 2. px是绝对单位，适用于桌面端；em相对于父元素的字体大小，rem相对于根元素，更适合移动端。 3. Zepto是轻量级的jQuery替代品，针对移动设备优化，主要区别在于不支持某些jQuery的功能和插件。 实际工作部分： 1. 判断滑屏手势方向通常通过监听`touchstart`、`touchmove`和`touchend`事件，计算触点间距离和角度变化。 2. 移动端调试可以使用Chrome开发者工具的模拟器、远程调试、console.log、断点等。 以上是对面试题的详细解答，涵盖了HTML、CSS和JavaScript的基础知识和实践应用，有助于加深对Web开发的理解。