Lists
Web Basics — HTML & CSS Lesson 4 2:10 English narration · English + 中文 subtitles burned in
Chapters
Transcript
A list takes two different tags, and that is the new idea here.
做一个列表需要两个不同的标签，这就是这里的新概念。
The outer one, u l, holds the whole list — it says "a list starts here and ends there".
外面那个 ul 装着整个列表—— 它说的是“列表从这里开始，到那里结束”。
Then each thing in it gets its own list item tag.
然后里面的每一样东西，都有属于它自己的 li 标签。
Press play, and look carefully: you never typed a bullet.
按下播放，仔细看： 你一个圆点都没有敲过。
The browser draws those, because those items are inside a u l.
那些点是浏览器画的，因为这些项在一个 ul 里面。
This is the first time in the course that one tag sits inside another, and it is worth pausing on, because the whole rest of HTML is built this way.
这是课程里第一次出现一个标签装在另一个标签里面， 值得停下来看一看，因为 HTML 剩下的全部内容都是这样搭起来的。
The u l is the container.
ul 是容器。
Each list item is one item in it — not beside it, inside it.
每个 li 是它里面的一项——不是挨着它，是在它里面。
Indent the items by two spaces when you type them; the browser does not care, but you will, the moment a page has more than a few lines.
敲的时候把这些项缩进两个空格； 浏览器并不在意，但一旦页面超过几行，你自己就会在意了。
For steps that happen in order, change one letter: o l instead of u l.
如果这些步骤是有先后顺序的，就改一个字母：把 ul 换成 ol。
The items are exactly the same list item tags, and the browser adds the numbers.
里面的项还是完全一样的 li 标签，编号由浏览器添加。
Here is why that is better than typing them.
这为什么比自己敲数字好，原因在这里。
Delete a step from the middle, and the browser renumbers the rest for you, instantly.
从中间删掉一步，浏览器会立刻替你把后面的重新编号。
Type the numbers yourself and you now have to fix every line below the one you removed.
要是数字是你自己敲的， 你就得手动去改被删那一行下面的每一行。
One thing to watch while you type: close every list item.
敲的时候注意一件事：每个 li 都要闭合。
If you forget to close one, the next item joins onto it and you get fewer bullets than you expected — which looks like a mystery until you know to look for it.
如果你忘了闭合其中一个， 下一项就会接到它上面，你看到的圆点会比预期的少—— 在你知道要找什么之前，这看起来就像个谜。
Now the two tasks: three fruits in a bullet list, and then a numbered list of steps.
现在做那两道题： 一个装着三种水果的圆点列表， 然后一个带编号的步骤列表。
They are one letter apart.
它们之间只差一个字母。
Four things to take with you.
带走四点。
One: u l makes a bullet list, and o l makes a numbered one.
第一：ul 做圆点列表，ol 做编号列表。
Two: every entry goes in its own list item.
第二：每一条内容都写在属于它自己的 li 里。
Three: the items sit inside the container, indented.
第三：这些项待在容器里面，并且缩进。
Four: the browser draws the bullets and the numbers, so you never type them.
第四：圆点和数字都是浏览器画的，你永远不用自己敲。
Now build one of each.
现在两种各做一个。