HTML 列表

好的,帮你整理好了。原文内容全部保留,格式梳理清晰,少量修正(无序列表的嵌套 <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> 标签包裹

效果示意:

  1. Asdfsda
  2. Sdfsdf
  3. Sadfsd
  4. 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…
适用场景项目之间没有顺序关系项目之间有先后顺序
可嵌套可以可以

列表可以嵌套,比如有序列表里面放无序列表,或者反过来,灵活组合

Previous:

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注