Sections and classes
Web Basics — HTML & CSS Lesson 11 2:19 English narration · English + 中文 subtitles burned in
Chapters
Transcript
Small pages are fine as one stack of tags.
小页面写成一叠标签没问题。
Bigger ones are not — a visitor sees a title, then the content, then a note at the bottom, and if your HTML is just one long pile, nothing in it says which is which.
大一点的就不行了—— 访客看到的是一个标题、然后是内容、最后是底部的一行说明， 而如果你的 HTML 只是一长堆东西，里面没有任何地方说明哪一块是哪一块。
What a page needs is clear areas: a top, a middle, a bottom, each one a box holding its own content.
页面需要的是清晰的区域： 一个顶部、一个中间、一个底部，每一个都是装着自己内容的盒子。
HTML gives you boxes with names for exactly this.
HTML 正是为此提供了一些带名字的盒子。
Header is the top of the page.
header 是页面的顶部。
Nav holds the menu links.
nav 装着导航链接。
Main is the main content.
main 是主要内容。
Footer is the bottom.
footer 是底部。
And here is the honest part: they behave exactly like a div — no border, no colour, no special layout.
而这里有件话要说实在的：它们的行为和 div 完全一样—— 没有边框，没有颜色，没有特殊布局。
The difference is the name, and who reads it.
区别只在名字，以及谁会去读这个名字。
A person reading your code knows what each part is, and so does a search engine.
读你代码的人知道每一块是什么，搜索引擎也知道。
Now the last new thing in the HTML half of this course, and it is the bridge to the second half.
现在是这门课 HTML 那一半里最后一个新东西，而它正是通往后半程的桥。
Add class equals card to a div, press play, and the page looks identical.
给一个 div 加上 class="card"，按下播放，页面看起来一模一样。
Nothing happened.
什么都没发生。
That is the point — a class does nothing on its own.
这正是重点——class 本身什么也不做。
What you have done is give that box a name of your own choosing, and from the next lesson, CSS can call it by that name and style it.
你做的事，是给那个盒子起了一个你自己选的名字， 而从下一课开始，CSS 就能按这个名字找到它，给它加样式。
One distinction worth having before you go.
走之前还有一个值得弄清的区别。
A div is a block: it starts on a new line and takes the full width.
div 是块级的：它另起一行，并占满整个宽度。
A span is inline: it stays in the line, around a few words, like strong did.
span 是行内的：它待在那一行里，包住几个词，就像 strong 那样。
Use a div to group blocks, a span to mark part of a sentence.
要把几块内容归成一组，用 div； 要标出句子里的一部分，用 span。
Now the tasks: wrap the title in a header and the note in a footer, then give a div the class card.
现在做那两道题： 把标题包进 header，把底部那行说明包进 footer， 然后给一个 div 加上 class="card"。
Four things to take with you.
带走四点。
One: header, main, nav and footer name the areas of a page.
第一：header、main、nav 和 footer 为页面的各个区域命名。
Two: they behave like a div — the difference is the name.
第二：它们的行为和 div 一样——区别只在名字。
Three: a class gives one box a name of your own.
第三：class 给某一个盒子起一个你自己的名字。
Four: next lesson, CSS starts using those names, and your pages stop being plain.
第四：下一课，CSS 就要开始用这些名字了， 你的页面也就不再素面朝天。