HTML列表标签及其属性

Манго нектар

于 2024-09-17 23:30:14 发布

阅读量157

点赞数 7

文章标签： html

本文链接：https://blog.csdn.net/m0_74742670/article/details/142320697

版权

有序列表标签

有序列表是有列表项目，列表项目使用数字进行标记，有序列表始于<ol>标签，每个列表项始于<li>标签。

</head>
<body>
  <ol>
    <li>蔬菜</li>
    <li>水果</li>
    <li>谷物</li>
  </ol>
</body>
</html>

有序列表的type属性

type属性拥有的选项

1：表示列表项用数字标号（1、2、3...)

a: 表示列表项用小写字母标号（a、b、c...)

A: 表示列表项用大写字母标号（A、B、C...)

i: 表示列表项用小写罗马数字标号（i、ii、iii...)

Ⅰ: 表示列表项用小写字母标号（Ⅰ、Ⅱ、Ⅲ...)

<ol type="1"> 
    <li>蔬菜</li>
    <li>水果</li>
    <li>谷物</li>
  </ol>
  <ol type="a"> 
    <li>蔬菜</li>
    <li>水果</li>
    <li>谷物</li>
  </ol>
  <ol type="A">
    <li>蔬菜</li>
    <li>水果</li>
    <li>谷物</li>
  </ol>
  <ol type="i"> 
    <li>蔬菜</li>
    <li>水果</li>
    <li>谷物</li>
  </ol>
  <ol type="I">
    <li>蔬菜</li>
    <li>水果</li>
    <li>谷物</li>
  </ol>

无序列表标签

无序列表是一个项目列表，此列表项目使用粗体圆点进行标记，无序列表始于<ul>标签，每个列表项始于<li>标签。

  <ul>
        <li>水果</li>
        <li>蔬菜</li>
        <li>谷物</li>
    </ul>

无序标签的type属性

属性type拥有的选项

disc:默认实心圆点

circle: 空心圆

square: 小方块

none: 不显示

<ul type="disc">
        <li>水果</li>
        <li>蔬菜</li>
        <li>谷物</li>
    </ul>
    <ul type="circle">
        <li>水果</li>
        <li>蔬菜</li>
        <li>谷物</li>
    </ul>
    <ul type="square">
        <li>水果</li>
        <li>蔬菜</li>
        <li>谷物</li>
    </ul>
    <ul type="none">
        <li>水果</li>
        <li>蔬菜</li>
        <li>谷物</li>
    </ul>