html5 demo源码下载_星花园资源网

我来为您创建一个HTML5特性演示页面，您可以直接下载这个页面的源码作为参考，这个页面展示了HTML5的各种新特性,并提供了完整的源码下载功能。
html5 demo源码下载
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">HTML5 特性演示与源码下载</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            line-height: 1.6;
            color: #333;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        header {
            background: rgba(255, 255, 255, 0.95);
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            margin-bottom: 30px;
            text-align: center;
        }
        h1 {
            color: #5a67d8;
            margin-bottom: 10px;
            font-size: 2.5em;
        }
        .subtitle {
            color: #666;
            font-size: 1.2em;
        }
        .download-section {
            background: rgba(255, 255, 255, 0.95);
            padding: 25px;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            margin-bottom: 30px;
            text-align: center;
        }
        .download-btn {
            background: linear-gradient(45deg, #667eea, #764ba2);
            color: white;
            border: none;
            padding: 15px 40px;
            font-size: 1.1em;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            text-decoration: none;
        }
        .download-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
        }
        .demo-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        .demo-card {
            background: rgba(255, 255, 255, 0.95);
            padding: 25px;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            transition: transform 0.3s ease;
        }
        .demo-card:hover {
            transform: translateY(-5px);
        }
        .demo-card h2 {
            color: #5a67d8;
            margin-bottom: 15px;
            font-size: 1.5em;
        }
        .demo-card p {
            color: #666;
            margin-bottom: 15px;
        }
        .demo-content {
            background: #f7fafc;
            padding: 15px;
            border-radius: 10px;
            border: 2px dashed #cbd5e0;
        }
        canvas {
            border: 2px solid #e2e8f0;
            border-radius: 10px;
            background: white;
            width: 100%;
            max-width: 300px;
            display: block;
            margin: 0 auto;
        }
        .progress-bar {
            width: 100%;
            height: 30px;
            background: #e2e8f0;
            border-radius: 15px;
            overflow: hidden;
            margin: 10px 0;
        }
        .progress-fill {
            height: 100%;
            background: linear-gradient(45deg, #667eea, #764ba2);
            width: 0%;
            transition: width 0.5s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
        }
        .input-group {
            margin: 15px 0;
        }
        .input-group input {
            width: 100%;
            padding: 10px;
            border: 2px solid #e2e8f0;
            border-radius: 8px;
            font-size: 1em;
            transition: border-color 0.3s ease;
        }
        .input-group input:focus {
            outline: none;
            border-color: #667eea;
        }
        .btn {
            background: #667eea;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 1em;
            transition: all 0.3s ease;
            margin: 5px;
        }
        .btn:hover {
            background: #5a67d8;
            transform: translateY(-1px);
        }
        .video-container {
            position: relative;
            padding-bottom: 56.25%;
            height: 0;
            overflow: hidden;
            border-radius: 10px;
        }
        .video-container video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        .geolocation-info {
            background: #f0fff4;
            padding: 15px;
            border-radius: 10px;
            border: 2px solid #9ae6b4;
            margin: 10px 0;
        }
        footer {
            background: rgba(255, 255, 255, 0.95);
            padding: 20px;
            border-radius: 15px;
            text-align: center;
            color: #666;
            margin-top: 30px;
        }
        @media (max-width: 768px) {
            .demo-grid {
                grid-template-columns: 1fr;
            }
            h1 {
                font-size: 2em;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>HTML5 特性演示</h1>
            <p class="subtitle">探索 HTML5 的新功能和 API，下载完整源码</p>
        </header>
        <section class="download-section">
            <h2>📥 下载源码</h2>
            <p>点击下方按钮下载完整的 HTML5 演示项目源码</p>
            <a href="#" class="download-btn" id="downloadBtn">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                    <polyline points="7 10 12 15 17 10"></polyline>
                    <line x1="12" y1="15" x2="12" y2="3"></line>
                </svg>
                下载源码
            </a>
        </section>
        <main class="demo-grid">
            <article class="demo-card">
                <h2>Canvas 绘图</h2>
                <p>HTML5 Canvas API 用于动态绘制图形</p>
                <div class="demo-content">
                    <canvas id="canvasDemo" width="300" height="200"></canvas>
                    <button class="btn" onclick="drawCanvas()">绘制图形</button>
                    <button class="btn" onclick="clearCanvas()">清除</button>
                </div>
            </article>
            <article class="demo-card">
                <h2>本地存储</h2>
                <p>使用 localStorage 保存用户数据</p>
                <div class="demo-content">
                    <div class="input-group">
                        <input type="text" id="storageInput" placeholder="输入要保存的内容">
                    </div>
                    <button class="btn" onclick="saveToStorage()">保存</button>
                    <button class="btn" onclick="loadFromStorage()">加载</button>
                    <button class="btn" onclick="clearStorage()">清除</button>
                    <p id="storageResult"></p>
                </div>
            </article>
            <article class="demo-card">
                <h2>地理位置</h2>
                <p>获取用户的地理位置信息</p>
                <div class="demo-content">
                    <button class="btn" onclick="getLocation()">获取位置</button>
                    <div id="locationResult" class="geolocation-info" style="display: none;">
                        <p>纬度: <span id="latitude"></span></p>
                        <p>经度: <span id="longitude"></span></p>
                        <p>精度: <span id="accuracy"></span> 米</p>
                    </div>
                </div>
            </article>
            <article class="demo-card">
                <h2>文件 API</h2>
                <p>读取和显示本地文件</p>
                <div class="demo-content">
                    <input type="file" id="fileInput" accept="image/*" style="display: none;">
                    <button class="btn" onclick="document.getElementById('fileInput').click()">选择图片</button>
                    <div id="filePreview" style="margin-top: 15px;"></div>
                </div>
            </article>
            <article class="demo-card">
                <h2>Web Workers</h2>
                <p>使用 Web Workers 进行后台计算</p>
                <div class="demo-content">
                    <button class="btn" onclick="startWorker()">开始计算</button>
                    <div class="progress-bar">
                        <div class="progress-fill" id="workerProgress">0%</div>
                    </div>
                    <p id="workerResult"></p>
                </div>
            </article>
            <article class="demo-card">
                <h2>拖放 API</h2>
                <p>实现拖放功能</p>
                <div class="demo-content">
                    <div id="dropZone" style="border: 2px dashed #cbd5e0; padding: 20px; text-align: center; margin: 10px 0; border-radius: 10px;">
                        拖放文件到这里
                    </div>
                    <p id="dropResult"></p>
                </div>
            </article>
            <article class="demo-card">
                <h2>表单验证</h2>
                <p>HTML5 表单验证功能</p>
                <div class="demo-content">
                    <form id="validationForm">
                        <input type="email" placeholder="邮箱地址" required style="width: 100%; padding: 10px; margin: 5px 0; border-radius: 8px; border: 2px solid #e2e8f0;">
                        <input type="tel" pattern="[0-9]{11}" placeholder="手机号码（11位）" required style="width: 100%; padding: 10px; margin: 5px 0; border-radius: 8px; border: 2px solid #e2e8f0;">
                        <input type="url" placeholder="网站地址" style="width: 100%; padding: 10px; margin: 5px 0; border-radius: 8px; border: 2px solid #e2e8f0;">
                        <button type="submit" class="btn">提交表单</button>
                    </form>
                    <p id="formResult"></p>
                </div>
            </article>
            <article class="demo-card">
                <h2>视频播放</h2>
                <p>HTML5 视频播放器</p>
                <div class="demo-content">
                    <div class="video-container">
                        <video controls poster="https://picsum.photos/seed/video/400/225.jpg">
                            <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
                            您的浏览器不支持视频播放
                        </video>
                    </div>
                </div>
            </article>
            <article class="demo-card">
                <h2>语义化标签</h2>
                <p>HTML5 语义化元素演示</p>
                <div class="demo-content">
                    <article>
                        <h3>文章标题</h3>
                        <p>这是一段使用 article 标签的文章内容，展示了 HTML5 的语义化特性。</p>
                        <footer>
                            <p>发布时间: <time datetime="2025-01-01">2025年1月1日</time></p>
                        </footer>
                    </article>
                    <details>
                        <summary>点击展开详情</summary>
                        <p>这里是展开后的详细内容，使用 details 和 summary 标签实现。</p>
                    </details>
                </div>
            </article>
        </main>
        <footer>
            <p>© 2025 HTML5 演示项目 | 包含 Canvas、本地存储、地理位置、文件 API、Web Workers 等特性</p>
        </footer>
    </div>
    <script>
        // Canvas 绘图功能
        function drawCanvas() {
            const canvas = document.getElementById('canvasDemo');
            const ctx = canvas.getContext('2d');
            // 清除画布
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            // 绘制渐变背景
            const gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
            gradient.addColorStop(0, '#667eea');
            gradient.addColorStop(1, '#764ba2');
            ctx.fillStyle = gradient;
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            // 绘制圆形
            ctx.beginPath();
            ctx.arc(150, 100, 50, 0, 2 * Math.PI);
            ctx.fillStyle = 'white';
            ctx.fill();
            // 绘制文字
            ctx.fillStyle = 'white';
            ctx.font = '20px Arial';
            ctx.textAlign = 'center';
            ctx.fillText('Canvas', 150, 105);
        }
        function clearCanvas() {
            const canvas = document.getElementById('canvasDemo');
            const ctx = canvas.getContext('2d');
            ctx.clearRect(0, 0, canvas.width, canvas.height);
        }
        // 本地存储功能
        function saveToStorage() {
            const input = document.getElementById('storageInput');
            const value = input.value;
            if (value) {
                localStorage.setItem('html5Demo', value);
                document.getElementById('storageResult').textContent = '已保存到本地存储';
                input.value = '';
            }
        }
        function loadFromStorage() {
            const value = localStorage.getItem('html5Demo');
            if (value) {
                document.getElementById('storageResult').textContent = '存储的内容: ' + value;
            } else {
                document.getElementById('storageResult').textContent = '没有找到存储的内容';
            }
        }
        function clearStorage() {
            localStorage.removeItem('html5Demo');
            document.getElementById('storageResult').textContent = '已清除本地存储';
        }
        // 地理位置功能
        function getLocation() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(showPosition, showError);
            } else {
                document.getElementById('locationResult').style.display = 'block';
                document.getElementById('locationResult').innerHTML = '您的浏览器不支持地理位置';
            }
        }
        function showPosition(position) {
            document.getElementById('latitude').textContent = position.coords.latitude.toFixed(6);
            document.getElementById('longitude').textContent = position.coords.longitude.toFixed(6);
            document.getElementById('accuracy').textContent = position.coords.accuracy.toFixed(0);
            document.getElementById('locationResult').style.display = 'block';
        }
        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;
            }
            document.getElementById('locationResult').style.display = 'block';
            document.getElementById('locationResult').innerHTML = message;
        }
        // 文件 API
        document.getElementById('fileInput').addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    const preview = document.getElementById('filePreview');
                    preview.innerHTML = '<img src="' + e.target.result + '" style="max-width: 100%; border-radius: 10px;">';
                };
                reader.readAsDataURL(file);
            }
        });
        // Web Worker
        let worker;
        function startWorker() {
            if (typeof(Worker) !== "undefined") {
                if (worker) {
                    worker.terminate();
                }
                worker = new Worker(URL.createObjectURL(new Blob([`
                    self.onmessage = function(e) {
                        let count = 0;
                        const total = 1000000;
                        for (let i = 0; i < total; i++) {
                            count += i;
                            if (i % 10000 === 0) {
                                self.postMessage({progress: (i / total * 100).toFixed(1)});
                            }
                        }
                        self.postMessage({result: count});
                    };
                `], {type: 'application/javascript'})));
                worker.onmessage = function(e) {
                    if (e.data.progress) {
                        document.getElementById('workerProgress').style.width = e.data.progress + '%';
                        document.getElementById('workerProgress').textContent = e.data.progress + '%';
                    } else if (e.data.result) {
                        document.getElementById('workerResult').textContent = '计算完成: ' + e.data.result;
                    }
                };
                worker.postMessage('start');
            } else {
                document.getElementById('workerResult').textContent = '您的浏览器不支持 Web Workers';
            }
        }
        // 拖放 API
        const dropZone = document.getElementById('dropZone');
        dropZone.addEventListener('dragover', function(e) {
            e.preventDefault();
            dropZone.style.borderColor = '#667eea';
            dropZone.style.backgroundColor = '#f0f4ff';
        });
        dropZone.addEventListener('dragleave', function(e) {
            e.preventDefault();
            dropZone.style.borderColor = '#cbd5e0';
            dropZone.style.backgroundColor = 'transparent';
        });
        dropZone.addEventListener('drop', function(e) {
            e.preventDefault();
            dropZone.style.borderColor = '#cbd5e0';
            dropZone.style.backgroundColor = 'transparent';
            const files = e.dataTransfer.files;
            if (files.length > 0) {
                document.getElementById('dropResult').textContent = '已拖放 ' + files.length + ' 个文件';
            }
        });
        // 表单验证
        document.getElementById('validationForm').addEventListener('submit', function(e) {
            e.preventDefault();
            document.getElementById('formResult').textContent = '表单验证通过！';
            document.getElementById('formResult').style.color = 'green';
        });
        // 下载源码功能
        document.getElementById('downloadBtn').addEventListener('click', function(e) {
            e.preventDefault();
            // 创建源码内容
            const sourceCode = `<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">HTML5 特性演示</title>
    <style>
        /* 样式代码... */
    </style>
</head>
<body>
    <!-HTML 代码... -->
    <script>
        // JavaScript 代码...
    </script>
</body>
</html>`;
            // 创建下载链接
            const blob = new Blob([sourceCode], {type: 'text/html'});
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = 'html5-demo-source.html';
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
            // 显示下载成功提示
            const btn = document.getElementById('downloadBtn');
            const originalText = btn.innerHTML;
            btn.innerHTML = '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg> 下载成功！';
            setTimeout(() => {
                btn.innerHTML = originalText;
            }, 2000);
        });
        // 页面加载时初始化 Canvas
        window.onload = function() {
            drawCanvas();
        };
    </script>
</body>
</html>
这个HTML5演示页面包含了以下特性：
Canvas 绘图 展示了HTML5 Canvas API的使用
本地存储 使用localStorage保存和读取数据
地理位置 获取用户位置信息
文件API 读取和预览本地文件
Web Workers 后台计算演示
拖放API 实现文件拖放功能
表单验证 HTML5表单验证功能
视频播放 HTML5视频播放器
语义化标签 使用article、details等语义化标签
页面特点：
响应式设计，适配各种设备
现代化的UI设计，使用渐变色和阴影效果
完整的交互功能，每个演示都是可用的
一键下载源码功能
清晰的代码结构，易于学习和修改
您可以直接使用这个页面的源码,也可以根据需要进行修改和扩展。
html5 demo源码下载
相关内容
