HTML5轻松上手：10个实用小项目案例教学

项目一：响应式导航栏

响应式导航栏是现代网站不可或缺的部分。在这个项目中，我们将使用HTML5和CSS3来创建一个灵活且美观的导航栏，它能够在不同设备上自动调整大小。

步骤：

使用HTML5创建基本的导航结构。
使用CSS3添加样式，包括背景颜色、字体大小和导航项之间的间距。
利用媒体查询（Media Queries）来使导航栏在不同屏幕尺寸下保持响应式。

代码示例：

<!DOCTYPE html>
<html>
<head>
  <title>响应式导航栏</title>
  <style>
    /* 导航栏基础样式 */
    .navbar {
      overflow: hidden;
      background-color: #333;
    }

    /* 导航链接样式 */
    .navbar a {
      float: left;
      display: block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }

    /* 媒体查询 */
    @media screen and (max-width: 600px) {
      .navbar a {
        float: none;
        display: block;
        text-align: left;
      }
    }
  </style>
</head>
<body>

<div class="navbar">
  <a href="#home">首页</a>
  <a href="#news">新闻</a>
  <a href="#contact">联系</a>
  <a href="#about">关于</a>
</div>

<h1>这是一个响应式导航栏</h1>
</body>
</html>

项目二：图片画廊

图片画廊是展示图片集的好方法。我们将使用HTML5和CSS3来创建一个简单的图片画廊，用户可以通过点击图片来放大预览。

步骤：

使用HTML5的<figure>和<img>标签创建图片元素。
使用CSS3设置图片的样式，包括边框、阴影和过渡效果。
添加一个放大镜效果，当鼠标悬停在图片上时显示。

代码示例：

<!DOCTYPE html>
<html>
<head>
  <title>图片画廊</title>
  <style>
    .gallery {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
    }

    .gallery img {
      border: 2px solid #ddd;
      transition: transform 0.2s ease;
    }

    .gallery img:hover {
      transform: scale(1.1);
    }

    .gallery figure {
      margin: 10px;
    }
  </style>
</head>
<body>

<div class="gallery">
  <figure>
    <img src="image1.jpg" alt="图片1">
  </figure>
  <figure>
    <img src="image2.jpg" alt="图片2">
  </figure>
  <figure>
    <img src="image3.jpg" alt="图片3">
  </figure>
</div>

</body>
</html>

项目三：倒计时计时器

倒计时计时器是许多网站和应用程序中常见的功能。在这个项目中，我们将使用HTML5和JavaScript创建一个简单的倒计时计时器。

步骤：

使用HTML5创建计时器的基本结构，包括显示时间的元素。
使用JavaScript编写代码来更新计时器的显示，实现倒计时效果。

代码示例：

<!DOCTYPE html>
<html>
<head>
  <title>倒计时计时器</title>
  <script>
    function countdown() {
      const now = new Date();
      const eventDate = new Date('2023-12-31T23:59:59');
      const diff = eventDate - now;

      let days = Math.floor(diff / (1000 * 60 * 60 * 24));
      let hours = Math.floor((diff / (1000 * 60 * 60)) % 24);
      let minutes = Math.floor((diff / 1000 / 60) % 60);
      let seconds = Math.floor((diff / 1000) % 60);

      document.getElementById("days").innerText = days;
      document.getElementById("hours").innerText = hours;
      document.getElementById("minutes").innerText = minutes;
      document.getElementById("seconds").innerText = seconds;

      if (diff < 0) {
        clearInterval(interval);
        document.getElementById("countdown").innerHTML = "事件已过去！";
      }
    }

    let interval = setInterval(countdown, 1000);
  </script>
</head>
<body>

<div id="countdown">
  <span id="days"></span>天
  <span id="hours"></span>小时
  <span id="minutes"></span>分钟
  <span id="seconds"></span>秒
</div>

</body>
</html>

项目四：在线日历

在线日历是一个非常有用的工具，可以显示当前日期、月份和年份。在这个项目中，我们将使用HTML5和JavaScript创建一个简单的在线日历。

步骤：

使用HTML5创建日历的基本结构，包括显示年、月和日的内容。
使用JavaScript编写代码来动态生成日历，并允许用户选择日期。

代码示例：

<!DOCTYPE html>
<html>
<head>
  <title>在线日历</title>
  <script>
    function createCalendar() {
      const year = new Date().getFullYear();
      const month = new Date().getMonth();
      const daysInMonth = new Date(year, month + 1, 0).getDate();

      const calendar = document.getElementById("calendar");

      // 创建头部
      const header = document.createElement("h1");
      header.innerText = `${year}年 ${month + 1}月`;
      calendar.appendChild(header);

      // 创建表格
      const table = document.createElement("table");
      const headerRow = document.createElement("tr");
      const headers = ["日", "一", "二", "三", "四", "五", "六"];
      headers.forEach(header => {
        const th = document.createElement("th");
        th.innerText = header;
        headerRow.appendChild(th);
      });
      table.appendChild(headerRow);

      // 创建日期行
      let date = 1;
      for (let i = 0; i < month; i++) {
        const row = document.createElement("tr");
        for (let j = 0; j < 7; j++) {
          const td = document.createElement("td");
          td.innerText = "";
          row.appendChild(td);
        }
        table.appendChild(row);
      }

      for (let i = 0; i < daysInMonth; i++) {
        const row = document.createElement("tr");
        for (let j = 0; j < 7; j++) {
          const td = document.createElement("td");
          td.innerText = date++;
          row.appendChild(td);
        }
        table.appendChild(row);
      }

      calendar.appendChild(table);
    }

    window.onload = createCalendar;
  </script>
</head>
<body>

<div id="calendar"></div>

</body>
</html>

项目五：简单博客布局

创建一个简单的博客布局可以帮助你开始个人博客或小型网站。在这个项目中，我们将使用HTML5和CSS3来设计一个简洁而实用的博客布局。

步骤：

使用HTML5创建博客的基本结构，包括头部、正文和侧边栏。
使用CSS3添加样式，包括字体、颜色和布局。

代码示例：

<!DOCTYPE html>
<html>
<head>
  <title>简单博客布局</title>
  <style>
    body {
      font-family: Arial, sans-serif;
    }

    header {
      background-color: #f1f1f1;
      padding: 20px;
      text-align: center;
    }

    .container {
      display: flex;
      flex-wrap: wrap;
    }

    .main {
      flex: 2;
      padding: 20px;
    }

    .sidebar {
      flex: 1;
      padding: 20px;
    }

    .sidebar h3 {
      border-bottom: 1px solid #ddd;
      padding-bottom: 10px;
    }
  </style>
</head>
<body>

<header>
  <h1>我的博客</h1>
</header>

<div class="container">
  <div class="main">
    <h2>博客标题</h2>
    <p>这是博客的内容...</p>
  </div>
  <div class="sidebar">
    <h3>侧边栏标题</h3>
    <p>侧边栏的内容...</p>
  </div>
</div>

</body>
</html>

项目六：购物车

购物车是电子商务网站的核心功能之一。在这个项目中，我们将使用HTML5、CSS3和JavaScript创建一个简单的购物车示例。

步骤：

使用HTML5创建购物车的界面，包括商品列表和购物车内容。
使用CSS3添加样式，包括商品列表和购物车内容的布局和样式。
使用JavaScript编写代码来添加商品到购物车，并计算总价。

代码示例：

<!DOCTYPE html>
<html>
<head>
  <title>购物车</title>
  <style>
    .product-list {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
    }

    .product {
      border: 1px solid #ddd;
      margin: 10px;
      padding: 10px;
      width: 20%;
    }

    .cart {
      border: 1px solid #ddd;
      margin: 10px;
      padding: 10px;
      width: 30%;
    }

    .cart-item {
      margin-bottom: 10px;
    }
  </style>
</head>
<body>

<div class="product-list">
  <div class="product">
    <h3>商品1</h3>
    <p>价格：$10</p>
    <button onclick="addToCart('商品1', 10)">添加到购物车</button>
  </div>
  <div class="product">
    <h3>商品2</h3>
    <p>价格：$20</p>
    <button onclick="addToCart('商品2', 20)">添加到购物车</button>
  </div>
  <div class="product">
    <h3>商品3</h3>
    <p>价格：$30</p>
    <button onclick="addToCart('商品3', 30)">添加到购物车</button>
  </div>
</div>

<div class="cart">
  <h2>购物车</h2>
  <div id="cart-items"></div>
  <h3>总价：$<span id="total-price">0</span></h3>
</div>

<script>
  let cartItems = [];

  function addToCart(itemName, price) {
    cartItems.push({ itemName, price });
    updateCart();
  }

  function updateCart() {
    const cartItemsDiv = document.getElementById("cart-items");
    cartItemsDiv.innerHTML = "";
    let totalPrice = 0;

    cartItems.forEach(item => {
      const itemDiv = document.createElement("div");
      itemDiv.innerText = `${item.itemName} - $${item.price}`;
      cartItemsDiv.appendChild(itemDiv);
      totalPrice += item.price;
    });

    document.getElementById("total-price").innerText = totalPrice;
  }
</script>

</body>
</html>

项目七：视频播放器

视频播放器是许多网站和应用程序中常用的功能。在这个项目中，我们将使用HTML5的<video>标签和JavaScript创建一个简单的视频播放器。

步骤：

使用HTML5的<video>标签添加视频文件。
使用CSS3添加样式，包括播放按钮和视频播放器的布局。
使用JavaScript编写代码来控制视频的播放、暂停和音量。

代码示例：

<!DOCTYPE html>
<html>
<head>
  <title>视频播放器</title>
  <style>
    .video-player {
      position: relative;
      width: 100%;
      max-width: 600px;
      margin: 20px auto;
    }

    .video-player video {
      width: 100%;
      height: auto;
    }

    .controls {
      position: absolute;
      bottom: 10px;
      left: 10px;
      right: 10px;
      background: rgba(0, 0, 0, 0.5);
      color: white;
      display: flex;
      justify-content: space-between;
      padding: 5px;
    }

    .controls button {
      background: none;
      border: none;
      color: white;
      cursor: pointer;
    }
  </style>
</head>
<body>

<div class="video-player">
  <video id="video" controls>
    <source src="movie.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>
  <div class="controls">
    <button onclick="playVideo()">播放</button>
    <button onclick="pauseVideo()">暂停</button>
    <button onclick="setVolume(0)">静音</button>
    <button onclick="setVolume(1)">音量</button>
  </div>
</div>

<script>
  const video = document.getElementById("video");

  function playVideo() {
    video.play();
  }

  function pauseVideo() {
    video.pause();
  }

  function setVolume(volume) {
    video.volume = volume;
  }
</script>

</body>
</html>

项目八：在线问卷调查

在线问卷调查是一种收集用户反馈的好方法。在这个项目中，我们将使用HTML5和JavaScript创建一个简单的在线问卷调查。

步骤：

使用HTML5创建问卷的结构，包括问题、选项和提交按钮。
使用JavaScript编写代码来收集用户的答案，并在提交后显示结果。

代码示例：

<!DOCTYPE html>
<html>
<head>
  <title>在线问卷调查</title>
  <script>
    function submitSurvey() {
      const questions = [
        { question: "你最喜欢的颜色是什么？", options: ["红色", "蓝色", "绿色", "其他"] },
        { question: "你最喜欢的运动是什么？", options: ["足球", "篮球", "游泳", "其他"] }
      ];

      let answers = {};
      questions.forEach(question => {
        const selectedOption = document.querySelector(`input[name="${question.question}"]:checked`);
        answers[question.question] = selectedOption ? selectedOption.value : "无答案";
      });

      alert("你的答案是：" + JSON.stringify(answers));
    }
  </script>
</head>
<body>

<h1>在线问卷调查</h1>

<form onsubmit="event.preventDefault(); submitSurvey();">
  <label>你最喜欢的颜色是什么？</label>
  <input type="radio" name="color" value="红色">红色
  <input type="radio" name="color" value="蓝色">蓝色
  <input type="radio" name="color" value="绿色">绿色
  <input type="radio" name="color" value="其他">其他<br><br>

  <label>你最喜欢的运动是什么？</label>
  <input type="radio" name="sport" value="足球">足球
  <input type="radio" name="sport" value="篮球">篮球
  <input type="radio" name="sport" value="游泳">游泳
  <input type="radio" name="sport" value="其他">其他<br><br>

  <input type="submit" value="提交">
</form>

</body>
</html>

项目九：待办事项列表

待办事项列表是管理任务的好方法。在这个项目中，我们将使用HTML5、CSS3和JavaScript创建一个简单的待办事项列表。

步骤：

使用HTML5创建待办事项列表的结构，包括输入框、按钮和列表。
使用CSS3添加样式，包括列表和输入框的布局和样式。
使用JavaScript编写代码来添加、删除和显示待办事项。

代码示例：

<!DOCTYPE html>
<html>
<head>
  <title>待办事项列表</title>
  <style>
    .todo-list {
      display: flex;
      flex-direction: column;
    }

    .todo-item {
      margin-bottom: 10px;
      display: flex;
      align-items: center;
    }

    .todo-item input {
      margin-right: 10px;
    }
  </style>
</head>
<body>

<div class="todo-list">
  <input type="text" id="todo-input" placeholder="添加待办事项...">
  <button onclick="addTodo()">添加</button>

  <div id="todo-list"></div>
</div>

<script>
  let todos = [];

  function addTodo() {
    const input = document.getElementById("todo-input");
    const todoText = input.value.trim();
    if (todoText) {
      todos.push(todoText);
      renderTodos();
      input.value = "";
    }
  }

  function renderTodos() {
    const todoList = document.getElementById("todo-list");
    todoList.innerHTML = "";

    todos.forEach((todo, index) => {
      const item = document.createElement("div");
      item.className = "todo-item";
      const checkbox = document.createElement("input");
      checkbox.type = "checkbox";
      checkbox.onclick = () => {
        todos.splice(index, 1);
        renderTodos();
      };
      const text = document.createElement("span");
      text.innerText = todo;
      item.appendChild(checkbox);
      item.appendChild(text);
      todoList.appendChild(item);
    });
  }
</script>

</body>
</html>

项目十：简单的在线简历

创建一个简单的在线简历可以帮助你在求职过程中展示自己的能力和经验。在这个项目中，我们将使用HTML5和CSS3来设计一个简洁而专业的在线简历。

步骤：

使用HTML5创建简历的基本结构，包括个人信息、教育背景、工作经验等。
使用CSS3添加样式，包括字体、颜色和布局。

代码示例：

”`html <!DOCTYPE html> 在线简历

个人信息

姓名：张三

性别：男

电话：1234567890

邮箱：zhangsan@example.com

HTML5轻松上手：10个实用小项目案例教学

项目一：响应式导航栏

项目二：图片画廊

项目三：倒计时计时器

项目四：在线日历

项目五：简单博客布局

项目六：购物车

项目七：视频播放器

项目八：在线问卷调查

项目九：待办事项列表

项目十：简单的在线简历

个人信息

教育背景