前端开发核心知识：HTML5特性与经典面试题详解

一、HTML5核心特性全景解析

1. 更便捷的选择器：querySelector/querySelectorAll

革命性改进 ：告别了繁琐的getElementById和getElementsByClassName，使用CSS选择器语法统一DOM查询。

复制代码

// 示例对比
// 传统方式
const oldWay = document.getElementById('content');

// HTML5方式 - 更简洁强大
const modernWay = document.querySelector('#content');
const allLinks = document.querySelectorAll('nav a');

优势：

• 支持复杂的CSS选择器语法
• 返回静态NodeList，性能更可预测
• 代码更简洁易读

2. 多媒体支持：`<video>`和`<audio>`标签

重大意义：终结了对Flash插件的依赖，实现原生音视频支持。

复制代码

<!-- 视频播放示例 -->
<video controls width="600">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  您的浏览器不支持HTML5视频标签
</video>

<!-- 音频播放示例 -->
<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
</audio>

核心属性：

• controls：显示播放控件
• autoplay：自动播放
• loop：循环播放
• muted：静音播放

3. 图形绘制：`<canvas>`标签

能力范围：数据可视化、游戏开发、图像处理、动画制作。

复制代码

<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 绘制红色矩形
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 150, 75);
</script>

应用场景：

• 图表绘制（替代传统图片图表）
• 网页游戏开发
• 图片滤镜处理
• 交互式动画效果

4. 本地存储：localStorage和sessionStorage

与传统Cookie对比：

特性	Cookie	Web Storage
容量	约4KB	约5MB
请求携带	每次HTTP请求	不参与网络请求
API易用性	复杂	简单直观

复制代码

// localStorage - 永久存储
localStorage.setItem('username', '张三');
const name = localStorage.getItem('username');

// sessionStorage - 会话级存储  
sessionStorage.setItem('token', 'abc123');

5. 语义化标签

核心标签体系：

• <header>：页面或章节头部
• <nav>：导航区域
• <main>：主要内容区域（页面唯一）
• <article>：独立内容块（文章、帖子）
• <section>：通用章节
• <aside>：侧边栏相关内容
• <footer>：页脚区域

三大优势：

1. SEO优化：搜索引擎更好理解页面结构
1. 可访问性：屏幕阅读器准确定位内容
1. 可维护性：代码结构清晰易懂

6. 增强的表单功能

新的输入类型：

• email：邮箱验证和专用键盘
• url：URL格式验证
• date：日期选择器
• number：数字输入框
• range：范围滑块
<form> </form>

7. 高级API

现代化Web应用基石：

• Geolocation：地理位置获取
• Drag & Drop：原生拖放支持
• Service Workers：离线应用和推送通知
• Web Workers：多线程处理

二、经典前端面试题深度解析

面试题1：获取UL下所有LI的值

应用场景：动态菜单、列表数据处理、DOM操作

复制代码

// 方法1：现代标准写法
const listItems = document.querySelectorAll('ul li');
listItems.forEach(item => {
    console.log(item.textContent);
});

// 方法2：兼容性写法
const ulElement = document.getElementById('myList');
const items = ulElement.getElementsByTagName('li');
Array.from(items).forEach(item => {
    console.log(item.innerText);
});

技术要点：

• querySelectorAll返回NodeList，支持forEach
• getElementsByTagName返回HTMLCollection，需要转换为数组
• textContentvs innerText：前者获取所有文本，后者考虑CSS样式

面试题2：数组扁平化算法

递归解法（深度优先）

复制代码

function flattenRecursive(arr) {
    let result = [];
    
    for (let item of arr) {
        if (Array.isArray(item)) {
            // 关键理解：递归处理嵌套数组
            result = result.concat(flattenRecursive(item));
        } else {
            result.push(item);
        }
    }
    
    return result;
}

// 测试用例
const nestedArray = [1, [2, [3, 4], 5], 6];
console.log(flattenRecursive(nestedArray)); // [1, 2, 3, 4, 5, 6]

递归执行过程分析：

复制代码

flattenRecursive([1, [2, [3, 4], 5], 6])
│
├── 处理1: 非数组 → result = [1]
├── 处理[2, [3, 4], 5]: 递归调用
│   ├── 处理2: [2]
│   ├── 处理[3,4]: 递归返回[3,4]  
│   ├── 合并: [2,3,4]
│   └── 处理5: [2,3,4,5]
├── 合并: [1,2,3,4,5]  
└── 处理6: [1,2,3,4,5,6]

栈解法（非递归）

复制代码

function flattenStack(arr) {
    const stack = [...arr].reverse();
    const result = [];
    
    while (stack.length > 0) {
        const item = stack.pop();
        
        if (Array.isArray(item)) {
            stack.push(...item.reverse());
        } else {
            result.unshift(item);
        }
    }
    
    return result;
}

算法对比：

特性	递归解法	栈解法
可读性	高	中
性能	可能栈溢出	更安全
适用场景	嵌套深度已知	任意深度

面试题3：下划线命名转驼峰命名

方法一：字符串分割遍历

复制代码

function underscoreToCamelCase(str) {
    if (!str) return '';
    
    const parts = str.split('_');
    let result = parts[0];
    
    for (let i = 1; i < parts.length; i++) {
        if (parts[i]) {
            result += parts[i].charAt(0).toUpperCase() + 
                     parts[i].slice(1).toLowerCase();
        }
    }
    
    return result;
}

执行过程：

复制代码

// "hello_world_example" 转换过程：
1. split('_') → ["hello", "world", "example"]
2. result = "hello"
3. 处理"world" → "World" → "helloWorld"  
4. 处理"example" → "Example" → "helloWorldExample"

方法二：正则表达式替换

复制代码

function underscoreToCamelCaseRegex(str) {
    if (!str) return '';
    
    return str.replace(/_([a-z])/g, (match, letter) => {
        return letter.toUpperCase();
    });
}

正则表达式详解：

• /_([a-z])/g：全局匹配下划线+小写字母
• ([a-z])：捕获组，匹配小写字母
• 回调函数：将捕获的字母转为大写

两种方法对比

复制代码

// 测试用例
const testCases = [
    'user_name',
    'first_name', 
    'get_element_by_id',
    'XML_http_request'
];

// 方法一更适合教学理解，方法二更适合生产环境

三、知识体系总结

HTML5特性学习路径

1. 基础语法：选择器、语义化标签
1. 功能API：存储、多媒体、图形
1. 高级应用：离线能力、性能优化

算法思维培养

1. 递归思想：分解问题，自顶向下
1. 栈的应用：深度优先遍历的迭代实现
1. 数据结构转换：字符串/数组的相互处理

实战建议

1. 循序渐进：从基础DOM操作到复杂算法
1. 理解原理：不仅要知道怎么用，还要知道为什么
1. 多实践：通过项目实战巩固理论知识

本文内容由深度对话整理而成，结合理论解析和代码实践，希望对前端学习者有所帮助。技术之路需要不断学习和实践，共勉！

前端开发核心知识：HTML5特性与经典面试题详解

一、HTML5核心特性全景解析

1. 更便捷的选择器：querySelector/querySelectorAll

2. 多媒体支持：<video>和<audio>标签

3. 图形绘制：<canvas>标签

4. 本地存储：localStorage和sessionStorage

5. 语义化标签

6. 增强的表单功能

7. 高级API

二、经典前端面试题深度解析

面试题1：获取UL下所有LI的值

面试题2：数组扁平化算法

递归解法（深度优先）

栈解法（非递归）

面试题3：下划线命名转驼峰命名

方法一：字符串分割遍历

方法二：正则表达式替换

两种方法对比

三、知识体系总结

HTML5特性学习路径

算法思维培养

实战建议

2. 多媒体支持：`<video>`和`<audio>`标签

3. 图形绘制：`<canvas>`标签