电影影评网HTML5实训报告：从零搭建响应式网站的完整开发流程与代码解析

引言

在当今移动互联网时代，响应式网站开发已成为前端开发的核心技能。本次实训项目以构建一个电影影评网为例，详细阐述从零开始搭建响应式网站的完整开发流程。通过这个项目，我们将深入理解HTML5语义化标签、CSS3媒体查询、Flexbox布局等关键技术，并掌握现代前端开发的最佳实践。电影影评网作为一个典型的展示型网站，需要兼顾桌面端和移动端的用户体验，这为响应式设计提供了绝佳的实践场景。

一、项目规划与需求分析

1.1 项目目标

构建一个功能完善、界面美观的电影影评网站，支持用户浏览电影信息、查看影评、搜索电影等功能。网站需要在不同设备上都能提供良好的用户体验，包括PC、平板和手机。

1.2 功能模块划分

首页模块：展示热门电影、最新影评、网站导航
电影列表页：按分类展示电影，支持分页和搜索
电影详情页：展示电影详细信息、演员表、剧情简介、用户评分
影评详情页：展示完整影评内容、评论互动
用户中心：用户登录、注册、个人影评管理

1.3 技术选型

HTML5：使用语义化标签构建页面结构
CSS3：使用Flexbox和Grid布局，结合媒体查询实现响应式
JavaScript：处理交互逻辑，使用ES6+语法
无后端：使用JSON数据模拟，纯前端实现

二、HTML5页面结构设计

2.1 语义化标签的应用

HTML5引入了大量语义化标签，这不仅有助于SEO，也使代码更易维护。在电影影评网中，我们主要使用以下标签：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电影影评网 - 发现好电影</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 头部导航 -->
    <header class="site-header">
        <div class="container">
            <h1>电影影评网</h1>
            <nav class="main-nav">
                <ul>
                    <li><a href="#home">首页</a></li>
                    <li><a href="#movies">电影</a></li>
                    <li><a href="#reviews">影评</a></li>
                    <li><a href="#user">用户中心</a></li>
                </ul>
            </nav>
            <div class="search-box">
                <input type="search" placeholder="搜索电影..." id="searchInput">
                <button onclick="searchMovies()">搜索</button>
            </div>
        </div>
    </header>

    <!-- 主内容区 -->
    <main class="main-content">
        <!-- 热门电影推荐 -->
        <section class="hot-movies">
            <div class="container">
                <h2>热门电影</h2>
                <div class="movie-grid" id="hotMovies">
                    <!-- 动态生成电影卡片 -->
                </div>
            </div>
        </section>

        <!-- 最新影评 -->
        <section class="latest-reviews">
            <div class="container">
                <h2>最新影评</h2>
                <div class="review-list" id="latestReviews">
                    <!-- 动态生成影评列表 -->
                </div>
            </div>
1. **header**：包含网站标题、主导航和搜索框，使用`<nav>`标签包裹导航菜单
2. **main**：作为主要内容容器，内部使用`<section>`划分不同功能区域
3. **article**：用于包裹每条独立的电影或影评内容
4. **aside**：侧边栏，用于放置推荐内容或辅助信息
5. **footer**：网站版权和链接信息

### 2.2 响应式视口设置
在`<head>`中必须设置viewport元标签，这是响应式设计的基础：
```html
<meta name="viewport" content="width=device-width, initial-scale=1.0">

这行代码告诉浏览器将视口宽度设置为设备宽度，并且初始缩放比例为1.0，确保页面在移动设备上正确显示。

2.3 数据结构设计

由于没有后端，我们使用JSON格式模拟数据。创建一个data.js文件：

// 电影数据
const moviesData = [
    {
        id: 1,
        title: "肖申克的救赎",
        year: 1994,
        director: "弗兰克·德拉邦特",
        cast: ["蒂姆·罗宾斯", "摩根·弗里曼"],
        genre: ["剧情", "犯罪"],
        rating: 9.7,
        poster: "images/shawshank.jpg",
        description: "希望让人自由。",
        reviews: [
            { user: "影迷A", content: "经典中的经典，每次看都有新感悟。", rating: 5 },
            { user: "影迷B", content: "安迪的坚持和智慧令人敬佩。", rating: 5 }
        ]
    },
    // 更多电影数据...
];

// 用户数据（模拟）
const usersData = [
    {
        id: 1,
        username: "testuser",
        email: "test@example.com",
        myReviews: []
    }
];

三、CSS3响应式设计与布局

3.1 基础样式重置

首先创建一个基础的CSS重置文件，确保跨浏览器一致性：

/* style.css */
/* CSS重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 基础字体和颜色 */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f5f5f5;
}

/* 容器类 */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 头部样式 */
.site-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 1rem 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.site-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.site-header h1 {
    font-size: 1.8rem;
    font-weight: bold;
}

/* 导航菜单 */
.main-nav ul {
    display: flex;
    list-style: none;
    gap: 20px;
}

.main-nav a {
    color: white;
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 4px;
    transition: background 0.3s;
}

.main-nav a:hover {
    background: rgba(255,255,255,0.2);
}

/* 搜索框 */
.search-box {
    display: flex;
    gap: 8px;
}

.search-box input {
    padding: 8px 12px;
    border: none;
    border-radius: 4px;
    min-width: 200px;
}

.search-box button {
    padding: 8px 16px;
    background: #ff6b6b;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.3s;
}

.search-box button:hover {
    background: #ff5252;
}

/* 电影卡片网格 */
.movie-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.movie-card {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}

.movie-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.movie-card img {
    width: 100%;
    height: 280px;
    object-fit: cover;
}

.movie-card-content {
    padding: 12px;
}

.movie-card h3 {
    font-size: 1.1rem;
    margin-bottom: 8px;
    color: #333;
}

.movie-card .meta {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 8px;
}

.movie-card .rating {
    color: #ff6b6b;
    font-weight: bold;
    font-size: 0.9rem;
}

/* 影评列表 */
.review-list {
    margin-top: 20px;
}

.review-item {
    background: white;
    padding: 20px;
    margin-bottom: 15px;
    border-radius: 8px;
    border-left: 4px solid #667eea;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.review-item h3 {
    color: #667eea;
    margin-bottom: 10px;
}

.review-item .review-meta {
    font-size: 0.85rem;
    color: #888;
    margin-bottom: 10px;
}

/* 页脚 */
.site-footer {
    background: #2c3e50;
    color: white;
    text-align: center;
    padding: 2rem 0;
    margin-top: 40px;
}

.site-footer p {
    margin-bottom: 8px;
    opacity: 0.8;
}

.site-footer a {
    color: #3498db;
    text-decoration: none;
}

/* 3.2 响应式媒体查询 */
/* 平板设备：768px - 1024px */
@media (max-width: 1024px) {
    .site-header .container {
        flex-direction: column;
        gap: 15px;
    }

    .main-nav ul {
        justify-content: center;
        flex-wrap: wrap;
    }

    .movie-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }

    .search-box {
        width: 100%;
        justify-content: center;
    }

    .search-box input {
        flex: 1;
        max-width: 300px;
    }
}

/* 手机设备：小于768px */
@media (max-width: 768px) {
    .site-header h1 {
        font-size: 1.4rem;
    }

    .main-nav ul {
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }

    .main-nav a {
        display: block;
        text-align: center;
        background: rgba(255,255,255,0.1);
    }

    .movie-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 15px;
    }

    .movie-card img {
        height: 220px;
    }

    .search-box {
        flex-direction: column;
    }

    .search-box input,
    .search-box button {
        width: 100%;
    }

    .container {
        padding: 0 15px;
    }

    /* 移动端菜单切换按钮（可选） */
    .mobile-menu-toggle {
        display: none;
        background: none;
        border: none;
        color: white;
        font-size: 1.5rem;
        cursor: pointer;
    }

    /* 移动端菜单显示/隐藏 */
    .main-nav.hidden {
        display: none;
    }

    .main-nav.show {
        display: block;
        width: 100%;
    }
}

/* 超小屏幕：小于480px */
@media (max-width: 480px) {
    .movie-grid {
        grid-template-columns: 1fr;
    }

    .movie-card img {
        height: 300px;
    }

    .site-header h1 {
        font-size: 1.2rem;
    }
}

/* 打印样式 */
@media print {
    .site-header, .site-footer, .search-box {
        display: none;
    }

    .main-content {
        padding: 0;
    }

    .movie-card {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
    }
}

3.3 Flexbox与Grid布局详解

Flexbox适用于一维布局，如导航栏：

/* Flexbox示例：导航栏 */
.main-nav ul {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    gap: 20px; /* 元素间距 */
    flex-wrap: wrap; /* 允许换行 */
}

Grid适用于二维布局，如电影网格：

/* Grid示例：电影网格 */
.movie-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}

repeat(auto-fill, minmax(200px, 1fr))表示自动填充列，每列最小200px，最大1fr（等分剩余空间）。

四、JavaScript交互功能实现

4.1 数据渲染与动态内容生成

创建app.js文件处理页面逻辑：

// app.js

// DOM加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
    renderHotMovies();
    renderLatestReviews();
    setupSearch();
});

// 渲染热门电影
function renderHotMovies() {
    const container = document.getElementById('hotMovies');
    if (!container) return;

    // 按评分排序，取前6个
    const hotMovies = [...moviesData]
        .sort((a, b) => b.rating - a.rating)
        .slice(0, 6);

    container.innerHTML = hotMovies.map(movie => `
        <article class="movie-card" data-id="${movie.id}">
            <img src="${movie.poster || 'images/default-poster.jpg'}" 
                 alt="${movie.title}" 
                 onerror="this.src='images/default-poster.jpg'">
            <div class="movie-card-content">
                <h3>${movie.title}</h3>
                <div class="meta">${movie.year} • ${movie.genre.join(' / ')}</div>
                <div class="rating">⭐ ${movie.rating}</div>
                <button onclick="viewMovieDetail(${movie.id})" 
                        style="margin-top: 8px; padding: 6px 12px; background: #667eea; color: white; border: none; border-radius: 4px; cursor: pointer;">
                    查看详情
                </button>
            </div>
        </article>
    `).join('');
}

// 渲染最新影评
function renderLatestReviews() {
    const container = document.getElementById('latestReviews');
    if (!container) return;

    // 收集所有影评并按时间排序（这里假设数据中有时间戳）
    const allReviews = [];
    moviesData.forEach(movie => {
        if (movie.reviews) {
            movie.reviews.forEach(review => {
                allReviews.push({
                    ...review,
                    movieTitle: movie.title,
                    movieId: movie.id
                });
            });
        }
    });

    // 取前5条
    const latestReviews = allReviews.slice(0, 5);

    container.innerHTML = latestReviews.map(review => `
        <article class="review-item">
            <h3>${review.movieTitle}</h3>
            <div class="review-meta">
                用户：${review.user} | 评分：${review.rating}⭐
            </div>
            <p>${review.content}</p>
            <button onclick="viewMovieDetail(${review.movieId})" 
                    style="margin-top: 8px; padding: 6px 12px; background: #ff6b6b; color: white; border: none; border-radius: 4px; cursor: pointer;">
                阅读全文
            </button>
        </article>
    `).join('');
}

// 搜索功能
function setupSearch() {
    const searchInput = document.getElementById('searchInput');
    if (!searchInput) return;

    searchInput.addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            searchMovies();
        }
    });
}

function searchMovies() {
    const query = document.getElementById('searchInput').value.toLowerCase().trim();
    if (!query) {
        alert('请输入搜索关键词');
        return;
    }

    const results = moviesData.filter(movie => 
        movie.title.toLowerCase().includes(query) ||
        movie.director.toLowerCase().includes(query) ||
        movie.cast.some(actor => actor.toLowerCase().includes(query)) ||
        movie.genre.some(g => g.toLowerCase().includes(query))
    );

    displaySearchResults(results, query);
}

// 显示搜索结果
function displaySearchResults(results, query) {
    const container = document.getElementById('hotMovies');
    const section = container.closest('section');
    const title = section.querySelector('h2');
    
    title.textContent = `搜索结果："${query}"（${results.length}条）`;
    
    if (results.length === 0) {
        container.innerHTML = `
            <div style="grid-column: 1/-1; text-align: center; padding: 40px; color: #888;">
                <p>未找到匹配的电影，请尝试其他关键词。</p>
            </div>
        `;
        return;
    }

    container.innerHTML = results.map(movie => `
        <article class="movie-card" data-id="${movie.id}">
            <img src="${movie.poster || 'images/default-poster.jpg'}" 
                 alt="${movie.title}" 
                 onerror="this.src='images/default-poster.jpg'">
            <div class="movie-card-content">
                <h3>${movie.title}</h3>
                <div class="meta">${movie.year} • ${movie.genre.join(' / ')}</div>
                <div class="rating">⭐ ${movie.rating}</div>
                <button onclick="viewMovieDetail(${movie.id})" 
                        style="margin-top: 8px; padding: 6px 12px; background: #667eea; color: white; border: none; border-radius: 4px; cursor: pointer;">
                    查看详情
                </button>
            </div>
        </article>
    `).join('');
}

// 查看电影详情（模拟页面跳转）
function viewMovieDetail(movieId) {
    const movie = moviesData.find(m => m.id === movieId);
    if (!movie) return;

    // 创建模态框显示详情
    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);
        z-index: 1000;
        overflow-y: auto;
        padding: 20px;
    `;

    modal.innerHTML = `
        <div style="max-width: 800px; margin: 0 auto; background: white; border-radius: 12px; overflow: hidden;">
            <div style="display: flex; gap: 20px; padding: 20px; flex-wrap: wrap;">
                <div style="flex: 1; min-width: 250px;">
                    <img src="${movie.poster || 'images/default-poster.jpg'}" 
                         alt="${movie.title}" 
                         style="width: 100%; border-radius: 8px;"
                         onerror="this.src='images/default-poster.jpg'">
                </div>
                <div style="flex: 2; min-width: 300px;">
                    <h2 style="margin-bottom: 10px;">${movie.title}</h2>
                    <p style="color: #666; margin-bottom: 15px;">
                        ${movie.year} • ${movie.genre.join(' / ')} • ${movie.director}
                    </p>
                    <p style="margin-bottom: 15px;"><strong>主演：</strong>${movie.cast.join('、')}</p>
                    <p style="margin-bottom: 15px;"><strong>评分：</strong><span style="color: #ff6b6b; font-size: 1.2rem;">${movie.rating}⭐</span></p>
                    <p style="margin-bottom: 15px;"><strong>简介：</strong>${movie.description}</p>
                    <div style="margin-top: 20px;">
                        <h3 style="margin-bottom: 10px;">用户影评</h3>
                        ${movie.reviews && movie.reviews.length > 0 ? 
                            movie.reviews.map(r => `
                                <div style="background: #f5f5f5; padding: 10px; margin-bottom: 8px; border-radius: 4px;">
                                    <strong>${r.user}</strong> <span style="color: #ff6b6b;">${r.rating}⭐</span>
                                    <p style="margin-top: 5px;">${r.content}</p>
                                </div>
                            `).join('') : 
                            '<p style="color: #888;">暂无影评</p>'
                        }
                    </div>
                </div>
            </div>
            <div style="text-align: center; padding: 15px; background: #f5f5f5;">
                <button onclick="this.closest('div[style*=fixed]').remove()" 
                        style="padding: 10px 30px; background: #667eea; color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 1rem;">
                    关闭
                </button>
            </div>
        </div>
    `;

    document.body.appendChild(modal);
    
    // 点击背景关闭
    modal.addEventListener('click', function(e) {
        if (e.target === modal) {
            modal.remove();
        }
    });
}

// 模拟用户登录状态（实际项目中应连接后端）
let currentUser = null;

function login(username, password) {
    // 简单验证
    if (username === 'testuser' && password === '123456') {
        currentUser = { id: 1, username: username };
        alert('登录成功！');
        updateUIForLoggedInUser();
        return true;
    }
    alert('用户名或密码错误');
    return false;
}

function updateUIForLoggedInUser() {
    const userSection = document.getElementById('user');
    if (userSection && currentUser) {
        userSection.innerHTML = `
            <div style="background: white; padding: 20px; border-radius: 8px; max-width: 600px; margin: 0 auto;">
                <h2>欢迎回来，${currentUser.username}</h2>
                <p style="margin: 15px 0;">您已成功登录，可以查看和管理您的影评。</p>
                <button onclick="logout()" 
                        style="padding: 8px 16px; background: #ff6b6b; color: white; border: none; border-radius: 4px; cursor: pointer;">
                    退出登录
                </button>
            </div>
        `;
    }
}

function logout() {
    currentUser = null;
    alert('已退出登录');
    // 重新加载用户中心内容
    location.reload();
}

// 暴露全局函数供HTML调用
window.searchMovies = searchMovies;
window.viewMovieDetail = viewMovieDetail;
window.login = login;
window.logout = logout;

4.2 事件委托与性能优化

对于动态生成的元素，使用事件委托：

// 事件委托示例：统一处理所有卡片点击
document.addEventListener('click', function(e) {
    // 处理电影卡片点击查看详情
    if (e.target.closest('.movie-card')) {
        const card = e.target.closest('.movie-card');
        const movieId = parseInt(card.dataset.id);
        if (e.target.tagName !== 'BUTTON') {
            viewMovieDetail(movieId);
        }
    }

    // 处理搜索按钮
    if (e.target.matches('.search-box button')) {
        searchMovies();
    }
});

五、完整项目整合与测试

5.1 HTML完整结构

创建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="电影影评网 - 发现好电影，分享好影评">
    <title>电影影评网 - 发现好电影</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 头部导航 -->
    <header class="site-header">
        <div class="container">
            <h1>电影影评网</h1>
            <nav class="main-nav">
                <ul>
                    <li><a href="#home">首页</a></li>
                    <li><a href="#movies">电影</a></li>
                    <li><a href="#reviews">影评</a></li>
                    <li><a href="#user">用户中心</a></li>
                </ul>
            </nav>
            <div class="search-box">
                <input type="search" placeholder="搜索电影、导演、演员..." id="searchInput">
                <button onclick="searchMovies()">搜索</button>
            </div>
        </div>
    </header>

    <!-- 主内容区 -->
    <main class="main-content">
        <!-- 热门电影推荐 -->
        <section class="hot-movies" id="home">
            <div class="container">
                <h2>热门电影推荐</h2>
                <div class="movie-grid" id="hotMovies">
                    <!-- JavaScript动态生成 -->
                </div>
            </div>
        </section>

        <!-- 最新影评 -->
        <section class="latest-reviews" id="reviews">
            <div class="container">
                <h2>最新影评</h2>
                <div class="review-list" id="latestReviews">
                    <!-- JavaScript动态生成 -->
                </div>
            </div>
       >

        <!-- 用户中心 -->
        <section class="user-center" id="user">
            <div class="container">
                <h2>用户中心</h2>
                <div id="userContent">
                    <div style="background: white; padding: 20px; border-radius: 8px; max-width: 500px; margin: 0 auto;">
                        <h3>用户登录</h3>
                        <form id="loginForm" onsubmit="event.preventDefault(); login(this.username.value, this.password.value);">
                            <div style="margin-bottom: 15px;">
                                <label>用户名：</label>
                                <input type="text" name="username" value="testuser" required style="width: 100%; padding: 8px; margin-top: 5px;">
                            </div>
                            <div style="margin-bottom: 15px;">
                                <label>密码：</label>
                                <input type="password" name="password" value="123456" required style="width: 100%; padding: 8px; margin-top: 5px;">
                            </div>
                            <button type="submit" style="padding: 10px 20px; background: #667eea; color: white; border: none; border-radius: 4px; cursor: pointer; width: 100%;">
                                登录
                            </button>
                        </form>
                        <p style="margin-top: 15px; font-size: 0.9rem; color: #666;">
                            测试账号：testuser / 123456
                        </p>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="site-footer">
        <div class="container">
            <p>&copy; 2024 电影影评网. All rights reserved.</p>
            <p>
                <a href="#home">首页</a> | 
                <a href="#movies">电影列表</a> | 
                <a href="#user">用户中心</a>
            </p>
        </div>
    </footer>

    <!-- 数据文件 -->
    <script src="data.js"></script>
    <!-- 主逻辑文件 -->
    <script src="app.js"></script>
</body>
</html>

5.2 项目文件结构

movie-review-site/
├── index.html          # 主页面
├── style.css           # 样式文件
├── data.js             # 模拟数据
├── app.js              # 主逻辑
├── images/             # 图片资源
│   ├── default-poster.jpg
│   └── shawshank.jpg   # 示例电影海报
└── README.md           # 项目说明

5.3 测试清单

功能测试：
- 搜索功能是否正常工作
- 电影详情模态框是否正确显示
- 登录/退出功能是否正常
响应式测试：
- 在PC（>1024px）、平板（768-1024px）、手机（<768px）下分别测试
- 检查布局是否错乱
- 检查字体大小是否合适
浏览器兼容性测试：
- Chrome、Firefox、Safari、Edge
- 检查CSS Grid和Flexbox的兼容性

六、高级优化与扩展

6.1 性能优化

图片懒加载：

// 在app.js中添加
function setupLazyLoading() {
    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.removeAttribute('data-src');
                observer.unobserve(img);
            }
        });
    });

    images.forEach(img => imageObserver.observe(img));
}

CSS性能优化：

/* 使用will-change提示浏览器优化 */
.movie-card {
    will-change: transform;
    transition: transform 0.3s ease-out;
}

/* 避免使用昂贵的属性 */
/* 避免：box-shadow: 0 0 20px rgba(0,0,0,0.5); */
/* 推荐：box-shadow: 0 2px 8px rgba(0,0,0,0.1); */

6.2 可访问性（A11Y）改进

/* 高对比度模式支持 */
@media (prefers-contrast: high) {
    .movie-card {
        border: 2px solid #000;
    }
    .site-header {
        background: #000;
    }
}

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

6.3 SEO优化

<!-- 在head中添加 -->
<meta name="description" content="电影影评网 - 发现好电影，分享好影评">
<meta name="keywords" content="电影,影评,电影评论,电影推荐">
<meta property="og:title" content="电影影评网 - 发现好电影">
<meta property="og:description" content="专业的电影评论和推荐平台">
<meta property="og:type" content="website">
<meta property="og:url" content="https://yourdomain.com">

七、实训总结与心得

通过本次电影影评网的开发实训，我们完整地体验了现代响应式网站的开发流程。从需求分析到技术选型，从HTML5语义化结构到CSS3响应式布局，再到JavaScript交互实现，每个环节都体现了前端开发的最佳实践。

关键收获：

语义化HTML：不仅提升SEO，更使代码结构清晰，易于维护
移动优先策略：从小屏幕开始设计，逐步增强到大屏幕，确保核心体验
CSS Grid与Flexbox：现代布局技术的强大组合，简化了复杂布局的实现
性能意识：从代码编写阶段就考虑加载速度和运行效率
可访问性：关注所有用户，包括使用辅助技术的用户

未来扩展方向：

集成真实后端API，实现用户数据持久化
添加PWA支持，实现离线访问
引入前端框架（如Vue/React）构建单页应用
实现用户评分统计、个性化推荐等高级功能

这个项目虽然简单，但涵盖了响应式网站开发的核心要素，是学习现代前端技术的绝佳起点。通过实际编码，我们不仅掌握了技术细节，更重要的是培养了工程化思维和解决问题的能力。# 电影影评网HTML5实训报告：从零搭建响应式网站的完整开发流程与代码解析

引言