85 lines
1.9 KiB
Markdown
85 lines
1.9 KiB
Markdown
|
---
|
|||
|
title: How to Use Lists
|
|||
|
localeTitle: 如何使用列表
|
|||
|
---
|
|||
|
## 如何使用列表
|
|||
|
|
|||
|
列表用于以良好形式和语义的方式指定一组连续项或相关信息,例如成分列表或程序步骤列表。 HTML标记有三种不同类型的列表- **有序** **,unordored**和**说明**列表。
|
|||
|
|
|||
|
### 订购列表
|
|||
|
|
|||
|
有序列表用于按特定顺序对一组相关项目进行分组。 此列表使用`<ol>`标记创建。每个列表项都包含`<li>`标记。
|
|||
|
|
|||
|
##### 码
|
|||
|
|
|||
|
```html
|
|||
|
|
|||
|
<ol>
|
|||
|
<li>Mix ingredients</li>
|
|||
|
<li>Bake in oven for an hour</li>
|
|||
|
<li>Allow to stand for ten minutes</li>
|
|||
|
</ol>
|
|||
|
```
|
|||
|
|
|||
|
##### 例
|
|||
|
|
|||
|
1. 混合成分
|
|||
|
2. 在烤箱里烤一小时
|
|||
|
3. 允许站立十分钟
|
|||
|
|
|||
|
### 无序列表
|
|||
|
|
|||
|
无序列表用于按照特定顺序对一组相关项进行分组。此列表使用`<ul>`标记创建。每个列表项都包含`<li>`标记。
|
|||
|
|
|||
|
##### 码
|
|||
|
|
|||
|
```html
|
|||
|
|
|||
|
<ul>
|
|||
|
<li>Chocolate Cake</li>
|
|||
|
<li>Black Forest Cake</li>
|
|||
|
<li>Pineapple Cake</li>
|
|||
|
</ul>
|
|||
|
```
|
|||
|
|
|||
|
#### 例
|
|||
|
|
|||
|
* 巧克力蛋糕
|
|||
|
* 黑森林蛋糕
|
|||
|
* 菠萝蛋糕
|
|||
|
|
|||
|
### 说明列表
|
|||
|
|
|||
|
描述列表用于指定术语列表及其描述。此列表使用`<dl>`标记创建。每个列表项都包含`<dd>`标记。
|
|||
|
|
|||
|
##### 码
|
|||
|
|
|||
|
```html
|
|||
|
|
|||
|
<dl>
|
|||
|
<dt>Bread</dt>
|
|||
|
<dd>A baked food made of flour.</dd>
|
|||
|
<dt>Coffee</dt>
|
|||
|
<dd>A drink made from roasted coffee beans.</dd>
|
|||
|
</dl>
|
|||
|
```
|
|||
|
|
|||
|
##### 产量
|
|||
|
|
|||
|
面包
|
|||
|
|
|||
|
由面粉制成的烘焙食品。
|
|||
|
|
|||
|
咖啡
|
|||
|
|
|||
|
由烘焙过的咖啡豆制成的饮料。
|
|||
|
|
|||
|
#### 造型清单
|
|||
|
|
|||
|
您还可以控制列表的样式。您可以使用`list-style`属性。您的列表可以是子弹,方形,罗马数字,也可以是您想要的图像。
|
|||
|
|
|||
|
`list-style`属性是`list-style-type` , `list-style-position` , `list-style-image`的简写。
|
|||
|
|
|||
|
#### 更多信息:
|
|||
|
|
|||
|
\[HTML列表·Web平台文档\](https://webplatform.github.io/docs/guides/html\_lists/ )
|