Comments and neat nesting · 注释与整齐的嵌套
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
Comments
- A comment is a note for you, not for the reader.
- The browser ignores it — it never shows on the page.
- Write it like this:
<!-- this is a comment -->.
中文
注释
- 注释是写给你自己看的备注,不是给读者看的。
- 浏览器会忽略它 —— 它永远不会显示在页面上。
- 这样写:
<!-- this is a comment -->。
<!-- The header goes here -->
<h1>Welcome</h1>
<!-- TODO: add a photo below -->
English
Tags go inside tags
- HTML tags nest: one pair can sit inside another.
- A
<div>is a plain box you can put other things in. - Indent the inside tags a little, so the nesting is easy to read.
中文
标签套着标签
- HTML 标签会嵌套:一对标签可以放在另一对里面。
<div>是一个普通的盒子,你可以往里面放东西。- 把里面的标签缩进一点,嵌套关系就更容易看清。
<div>
<h2>My card</h2>
<p>Some text inside the box.</p>
</div>
English
Common mistakes
- Tags must nest, not overlap:
<b><i>x</i></b>, never<b><i>x</b></i>. - A comment is
<!-- ... -->and is ignored by the browser.
中文
常见错误
- 标签要嵌套,不能交叉:
<b><i>x</i></b>,绝不能<b><i>x</b></i>。 - 注释是
<!-- ... -->,浏览器会忽略。
English
Now you try
- Comments help you stay organised; nesting builds structure.
- Leave a comment, then nest a paragraph inside a
<div>.
中文
现在你来试试
- 注释帮你理清思路,嵌套帮你搭出结构。
- 留一条注释,再把一个段落嵌套进
<div>里。
Explore · 探索
Neat nesting = the tree · 整齐的嵌套就是这棵树
Indentation in your HTML mirrors the parent/child tree. · HTML 里的缩进对应父/子树结构。
Leave a note for yourself. Add a comment, like <!-- TODO: add a photo -->. · 给自己留个备注。加一条注释,比如 <!-- TODO: add a photo -->。
Put the paragraph inside a box. Wrap it in a <div> … </div>. · 把这个段落放进一个盒子里面。用一对 <div> … </div> 把它包起来。