好的,帮你整理好了。原文内容全部保留,格式梳理清晰,少量修正(无序列表的嵌套 <ul> 应该是 </ul> 闭合标签,已帮你修正),代码规整好
列表
- 列表分两种:有序列表和无序列表
无序列表 <ul>
- 无序列表是一个项目的列表,开始用圆点作为图标(bullet)
- 每一项用
<li>标签包裹
效果示意:
- 111111111
- 2222222
- 333333333
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>44444</li>
</ul>Code language: HTML, XML (xml)
圆点的样式可以通过 CSS 的
list-style-type改成方块、圆圈等,默认是实心圆点
有序列表 <ol>
- 有序列表就是有 1、2、3 这样的编号
- 不仅仅是阿拉伯数字,还可以是 a、b、c 或者 一、二、三 等
- 每一项同样用
<li>标签包裹
效果示意:
- Asdfsda
- Sdfsdf
- Sadfsd
- Dfsdafds
<ol>
<li>sadfasf</li>
<li>sdfdsfd</li>
</ol>Code language: HTML, XML (xml)
有序列表编号类型
可以通过 type 属性改变编号样式:
| type值 | 编号样式 | 显示效果 |
|---|---|---|
type="1" | 阿拉伯数字(默认) | 1、2、3… |
type="a" | 小写字母 | a、b、c… |
type="A" | 大写字母 | A、B、C… |
type="i" | 小写罗马数字 | i、ii、iii… |
type="I" | 大写罗马数字 | I、II、III… |
<ol type="A">
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>Code language: HTML, XML (xml)
现在更推荐用 CSS 的
list-style-type来控制编号样式,更灵活
两种列表对比
| 对比项 | 无序列表 <ul> | 有序列表 <ol> |
|---|---|---|
| 标签 | <ul> + <li> | <ol> + <li> |
| 默认标记 | 实心圆点 | 阿拉伯数字 1、2、3… |
| 适用场景 | 项目之间没有顺序关系 | 项目之间有先后顺序 |
| 可嵌套 | 可以 | 可以 |
列表可以嵌套,比如有序列表里面放无序列表,或者反过来,灵活组合