这里的“二手”有两层含义：

html5网页开发实践教程二手
（图片来源网络，侵删）
  1. 实践项目是“二手”相关的：我们将围绕一个“二手闲置物品交易平台”来展开所有实践。
  2. 学习方式是“接地气”的：教程会从最基础、最实用的角度出发，避免过多理论，直接上手写代码，让你能快速看到成果。

HTML5 网页开发实践教程：从零开始搭建一个二手交易平台

核心理念

不要只看不练，跟着教程一行一行敲，你就是开发者。

我们将使用最简单、最核心的技术栈来完成这个项目：

  • HTML5: 网页的骨架和内容。
  • CSS3: 网页的“美颜”和样式。
  • JavaScript (原生): 网页的大脑和交互逻辑。

我们不需要任何复杂的框架（如 React, Vue），因为我们是在“实践”基础。

第一部分：准备工作 - 你的“开发工具箱”

在开始写代码之前,你需要准备三样东西，它们都是免费的。

html5网页开发实践教程二手
（图片来源网络，侵删）

  1. 代码编辑器: 用来写代码的软件。

  2. 网页浏览器: 用来查看你写的网页效果。

    • 推荐: Google Chrome 或 Microsoft Edge，它们有强大的开发者工具，方便我们调试。
    • 自带功能: 任何现代浏览器都可以。

  3. 本地服务器: 一个在你电脑上运行的、模拟真实网站环境的小程序。

    • 为什么需要？ 因为一些现代网页技术（比如我们后面会用到的 fetch API）在直接用 file:// 打开本地 HTML 文件时会因为“安全策略”而失效，本地服务器可以解决这个问题。
    • 最简单的选择: Live Server (VS Code 插件)。
    • 安装方法: 在 VS Code 中，点击左侧的扩展图标（像积木块的那个），搜索 "Live Server"，然后点击 "Install"。

第二部分：项目启动 - 搭建我们的“小破站”骨架

我们开始创建项目。

html5网页开发实践教程二手
（图片来源网络，侵删）

步骤 1: 创建项目文件夹 在你的电脑上新建一个文件夹，命名为 second-hand-market (或者你喜欢的任何名字)。

步骤 2: 创建核心文件 在 second-hand-market 文件夹里，创建以下三个文件：

  • index.html (首页)
  • style.css (样式表)
  • script.js (脚本)

步骤 3: 用 Live Server 运行项目 在 VS Code 中打开 second-hand-market 文件夹，然后找到 index.html 文件，右键点击，选择 "Open with Live Server"，你的浏览器会自动打开，并显示一个空白页面，恭喜你，你的本地服务器已经启动！

第三部分：实战演练 - 从一个简单的商品列表开始

我们的目标是先做出一个能展示二手商品列表的页面。

第 1 步：用 HTML5 搭建页面结构 (index.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">二手好物 - 让闲置流动起来</title>
    <!-- 引入我们的 CSS 文件 -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>二手好物</h1>
        <p>一个简单的二手闲置交易平台</p>
    </header>
    <main>
        <h2>正在出售的商品</h2>
        <!-- 商品列表容器 -->
        <div id="product-list">
            <!-- 商品 1 -->
            <div class="product-card">
                <img src="https://via.placeholder.com/150" alt="商品图片">
                <h3>九成新的 MacBook Pro</h3>
                <p class="description">2025款，M1芯片，8G+256G，几乎无划痕，因换新机出售。</p>
                <p class="price">¥ 6500</p>
                <button class="buy-button">立即购买</button>
            </div>
            <!-- 商品 2 -->
            <div class="product-card">
                <img src="https://via.placeholder.com/150" alt="商品图片">
                <h3>索尼 WH-1000XM4 降噪耳机</h3>
                <p class="description">黑色，购买一年，音质极佳，降噪效果拔群。</p>
                <p class="price">¥ 1200</p>
                <button class="buy-button">立即购买</button>
            </div>
            <!-- 商品 3 -->
            <div class="product-card">
                <img src="https://via.placeholder.com/150" alt="商品图片">
                <h3>宜家白色书桌</h3>
                <p class="description">1.2米长，简约风格，搬家忍痛割爱。</p>
                <p class="price">¥ 200</p>
                <button class="buy-button">立即购买</button>
            </div>
        </div>
    </main>
    <!-- 引入我们的 JavaScript 文件，放在 body 末尾是最佳实践 -->
    <script src="script.js"></script>
</body>
</html>

保存 index.html 并刷新浏览器。 你会看到一个没有样式的、很丑的商品列表，别担心，下一步我们来“美颜”。

第 2 步：用 CSS3 美化页面 (style.css)

打开 style.css 文件，输入以下代码来为我们的商品列表穿上“衣服”。

/* 全局样式重置，让所有浏览器看起来更一致 */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: #f4f4f4;
    color: #333;
    line-height: 1.6;
}
/* 页头样式 */
header {
    background-color: #2c3e50;
    color: #fff;
    text-align: center;
    padding: 1rem;
}
header h1 {
    font-size: 2.5rem;
}
区域 */
main {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 1rem;
}
main h2 {
    text-align: center;
    margin-bottom: 2rem;
    color: #2c3e50;
}
/* 商品列表容器 */
#product-list {
    display: grid; /* 使用 CSS Grid 布局，非常现代和强大 */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* 自动填充，每列最小300px */
    gap: 2rem; /* 卡片之间的间距 */
}
/* 商品卡片样式 */
.product-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden; /* 让图片圆角生效 */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 添加悬停动画效果 */
}
.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}
.product-card img {
    width: 100%;
    height: 200px;
    object-fit: cover; /* 保证图片不变形 */
}
.product-card h3 {
    padding: 1rem;
    font-size: 1.2rem;
    border-bottom: 1px solid #eee;
}
.product-card .description {
    padding: 0 1rem;
    color: #666;
    font-size: 0.9rem;
}
.product-card .price {
    padding: 0 1rem;
    font-size: 1.5rem;
    font-weight: bold;
    color: #e74c3c;
}
.product-card .buy-button {
    display: block;
    width: 80%;
    margin: 1rem auto;
    padding: 0.8rem;
    background-color: #3498db;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s ease;
}
.product-card .buy-button:hover {
    background-color: #2980b9;
}

保存 style.css 并刷新浏览器。 看看！是不是瞬间变得好看了很多？这就是 CSS 的魔力。

第 3 步：用 JavaScript 添加交互 (script.js)

页面好看了,但按钮是“死”的，点击它没有任何反应，我们用 JavaScript 来让它活起来。

打开 script.js 文件，输入以下代码：

// 当整个网页内容加载完毕后，再执行这个函数
document.addEventListener('DOMContentLoaded', () => {
    // 1. 获取所有的“立即购买”按钮
    const buyButtons = document.querySelectorAll('.buy-button');
    // 2. 遍历每一个按钮，并给它添加点击事件
    buyButtons.forEach(button => {
        button.addEventListener('click', (event) => {
            // event.target 就是被点击的那个按钮
            const clickedButton = event.target;
            // 找到这个按钮所在的“商品卡片”
            const productCard = clickedButton.closest('.product-card');
            // 从商品卡片里提取商品名称和价格
            const productName = productCard.querySelector('h3').innerText;
            const productPrice = productCard.querySelector('.price').innerText;
            // 弹出一个提示框，告诉用户购买了什么
            // 在实际项目中，这里会跳转到支付页面或发送数据到服务器
            alert(`你已成功将 "${productName}" 加入购物车！价格：${productPrice}`);
        });
    });
});

保存 script.js 并刷新浏览器。 点击任何一个“立即购买”按钮，都会弹出一个提示框，恭喜，你成功地为你的网站添加了第一个交互功能！

第四部分：总结与下一步

我们完成了什么？

  • ✅ 搭建了本地开发环境。
  • ✅ 创建了 HTML、CSS、JS 三个核心文件。
  • ✅ 使用 HTML5 语义化标签构建了页面结构。
  • ✅ 使用 CSS3（特别是 Grid 和 Flexbox）实现了现代化的响应式布局。
  • ✅ 使用原生 JavaScript 为页面添加了基本的交互逻辑。

接下来可以做什么？（进阶实践）

  1. 创建一个发布商品的表单:

    • 在 index.html 的 main 里添加一个 <form>。
    • 表单里包含：商品名称、描述、价格、图片上传（用 <input type="file">）等字段。
    • 用 CSS 美化这个表单。
    • 用 JavaScript 监听表单的 submit 事件，获取表单数据，并动态地创建一个新的 .product-card，添加到 #product-list 中。

  2. 使用 LocalStorage 模拟数据库:

    • 当你通过表单发布新商品时,不要只添加到页面上，而是把商品信息（一个 JS 对象）转换成 JSON 字符串，然后用 localStorage.setItem() 存储到浏览器的本地存储里。
    • 当页面加载时,先检查 localStorage 里面有没有商品数据，如果有，就把它读取出来，然后循环生成商品卡片，这样刷新页面后商品也不会消失。

  3. 添加搜索和筛选功能:

    • 在页面顶部添加一个搜索框。
    • 用 JavaScript 监听输入事件，当用户输入时，遍历所有商品卡片，判断它的标题或描述是否包含搜索关键词，如果不包含，就把它隐藏（display: none;）。

  4. 美化细节:

    • 添加一个页脚 (<footer>)。
    • 添加一个导航栏 (<nav>)。
    • 为按钮添加更酷的动画效果。

学习编程最好的方式就是动手实践，不要怕搞错，代码错了浏览器会告诉你，大胆地去修改、去尝试，这个小小的二手平台就是你的练兵场！