Headings
Web Basics — HTML & CSS Lesson 2 2:20 English narration · English + 中文 subtitles burned in
Chapters
Transcript
A heading is a title on your page, and it works exactly like the paragraph you already know: an opening tag, your words, a closing tag.
标题就是页面上的一个题目, 它的用法和你已经会的段落完全一样: 一个开始标签、你的文字、一个结束标签。
The tag is h one.
这个标签是 h1。
Press play and the browser draws it big and bold, sitting above the paragraph underneath.
按下播放,浏览器会把它画得又大又粗,压在下面那个段落的上方。
Notice what you did not write: you chose no size anywhere, and no colour.
注意你没有写的东西:你没有选任何字号,也没有选颜色。
The browser did that because you told it this line is a heading.
浏览器这么做,是因为你告诉了它这一行是标题。
There are six of them, from one down to six, and each one is drawn smaller than the last.
一共有六个,从 1 到 6,每一个都画得比前一个小。
But the number is not about size.
但这个数字说的不是大小。
It is about importance, and about structure.
它说的是重要程度,是结构。
H one is the page's main title, and a page should have exactly one.
h1 是整个页面的主标题,一个页面应该只有一个。
H two starts a section inside it.
h2 开启它里面的一个章节。
H three starts a part of that section.
h3 开启那个章节里的一部分。
The sizes you can see are just the browser showing you that structure.
你看到的字号差别,只是浏览器把这个结构显示给你看而已。
Which leads to the one mistake worth avoiding from day one.
这就引出了从第一天起就该避免的那个错误。
Do not choose h four because you wanted something a bit smaller.
不要因为想让字小一点就去选 h4。
If About me and Contact are two sections of the same page, they are at the same level as each other, and both should be h two.
如果“关于我”和“联系方式”是同一个页面的两个章节, 它们就处在同一个级别,两个都应该是 h2。
This matters because screen readers and search engines build an outline from these levels — get them right and your page makes sense to a machine as well as a reader.
这一点很重要,因为屏幕阅读器和搜索引擎会用这些级别来构建页面大纲—— 写对了,你的页面对机器和对读者就都是讲得通的。
Making things smaller is CSS's job, and that starts in lesson twelve.
让字变小是 CSS 的活儿,那要从第 12 课开始。
Now the second task: make a heading that says About me, and a paragraph under it saying I love coding.
现在做第二道题: 写一个内容是 "About me" 的标题, 再在它下面写一个段落,内容是 "I love coding."。
Two elements, one after the other, and the browser stacks them down the page.
两个元素,一个接一个,浏览器会把它们从上往下排好。
Every web page you have ever read is nothing more than this, repeated — a heading, some text, another heading, more text.
你读过的每一个网页,本质上都不过是这个的重复—— 一个标题、一段文字、又一个标题、更多文字。
Four things to take with you.
带走四点。
One: h one is the page's main title, and there is one of them.
第一:h1 是页面的主标题,而且只有一个。
Two: h two down to h six mark sections inside it.
第二:h2 到 h6 用来标出它里面的各个章节。
Three: the number means importance, not size.
第三:这个数字表示重要程度,不是字号。
Four: ordinary text still goes in a paragraph.
第四:普通的正文仍然写在段落里。
Now build both tasks.
现在把两道题都做出来。