前言

在这个数字化时代，Web前端技术已经成为构建网页和应用程序的基石。HTML、CSS和JavaScript是构成Web前端的三驾马车，掌握了它们，你就可以轻松地创作出各种丰富的网页内容。本文将带你从零开始，一步步学习HTML、CSS和JavaScript，并通过实战案例帮助你快速上手。

第一章：HTML入门

1.1 HTML简介

HTML（HyperText Markup Language）即超文本标记语言，是构建网页的基础。它使用一系列标签来描述网页的结构和内容。

1.2 HTML基本结构

以下是一个简单的HTML文档结构：

<!DOCTYPE html>
<html>
<head>
    <title>我的第一个网页</title>
</head>
<body>
    <h1>欢迎来到我的网页</h1>
    <p>这是一个段落。</p>
</body>
</html>

1.3 常用HTML标签

  1. 标题标签：<h1>至<h6>，用于定义标题。
  2. 段落标签：<p>，用于定义段落。
  3. 列表标签：<ul>、<ol>和<li>，用于定义无序列表、有序列表和列表项。
  4. 链接标签：<a>，用于定义超链接。
  5. 图片标签：<img>，用于插入图片。

第二章：CSS入门

2.1 CSS简介

CSS（Cascading Style Sheets）即层叠样式表，用于控制网页元素的样式。

2.2 CSS基本语法

以下是一个简单的CSS样式：

body {
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
}

2.3 常用CSS属性

  1. 颜色：color、background-color等。
  2. 字体：font-family、font-size等。
  3. 边框：border、border-radius等。
  4. 定位：position、top、left等。

第三章：JavaScript入门

3.1 JavaScript简介

JavaScript是一种客户端脚本语言，可以用来增强网页的功能。

3.2 JavaScript基本语法

以下是一个简单的JavaScript代码：

console.log("Hello, world!");

3.3 常用JavaScript语法

  1. 变量：var、let和const。
  2. 数据类型：String、Number、Boolean等。
  3. 运算符：+、-、*、/等。
  4. 函数：function。

第四章：实战案例

4.1 制作一个简单的网页

  1. 创建一个HTML文件，并添加基本结构。
  2. 创建一个CSS文件，并添加样式。
  3. 在HTML文件中引入CSS文件。
  4. 使用JavaScript添加动态效果。

4.2 制作一个待办事项列表

  1. 创建一个HTML文件，并添加列表结构。
  2. 创建一个CSS文件，并添加样式。
  3. 在HTML文件中引入CSS文件。
  4. 使用JavaScript添加添加、删除和标记完成的功能。

第五章：总结

通过本文的学习，相信你已经对HTML、CSS和JavaScript有了初步的了解。接下来，你可以通过不断地练习和实战，进一步提高自己的技能。祝你在Web前端领域取得更大的成就！