Web前端面试题涵盖了许多核心概念和技术，以下是这些题目所涉及的知识点详解：
1. 前端页面的三层构成：结构层（HTML）、表现层（CSS）和行为层（JavaScript）。结构层负责内容的组织，表现层处理外观设计，行为层使页面具有交互性。
2. 行内元素包括`<span>`, `<a>`, `<strong>`, `<em>`, `<img>`等，它们在一行内显示；块级元素如`<div>`, `<p>`, `<h1>`, `<ul>`, `<li>`等，每个元素都占据一整行。行内元素通常用于文本和链接，而块级元素用于组织大的内容结构。
3. 转换元素类型：使用CSS的`display`属性，将`display: block;`应用于行内元素可使其变为块级元素，反之，`display: inline;`可使块级元素变为行内元素。
4. CSS隐藏元素的方法：`display: none;`完全隐藏元素，不占用空间；`visibility: hidden;`元素不可见但保留空间；`opacity: 0;`元素透明，仍占用空间。
5. 清除浮动：`clear: both;`防止元素被浮动元素影响，`overflow: auto;`或`overflow: hidden;`创建新的BFC（块格式化上下文）自动清除浮动。
6. CSS3新特性：伪元素（`:before`, `:after`），动画（`@keyframes`），阴影（`box-shadow`），边框半径（`border-radius`），多列布局（`column-count`），媒体查询（`@media`）等。
7. CSS选择器：ID选择器（`#id`），类选择器（`.class`），元素选择器（`tag`），后代选择器（`ancestor descendant`），属性选择器（`[attr=value]`）等。
8. 强制类型转换：`Number(value)`，`parseInt(string, radix)`，`parseFloat(string)`。
9. HTML5新特性：离线存储（`AppCache`），拖放功能（`drag and drop`），媒体元素（`<video>`, `<audio>`），语义化标签（`<article>`, `<aside>`, `<header>`, `<footer>`），Geolocation API等。
10. 数组操作：
- `pop()`：删除并返回数组最后一个元素。
- `push()`：向数组末尾添加一个或多个元素。
- `shift()`：删除并返回数组第一个元素。
- `unshift()`：向数组开头添加一个或多个元素。
11. 表单提交方式：`submit`按钮点击或`form`元素的`onsubmit`事件，以及通过JavaScript调用`form.submit()`。
12. AngularJS中的`ngRoute`用于实现路由管理，分发用户请求到不同的视图和控制器。
13. AngularJS常用服务：`$http`用于HTTP请求，`$scope`作为模型对象，`$timeout`延迟执行函数等。
14. Vue.js内置指令以`v-`开头，如`v-if`, `v-for`, `v-bind`等。
15. SVG绘制矩形：`<rect x="10" y="10" width="100" height="50" />`。
16. HTML5中的`canvas`是一个可绘制图形的区域，使用`context.beginPath();`开始路径，`context.moveTo(x1, y1);`移动到起点，`context.lineTo(x2, y2);`绘制直线，`context.stroke();`描边。
17. jQuery获取所有checkbox：`$('input[type=checkbox]')`。
18. JavaScript的`typeof`返回的数据类型：`'undefined'`, `'boolean'`, `'number'`, `'string'`, `'object'`, `'function'`, `'symbol'`（ES6新增）和`'bigint'`（ES10新增）。
19. 响应式CSS定义：通过媒体查询（`@media`）根据设备特性调整样式，使网站适应不同屏幕尺寸。
20. `px`是绝对单位，`em`是相对单位，通常`1em`等于当前字体大小，换算关系为`1em = fontSizeInPx`。
21. 阻止事件冒泡：`event.stopPropagation();`，阻止默认事件：`event.preventDefault();`。
22. Ajax处理跨域：CORS（跨源资源共享），JSONP（JSON with Padding），代理服务器。
23. AngularJS中两个不相干的控制器间通信可以通过服务或者事件广播实现。
24. Vue.js的两种模式：单文件组件（SFC）和模块化开发。
25. AngularJS四大核心特性：数据绑定，依赖注入，指令系统，MVC架构。
26. AngularJS定义hello指令：`app.directive('hello', function() { return { template: 'Hello, {{name}}!', scope: { name: '@' } }; });`
27. 去除数组重复元素：使用`Set`对象或`filter()`结合`indexOf()`。
28. 让`div`垂直居中：使用`display: flex;`和`align-items: center;`，或者使用`position: absolute;`和`transform: translateY(-50%);`。
29. 同步和异步：同步执行顺序执行，不阻塞后续代码；异步非顺序执行，利用回调、Promise或async/await处理非阻塞操作。
30. 性能优化方法：
- 减少HTTP请求
- 压缩和合并资源文件
- 使用CDN加速
- 利用缓存策略
- 优化图片资源，如使用WebP格式，压缩图片大小
- 适当使用异步加载和懒加载
- 避免DOM操作，减少重绘和回流
- 使用虚拟DOM和Diff算法（如React、Vue）
- 代码优化，避免冗余和全局查找
- 利用服务端渲染（SSR）提升首屏加载速度。
