列表

HTML中的列表:

          有序列表  --  ol

          无序列表  --  ul

             定义列表  --  dl

有序列表、无序列表都是通过<li>标签来定义列表的项,定义列表则不同,用<dt>来定义列表的项目<dd>来定义项目的描述。

有序列表 示例:

    <ol>
        <li>苹果</li>
        <li>橙子</li>
        <li>香蕉</li>
    </ol>

显示效果:

 

有序列表默认的是阿拉伯数字排序,还可以更改列表样式,把前面的顺序1、2、3换成a(A)、b(B)、c(C)或者Ⅰ(i)、Ⅱ(ii)、Ⅲ(iii).

例如:

    <ol type="I">
        <li>苹果</li>
        <li>橙子</li>
        <li>香蕉</li>
    </ol>

显示效果:

同时,还可以设置起始位置的值(数字序号情况下):

   <ol start="3">
        <li>苹果</li>
        <li>橙子</li>
        <li>香蕉</li>
    </ol>

显示效果:

无序列表 示例:

  <ul>
        <li>苹果</li>
        <li>橙子</li>
        <li>香蕉</li>
    </ul>

显示效果:

前面的实心圆点是默认类型disc,换成其他类型,如square;

    <ul type="square">
        <li>苹果</li>
        <li>橙子</li>
        <li>香蕉</li>
    </ul>

显示效果:

如果不需要内容前面的点,可以通过对li设置style="list-style-type: none" 样式来解决。

定义列表 示例

  <dl>
       <dt>爱好</dt>
        <dd>游泳</dd>
        <dd>音乐</dd>
        <dd>读书</dd>
    </dl>

显示效果:

╰︶﹉⋛⋋⊱⋋๑๑⋌⊰⋌⋚﹉︶╯
原文地址:https://www.cnblogs.com/zhangcheng001/p/10947333.html