Boxes and sections · 盒子与分区
This page needs a recent browser (with SharedArrayBuffer support). Please update Chrome, Edge, Firefox or Safari to the latest version. · 此页面需较新浏览器（支持 SharedArrayBuffer）。请升级 Chrome、Edge、Firefox 或 Safari 至最新版本。
English
Boxes and sections
- Bigger pages need structure — clear areas, not one long pile.
- A
<div>is a plain box. A<span>is a small inline box for a few words. - Boxes group things together, so you can arrange and style them later.
中文
盒子与分区
- 大一点的页面需要结构 —— 一块块清晰的区域,而不是堆成一长条。
<div>是一个普通的盒子。<span>是一个小小的行内盒子,用来包几个词。- 盒子把内容分组,方便你以后排版和做样式。
English
Named sections
- HTML has special boxes with meaningful names:
<header>(top),<main>(the main content),<footer>(bottom),<nav>(menu links).- They work like
<div>, but the names tell people — and search engines — what each part is.
中文
有名字的分区
- HTML 有一些带含义名字的特殊盒子:
<header>(顶部)、<main>(主要内容)、<footer>(底部)、<nav>(导航链接)。- 它们用起来和
<div>一样,但名字能告诉别人 —— 还有搜索引擎 —— 每部分是什么。
<header>
<h1>My site</h1>
</header>
<main>
<p>Welcome to my page.</p>
</main>
<footer>
<small>Made by me</small>
</footer>
English
Classes name your boxes
- A class is a label you add to a tag:
<div class="card">. - It does nothing on its own — but soon, CSS will use it to style that box.
- This is your bridge into the next half of the course.
中文
用 class 给盒子起名
- class(类)是你加在标签上的一个标签名:
<div class="card">。 - 它本身什么都不做 —— 但很快,CSS 会用它来给这个盒子做样式。
- 这就是你通往课程后半部分的桥梁。
English
Common mistakes
<div>is a block (new line);<span>is inline (stays in the text).- Use semantic tags like
<header>and<nav>where they fit.
中文
常见错误
<div>是块级(另起一行);<span>是行内(留在文字里)。- 在合适处用
<header>、<nav>等语义标签。
English
Now you try
- Add a
<header>and a<footer>, then give a box a class. - Next lesson, we start making things look good with CSS.
中文
现在你来试试
- 加一个
<header>和一个<footer>,再给一个盒子加上 class。 - 下一课,我们就开始用 CSS 让页面变好看。
Explore · 探索
A box wraps its content · 盒子包裹内容
A <div> is a box: content surrounded by padding, border, margin. · <div> 就是一个盒子:内容外面包着 padding、border、margin。
Give the page a top and a bottom. Wrap the title in a <header>, and the small note in a <footer>. · 给页面一个顶部和一个底部。把标题用 <header> 包起来,把那行小字用 <footer> 包起来。
Give this box a name so we can style it later. Add class="card" to the <div>. · 给这个盒子起个名字,方便以后做样式。给 <div> 加上 class="card"。