HTML5 基础 之列表标签

297 阅读2分钟

列表标签

列表标签分为无序列表、有序列表、定义列表

无序列表

无序列表由ul标签和li标签组合创建。 ul(unordered list)表示无序列表,li(list item)表示列表项

<ul>
    <li>面包</li>
    <li>牛奶</li>
    <li>鸡蛋</li>
</ul>

image.png

ultype属性

在 HTML5 中已经被废弃,建议使用 CSS 代替

  • disc:默认值,实心圆
  • circle:空心圆
  • square: 实心方块

有序列表

无序列表由ol标签和li标签组合创建。 ol(ordered list)表示无序列表,li(list item)表示列表项

<ol>
    <li>面包</li>
    <li>牛奶</li>
    <li>鸡蛋</li>
</ol>

image.png

ol标签的type属性

  • a:表示小写英文字母编号,a、b、c……
  • A:表示大写英文字母编号,A、B、C……
  • i:表示小写罗马数字编号,i、ii、iii……
  • I:表示大写罗马数字编号,I、II、III……
  • 1:表示数字编号(默认)

ol标签的start属性

  • start属性值必须是一个整数,指定了列表编号的起始值
  • 此属性的值应为阿拉伯数字

ol标签的reversed属性

  • reversed属性指定列表中的条目是否是倒序排列的
  • 不需要值,HTML5 的全新特性
  • reversed属性时最好不要写start属性,可能会出现数字 0

li列表项

  • li标签不能单独使用,必须放在olul当中
  • ulol的子标签只能是li,两者之间不能写其他的标签
  • li标签中可以放任何标签,也可以放其他列表(嵌套)

定义列表

定义列表由dldtdd组成 dl(definition list)表示定义列表,dt(data term)表示数据项,dd(data definition)数据定义 需要逐条给出定义描述的列表,就是定义列表 dtdd是并列结构,两者都要包裹在dl

<dl>
    <dt>北京</dt>
    <dd>我国的政治中心</dd>
    <dt>上海</dt>
    <dd>我国的经济中心</dd>
</dl>

image.png