HTML之列表

2018-11-05 08:23:17来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

列表有三种类型:

有序列表:列表项使用数字来标记

无序列表:列表项使用粗体圆点(典型的小黑圆圈)进行标记。

自定义列表:自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

一、有序列表格式:

<ol>
      <li>第一个列表项</li>
      <li>第二个列表项</li>
      <li>第三个列表项</li>
</ol>

运行结果:

  1. 第一个列表项
  2. 第二个列表项
  3. 第三个列表项

不同类型的有序列表:

1.编号列表:

<ol>
   <li>第一列表项</li>
   <li>第二列表项</li>
   <li>第三列表项</li>
   <li>第四列表项</li>
</ol>
<ol start="50">
   <li>第五十列表项</li>
   <li>第五十一列表项</li>
   <li>第五十二列表项</li>
   <li>第五十三列表项</li>
</ol>

运行结果:

  1. 第一列表项
  2. 第二列表项
  3. 第三列表项
  4. 第四列表项
  1. 第五十列表项
  2. 第五十一列表项
  3. 第五十二列表项
  4. 第五十三列表项

2.字母列表:

<ol type="A">
   <li>第A列表项</li>
   <li>第B列表项</li>
   <li>第C列表项</li>
   <li>第D列表项</li>
</ol>
 <ol type="a">
    <li>第a列表项</li>
    <li>第b列表项</li>
    <li>第c列表项</li>
    <li>第d列表项</li>
 </ol>

运行结果:

  1. 第A列表项
  2. 第B列表项
  3. 第C列表项
  4. 第D列表项
  1. 第a列表项
  2. 第b列表项
  3. 第c列表项
  4. 第d列表项

3.罗马数字列表:

<ol type="I">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  
 <ol type="i">
  <li>Apples</li>
  <li>Bananas</li>
  <li>Lemons</li>
  <li>Oranges</li>
 </ol>

运行结果:

  1. Apples
  2. Bananas
  3. Lemons
  4. Oranges
  1. Apples
  2. Bananas
  3. Lemons
  4. Oranges

二、无序列表格式:

<ul>
  <li>无序列表项1</li>
  <li>无序列表项2</li>
  <li>无序列表项3</li>
  <li>无序列表项4</li>
</ul>

运行结果:

  • 无序列表项1
  • 无序列表项2
  • 无序列表项3
  • 无序列表项4

不同类型的无序列表:

1.圆点列表:

<ul style="list-style-type:disc">
  <li>无序列表项1</li>
  <li>无序列表项2</li>
  <li>无序列表项3</li>
  <li>无序列表项4</li>
</ul>

运行结果:

  • 无序列表项1
  • 无序列表项2
  • 无序列表项3
  • 无序列表项4

2.圆圈列表:

<ul style="list-style-type:circle">
  <li>无序列表项1</li>
  <li>无序列表项2</li>
  <li>无序列表项3</li>
  <li>无序列表项4</li>
</ul>

运行结果:圆点变成圆圈

  ?无序列表项1

  ?无序列表项2

  ?无序列表项3

  ?无序列表项4

 

3.正方形列表:

<ul style="list-style-type:square">
  <li>无序列表项1</li>
  <li>无序列表项2</li>
  <li>无序列表项3</li>
  <li>无序列表项4</li>
</ul>

运行结果:圆点变成方形

  ?无序列表项1

  ?无序列表项2

  ?无序列表项3

  ?无序列表项4

 

三、自定义列表:

<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>

运行结果:

Coffee
- black hot drink
Milk
- white cold drink

四、嵌套列表:

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea
        <ul>
          <li>China</li>
          <li>Africa</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

运行结果:

?Coffee

?Tea
    
      ?Black tea

      ?Green tea
        
          ?China

          ?Africa

?Milk

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:12个美丽的网站与受到日出启发的配色方案

下一篇:CSS 的介绍