HTML5面试题全攻略从基础到高级助你轻松应对技术面试挑战

引言

HTML5作为现代Web开发的核心技术，是前端工程师面试中必考的内容。无论是初级还是高级职位，面试官都会从基础概念到高级特性全面考察候选人的知识深度和广度。本文将系统性地梳理HTML5面试中的常见问题，从基础概念到高级特性，再到实际应用和最佳实践，帮助你全面准备技术面试。

一、HTML5基础概念

1.1 HTML5是什么？与HTML4相比有哪些主要改进？

HTML5是HTML的第五次重大修订，于2014年正式成为W3C推荐标准。与HTML4相比，HTML5带来了许多革命性的改进：

主要改进包括：

语义化标签：引入了<header>、<nav>、<section>、<article>、<footer>等语义化标签，使文档结构更清晰
多媒体支持：原生支持音频（<audio>）和视频（<video>）标签，无需依赖Flash等插件
图形和绘图：支持Canvas和SVG，便于绘制2D图形和矢量图形
本地存储：提供了localStorage、sessionStorage和IndexedDB等客户端存储方案
地理定位：通过Geolocation API获取用户地理位置
表单增强：新增了多种输入类型（email、url、number、date等）和表单验证属性
离线应用：通过Application Cache和Service Worker实现离线应用
Web Workers：支持在后台运行JavaScript，避免阻塞UI线程
WebSocket：实现全双工通信，适合实时应用

示例对比：

<!-- HTML4时代的多媒体实现 -->
<embed src="video.swf" type="application/x-shockwave-flash">

<!-- HTML5时代的多媒体实现 -->
<video controls width="640" height="360">
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.webm" type="video/webm">
    您的浏览器不支持视频标签
</video>

1.2 什么是语义化HTML？为什么重要？

语义化HTML是指使用具有明确含义的HTML标签来构建文档结构，而不是仅仅使用<div>和<span>等通用标签。

重要性：

可访问性：屏幕阅读器可以更好地理解页面结构
SEO优化：搜索引擎更容易理解页面内容
代码可维护性：代码结构更清晰，易于理解和维护
跨设备兼容性：在不同设备上表现更一致

语义化示例：

<!-- 非语义化结构 -->
<div class="header">
    <div class="nav">
        <div class="nav-item">首页</div>
        <div class="nav-item">关于</div>
    </div>
</div>
<div class="main-content">
    <div class="article">
        <div class="title">文章标题</div>
        <div class="content">文章内容...</div>
    </div>
</div>
<div class="footer">版权所有</div>

<!-- 语义化结构 -->
<header>
    <nav>
        <a href="/">首页</a>
        <a href="/about">关于</a>
    </nav>
</header>
<main>
    <article>
        <h1>文章标题</h1>
        <p>文章内容...</p>
    </article>
</main>
<footer>版权所有</footer>

1.3 HTML5文档的基本结构

一个标准的HTML5文档结构如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面标题</title>
    <!-- 其他元数据和样式 -->
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

关键元素说明：

<!DOCTYPE html>：文档类型声明，告诉浏览器使用HTML5标准
<html lang="zh-CN">：根元素，lang属性指定文档语言
<head>：包含文档的元数据（metadata）
<meta charset="UTF-8">：指定字符编码
<meta name="viewport">：移动端视口设置，确保响应式设计
<title>：页面标题，显示在浏览器标签页

二、HTML5核心特性详解

2.1 表单增强

HTML5为表单带来了许多新特性和输入类型：

新输入类型：

email：邮箱地址
url：网址
number：数字
range：滑块
date：日期选择器
color：颜色选择器
search：搜索框

表单验证属性：

required：必填字段
pattern：正则表达式验证
min/max：数值范围
minlength/maxlength：文本长度限制

示例：

<form id="userForm">
    <label for="email">邮箱：</label>
    <input type="email" id="email" name="email" required 
           placeholder="example@domain.com">
    
    <label for="age">年龄：</label>
    <input type="number" id="age" name="age" min="18" max="100" required>
    
    <label for="birthdate">出生日期：</label>
    <input type="date" id="birthdate" name="birthdate" required>
    
    <label for="password">密码：</label>
    <input type="password" id="password" name="password" 
           pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$"
           title="至少8位，包含大小写字母和数字"
           required>
    
    <label for="bio">个人简介：</label>
    <textarea id="bio" name="bio" minlength="10" maxlength="500"></textarea>
    
    <button type="submit">提交</button>
</form>

<script>
// 自定义验证
document.getElementById('userForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const email = document.getElementById('email');
    const age = document.getElementById('age');
    
    // 自定义验证逻辑
    if (!email.validity.valid) {
        alert('请输入有效的邮箱地址');
        return;
    }
    
    if (!age.validity.valid) {
        alert('年龄必须在18-100之间');
        return;
    }
    
    // 表单数据处理
    const formData = new FormData(this);
    console.log('表单数据：', Object.fromEntries(formData));
});
</script>

2.2 多媒体标签

音频标签 <audio>：

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
    您的浏览器不支持音频播放
</audio>

<!-- JavaScript控制 -->
<audio id="myAudio" src="audio.mp3"></audio>
<button onclick="playAudio()">播放</button>
<button onclick="pauseAudio()">暂停</button>

<script>
function playAudio() {
    document.getElementById('myAudio').play();
}

function pauseAudio() {
    document.getElementById('myAudio').pause();
}
</script>

视频标签 <video>：

<video id="myVideo" controls width="640" height="360" poster="poster.jpg">
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    <track kind="subtitles" src="subtitles.vtt" srclang="zh" label="中文字幕">
    您的浏览器不支持视频播放
</video>

<script>
const video = document.getElementById('myVideo');

// 事件监听
video.addEventListener('play', () => console.log('视频开始播放'));
video.addEventListener('pause', () => console.log('视频暂停'));
video.addEventListener('ended', () => console.log('视频播放结束'));
video.addEventListener('timeupdate', () => {
    console.log(`当前进度: ${video.currentTime}/${video.duration}`);
});

// 控制视频
function seekTo(time) {
    video.currentTime = time;
}

function changeSpeed(speed) {
    video.playbackRate = speed;
}
</script>

2.3 Canvas绘图

Canvas是HTML5中用于绘制2D图形的强大工具：

<canvas id="myCanvas" width="800" height="400" style="border:1px solid #000;"></canvas>

<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 绘制矩形
ctx.fillStyle = '#FF6B6B';
ctx.fillRect(50, 50, 150, 100);

// 绘制圆形
ctx.beginPath();
ctx.arc(300, 100, 50, 0, Math.PI * 2);
ctx.fillStyle = '#4ECDC4';
ctx.fill();

// 绘制线条
ctx.beginPath();
ctx.moveTo(400, 50);
ctx.lineTo(500, 150);
ctx.lineTo(450, 200);
ctx.strokeStyle = '#45B7D1';
ctx.lineWidth = 3;
ctx.stroke();

// 绘制文本
ctx.font = '24px Arial';
ctx.fillStyle = '#333';
ctx.fillText('Hello Canvas!', 50, 300);

// 绘制渐变
const gradient = ctx.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, 'red');
gradient.addColorStop(1, 'blue');
ctx.fillStyle = gradient;
ctx.fillRect(600, 50, 150, 100);

// 绘制图像
const img = new Image();
img.onload = function() {
    ctx.drawImage(img, 600, 200, 150, 100);
};
img.src = 'image.jpg';
</script>

2.4 SVG（可缩放矢量图形）

SVG是基于XML的矢量图形格式，与Canvas不同，SVG是DOM的一部分：

<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
    <!-- 矩形 -->
    <rect x="10" y="10" width="100" height="80" fill="#FF6B6B" stroke="#333" stroke-width="2"/>
    
    <!-- 圆形 -->
    <circle cx="200" cy="50" r="40" fill="#4ECDC4" stroke="#333" stroke-width="2"/>
    
    <!-- 椭圆 -->
    <ellipse cx="300" cy="50" rx="50" ry="30" fill="#45B7D1"/>
    
    <!-- 线条 -->
    <line x1="10" y1="100" x2="100" y2="150" stroke="#333" stroke-width="2"/>
    
    <!-- 多边形 -->
    <polygon points="150,100 200,150 250,100 200,50" fill="#FFD93D" stroke="#333" stroke-width="2"/>
    
    <!-- 路径 -->
    <path d="M 300 100 Q 350 50 400 100 T 450 100" stroke="#6BCB77" stroke-width="2" fill="none"/>
    
    <!-- 文本 -->
    <text x="10" y="180" font-family="Arial" font-size="16" fill="#333">SVG示例</text>
</svg>

<!-- SVG与JavaScript交互 -->
<svg id="interactiveSvg" width="200" height="100">
    <rect id="rect" x="10" y="10" width="80" height="80" fill="#FF6B6B" style="cursor:pointer"/>
</svg>

<script>
const rect = document.getElementById('rect');
rect.addEventListener('click', function() {
    this.setAttribute('fill', this.getAttribute('fill') === '#FF6B6B' ? '#4ECDC4' : '#FF6B6B');
});
</script>

三、HTML5高级特性

3.1 本地存储

localStorage和sessionStorage：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>本地存储示例</title>
</head>
<body>
    <h2>localStorage示例</h2>
    <input type="text" id="keyInput" placeholder="键名">
    <input type="text" id="valueInput" placeholder="值">
    <button onclick="saveData()">保存</button>
    <button onclick="loadData()">读取</button>
    <button onclick="clearData()">清除</button>
    <div id="result"></div>

    <script>
        // localStorage示例
        function saveData() {
            const key = document.getElementById('keyInput').value;
            const value = document.getElementById('valueInput').value;
            
            if (key && value) {
                // 存储字符串
                localStorage.setItem(key, value);
                alert('数据已保存！');
            }
        }

        function loadData() {
            const key = document.getElementById('keyInput').value;
            const result = document.getElementById('result');
            
            if (key) {
                const value = localStorage.getItem(key);
                result.innerHTML = `键"${key}"的值为: ${value || '不存在'}`;
            }
        }

        function clearData() {
            localStorage.clear();
            document.getElementById('result').innerHTML = '所有数据已清除！';
        }

        // 存储对象（需要序列化）
        const user = {
            name: '张三',
            age: 25,
            hobbies: ['阅读', '编程', '旅行']
        };
        
        // 存储
        localStorage.setItem('user', JSON.stringify(user));
        
        // 读取
        const storedUser = JSON.parse(localStorage.getItem('user'));
        console.log(storedUser);
    </script>
</body>
</html>

IndexedDB（更复杂的客户端数据库）：

// IndexedDB基本操作
let db;
const request = indexedDB.open('MyDatabase', 1);

request.onerror = function(event) {
    console.error('数据库打开失败:', event.target.error);
};

request.onsuccess = function(event) {
    db = event.target.result;
    console.log('数据库打开成功');
    // 进行数据操作
    addData();
};

request.onupgradeneeded = function(event) {
    db = event.target.result;
    
    // 创建对象存储（表）
    if (!db.objectStoreNames.contains('users')) {
        const objectStore = db.createObjectStore('users', { keyPath: 'id', autoIncrement: true });
        
        // 创建索引
        objectStore.createIndex('name', 'name', { unique: false });
        objectStore.createIndex('email', 'email', { unique: true });
    }
};

// 添加数据
function addData() {
    const transaction = db.transaction(['users'], 'readwrite');
    const objectStore = transaction.objectStore('users');
    
    const user = {
        name: '李四',
        email: 'lisi@example.com',
        age: 30,
        created: new Date()
    };
    
    const request = objectStore.add(user);
    
    request.onsuccess = function() {
        console.log('数据添加成功');
    };
    
    request.onerror = function() {
        console.error('数据添加失败');
    };
}

// 查询数据
function queryData() {
    const transaction = db.transaction(['users'], 'readonly');
    const objectStore = transaction.objectStore('users');
    const index = objectStore.index('name');
    
    const request = index.get('李四');
    
    request.onsuccess = function(event) {
        const user = event.target.result;
        console.log('查询结果:', user);
    };
}

3.2 地理定位

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>地理定位示例</title>
    <style>
        #map {
            width: 100%;
            height: 400px;
            border: 1px solid #ccc;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h2>地理定位示例</h2>
    <button onclick="getLocation()">获取位置</button>
    <div id="locationInfo"></div>
    <div id="map"></div>

    <script>
        function getLocation() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(
                    showPosition,
                    showError,
                    {
                        enableHighAccuracy: true,  // 高精度
                        timeout: 5000,            // 超时时间
                        maximumAge: 0             // 缓存时间
                    }
                );
            } else {
                alert('您的浏览器不支持地理定位');
            }
        }

        function showPosition(position) {
            const lat = position.coords.latitude;
            const lon = position.coords.longitude;
            const accuracy = position.coords.accuracy;
            
            const info = `
                <p>纬度: ${lat}</p>
                <p>经度: ${lon}</p>
                <p>精度: ${accuracy} 米</p>
                <p>时间戳: ${new Date(position.timestamp).toLocaleString()}</p>
            `;
            
            document.getElementById('locationInfo').innerHTML = info;
            
            // 显示地图（这里使用简单的坐标显示）
            showMap(lat, lon);
        }

        function showError(error) {
            let message = '';
            switch(error.code) {
                case error.PERMISSION_DENIED:
                    message = '用户拒绝了位置请求';
                    break;
                case error.POSITION_UNAVAILABLE:
                    message = '位置信息不可用';
                    break;
                case error.TIMEOUT:
                    message = '请求超时';
                    break;
                default:
                    message = '发生未知错误';
                    break;
            }
            alert(message);
        }

        function showMap(lat, lon) {
            // 这里可以集成地图API，如百度地图、高德地图或Google Maps
            const mapDiv = document.getElementById('map');
            mapDiv.innerHTML = `
                <div style="padding: 20px; text-align: center;">
                    <h3>位置坐标</h3>
                    <p>纬度: ${lat}</p>
                    <p>经度: ${lon}</p>
                    <p>地图API集成点：此处可集成百度/高德/Google地图</p>
                </div>
            `;
        }

        // 持续监听位置变化
        function watchPosition() {
            const watchId = navigator.geolocation.watchPosition(
                function(position) {
                    console.log('位置更新:', position.coords.latitude, position.coords.longitude);
                },
                function(error) {
                    console.error('位置监听错误:', error);
                }
            );
            
            // 停止监听
            // navigator.geolocation.clearWatch(watchId);
        }
    </script>
</body>
</html>

3.3 Web Workers

Web Workers允许在后台线程中运行JavaScript，避免阻塞主线程：

主线程代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Web Workers示例</title>
</head>
<body>
    <h2>Web Workers示例</h2>
    <button onclick="startWorker()">开始计算</button>
    <button onclick="stopWorker()">停止计算</button>
    <div id="result"></div>
    <div id="progress"></div>

    <script>
        let worker;

        function startWorker() {
            // 创建Worker
            worker = new Worker('worker.js');
            
            // 监听消息
            worker.onmessage = function(event) {
                const data = event.data;
                
                if (data.type === 'progress') {
                    document.getElementById('progress').innerHTML = 
                        `进度: ${data.value}%`;
                } else if (data.type === 'result') {
                    document.getElementById('result').innerHTML = 
                        `计算结果: ${data.value}`;
                }
            };
            
            // 发送消息到Worker
            worker.postMessage({
                type: 'start',
                data: { iterations: 10000000 }
            });
        }

        function stopWorker() {
            if (worker) {
                worker.terminate();
                worker = null;
                document.getElementById('progress').innerHTML = '已停止';
            }
        }
    </script>
</body>
</html>

Worker线程代码（worker.js）：

// worker.js
self.onmessage = function(event) {
    const data = event.data;
    
    if (data.type === 'start') {
        const iterations = data.data.iterations;
        let result = 0;
        
        // 模拟耗时计算
        for (let i = 0; i < iterations; i++) {
            result += Math.sqrt(i);
            
            // 定期发送进度
            if (i % 1000000 === 0) {
                const progress = Math.round((i / iterations) * 100);
                self.postMessage({
                    type: 'progress',
                    value: progress
                });
            }
        }
        
        // 发送最终结果
        self.postMessage({
            type: 'result',
            value: result
        });
    }
};

3.4 WebSocket

WebSocket提供全双工通信，适合实时应用：

服务器端（Node.js示例）：

// server.js
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', function connection(ws) {
    console.log('新客户端连接');
    
    // 发送欢迎消息
    ws.send(JSON.stringify({
        type: 'message',
        content: '欢迎连接WebSocket服务器'
    }));
    
    // 监听消息
    ws.on('message', function incoming(message) {
        console.log('收到消息:', message);
        
        // 广播消息给所有客户端
        wss.clients.forEach(function each(client) {
            if (client.readyState === WebSocket.OPEN) {
                client.send(JSON.stringify({
                    type: 'message',
                    content: `客户端说: ${message}`,
                    timestamp: new Date().toISOString()
                }));
            }
        });
    });
    
    // 监听关闭
    ws.on('close', function() {
        console.log('客户端断开连接');
    });
});

console.log('WebSocket服务器运行在 ws://localhost:8080');

客户端代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>WebSocket客户端</title>
    <style>
        #messages {
            height: 300px;
            border: 1px solid #ccc;
            overflow-y: auto;
            padding: 10px;
            margin-bottom: 10px;
        }
        .message {
            margin: 5px 0;
            padding: 5px;
            background: #f0f0f0;
            border-radius: 4px;
        }
        .system {
            background: #e0e0e0;
            font-style: italic;
        }
    </style>
</head>
<body>
    <h2>WebSocket聊天室</h2>
    <div id="messages"></div>
    <input type="text" id="messageInput" placeholder="输入消息..." style="width: 300px;">
    <button onclick="sendMessage()">发送</button>
    <button onclick="connect()">连接</button>
    <button onclick="disconnect()">断开</button>

    <script>
        let ws = null;
        const messagesDiv = document.getElementById('messages');
        
        function connect() {
            // 创建WebSocket连接
            ws = new WebSocket('ws://localhost:8080');
            
            // 连接打开
            ws.onopen = function() {
                addMessage('系统', '已连接到服务器', 'system');
            };
            
            // 接收消息
            ws.onmessage = function(event) {
                const data = JSON.parse(event.data);
                if (data.type === 'message') {
                    addMessage('服务器', data.content, 'system');
                }
            };
            
            // 连接关闭
            ws.onclose = function() {
                addMessage('系统', '连接已关闭', 'system');
            };
            
            // 错误处理
            ws.onerror = function(error) {
                console.error('WebSocket错误:', error);
                addMessage('系统', '连接错误', 'system');
            };
        }
        
        function disconnect() {
            if (ws) {
                ws.close();
                ws = null;
            }
        }
        
        function sendMessage() {
            const input = document.getElementById('messageInput');
            const message = input.value.trim();
            
            if (message && ws && ws.readyState === WebSocket.OPEN) {
                ws.send(message);
                addMessage('我', message, 'me');
                input.value = '';
            }
        }
        
        function addMessage(sender, content, className) {
            const div = document.createElement('div');
            div.className = 'message ' + (className || '');
            div.innerHTML = `<strong>${sender}:</strong> ${content}`;
            messagesDiv.appendChild(div);
            messagesDiv.scrollTop = messagesDiv.scrollHeight;
        }
        
        // 回车发送
        document.getElementById('messageInput').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                sendMessage();
            }
        });
    </script>
</body>
</html>

四、HTML5面试常见问题及答案

4.1 基础问题

Q1: 什么是HTML5的DOCTYPE声明？ A: <!DOCTYPE html>是HTML5的文档类型声明，它告诉浏览器使用HTML5标准来解析页面。与HTML4相比，它更加简洁，不需要指定版本号。

Q2: HTML5中有哪些新的语义化标签？ A:

<header>：页眉
<nav>：导航
<section>：文档中的节
<article>：独立的内容块
<aside>：侧边栏内容
<footer>：页脚
<main>：主要内容
<figure>和<figcaption>：图片和标题

Q3: HTML5中如何处理不支持新标签的旧浏览器？ A: 可以使用以下方法：

使用HTML5 Shiv（也称为HTML5 Shim）JavaScript库
使用CSS的display: block属性
使用Modernizr库检测浏览器支持

<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<![endif]-->

4.2 表单相关问题

Q4: HTML5新增了哪些表单输入类型？ A:

email：邮箱验证
url：网址验证
number：数字输入
range：滑块
date：日期选择器
time：时间选择器
datetime-local：本地日期时间
month：月份选择器
week：周选择器
color：颜色选择器
search：搜索框

Q5: 如何实现HTML5表单验证？ A: 可以使用HTML5内置的验证属性：

required：必填字段
pattern：正则表达式验证
min/max：数值范围
minlength/maxlength：文本长度
type：输入类型验证

也可以使用JavaScript进行自定义验证：

const form = document.querySelector('form');
form.addEventListener('submit', function(e) {
    e.preventDefault();
    
    // 自定义验证逻辑
    const email = document.getElementById('email');
    if (!email.validity.valid) {
        alert('请输入有效的邮箱地址');
        return;
    }
    
    // 提交表单
    this.submit();
});

4.3 多媒体相关问题

Q6: <audio>和<video>标签有哪些常用属性？ A:

controls：显示播放控件
autoplay：自动播放（现代浏览器通常需要用户交互）
loop：循环播放
muted：静音
preload：预加载（none/metadata/auto）
poster：视频封面图
width/height：尺寸

Q7: 如何检测浏览器是否支持HTML5视频？ A:

function supportsVideo() {
    const video = document.createElement('video');
    return !!video.canPlayType;
}

function supportsH264() {
    const video = document.createElement('video');
    return video.canPlayType('video/mp4; codecs="avc1.42E01E"');
}

4.4 存储相关问题

Q8: localStorage和sessionStorage的区别？ A:

localStorage：数据永久存储，除非手动删除或清除浏览器缓存
sessionStorage：数据仅在当前会话期间有效，关闭浏览器标签页后数据丢失
两者都遵循同源策略，存储空间通常为5MB左右

Q9: IndexedDB与Web SQL的区别？ A:

IndexedDB：是HTML5标准的一部分，支持事务、索引和游标，适合存储大量结构化数据
Web SQL：已被废弃，不推荐使用
localStorage：适合存储少量简单数据

4.5 高级特性问题

Q10: 什么是Service Worker？ A: Service Worker是运行在浏览器后台的JavaScript脚本，可以拦截和处理网络请求，实现离线缓存、推送通知等功能。它是Progressive Web App（PWA）的核心技术之一。

Q11: 如何实现HTML5离线应用？ A:

创建manifest文件（.appcache）或使用Service Worker
在HTML中引用manifest文件
缓存必要的资源

<!-- 使用Application Cache（已废弃，但了解） -->
<html manifest="cache.appcache">

<!-- 使用Service Worker（推荐） -->
<script>
if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/sw.js').then(function(registration) {
        console.log('Service Worker注册成功');
    }).catch(function(error) {
        console.log('Service Worker注册失败:', error);
    });
}
</script>

Q12: 什么是Web Components？ A: Web Components是一组Web平台API，允许开发者创建可重用的自定义HTML元素。包括：

Custom Elements：自定义元素
Shadow DOM：封装样式和结构
HTML Templates：模板
HTML Imports：导入（已废弃）

示例：

// 定义自定义元素
class MyButton extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        
        // 创建Shadow DOM
        this.shadowRoot.innerHTML = `
            <style>
                button {
                    background: linear-gradient(45deg, #667eea, #764ba2);
                    color: white;
                    border: none;
                    padding: 10px 20px;
                    border-radius: 5px;
                    cursor: pointer;
                    font-size: 16px;
                }
                button:hover {
                    transform: translateY(-2px);
                    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
                }
            </style>
            <button><slot></slot></button>
        `;
        
        // 添加事件监听
        this.shadowRoot.querySelector('button').addEventListener('click', () => {
            this.dispatchEvent(new CustomEvent('my-click', {
                bubbles: true,
                detail: { message: '自定义按钮被点击' }
            }));
        });
    }
}

// 注册自定义元素
customElements.define('my-button', MyButton);

<!-- 使用自定义元素 -->
<my-button>点击我</my-button>

<script>
document.querySelector('my-button').addEventListener('my-click', function(e) {
    console.log('事件详情:', e.detail);
});
</script>

五、HTML5最佳实践和性能优化

5.1 语义化和可访问性

使用正确的标签：不要滥用<div>和<span>，优先使用语义化标签
添加ARIA属性：为动态内容和复杂组件添加ARIA属性
确保键盘可访问：所有交互元素都应该可以通过键盘操作
提供替代文本：为图片、视频等媒体提供alt属性

<!-- 好的实践 -->
<img src="logo.png" alt="公司Logo" width="200" height="50">

<!-- 使用ARIA -->
<div role="alert" aria-live="polite" id="notification">
    您的消息已发送
</div>

<!-- 键盘可访问的按钮 -->
<button type="button" onclick="handleClick()" aria-label="关闭对话框">
    <span aria-hidden="true">×</span>
</button>

5.2 性能优化

图片优化：
- 使用适当的图片格式（WebP、AVIF）
- 使用响应式图片（<picture>标签）
- 懒加载图片

<!-- 响应式图片 -->
<picture>
    <source srcset="image.webp" type="image/webp">
    <source srcset="image.jpg" type="image/jpeg">
    <img src="image.jpg" alt="描述" loading="lazy">
</picture>

<!-- 懒加载 -->
<img src="placeholder.jpg" data-src="real-image.jpg" loading="lazy" alt="描述">

资源加载优化：
- 使用async和defer属性
- 预加载关键资源
- 使用HTTP/2或HTTP/3

<!-- 异步加载 -->
<script src="analytics.js" async></script>

<!-- 延迟加载 -->
<script src="main.js" defer></script>

<!-- 预加载 -->
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

减少重绘和回流：
- 避免频繁修改布局属性
- 使用transform和opacity进行动画
- 使用will-change提示浏览器

/* 好的动画 */
.animated {
    transition: transform 0.3s ease;
    will-change: transform;
}

.animated:hover {
    transform: translateY(-5px);
}

5.3 响应式设计

使用视口元标签：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

使用媒体查询：

/* 移动端优先 */
.container {
    width: 100%;
    padding: 10px;
}

/* 平板 */
@media (min-width: 768px) {
    .container {
        width: 750px;
        margin: 0 auto;
        padding: 20px;
    }
}

/* 桌面端 */
@media (min-width: 1024px) {
    .container {
        width: 960px;
    }
}

使用弹性布局：

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

六、面试技巧和准备建议

6.1 面试准备策略

系统学习：按照基础→中级→高级的顺序学习
动手实践：每个概念都要亲手实现
理解原理：不仅要会用，还要理解背后的原理
关注最新标准：HTML5仍在发展，关注W3C最新规范

6.2 常见面试题型

概念解释题：解释HTML5某个特性
代码实现题：现场编写HTML5代码
问题解决题：如何用HTML5解决特定问题
比较分析题：比较不同技术的优缺点

6.3 面试回答技巧

结构化回答：先总述，再分点，最后总结
举例说明：用实际代码或场景举例
展示思考过程：遇到难题时，展示你的思考路径
诚实面对未知：不知道就承认，但可以展示学习能力

七、总结

HTML5是现代Web开发的基石，掌握HTML5不仅是前端工程师的基本要求，也是构建高质量Web应用的关键。通过本文的系统学习，你应该能够：

理解HTML5的核心概念和特性
掌握HTML5的高级功能（如Canvas、Web Workers、WebSocket等）
了解HTML5的最佳实践和性能优化技巧
能够应对各种HTML5面试问题

记住，技术面试不仅考察知识的广度，更考察知识的深度和应用能力。建议在学习过程中多动手实践，构建实际项目，这样才能在面试中游刃有余。

最后建议：在面试前，除了复习HTML5知识外，还要准备一些自己做过的项目案例，展示你如何在实际项目中应用HTML5技术。这会让你在众多候选人中脱颖而出。

祝你面试顺利！