优秀大学生HTML作业分享：熊出没主题网站完整开发教程-橙洛网-ChengLo.Com

作为一名计算机专业的学生，HTML网页设计是我们必须掌握的基础技能。今天分享一个完整的HTML+CSS+JavaScript项目——熊出没主题网站，这个项目不仅包含了现代Web开发的核心技术，还展示了如何将理论知识转化为实际的网页应用。

这个项目包含5个完整页面：首页、角色介绍、影片评价、精彩片段和用户登录，涵盖了响应式设计、表单验证、多媒体展示等实用功能。通过这个项目，你将学会如何构建一个完整的静态网站。

项目概览

技术栈

•HTML5: 语义化标签、表单元素、多媒体支持

•CSS3: Flexbox布局、渐变效果、响应式设计、动画过渡

•JavaScript: DOM操作、事件处理、表单验证、交互效果

项目结构

xiongchumo-website/
├── index.html          # 首页
├── xz.html            # 角色介绍页
├── dz.html            # 影片评价页
├── xh.html            # 精彩片段页
├── xj.html            # 用户登录页
├── css/
│   └── all.css        # 统一样式表
└── images/            # 图片资源
    ├── 主图.jpg       # 网站横幅
    ├── 0.jpg-18.png   # 各种角色图片
    └── 2.mp4          # 视频文件

第一步：搭建基础HTML结构

1.1 创建首页框架

首先创建项目的主页面 index.html，这是整个网站的入口页面。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="熊出没官方网站 - 深圳华强数字动漫出品的经典动画系列">
    <meta name="keywords" content="熊出没,动画片,熊大,熊二,光头强,华强数字动漫">
    <title>熊出没 - 首页 | 经典动画系列官方网站</title>
    <link href="css/all.css" rel="stylesheet" type="text/css">
    <link rel="icon" href="images/15.png" type="image/png">
</head>
<body>
    <div class="container">
        <!-- 页面头部横幅区域 -->
        <header class="banner">
            <img src="images/主图.jpg" alt="熊出没主题横幅图片" title="熊出没 - 经典动画系列">
        </header>

        <!-- 主导航菜单 -->
        <nav class="menu" role="navigation">
            <ul>
                <li><a href="index.html" class="active" aria-current="page">首页</a></li>
                <li><a href="xz.html">角色介绍</a></li>
                <li><a href="dz.html">影片评价</a></li>
                <li><a href="xh.html">精彩片段</a></li>
                <li><a href="xj.html">熊熊登录</a></li>
            </ul>
        </nav>

        <!-- 主要内容区域 -->
        <main class="content">
            <div class="pad">
                <h1>欢迎来到熊出没的世界</h1>
                <div class="clearfix">
                    <aside class="left">
                        <img src="images/0.jpg" alt="熊出没经典场景图片">
                    </aside>
                    <article class="right">
                        <p>《熊出没》是深圳华强数字动漫有限公司出品的系列动画片...</p>
                    </article>
                </div>
            </div>
        </main>

        <!-- 页面底部 -->
        <footer class="end">
            <p>© 2024 熊出没官方网站 | 深圳华强数字动漫有限公司 版权所有</p>
        </footer>
    </div>
</body>
</html>

1.2 HTML5语义化标签的重要性

在这个项目中，我们大量使用了HTML5的语义化标签，这不仅提高了代码的可读性，还有助于SEO优化和无障碍访问。

关键语义化标签说明：

•<header>: 定义页面或区域的头部内容

•<nav>: 定义导航链接区域

•<main>: 定义页面的主要内容区域

•<article>: 定义独立的文章内容

•<aside>: 定义侧边栏或相关内容

•<footer>: 定义页面或区域的底部内容

无障碍访问优化：

<!-- 为导航添加role属性 -->
<nav class="menu" role="navigation">

<!-- 使用aria-current标识当前页面 -->
<a href="index.html" class="active" aria-current="page">首页</a>

<!-- 为图片提供有意义的alt属性 -->
<img src="images/主图.jpg" alt="熊出没主题横幅图片" title="熊出没 - 经典动画系列">

这些属性帮助屏幕阅读器更好地理解页面结构，为视障用户提供更好的访问体验。

第二步：构建CSS样式系统

2.1 基础样式重置

创建 css/all.css 文件，首先进行CSS重置，确保在不同浏览器中的一致性表现。

@charset "utf-8";
/* 熊出没网站样式表 - 优化版 */

/* 基础重置和全局样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: "Microsoft YaHei", "SimHei", Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
}

技术要点解析：

1.box-sizing: border-box: 这是现代CSS的最佳实践，让元素的宽高计算包含padding和border，使布局更加直观。

2.scroll-behavior: smooth: 启用平滑滚动，当用户点击锚点链接时会有平滑的滚动效果。

3.linear-gradient: 使用CSS3渐变创建美观的背景效果，从蓝紫色渐变到深紫色。

2.2 主容器设计

/* 主容器 */
.container {
    max-width: 1200px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

设计亮点：

•max-width + margin: 0 auto: 实现响应式的居中布局

•rgba透明度: 创建半透明的白色背景，让渐变背景若隐若现

•backdrop-filter: CSS3新特性，创建毛玻璃效果，增强视觉层次

•box-shadow: 添加阴影效果，让容器有悬浮感

2.3 导航菜单设计

/* 导航菜单 */
.menu {
    background: linear-gradient(135deg, #3e2918 0%, #5d4037 100%);
    padding: 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.menu ul {
    list-style: none;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
}

.menu li a {
    display: block;
    padding: 12px 20px;
    background: linear-gradient(135deg, #8b6d55 0%, #a0845c 100%);
    color: #fff;
    text-decoration: none;
    border-radius: 25px;
    transition: all 0.3s ease;
    font-weight: 500;
    text-align: center;
    min-width: 120px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.menu li a:hover {
    background: linear-gradient(135deg, #a0845c 0%, #b8956b 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

技术特色：

1.Flexbox布局: 使用 display: flex 实现水平居中和响应式排列

2.CSS过渡动画: transition: all 0.3s ease 创建平滑的悬停效果

3.transform变换: 使用 translateY(-2px) 实现悬停上移效果，比改变position性能更好

4.胶囊形状: border-radius: 25px 创建现代化的胶囊形按钮

第三步：实现响应式布局

3.1 移动端适配

响应式设计是现代网页开发的必备技能。我们使用媒体查询来适配不同屏幕尺寸。

/* 平板设备适配 */
@media (max-width: 768px) {
    .container {
        margin: 10px;
        border-radius: 5px;
    }
    
    .content {
        padding: 20px 15px;
    }
    
    .left, .right {
        float: none;
        width: 100%;
        margin: 0;
        padding: 10px 0;
    }
    
    .menu ul {
        flex-direction: column;
        align-items: center;
    }
    
    .menu li {
        margin: 5px 0;
    }
}

/* 手机设备适配 */
@media (max-width: 480px) {
    html {
        font-size: 14px;
    }
    
    .content {
        padding: 15px 10px;
    }
    
    h1 {
        font-size: 1.8em;
    }
    
    .menu li a {
        min-width: 100px;
        padding: 10px 15px;
    }
}

响应式设计要点：

1.移动优先: 从小屏幕开始设计，然后向大屏幕扩展

2.弹性布局: 使用百分比和相对单位，而不是固定像素值

3.内容重排: 在小屏幕上将双列布局改为单列布局

4.字体缩放: 通过调整根元素字体大小实现整体缩放

3.2 图片和多媒体适配

/* 图片响应式处理 */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* 视频响应式处理 */
video {
    width: 100%;
    height: auto;
    max-width: 800px;
}

/* 图片容器 */
.banner img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

.banner:hover img {
    transform: scale(1.05);
}

第四步：创建角色介绍页面

4.1 角色展示布局

角色介绍页面 xz.html 展示了如何使用网格布局来展示多个角色信息。

<!-- 角色介绍页面核心结构 -->
<main class="content">
    <div class="pad">
        <h1>角色介绍</h1>
        
        <!-- 角色网格布局 -->
        <section class="character-grid">
            <div class="character-card">
                <img src="images/12.jpg" alt="熊大" class="character-img">
                <div class="character-info">
                    <h3>熊大</h3>
                    <p>森林的守护者，聪明勇敢，是熊二的哥哥...</p>
                </div>
            </div>
            
            <div class="character-card">
                <img src="images/13.jpg" alt="熊二" class="character-img">
                <div class="character-info">
                    <h3>熊二</h3>
                    <p>憨厚可爱的熊弟弟，力大无穷，喜欢吃蜂蜜...</p>
                </div>
            </div>
            
            <div class="character-card">
                <img src="images/14.jpg" alt="光头强" class="character-img">
                <div class="character-info">
                    <h3>光头强</h3>
                    <p>伐木工人，虽然经常和熊兄弟作对，但内心善良...</p>
                </div>
            </div>
        </section>
    </div>
</main>

4.2 角色卡片样式

/* 角色网格布局 */
.character-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin: 30px 0;
}

/* 角色卡片样式 */
.character-card {
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.character-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.character-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    cursor: pointer;
}

.character-info {
    padding: 20px;
}

.character-info h3 {
    color: #3e2918;
    margin-bottom: 10px;
    font-size: 1.4em;
}

.character-info p {
    color: #666;
    line-height: 1.6;
}

CSS Grid布局优势：

1.自适应列数: repeat(auto-fit, minmax(300px, 1fr)) 根据容器宽度自动调整列数

2.等高卡片: Grid布局自动让所有卡片保持相同高度

3.响应式间距: 使用 gap 属性统一设置间距，比margin更简洁

第五步：添加JavaScript交互功能

5.1 图片点击放大效果

为角色图片添加点击放大功能，提升用户体验。

// 图片点击放大功能
document.addEventListener('DOMContentLoaded', function() {
    const characterImages = document.querySelectorAll('.character-img');
    
    characterImages.forEach(img => {
        img.addEventListener('click', function() {
            // 创建模态框
            const modal = document.createElement('div');
            modal.style.cssText = `
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0,0,0,0.8);
                display: flex;
                justify-content: center;
                align-items: center;
                z-index: 1000;
                cursor: pointer;
            `;
            
            // 创建大图
            const bigImg = document.createElement('img');
            bigImg.src = this.src;
            bigImg.alt = this.alt;
            bigImg.style.cssText = `
                max-width: 90%;
                max-height: 90%;
                border-radius: 10px;
                box-shadow: 0 10px 30px rgba(0,0,0,0.5);
            `;
            
            modal.appendChild(bigImg);
            document.body.appendChild(modal);
            
            // 点击关闭
            modal.addEventListener('click', function() {
                document.body.removeChild(modal);
            });
            
            // ESC键关闭
            document.addEventListener('keydown', function(e) {
                if (e.key === 'Escape') {
                    if (document.body.contains(modal)) {
                        document.body.removeChild(modal);
                    }
                }
            });
        });
    });
});

5.2 平滑滚动效果

// 平滑滚动到锚点
const links = document.querySelectorAll('a[href^="#"]');
links.forEach(link => {
    link.addEventListener('click', function(e) {
        e.preventDefault();
        const target = document.querySelector(this.getAttribute('href'));
        if (target) {
            target.scrollIntoView({
                behavior: 'smooth',
                block: 'start'
            });
        }
    });
});

第六步：构建表单验证系统

6.1 登录注册表单

用户登录页面 xj.html 包含了完整的表单验证功能。

<!-- 登录注册表单 -->
<form id="loginForm" action="#" method="post" novalidate>
    <!-- 用户名输入 -->
    <div class="form-group">
        <label for="username">用户名 <span class="required">*</span></label>
        <input 
            type="text" 
            id="username" 
            name="username" 
            maxlength="20" 
            required
            placeholder="请输入用户名（2-20个字符）"
            aria-describedby="username-help"
        >
        <small id="username-help" class="form-help">用户名长度为2-20个字符，支持中英文和数字</small>
    </div>

    <!-- 密码输入 -->
    <div class="form-group">
        <label for="password">密码 <span class="required">*</span></label>
        <input 
            type="password" 
            id="password" 
            name="password" 
            required
            placeholder="请输入密码（6-20位）"
            aria-describedby="password-help"
        >
        <small id="password-help" class="form-help">密码长度为6-20位，建议包含字母和数字</small>
    </div>

    <!-- 确认密码 -->
    <div class="form-group">
        <label for="confirmPassword">确认密码 <span class="required">*</span></label>
        <input 
            type="password" 
            id="confirmPassword" 
            name="confirmPassword" 
            required
            placeholder="请再次输入密码"
        >
    </div>

    <!-- 提交按钮 -->
    <button type="submit" class="submit-btn">立即注册</button>
</form>

6.2 实时表单验证

// 表单验证功能
document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('loginForm');
    const username = document.getElementById('username');
    const password = document.getElementById('password');
    const confirmPassword = document.getElementById('confirmPassword');

    // 用户名实时验证
    username.addEventListener('input', function() {
        const value = this.value.trim();
        const isValid = value.length >= 2 && value.length <= 20;
        
        if (isValid) {
            this.style.borderColor = '#27ae60';
            showMessage(this, '用户名格式正确', 'success');
        } else {
            this.style.borderColor = '#e74c3c';
            showMessage(this, '用户名长度应为2-20个字符', 'error');
        }
    });

    // 密码强度验证
    password.addEventListener('input', function() {
        const value = this.value;
        const isValid = value.length >= 6 && value.length <= 20;
        
        // 检查密码强度
        let strength = 0;
        if (value.match(/[a-z]/)) strength++;
        if (value.match(/[A-Z]/)) strength++;
        if (value.match(/[0-9]/)) strength++;
        if (value.match(/[^a-zA-Z0-9]/)) strength++;
        
        if (isValid) {
            this.style.borderColor = '#27ae60';
            const strengthText = ['弱', '中等', '强', '很强'][Math.min(strength - 1, 3)];
            showMessage(this, `密码强度：${strengthText}`, 'success');
        } else {
            this.style.borderColor = '#e74c3c';
            showMessage(this, '密码长度应为6-20位', 'error');
        }
    });

    // 确认密码验证
    confirmPassword.addEventListener('input', function() {
        const isMatch = password.value === this.value;
        
        if (isMatch && password.value) {
            this.style.borderColor = '#27ae60';
            showMessage(this, '密码匹配', 'success');
        } else {
            this.style.borderColor = '#e74c3c';
            showMessage(this, '两次输入的密码不一致', 'error');
        }
    });

    // 显示验证消息
    function showMessage(element, message, type) {
        const existingMessage = element.parentNode.querySelector('.error-message, .success-message');
        if (existingMessage) {
            existingMessage.remove();
        }

        const messageElement = document.createElement('div');
        messageElement.className = type === 'error' ? 'error-message' : 'success-message';
        messageElement.textContent = message;
        messageElement.style.display = 'block';
        
        element.parentNode.appendChild(messageElement);
    }
});

6.3 表单样式设计

/* 表单样式 */
.form-group {
    margin-bottom: 25px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #333;
}

.form-group input {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #ddd;
    border-radius: 8px;
    font-size: 16px;
    transition: border-color 0.3s ease;
    background: #fff;
}

.form-group input:focus {
    outline: none;
    border-color: #ff6b35;
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.1);
}

.submit-btn {
    width: 100%;
    padding: 15px;
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.submit-btn:hover {
    background: linear-gradient(135deg, #f7931e 0%, #ff6b35 100%);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 107, 53, 0.3);
}

/* 验证消息样式 */
.error-message {
    color: #e74c3c;
    font-size: 14px;
    margin-top: 5px;
}

.success-message {
    color: #27ae60;
    font-size: 14px;
    margin-top: 5px;
}

.required {
    color: #e74c3c;
}

第七步：多媒体内容集成

7.1 视频播放页面

精彩片段页面 xh.html 展示了如何在网页中嵌入视频内容。

<!-- 视频播放区域 -->
<section class="video-section">
    <h2>精彩片段欣赏</h2>
    <div class="video-container">
        <video 
            src="images/2.mp4" 
            controls 
            preload="metadata"
            poster="images/3.jpg"
            aria-label="熊出没精彩片段视频"
        >
            您的浏览器不支持视频播放，请升级浏览器。
        </video>
    </div>
    
    <!-- 视频描述 -->
    <div class="video-description">
        <h3>光头强与熊兄弟的搞笑对决</h3>
        <p>这段视频展现了熊出没动画中最经典的情节之一，光头强试图砍伐森林时与熊大熊二发生的一系列搞笑冲突。通过幽默的情节设计，传达了保护环境的重要主题。</p>
    </div>
</section>

7.2 视频样式优化

/* 视频容器样式 */
.video-container {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 0 auto 30px;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.video-container video {
    width: 100%;
    height: auto;
    display: block;
}

/* 视频描述样式 */
.video-description {
    background: #f8f9fa;
    padding: 25px;
    border-radius: 10px;
    margin-top: 20px;
}

.video-description h3 {
    color: #3e2918;
    margin-bottom: 15px;
    font-size: 1.3em;
}

.video-description p {
    color: #666;
    line-height: 1.8;
}

/* 响应式视频 */
@media (max-width: 768px) {
    .video-container {
        margin: 0 10px 20px;
    }
    
    .video-description {
        margin: 20px 10px 0;
        padding: 20px 15px;
    }
}

7.3 视频加载优化

// 视频懒加载和性能优化
document.addEventListener('DOMContentLoaded', function() {
    const videos = document.querySelectorAll('video');
    
    // 使用Intersection Observer实现视频懒加载
    const videoObserver = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                const video = entry.target;
                
                // 开始加载视频
                if (video.readyState === 0) {
                    video.load();
                }
                
                // 停止观察已加载的视频
                videoObserver.unobserve(video);
            }
        });
    }, {
        threshold: 0.25 // 当视频25%可见时开始加载
    });
    
    videos.forEach(video => {
        videoObserver.observe(video);
        
        // 添加视频事件监听
        video.addEventListener('loadstart', function() {
            console.log('视频开始加载');
        });
        
        video.addEventListener('canplay', function() {
            console.log('视频可以播放');
        });
        
        video.addEventListener('error', function() {
            console.error('视频加载失败');
            // 显示错误提示
            const errorMsg = document.createElement('div');
            errorMsg.textContent = '视频加载失败，请刷新页面重试';
            errorMsg.style.cssText = `
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                background: rgba(0,0,0,0.8);
                color: white;
                padding: 10px 20px;
                border-radius: 5px;
            `;
            this.parentNode.appendChild(errorMsg);
        });
    });
});

第八步：性能优化技巧

8.1 图片懒加载

// 图片懒加载实现
function lazyLoadImages() {
    const images = document.querySelectorAll('img[data-src]');
    
    const imageObserver = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                const img = entry.target;
                img.src = img.dataset.src;
                img.classList.remove('lazy');
                imageObserver.unobserve(img);
            }
        });
    });
    
    images.forEach(img => imageObserver.observe(img));
}

// 页面加载完成后初始化懒加载
document.addEventListener('DOMContentLoaded', lazyLoadImages);

8.2 CSS性能优化

/* 使用GPU加速的CSS属性 */
.character-card {
    will-change: transform; /* 提示浏览器该元素将发生变换 */
    transform: translateZ(0); /* 强制启用硬件加速 */
}

/* 优化动画性能 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 30px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

/* 使用contain属性优化重绘 */
.character-card {
    contain: layout style paint;
}

8.3 JavaScript性能优化

// 防抖函数，优化频繁触发的事件
function debounce(func, wait) {
    let timeout;
    return function executedFunction(...args) {
        const later = () => {
            clearTimeout(timeout);
            func(...args);
        };
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
    };
}

// 节流函数，控制事件触发频率
function throttle(func, limit) {
    let inThrottle;
    return function() {
        const args = arguments;
        const context = this;
        if (!inThrottle) {
            func.apply(context, args);
            inThrottle = true;
            setTimeout(() => inThrottle = false, limit);
        }
    }
}

// 使用防抖优化搜索功能
const searchInput = document.getElementById('search');
if (searchInput) {
    searchInput.addEventListener('input', debounce(function(e) {
        performSearch(e.target.value);
    }, 300));
}

// 使用节流优化滚动事件
window.addEventListener('scroll', throttle(function() {
    updateScrollProgress();
}, 100));

第九步：浏览器兼容性处理

9.1 CSS兼容性

/* 使用厂商前缀确保兼容性 */
.container {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.menu li a {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

/* 提供降级方案 */
.character-grid {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    
    /* 现代浏览器使用Grid */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* IE11兼容性处理 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .character-grid {
        display: -ms-flexbox;
        display: flex;
    }
    
    .character-card {
        -ms-flex: 0 0 calc(33.333% - 20px);
        flex: 0 0 calc(33.333% - 20px);
    }
}

9.2 JavaScript兼容性

// 检测API支持情况并提供降级方案
(function() {
    // 检测Intersection Observer支持
    if ('IntersectionObserver' in window) {
        // 使用现代API
        initLazyLoading();
    } else {
        // 降级到传统滚动监听
        window.addEventListener('scroll', function() {
            checkImagesInView();
        });
    }
    
    // 检测CSS Grid支持
    if (CSS.supports('display', 'grid')) {
        document.body.classList.add('grid-support');
    } else {
        document.body.classList.add('no-grid-support');
        // 使用Flexbox降级方案
        initFlexboxLayout();
    }
    
    // 检测ES6支持
    try {
        new Function('(a = 0) => a');
        // 支持ES6
        initModernFeatures();
    } catch (e) {
        // 不支持ES6，加载polyfill
        loadPolyfills();
    }
})();

// Polyfill示例
if (!Element.prototype.closest) {
    Element.prototype.closest = function(s) {
        var el = this;
        do {
            if (el.matches(s)) return el;
            el = el.parentElement || el.parentNode;
        } while (el !== null && el.nodeType === 1);
        return null;
    };
}

第十步：SEO优化和无障碍访问

10.1 SEO优化

<!-- 完善的meta标签 -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="熊出没官方网站 - 深圳华强数字动漫出品的经典动画系列，讲述森林保护者熊兄弟与光头强的搞笑对决故事">
    <meta name="keywords" content="熊出没,动画片,熊大,熊二,光头强,华强数字动漫,儿童动画,环保主题">
    <meta name="author" content="深圳华强数字动漫有限公司">
    
    <!-- Open Graph标签，用于社交媒体分享 -->
    <meta property="og:title" content="熊出没 - 经典动画系列官方网站">
    <meta property="og:description" content="深圳华强数字动漫出品的经典动画系列">
    <meta property="og:image" content="images/主图.jpg">
    <meta property="og:url" content="https://xiongchumo.example.com">
    <meta property="og:type" content="website">
    
    <!-- Twitter Card标签 -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="熊出没 - 经典动画系列">
    <meta name="twitter:description" content="森林保护者熊兄弟与光头强的搞笑对决">
    <meta name="twitter:image" content="images/主图.jpg">
    
    <title>熊出没 - 首页 | 经典动画系列官方网站</title>
    <link rel="canonical" href="https://xiongchumo.example.com/">
</head>

10.2 结构化数据

<!-- JSON-LD结构化数据 -->
<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "WebSite",
    "name": "熊出没官方网站",
    "description": "深圳华强数字动漫出品的经典动画系列",
    "url": "https://xiongchumo.example.com",
    "publisher": {
        "@type": "Organization",
        "name": "深圳华强数字动漫有限公司"
    },
    "potentialAction": {
        "@type": "SearchAction",
        "target": "https://xiongchumo.example.com/search?q={search_term_string}",
        "query-input": "required name=search_term_string"
    }
}
</script>

10.3 无障碍访问优化

<!-- 跳过链接，便于键盘用户快速导航 -->
<a href="#main-content" class="skip-link">跳转到主要内容</a>

<!-- 语义化的导航结构 -->
<nav role="navigation" aria-label="主导航">
    <ul>
        <li><a href="index.html" aria-current="page">首页</a></li>
        <li><a href="xz.html">角色介绍</a></li>
        <!-- 其他导航项 -->
    </ul>
</nav>

<!-- 表单的无障碍优化 -->
<form id="loginForm" role="form" aria-labelledby="form-title">
    <h2 id="form-title">用户注册</h2>
    
    <div class="form-group">
        <label for="username">
            用户名 
            <span class="required" aria-label="必填项">*</span>
        </label>
        <input 
            type="text" 
            id="username" 
            name="username" 
            required
            aria-describedby="username-help username-error"
            aria-invalid="false"
        >
        <div id="username-help" class="form-help">
            用户名长度为2-20个字符，支持中英文和数字
        </div>
        <div id="username-error" class="error-message" aria-live="polite"></div>
    </div>
</form>

10.4 键盘导航支持

/* 键盘焦点样式 */
a:focus, button:focus, input:focus, textarea:focus, select:focus {
    outline: 2px solid #ff6b35;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(255, 107, 53, 0.2);
}

/* 跳过链接样式 */
.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: #000;
    color: #fff;
    padding: 8px;
    text-decoration: none;
    z-index: 1000;
    border-radius: 4px;
}

.skip-link:focus {
    top: 6px;
}

/* 高对比度模式支持 */
@media (prefers-contrast: high) {
    .container {
        background: #fff;
        border: 2px solid #000;
    }
    
    .menu li a {
        background: #000;
        color: #fff;
        border: 1px solid #fff;
    }
}

/* 减少动画模式支持 */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}