HTML5前沿技术：构建下一代响应式Web应用的核心技巧

一、现代HTML5技术全景

HTML5最新技术矩阵：

语义化标签：article, section, nav等结构化元素
多媒体支持：video, audio, canvas原生支持
离线应用：Service Worker + Cache API
设备API：地理位置、陀螺仪、摄像头访问
图形技术：SVG, WebGL, WebGPU

二、响应式设计进阶技巧

1. 自适应图片解决方案

<picture>
    <source media="(min-width: 1200px)" srcset="large.jpg">
    <source media="(min-width: 768px)" srcset="medium.jpg">
    <img src="small.jpg" alt="响应式图片示例">
</picture>

<!-- WebP格式支持检测 -->
<picture>
    <source type="image/webp" srcset="image.webp">
    <source type="image/jpeg" srcset="image.jpg">
    <img src="image.jpg" alt="现代图片格式">
</picture>

2. 容器查询实践

<div class="card-container">
    <article class="card">
        <h3>卡片标题</h3>
        <p>卡片内容...</p>
    </article>
</div>

<style>
.card-container {
    container-type: inline-size;
}

@container (min-width: 400px) {
    .card {
        display: grid;
        grid-template-columns: 1fr 2fr;
    }
}
</style>

三、现代布局技术实战

1. CSS Grid高级布局

<div class="magazine-layout">
    <article class="featured">主推内容</article>
    <article>普通文章1</article>
    <article>普通文章2</article>
    <aside>侧边栏</aside>
</div>

<style>
.magazine-layout {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-auto-rows: minmax(200px, auto);
    gap: 20px;
}

.featured {
    grid-column: span 2;
    grid-row: span 2;
}

aside {
    grid-row: span 3;
}
</style>

2. Flexbox弹性布局

<nav class="navbar">
    <div class="logo">Logo</div>
    <ul class="menu">
        <li>首页</li>
        <li>产品</li>
        <li>服务</li>
    </ul>
    <div class="user-panel">用户面板</div>
</nav>

<style>
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.menu {
    display: flex;
    gap: 2rem;
}

@media (max-width: 768px) {
    .navbar {
        flex-direction: column;
    }
}
</style>

四、HTML5 API深度应用

1. 地理位置服务

<button id="getLocation">获取位置</button>
<div id="locationOutput"></div>

<script>
document.getElementById('getLocation').addEventListener('click', () => {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(
            position => {
                const { latitude, longitude } = position.coords;
                document.getElementById('locationOutput').innerHTML = `
                    纬度: ${latitude}<br>
                    经度: ${longitude}
                `;
            },
            error => {
                console.error('获取位置失败:', error);
            }
        );
    } else {
        alert('您的浏览器不支持地理位置服务');
    }
});
</script>

2. 本地存储方案

<input type="text" id="username" placeholder="输入用户名">
<button id="saveBtn">保存</button>
<button id="loadBtn">加载</button>

<script>
// 使用IndexedDB存储
const openDB = () => {
    return new Promise((resolve, reject) => {
        const request = indexedDB.open('MyDatabase', 1);
        
        request.onupgradeneeded = (event) => {
            const db = event.target.result;
            if (!db.objectStoreNames.contains('users')) {
                db.createObjectStore('users', { keyPath: 'id' });
            }
        };
        
        request.onsuccess = () => resolve(request.result);
        request.onerror = () => reject(request.error);
    });
};

document.getElementById('saveBtn').addEventListener('click', async () => {
    const db = await openDB();
    const transaction = db.transaction('users', 'readwrite');
    const store = transaction.objectStore('users');
    
    store.put({
        id: 1,
        name: document.getElementById('username').value
    });
});

document.getElementById('loadBtn').addEventListener('click', async () => {
    const db = await openDB();
    const transaction = db.transaction('users', 'readonly');
    const store = transaction.objectStore('users');
    
    const request = store.get(1);
    request.onsuccess = () => {
        if (request.result) {
            document.getElementById('username').value = request.result.name;
        }
    };
});
</script>