html列表展示设计
时间: 2023-08-17 20:08:40 浏览: 41
HTML提供了多种列表标记,可以根据不同的需求选择不同的标记来展示列表。
1. 无序列表(unordered list)
用`<ul>`和`<li>`标记来创建无序列表,`<ul>`表示无序列表的开始,`<li>`表示每个列表项。
示例代码:
```
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
```
效果如下:
- 列表项1
- 列表项2
- 列表项3
2. 有序列表(ordered list)
用`<ol>`和`<li>`标记来创建有序列表,`<ol>`表示有序列表的开始,`<li>`表示每个列表项。
示例代码:
```
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
```
效果如下:
1. 列表项1
2. 列表项2
3. 列表项3
3. 定义列表(definition list)
用`<dl>`、`<dt>`和`<dd>`标记来创建定义列表,`<dl>`表示定义列表的开始,`<dt>`表示每个定义术语,`<dd>`表示每个术语的定义。
示例代码:
```
<dl>
<dt>术语1</dt>
<dd>定义1</dd>
<dt>术语2</dt>
<dd>定义2</dd>
<dt>术语3</dt>
<dd>定义3</dd>
</dl>
```
效果如下:
术语1
定义1
术语2
定义2
术语3
定义3
以上是常用的列表展示设计,可以根据实际需求选择相应的标记进行使用。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)