Three Languages, One Webpage — 三种语言，一个网页

🇨🇳 中文

每个网页都是用三种语言一起做出来的。可以把它们想象成一个三层蛋糕：

HTML — 内容和 structure（骨头）
CSS — 样式和外观（衣服）
JavaScript — 互动和动作（让它会动）

这一节课，我们快速学完三种基础。学完之后你能自己写一个简单网页。

🇬🇧 English

Every webpage is built with three languages working together. Think of them as a three-layer cake:

HTML — content and structure (the bones)
CSS — style and looks (the clothes)
JavaScript — interaction and behavior (makes it move)

In this lesson we cover the basics of all three. After it, you can write a simple webpage yourself.

HTML — The Bones / 骨头

What's on the page: text, images, buttons, links / 页面上有什么：文字、图片、按钮、链接

CSS — The Clothes / 衣服

How it looks: colors, fonts, layout, spacing / 怎么看：颜色、字体、布局、间距

JavaScript — The Movement / 动作

What it does when you click, type, or scroll / 点击、输入、滚动时发生什么

Why learn these three? — 为什么学这三种？

中文： HTML、CSS、JavaScript 是所有网页都用的标准。学会了它们，你就能看懂任何网页背后的代码，自己做网站，找前端 job，或只是好玩。它们也是 React、Vue 这类高级框架的基础。

English: HTML, CSS, and JavaScript are the universal standard for every webpage. Once you learn them, you can read any website's code, build your own site, get a frontend job, or just have fun. They're also the foundation for advanced frameworks like React and Vue.

Setup: All You Need — 你需要的全部工具

🇨🇳 中文

好消息：你不需要买任何东西，也不需要安装复杂的软件！

🇬🇧 English

Good news: you don't need to buy anything or install complicated software!

1. Text Editor

文本编辑器

免费下载 VS Code（code.visualstudio.com）。或者用 Windows 自带的记事本也行。
Download VS Code free, or use Windows Notepad.

2. Web Browser

网络浏览器

Chrome、Firefox、Edge 都可以。你的电脑上已经有了。
Chrome, Firefox, or Edge — already on your computer.

3. A Folder

一个文件夹

桌面上新建一个文件夹叫 my-website 来放你的代码文件。
Make a folder on your desktop called my-website.

💡 How to Run Your Code — 怎么运行你的代码

中文： 在 VS Code（或记事本）里写完代码，保存文件（文件名 index.html），然后双击那个文件 — 浏览器会自动打开你的网页！

English: Write your code in VS Code (or Notepad), save the file as index.html, then double-click the file — your browser opens it automatically!

Part 1: HTML — The Bones — HTML 是骨头

🇨🇳 中文

HTML 的全称是 HyperText Markup Language（hypertext markup language）。它用标签来描述页面里有什么 — 标题、段落、图片、链接……

每个标签都长这样：<tagname>内容</tagname>

🇬🇧 English

HTML stands for HyperText Markup Language. It uses tags to describe what's on the page — headings, paragraphs, images, links, and more.

Every tag looks like this: <tagname>content</tagname>

🦴 The Skeleton — 基本骨架

Every HTML file starts the same way / 每个 HTML 文件都这样开头：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My First Page</title>
</head>
<body>
  <!-- Your content goes here / 你的内容放在这里 -->
</body>
</html>

🇨🇳 中文 — 解释

<!DOCTYPE html> — 告诉浏览器"这是 HTML5"
<html> — 整个页面的最外层
<head> — 看不见的设置（标题、字符编码）
<body> — 看得见的内容（你写的所有东西）

🇬🇧 English — Explanation

<!DOCTYPE html> — Tells the browser "this is HTML5"
<html> — The outer wrapper for the whole page
<head> — Invisible settings (title, character encoding)
<body> — The visible content (everything you write)

📝 Common Tags — 常用标签

Headings <h1> – <h6>

标题（六级大小）

<h1> 最大，<h6> 最小。每页通常只有一个 <h1>。
h1 is biggest, h6 is smallest. Usually one h1 per page.

Paragraph <p>

段落

普通文字段落。
<p>Hello!</p>

Link <a>

链接

点击跳转的链接。
<a href="https://google.com">Google</a>

Image <img>

图片

显示图片。没有结束标签。
<img src="cat.jpg" alt="A cat">

Unordered List <ul> <li>

无序列表（小圆点）

小圆点列表。每一项用 <li>。
Bullet list with li items inside ul.

Bold <strong> · Italic <em>

加粗 / 斜体

<strong> = 重要，<em> = 强调。
strong = important, em = emphasis.

🎯 Try It — 动手试试

Save this as index.html and double-click to open in your browser:
把下面的代码保存成 index.html，双击在浏览器里打开：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>About Me</title>
</head>
<body>
  <h1>Hello, I am Li Ming</h1>
  <p>I am learning <strong>HTML</strong> and English.</p>
  <p>My favorite things:</p>
  <ul>
    <li>Coding</li>
    <li>Tea</li>
    <li>Movies</li>
  </ul>
  <a href="https://github.com">Visit GitHub</a>
</body>
</html>

Preview / 预览

Hello, I am Li Ming

I am learning HTML and English.

My favorite things:

Coding
Tea
Movies

Visit GitHub

⚠️ Common Mistakes — 常见错误

忘记关标签 / Forgetting the closing tag — every <p> needs a </p> / 每个 <p> 都要有 </p>
大小写 / Wrong case — HTML tags are usually lowercase / 一般用小写
引号 / Missing quotes — attribute values need quotes: href="..." / 属性值要加引号

Part 2: CSS — The Clothes — CSS 是衣服

🇨🇳 中文

CSS 的全称是 Cascading Style Sheets（cascading style sheets）。它告诉浏览器：HTML 元素长什么样 — 颜色、大小、字体、间距、布局。

CSS 的语法：选择器 { 属性: 值; }

🇬🇧 English

CSS stands for Cascading Style Sheets. It tells the browser what your HTML elements should look like — colors, sizes, fonts, spacing, layout.

The syntax is: selector { property: value; }

📍 Three Places to Put CSS — CSS 放在哪三个地方

1 Inline — 行内（在标签里）

Quick but messy / 简单但乱：

<p style="color: red;">This text is red.</p>

2 Internal — 内部（在 head 里）

Good for one-page sites / 适合单页网站：

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

3 External — 外部（独立文件，最好）

Best for multi-page sites / 多页网站最佳选择。Save CSS in style.css, link it in HTML:

/* style.css */
p { color: red; }

<!-- index.html -->
<head>
  <link rel="stylesheet" href="style.css">
</head>

🎯 Selectors — 选择器

🇨🇳 中文

选择器告诉浏览器"给哪些元素加样式"。三种最常用：

🇬🇧 English

Selectors tell the browser "which elements to style." Three most common:

/* 1. Element selector — 元素选择器（所有 p 标签）*/
p { color: blue; }

/* 2. Class selector — 类选择器（class="warning" 的元素）*/
.warning { color: red; font-weight: bold; }

/* 3. ID selector — ID 选择器（id="header" 的唯一元素）*/
#header { background: yellow; }

💡 Class vs ID — 类 vs ID

中文： Class（.）可以重复用很多次，ID（#）一个页面只能用一次。一般情况下都用 class。

English: Classes (.) can be reused many times. IDs (#) can only appear once per page. In most cases, use classes.

🎨 Common Properties — 常用属性

color

字体颜色

color: red; 或 color: #ff0000; 或 color: rgb(255,0,0);

background

背景

background: lightblue;
background: url(bg.jpg);

font-size

字号

font-size: 16px; 或 font-size: 1.2em;

font-family

字体

font-family: 'Arial', sans-serif;

padding

内边距（元素内部的空间）

padding: 10px; — 上下左右都 10px

margin

外边距（元素之间的空间）

margin: 20px; — 元素外面留 20px 空间

border

边框

border: 2px solid black;

text-align

文字对齐

text-align: center; 或 left、right

📦 The Box Model — 盒子模型

🇨🇳 中文

每个 HTML 元素都是一个"盒子"，从内到外有四层：内容 → padding（内边距）→ border（边框）→ margin（外边距）

🇬🇧 English

Every HTML element is a "box" with four layers from inside out: content → padding → border → margin

margin / 外边距

border / 边框

padding / 内边距

CONTENT
内容

🎯 Try It — 动手试试

Add this CSS to the HTML from Part 1 (inside <head>):
把下面的 CSS 加到 Part 1 的 HTML 里（放在 <head> 里面）：

<style>
  body {
    font-family: Arial, sans-serif;
    background: #fef2f2;
    padding: 20px;
  }
  h1 {
    color: #dc2626;
    text-align: center;
  }
  p {
    color: #333;
    line-height: 1.6;
  }
  a {
    color: #dc2626;
    font-weight: bold;
  }
</style>

Preview / 预览

Hello, I am Li Ming

I am learning HTML and English.

Visit GitHub

Part 3: JavaScript — The Movement — JavaScript 是动作

🇨🇳 中文

JavaScript（简称 JS）让网页"动起来"。当用户点击按钮、输入文字、滚动页面时，JS 决定发生什么。

注意：JavaScript 和 Java 是完全不同的语言！只是名字像。

🇬🇧 English

JavaScript (JS for short) makes a webpage "come alive." When a user clicks a button, types something, or scrolls, JS decides what happens.

Note: JavaScript and Java are completely different languages! The names are just similar.

📍 How to Add JS — 怎么加 JS

Two common ways / 两种常见方式：

<!-- 1. Inside <script> tags / 在 script 标签里 -->
<script>
  alert("Hello, World!");
</script>

<!-- 2. External file (recommended) / 外部文件（推荐） -->
<script src="app.js"></script>

💡 Where to Put It — 放在哪里

中文： <script> 标签通常放在 <body> 的最后（关闭 </body> 之前）— 这样浏览器先加载 HTML，JS 才能找到要操作的元素。

English: Put <script> at the end of <body> (just before </body>) so the browser loads HTML first, then JS can find the elements.

📝 Variables — 变量

🇨🇳 中文

变量就是给一个值起名字。用 let（可以改）或 const（不能改）。

🇬🇧 English

A variable gives a name to a value. Use let (can change) or const (cannot change).

let name = "Li Ming";       // string / 字符串
let age = 25;                // number / 数字
let isStudent = true;       // boolean / 真假值
const birthYear = 2000;     // const = won't change / 不会改的

console.log(name);             // prints "Li Ming"
console.log("Age:", age);      // prints "Age: 25"

🔧 Functions — 函数

🇨🇳 中文

函数是一块可以重复使用的代码。给它输入，它返回结果。

🇬🇧 English

A function is a reusable block of code. You give it input, it returns a result.

function greet(name) {
  return "Hello, " + name + "!";
}

let message = greet("Li Ming");
console.log(message);  // "Hello, Li Ming!"

🖱️ The DOM — 操作网页元素

🇨🇳 中文

DOM（Document Object Model）就是浏览器把 HTML 转成的"对象"。JS 可以通过 DOM 找到元素、改文字、加事件。

🇬🇧 English

The DOM (Document Object Model) is how the browser turns HTML into "objects." JS uses the DOM to find elements, change text, and respond to events.

// Find an element by id / 用 id 找元素
const btn = document.querySelector("#myButton");

// Change its text / 改它的文字
btn.textContent = "Click me!";

// Listen for a click / 监听点击事件
btn.addEventListener("click", function() {
  alert("You clicked the button!");
});

🎯 Try It — 动手试试 (interactive!)

Click the button below — it's running real JavaScript:
点下面的按钮 — 真的 JavaScript 在运行：

Live Demo / 实时演示

(button output appears here / 按钮的输出显示在这里)

The code behind it / 背后的代码：

let count = 0;
document.getElementById("demo-btn").addEventListener("click", function() {
  count = count + 1;
  document.getElementById("demo-out").textContent =
    "You clicked " + count + " times!";
});

Mini Project: A Complete Page — 综合小项目

🇨🇳 中文

把三种语言放在一起，做一个完整的小网页。复制下面的代码，保存成 index.html，双击打开：

🇬🇧 English

Now let's combine all three languages into a complete page. Copy the code below, save as index.html, and double-click to open:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Counter App</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #fef2f2;
      text-align: center;
      padding: 40px;
    }
    h1 { color: #dc2626; }
    .count {
      font-size: 4em;
      color: #7f1d1d;
      margin: 20px;
    }
    button {
      background: #dc2626;
      color: white;
      border: none;
      padding: 12px 24px;
      font-size: 1em;
      border-radius: 8px;
      cursor: pointer;
      margin: 5px;
    }
    button:hover { background: #7f1d1d; }
  </style>
</head>
<body>
  <h1>My Counter — 我的计数器</h1>
  <p id="count" class="count">0</p>
  <button id="plus">+1</button>
  <button id="minus">−1</button>
  <button id="reset">Reset / 重置</button>

  <script>
    let count = 0;
    const display = document.getElementById("count");

    function update() { display.textContent = count; }

    document.getElementById("plus").onclick = () => { count++; update(); };
    document.getElementById("minus").onclick = () => { count--; update(); };
    document.getElementById("reset").onclick = () => { count = 0; update(); };
  </script>
</body>
</html>

🎯 Live Demo — 实时演示

Counter / 计数器

My Counter — 我的计数器

🎉 You can read all three! — 你能读懂三种语言！

You now know the basics of HTML, CSS, and JavaScript. Every webpage in the world uses these. Keep building small projects — that's how you really learn.

你现在懂了 HTML、CSS、JavaScript 的基础。世界上每个网页都用它们。不停地做小项目 — 这才是真正学会的方法。

Useful English Phrases — 实用英语句子

"I'm learning web development."— "我在学网页开发。"

"What does this tag do?"— "这个标签是干什么的？"

"My code is not working."— "我的代码不能用。"

"Can you help me debug this?"— "你能帮我调试一下吗？"

"I forgot to close the tag."— "我忘记关标签了。"

"The button doesn't respond."— "这个按钮没反应。"

"How do I center this element?"— "怎么把这个元素居中？"

"I need to add a click event."— "我需要加一个点击事件。"

Glossary — 词汇表

Tag 🔊

标签

A piece of HTML that wraps content, like <p>.
HTML 中包裹内容的部分，比如 <p>。

Element 🔊

元素

A complete unit on a webpage — opening tag + content + closing tag.
网页上一个完整的单元 — 开始标签 + 内容 + 结束标签。

Attribute 🔊

属性

Extra info on a tag, like href="..." on a link.
标签上的额外信息，比如链接上的 href="..."。

Selector 🔊

选择器

In CSS, the part that says "which elements" — element, class, or id.
CSS 里告诉浏览器"哪些元素"的部分 — 元素、类或 id。

Property 🔊

属性（CSS）

In CSS, what you change — like color, font-size.
CSS 里你要改的东西 — 比如 color、font-size。

Variable 🔊

变量

A name that stores a value in JavaScript. Use let or const.
JavaScript 中存值的名字。用 let 或 const。

Function 🔊

函数

A reusable block of code that takes input and returns output.
可以重复使用的一段代码 — 接受输入，返回输出。

DOM 🔊

文档对象模型

The object form of an HTML page that JS can read and change.
HTML 页面的对象形式，JS 可以读取和修改。

Event 🔊

事件

Something that happens — click, type, scroll, page load.
发生的事情 — 点击、输入、滚动、页面加载。

Class 🔊

类

A reusable label on HTML elements. Selected with .classname in CSS.
HTML 元素上可重用的标签。CSS 里用 .classname 选中。

Console 🔊

控制台

Browser developer tool where JS messages appear. Open with F12.
浏览器开发者工具，JS 消息显示在这里。按 F12 打开。

Debug 🔊

调试（找 bug）

To find and fix problems in your code.
找出并修复代码里的问题。

Keep Building. — 继续做下去。

Read other people's code. Break things. Fix them. That's how every developer learns.

读别人的代码。弄坏它。修好它。每个程序员都是这样学会的。

Three Languages, One Webpage — 三种语言，一个网页

🇨🇳 中文

🇬🇧 English

Why learn these three? — 为什么学这三种？

Setup: All You Need — 你需要的全部工具

🇨🇳 中文

🇬🇧 English

💡 How to Run Your Code — 怎么运行你的代码

Part 1: HTML — The Bones — HTML 是骨头

🇨🇳 中文

🇬🇧 English

🦴 The Skeleton — 基本骨架

🇨🇳 中文 — 解释

🇬🇧 English — Explanation

📝 Common Tags — 常用标签

🎯 Try It — 动手试试

Hello, I am Li Ming

⚠️ Common Mistakes — 常见错误

Part 2: CSS — The Clothes — CSS 是衣服

🇨🇳 中文

🇬🇧 English

📍 Three Places to Put CSS — CSS 放在哪三个地方

1 Inline — 行内（在标签里）

2 Internal — 内部（在 head 里）

3 External — 外部（独立文件，最好）

🎯 Selectors — 选择器

🇨🇳 中文

🇬🇧 English

💡 Class vs ID — 类 vs ID

🎨 Common Properties — 常用属性

📦 The Box Model — 盒子模型

🇨🇳 中文

🇬🇧 English

🎯 Try It — 动手试试

Hello, I am Li Ming

Part 3: JavaScript — The Movement — JavaScript 是动作

🇨🇳 中文

🇬🇧 English

📍 How to Add JS — 怎么加 JS

💡 Where to Put It — 放在哪里

📝 Variables — 变量

🇨🇳 中文

🇬🇧 English

🔧 Functions — 函数

🇨🇳 中文

🇬🇧 English

🖱️ The DOM — 操作网页元素

🇨🇳 中文

🇬🇧 English

🎯 Try It — 动手试试 (interactive!)

Mini Project: A Complete Page — 综合小项目

🇨🇳 中文

🇬🇧 English

🎯 Live Demo — 实时演示

My Counter — 我的计数器

🎉 You can read all three! — 你能读懂三种语言！

Useful English Phrases — 实用英语句子

Glossary — 词汇表

Quick Checklist — 检查清单

HTML — 结构

CSS — 样式

JavaScript — 互动

Keep Building. — 继续做下去。