前端面试宝典：HTML、CSS与JS基础要点梳理

前端基础面试题是一份针对求职者准备前端开发岗位面试的重要参考资料，涵盖了HTML、CSS和JavaScript的基础理论与实践技巧。这份题目旨在测试应聘者的专业知识和实际应用能力。 **HTML部分：** 1. **HTML语义化** - 语义化的HTML强调使用合适的标签来表示内容的含义，而非仅仅为了外观，有助于提高可访问性和搜索引擎优化。 2. **title和alt属性** - title提供页面标题，当鼠标悬停时显示；alt属性用于提供图像的替代文本，对于视觉障碍用户和搜索引擎爬虫至关重要。 3. **HTML5新特性与移除元素** - HTML5引入了新的元素如<header>、<footer>等，移除了过时的元素如<dir>和<menu>，强化了语义支持。 4. **Label的作用** - Label关联表单元素，点击Label可以激活对应的控件，方便用户操作。 5. **离线存储与加载** - HTML5的AppCache或Service Worker允许网页离线存储数据，当网络不可用时本地加载资源。 6. **iframe缺点** - iframe可能导致性能问题、安全风险，并且不支持跨域交互。 7. **W3C标准与Doctype** - Doctype声明确定浏览器的渲染模式，严格模式下要求符合W3C规范，混杂模式则是兼容老版本浏览器。 8. **全局属性** - 如aria-label（ARIA属性），用于辅助功能，还有content属性用于设置元数据。 9. **viewport和meta** - viewport元标签用于控制移动设备上的视口大小和缩放，meta标签则可用于设置字符集、author等。 10. **div+CSS布局优势** - 提供更灵活、可维护性更好的布局，避免表格布局的繁琐和兼容性问题。 **CSS部分：** 1. **水平垂直居中** - 使用Flexbox或Grid、position和transform等方法实现。 2. **link与@import区别** - link引入外部样式，@import用于内部样式但已被弃用。 3. **BFC与清除浮动** - BFC用于解决布局问题，清除浮动有margin-bottom负边距、after伪元素等方法。 4. **CSS3新特性** - 包括动画、过渡、渐变、阴影、3D变换等，增强了视觉效果。 5. **Flexbox和CSS盒模型** - Flexbox是现代布局模型，IE盒子模型与W3C盒子模型理解布局原理。 6. **CSS动画和伪类-伪元素** - CSS3提供了丰富的动画和选择器，如:hover、before和after。 7. **初始化CSS** - 重置或正常化CSS样式，确保一致性和跨浏览器兼容性。 8. **Sass, LESS, Stylus** - CSS预处理器，提供变量、嵌套规则和函数等功能，提高开发效率。 **JavaScript部分：** 1. **JavaScript规范** - 遵循变量命名、编码风格、函数定义等规则。 2. **闭包** - 让函数可以访问并操作其词法作用域内的变量，实现数据封装和私有变量。 3. **变量对象和作用域** - JavaScript作用域包括全局、函数、块级等，变量对象管理内存引用。 4. **原型和原型链** - 继承机制的核心，通过原型链查找属性和方法。 5. **事件委托** - 通过监听父元素的事件，处理子元素事件，提高性能。 6. **类和继承** - ES6类语法和继承机制，用于代码复用和模块化。 7. **This对象** - JavaScript中，This的值取决于调用上下文，理解它的动态性是关键。 这份面试题库全面覆盖了前端开发的核心知识点，旨在考察应聘者的HTML基础、CSS设计能力以及JavaScript编程技能，是求职者提升自身竞争力的重要备考材料。