Comments and nesting
Web Basics — HTML & CSS Lesson 8 2:20 English narration · English + 中文 subtitles burned in
Chapters
Transcript
A comment is a note you leave for yourself inside the file.
注释是你留在文件里给自己看的说明。
Open the brackets with an exclamation mark and two dashes, write anything you like, and close it the same way.
用尖括号加一个感叹号和两个短横线打开， 中间随便写什么，再用同样的方式关上。
Press play and only the heading appears — the browser skips comments completely.
按下播放，只有标题出现——浏览器完全跳过了注释。
One warning though: it is still in the file, and anyone can read it by viewing the source of your page.
不过有一个提醒：它仍然在文件里， 任何人查看你页面的源代码都能读到。
Notes to yourself, yes. Secrets, never.
给自己的备忘可以，秘密绝对不行。
Now the second half, and it is the more important one.
现在来看后半部分，而且它更重要。
A div is a box, and it is the plainest tag in HTML: it draws nothing at all — no border, no colour, no space.
div 是一个盒子，也是 HTML 里最朴素的标签： 它什么都不画——没有边框，没有颜色，也不占额外的空间。
It exists purely so you can put several things inside it and then treat them as one group.
它存在的唯一目的，是让你把好几样东西放进去，然后当作一个整体来对待。
That sounds like a small thing right now.
现在听起来这好像没什么。
It is what every layout in this course from lesson eleven onwards is built out of.
但从第 11 课开始，这门课里的每一种布局，都是用它搭起来的。
Once tags go inside other tags there is one rule, and it is absolute.
一旦标签装进了别的标签里，就有一条规则，而且是绝对的。
The inner pair finishes inside the outer one.
里面那一对，必须在外面那一对之内结束。
Look at the two versions drawn as boxes: on the left, a box within a box.
看这两个版本画成盒子的样子： 左边是盒子里套着盒子。
On the right, the two pairs cross over, and there is no way to draw that — the shape does not exist.
右边这两对交叉了，而这根本画不出来——这个形状不存在。
In a listing the wrong one looks almost tidy, which is exactly why people write it.
在代码清单里，错的那个看起来还挺整齐， 这正是人们会写出它的原因。
Close the inner one first, always.
永远先闭合里面的那一个。
One habit to build while the pages are small.
趁页面还小，养成一个习惯。
The browser does not care about indentation — both of these produce exactly the same page.
浏览器并不在意缩进——这两种写法产生的页面完全一样。
But you will care, and so will anyone reading your work, because indentation is how nesting becomes visible at a glance.
但你会在意，任何读你代码的人也会在意， 因为缩进正是让嵌套一眼可见的方式。
Two spaces per level is the usual choice.
每一层缩进两个空格是通常的做法。
Now the tasks: leave yourself a comment, then wrap a paragraph in a div.
现在做这两道题： 给自己留一条注释，然后把一个段落包进一个 div 里。
Four things to take with you.
带走四点。
One: a comment is a note for you, ignored by the browser.
第一：注释是给你自己看的说明，浏览器会忽略它。
Two: a div is a plain box that groups other tags.
第二：div 是一个用来把其它标签归成一组的普通盒子。
Three: tags nest — close the inner pair first, and never let two pairs cross.
第三：标签是嵌套的——先闭合里面那一对，绝不让两对交叉。
Four: indent the inside so you can see the structure.
第四：把里面的内容缩进，好让结构一眼可见。
Now do both tasks.
现在把两道题都做一下。