Understanding HTML 了解 HTML

A bilingual introduction in English and Simplified Chinese · 英文与简体中文双语介绍

1. What is HTML? 什么是 HTML？

HTML stands for HyperText Markup Language. It is the standard language used to describe the structure of web pages. HTML does not do things — it labels the parts of a document so that browsers know what is a heading, a paragraph, a link, or an image.
HTML 全称 超文本标记语言（HyperText Markup Language）。它是描述网页结构的标准语言。HTML 本身不执行任何操作——它的作用是标记文档的各个部分，让浏览器能够识别哪些是标题、段落、链接或图片。

2. How does it work? 它是如何工作的？

You write HTML in a plain text file ending with .html. When a browser opens the file, it reads the tags (words inside angle brackets, like <p>) and builds a tree of elements called the DOM (Document Object Model). The browser then paints that tree on the screen.
你将 HTML 写在以 .html 结尾的纯文本文件中。当浏览器打开该文件时，它会读取其中的标签（用尖括号包围的词，例如 <p>），并构建一棵被称为 DOM（文档对象模型）的元素树。然后浏览器把这棵树绘制到屏幕上。

The three layers of the web · 网页的三个层级

Layer 层级Language 语言Role 作用
Structure 结构HTMLWhat is on the page · 页面上有什么
Style 样式CSSHow it looks · 看起来怎么样
Behavior 行为JavaScriptWhat it does · 它能做什么

3. Anatomy of a tag 标签的构造

Most HTML elements have an opening tag, content, and a closing tag. Tags can also carry attributes that give extra information.
大多数 HTML 元素由开始标签、内容和结束标签组成。标签还可以带属性，用来提供额外信息。 
<a href="https://example.com">Click here</a>
   ↑           ↑                       ↑          ↑
 tag name   attribute              content    closing tag
 标签名      属性                    内容       结束标签

4. A minimal HTML document 最简单的 HTML 文档

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My First Page</title>
</head>
<body>
  <h1>Hello, world!</h1>
  <p>This is my first web page.</p>
</body>
</html>
<!DOCTYPE html> tells the browser this is HTML5. The <head> holds information about the page; the <body> holds what visitors actually see.
<!DOCTYPE html> 告诉浏览器这是 HTML5。<head> 中存放关于页面本身的信息；<body> 中存放访客真正看到的内容。

5. The most common tags 最常用的标签

Document & metadata · 文档与元数据

Tag 标签English简体中文
<html>Root of the document.整个文档的根元素。
<head>Container for meta-info, title, links to CSS.存放元信息、标题、CSS 链接等。
<title>The page title shown in the browser tab.显示在浏览器标签页上的页面标题。
<meta>Metadata such as charset or viewport.元数据，如字符编码或视口设置。
<link>Links external resources, mostly CSS.链接外部资源，主要是 CSS。
<body>Visible page content.页面的可见内容。

Text & headings · 文本与标题

Tag 标签English简体中文
<h1> – <h6>Headings, from most to least important.标题，从最重要到最次要。
<p>A paragraph of text.一个文字段落。
<br>A line break (no closing tag).换行（没有结束标签）。
<hr>A thematic horizontal rule.主题分隔线。
<strong>Important text, usually shown bold.重要文字，通常显示为粗体。
<em>Emphasized text, usually italic.强调文字，通常显示为斜体。
<span>An inline container for styling.用于样式控制的行内容器。

Links, images & media · 链接、图片与媒体

Tag 标签English简体中文
<a href="...">A hyperlink to another page.跳转到另一页面的超链接。
<img src="..." alt="...">An image. alt describes it for screen readers.图片。alt 用于屏幕阅读器描述。
<video> / <audio>Embedded video or sound.嵌入视频或音频。

Lists · 列表

Tag 标签English简体中文
<ul>Unordered (bulleted) list.无序（带圆点）列表。
<ol>Ordered (numbered) list.有序（带编号）列表。
<li>A single list item.列表中的一项。

Tables · 表格

Tag 标签English简体中文
<table>The whole table.整个表格。
<tr>A row in the table.表格中的一行。
<th>A header cell.表头单元格。
<td>A data cell.数据单元格。

Forms · 表单

Tag 标签English简体中文
<form>A form for user input.用于用户输入的表单。
<input>A field — text, checkbox, radio, etc.输入字段——文本、复选框、单选按钮等。
<label>A label tied to an input.与输入字段关联的标签。
<button>A clickable button.可点击的按钮。
<textarea>A multi-line text box.多行文本框。
<select> / <option>A drop-down menu.下拉菜单。

Layout & semantics · 布局与语义

Tag 标签English简体中文
<div>A generic block container.通用的块级容器。
<header>The top of a page or section.页面或区块的顶部。
<nav>A navigation menu.导航菜单。
<main>The main content of the page.页面的主要内容。
<section>A thematic group of content.主题相关的一组内容。
<article>A self-contained piece of content.独立完整的一段内容。
<aside>Side content, like a sidebar.辅助内容，例如侧边栏。
<footer>The bottom of a page or section.页面或区块的底部。

6. A complete example 完整示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>My Recipes 我的食谱</title>
</head>
<body>
  <header>
    <h1>Welcome 欢迎</h1>
    <nav>
      <a href="#soup">Soup 汤</a> |
      <a href="#rice">Rice 饭</a>
    </nav>
  </header>

  <main>
    <article id="soup">
      <h2>Tom Yum 冬阴功汤</h2>
      <p>A spicy and sour Thai soup. 一道酸辣的泰式汤。</p>
      <img src="tomyum.jpg" alt="Tom Yum soup 冬阴功汤">
      <ul>
        <li>Lemongrass 香茅</li>
        <li>Lime leaves 青柠叶</li>
        <li>Chili 辣椒</li>
      </ul>
    </article>
  </main>

  <footer>
    <p>© 2026 My Recipes</p>
  </footer>
</body>
</html>

7. Tips for beginners 给初学者的建议

  • Always start with <!DOCTYPE html>.
  • Use <meta charset="UTF-8"> so Chinese, Thai, and emoji display correctly.
  • Indent nested tags so structure is visible.
  • Choose semantic tags (<article>, <nav>) over plain <div> when meaning is clear.
  • Validate your code at validator.w3.org.
  • 始终以 <!DOCTYPE html> 开头。
  • 使用 <meta charset="UTF-8">，让中文、泰文和表情符号都能正确显示。
  • 对嵌套的标签进行缩进，使结构清晰可见。
  • 当含义明确时，优先使用语义化标签（如 <article>、<nav>），而非普通的 <div>。
  • 可在 validator.w3.org 上验证你的代码。