编程学习乐园

从零开始学 Web 开发

涵盖 HTML、CSS、JavaScript 核心知识点，提供可运行示例、实时互动练习，让你快速掌握前端开发基础！

开始学习

HTML 基础语法

1. HTML 文档结构

HTML 文档由一系列标签组成，以下是标准的 HTML5 文档结构：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
  </head>
  <body>
    <h1>Hello, HTML!</h1>
    <p>这是我的第一个 HTML 网页。</p>
  </body>
</html>

DOCTYPE 声明

<!DOCTYPE html> 告诉浏览器这是一个 HTML5 文档，必须放在最顶部。

html 标签

根标签，包含整个 HTML 文档的内容，lang 属性指定页面语言。

head 标签

页面的元数据区域，包含标题、编码、样式等（不直接显示在页面上）。

body 标签

页面的可见内容区域，所有需要显示的文本、图片、视频等都放在这里。

2. 标签的基本规则

  • 标签通常成对出现，分为开始标签（<tag>）和结束标签（</tag>），如 <p>...</p>。
  • 有些标签是自闭合的，不需要结束标签，如 <img>、<br>、<input>。
  • 标签可以嵌套，但不能交叉嵌套（如 <div><p></div></p> 是错误的）。
  • 标签的属性用于设置额外信息，格式为：<tag 属性名="属性值">，如 <a href="https://www.baidu.com">。

CSS 基础语法

1. CSS 作用与引入方式

CSS（层叠样式表）用于美化 HTML 页面，控制元素的布局、颜色、字体等样式，有 3 种引入方式：

内联样式

直接写在 HTML 标签的 style 属性中

<p style="color: red;">红色文本</p>

内部样式表

写在 HTML 的 <style> 标签中

<style>p { color: red; }</style>

外部样式表

单独写在 .css 文件中，用 <link> 引入

<link rel="stylesheet" href="style.css">

2. CSS 选择器（核心）

选择器用于定位需要设置样式的 HTML 元素，常用选择器如下：

/* 1. 元素选择器：选中所有指定标签 */
p {
  color: #333;
  font-size: 16px;
}

/* 2. 类选择器：选中所有 class="box" 的元素（最常用） */
.box {
  width: 200px;
  height: 200px;
  background: blue;
}

/* 3. ID 选择器：选中 id="header" 的唯一元素 */
#header {
  text-align: center;
  padding: 20px;
}

/* 4. 后代选择器：选中 .container 内部的所有 span 元素 */
.container span {
  color: red;
}

3. 常用样式属性

属性 功能 示例
color 文本颜色 color: #f00;
background 背景色/背景图 background: #eee;
font-size 字体大小 font-size: 18px;
margin 外边距（元素外部间距） margin: 10px;
padding 内边距（元素内部间距） padding: 15px;
border 边框 border: 1px solid #ccc;

JavaScript 基础语法

1. JS 作用与引入方式

JavaScript 用于实现页面动态交互（如表单验证、按钮点击效果、数据处理），有 2 种引入方式：

内部脚本

写在 HTML 的 <script> 标签中（建议放 body 末尾）

<script>alert('Hello JS!');</script>

外部脚本

单独写在 .js 文件中，用 <script src=""> 引入

<script src="script.js"></script>

2. 核心基础语法

// 1. 变量声明（let/const 推荐，var 过时）
let name = "小明"; // 可修改的变量
const age = 20;    // 不可修改的常量

// 2. 函数定义与调用
function sayHello() {
  console.log("Hello, JavaScript!");
}
sayHello(); // 调用函数，控制台输出内容

// 3. 事件绑定（按钮点击效果）
document.getElementById("btn").addEventListener("click", function() {
  alert("按钮被点击了！");
});

// 4. DOM 操作（修改页面内容）
document.getElementById("text").innerText = "修改后的文本";

3. 简单交互示例

代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>JS 点击计数</title>
</head>
<body>
  <h1>点击计数器</h1>
  <p>点击次数：<span id="count">0</span></p>
  <button id="btn" style="padding: 10px 20px;">点击我</button>

  <script>
    // 获取元素
    let count = 0;
    const btn = document.getElementById("btn");
    const countSpan = document.getElementById("count");

    // 绑定点击事件
    btn.addEventListener("click", function() {
      count++; // 计数+1
      countSpan.innerText = count; // 更新页面显示
    });
  </script>
</body>
</html>

预览效果：

点击计数器

点击次数：0

Web 开发实例演示

实例 1：简单的个人介绍页（HTML）

代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>我的个人介绍</title>
</head>
<body>
  <h1 style="color: #2c3e50;">你好，我是小明</h1>
  <img src="https://picsum.photos/300/300" alt="个人头像" style="border-radius: 50%;">
  <p>我是一名前端开发爱好者，正在学习 HTML、CSS 和 JavaScript。</p>
  <h3>我的爱好：</h3>
  <ul>
    <li>编程</li>
    <li>阅读</li>
    <li>运动</li>
  </ul>
  <a href="https://github.com" target="_blank">我的 GitHub</a>
</body>
</html>

预览效果：

你好，我是小明

个人头像

我是一名前端开发爱好者，正在学习 HTML、CSS 和 JavaScript。

我的爱好：

  • 编程
  • 阅读
  • 运动
快捷键说明 关于我们 联系反馈

实例 2：简单图片画廊（HTML+CSS）

代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>图片画廊</title>
  <style>
    .gallery { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
    .gallery img { width: 150px; height: 150px; object-fit: cover; cursor: pointer; transition: transform 0.3s; }
    .gallery img:hover { transform: scale(1.05); } /* hover 放大效果 */
  </style>
</head>
<body>
  <h1 style="text-align: center;">我的图片画廊</h1>
  <div class="gallery">
    <img src="https://picsum.photos/200/200?1" alt="风景1">
    <img src="https://picsum.photos/200/200?2" alt="风景2">
    <img src="https://picsum.photos/200/200?3" alt="风景3">
    <img src="https://picsum.photos/200/200?4" alt="风景4">
    <img src="https://picsum.photos/200/200?5" alt="风景5">
    <img src="https://picsum.photos/200/200?6" alt="风景6">
  </div>
</body>
</html>

预览效果：

我的图片画廊

风景1 风景2 风景3 风景4 风景5 风景6

实例 3：响应式导航栏（HTML+CSS）

代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>响应式导航栏</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    .navbar { background: #333; color: white; padding: 1rem; }
    .navbar-container { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }
    .logo { font-size: 1.5rem; font-weight: bold; }
    .nav-links { display: flex; gap: 2rem; list-style: none; }
    .nav-links a { color: white; text-decoration: none; }
    .menu-btn { display: none; font-size: 1.5rem; cursor: pointer; }

    /* 响应式：屏幕小于 768px 时隐藏导航，显示菜单按钮 */
    @media (max-width: 768px) {
      .nav-links { display: none; }
      .menu-btn { display: block; }
    }
  </style>
</head>
<body>
  <nav class="navbar">
    

      
      
      
☰

    

  </nav>
</body>
</html>

预览效果：

缩小浏览器窗口可查看响应式效果

实例 4：表单验证（HTML+JS）

代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>表单验证</title>
  <style>
    .form-group { margin: 1rem 0; }
    label { display: block; margin-bottom: 0.5rem; }
    input { padding: 0.5rem; width: 300px; }
    .error { color: red; font-size: 0.9rem; margin-top: 0.3rem; }
    button { padding: 0.7rem 1.5rem; background: #28a745; color: white; border: none; border-radius: 4px; cursor: pointer; }
  </style>
</head>
<body>
  <form id="myForm" onsubmit="return validateForm()">
    <div class="form-group">
      <label for="username">用户名：</label>
      <input type="text" id="username" name="username">
      <div class="error" id="usernameError"></div>
    </div>
    <div class="form-group">
      <label for="password">密码：</label>
      <input type="password" id="password" name="password">
      <div class="error" id="passwordError"></div>
    </div>
    <button type="submit">提交</button>
  </form>

  <script>
    function validateForm() {
      let isValid = true;
      const username = document.getElementById("username").value;
      const password = document.getElementById("password").value;

      // 验证用户名
      if (username.trim() === "") {
        document.getElementById("usernameError").innerText = "用户名不能为空";
        isValid = false;ment.getElementById("usernameError").innerText = "用户名不能为空";
        isValid = false;
      } else {
        document.getElementById("usernameError").innerText = "";
      }

      // 验证密码（至少 6 位）
      if (password.length < 6) {
        document.getElementById("passwordError").innerText = "密码至少 6 位";
        isValid = false;
      } else {
        document.getElementById("passwordError").innerText = "";
      }

      return isValid; // 验证通过则提交表单
    }
  </script>
</body>
</html>

预览效果：

前端框架入门

Vue 3 入门
React 入门

Vue 3 核心特性

Vue 是一个渐进式 JavaScript 框架，易学易用，适合初学者入门。

代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Vue 3 示例</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
  <div id="app">
    <h1>{{ message }}</h1>
    <button @click="count++">点击次数：{{ count }}</button>
    <input v-model="inputValue" placeholder="输入内容">
    <p>你输入了：{{ inputValue }}</p>
  </div>

  <script>
    const { createApp } = Vue
    createApp({
      data() {
        return {
          message: 'Hello Vue 3!',
          count: 0,
          inputValue: ''
        }
      }
    }).mount('#app')
  </script>
</body>
</html>

核心概念：

声明式渲染： 使用 {{ }} 语法直接绑定数据到 DOM
响应式： 数据变化自动更新视图
指令系统： v-on、v-model 等简化 DOM 操作
组件化： 将页面拆分为可复用的组件

学习建议：

  • 先掌握 Vue 的模板语法
  • 理解数据响应式原理
  • 学习组件的创建与通信

React 核心特性

React 是由 Facebook 开发的 UI 库，采用组件化和声明式编程。

代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>React 18 示例</title>
  <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
  <div id="root"></div>

  <script type="text/babel">
    const { useState } = React;
    
    function App() {
      const [count, setCount] = useState(0);
      const [inputValue, setInputValue] = useState('');
      
      return (
        <div>
          <h1>Hello React!</h1>
          <button onClick={() => setCount(count + 1)}>
            点击次数：{count}
          </button>
          <input 
            value={inputValue} 
            onChange={e => setInputValue(e.target.value)}
            placeholder="输入内容"
          />
          <p>你输入了：{inputValue}</p>
        </div>
      );
    }
    
    ReactDOM.render(<App />, document.getElementById('root'));
  </script>
</body>
</html>

核心概念：

JSX： 在 JavaScript 中编写类似 HTML 的语法
组件： 一切皆为组件，可复用的 UI 单元
Hooks： useState、useEffect 等管理状态和副作用
虚拟 DOM： 提升性能的 diff 算法

学习建议：

  • 掌握 JSX 语法和 JavaScript ES6+
  • 理解组件的 props 和 state
  • 学习 Hooks 的使用

框架对比

特性 Vue 3 React 18
学习曲线 平缓，适合初学者 陡峭，需要 JS 基础
数据绑定 双向绑定（v-model） 单向数据流
模板 HTML 模板 + 指令 JSX（JavaScript 中写 HTML）
生态系统 官方全家桶（Vuex, Router） 第三方库丰富，选择多

互动练习：实时编辑 Web 代码

在下方编辑器中编写 HTML、CSS、JavaScript 代码，支持语法高亮、代码折叠、实时预览、控制台调试等高级功能！

代码编辑器：

控制台

预览区域：

代码已自动保存
快捷键列表

分享代码

复制下方代码分享给其他人：

代码历史
退出全屏