前端面试题是求职者进入IT行业的必经之路,这些问题旨在考察候选人的技术掌握程度和实践经验。本文汇总了一些高频出现的前端面试题目,涉及H5/C3相关知识点以及CSS3的新特性和功能。
### H5与Canvas
1. **HTML5 Canvas**:这是H5的一项强大特性,允许开发者使用JavaScript绘制图形、动画,常用于数据可视化和游戏开发。
2. **多媒体支持**:`<video>`和`<audio>`元素用于处理视频和音频播放,H5对这些元素提供了丰富的API,支持跨平台兼容。
3. **离线存储**:`localStorage`和`sessionStorage`用于在本地存储数据,`localStorage`用于长期存储,而`sessionStorage`的数据会在浏览器关闭后清除。
4. **语义化元素**:HTML5引入了一系列新的语义化元素(如`<article>`, `<footer>`, `<header>`, `<nav>`, `<section>`),提高页面结构的可读性和SEO优化。
### CSS3 新特性
1. **颜色模式**:引入了RGBA和HSLA模式,提供更丰富的颜色选项。
2. **文本样式**:`text-shadow`用于添加文本阴影效果。
3. **边框样式**:`border-radius`和`box-shadow`提供了更多样化的边框和阴影效果。
4. **盒子模型**:`box-sizing`属性调整盒模型计算方式,影响元素尺寸和内填充。
5. **背景控制**:`background-size`, `background-origin`, 和 `background-clip` 控制背景图片的大小、起点和裁剪区域。
6. **渐变**:`linear-gradient`和`radial-gradient`支持创建复杂的颜色渐变。
7. **过渡与动画**:`transition`用于平滑过渡效果,`@keyframes`实现了自定义动画。
8. **媒体查询**:响应式设计的重要工具,用于多栏布局和视口适应。
9. **border-image`:简化边框图片的使用。
10. **2D和3D变换**:`transform`属性实现元素的移动、旋转、缩放等效果。
11. **字体图标**:`@font-face`允许自定义字体,用于显示图标。
12. **弹性布局**(Flexbox):用于灵活布局,适应不同屏幕尺寸。
### 背景渐变
- **线性渐变示例**:通过指定起点和终点坐标以及颜色,创建连续的色彩变化。
- **简写语法**:Webkit扩展提供了简写方式,通过颜色关键词和方向参数快速定义渐变。
### 页面布局
1. **静态布局**:基础的布局方式,元素按顺序排列。
2. **弹性布局**(Flexbox):响应屏幕大小,元素可以拉伸或收缩以适应容器。
3. **自适应布局**:通过媒体查询实现内容根据设备调整。
4. **流式布局**:基于百分比宽度的布局,适应不同窗口大小。
5. **响应式布局**:使用媒体查询实现针对不同屏幕尺寸的布局策略。
### 浮动
1. **浮动机制**:浮动元素离开正常文档流,左右对齐,直到遇到边界或清除浮动规则。
掌握以上知识点,求职者可以更好地准备前端面试,展示其扎实的基础和对最新技术的了解。同时,实际项目经验和对新技术的理解也是面试官关注的重点。