经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTMLCSS » CSS » 查看文章
HTML之列表
来源:cnblogs  作者:蓝青儿  时间:2018/11/6 9:58:15  对本文有异议

列表有三种类型:

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

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

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

一、有序列表格式:

  1. <ol>
  2. <li>第一个列表项</li>
  3. <li>第二个列表项</li>
  4. <li>第三个列表项</li>
  5. </ol>

运行结果:

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

不同类型的有序列表:

1.编号列表:

  1. <ol>
  2. <li>第一列表项</li>
  3. <li>第二列表项</li>
  4. <li>第三列表项</li>
  5. <li>第四列表项</li>
  6. </ol>
  7. <ol start="50">
  8. <li>第五十列表项</li>
  9. <li>第五十一列表项</li>
  10. <li>第五十二列表项</li>
  11. <li>第五十三列表项</li>
  12. </ol>

运行结果:

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

2.字母列表:

  1. <ol type="A">
  2. <li>第A列表项</li>
  3. <li>第B列表项</li>
  4. <li>第C列表项</li>
  5. <li>第D列表项</li>
  6. </ol>
  7. <ol type="a">
  8. <li>第a列表项</li>
  9. <li>第b列表项</li>
  10. <li>第c列表项</li>
  11. <li>第d列表项</li>
  12. </ol>

运行结果:

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

3.罗马数字列表:

  1. <ol type="I">
  2. <li>Apples</li>
  3. <li>Bananas</li>
  4. <li>Lemons</li>
  5. <li>Oranges</li>
  6. </ol>
  7. <ol type="i">
  8. <li>Apples</li>
  9. <li>Bananas</li>
  10. <li>Lemons</li>
  11. <li>Oranges</li>
  12. </ol>

运行结果:

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

二、无序列表格式:

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

运行结果:

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

不同类型的无序列表:

1.圆点列表:

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

运行结果:

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

2.圆圈列表:

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

运行结果:圆点变成圆圈

  1. ?无序列表项1
  2. ?无序列表项2
  3. ?无序列表项3
  4. ?无序列表项4

 

3.正方形列表:

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

运行结果:圆点变成方形

  1. ?无序列表项1
  2. ?无序列表项2
  3. ?无序列表项3
  4. ?无序列表项4

 

三、自定义列表:

  1. <dl>
  2. <dt>Coffee</dt>
  3. <dd>- black hot drink</dd>
  4. <dt>Milk</dt>
  5. <dd>- white cold drink</dd>
  6. </dl>

运行结果:

  1. Coffee
  2. - black hot drink
  3. Milk
  4. - white cold drink

四、嵌套列表:

  1. <ul>
  2. <li>Coffee</li>
  3. <li>Tea
  4. <ul>
  5. <li>Black tea</li>
  6. <li>Green tea
  7. <ul>
  8. <li>China</li>
  9. <li>Africa</li>
  10. </ul>
  11. </li>
  12. </ul>
  13. </li>
  14. <li>Milk</li>
  15. </ul>

运行结果:

  1. ?Coffee
  2. ?Tea
  3. ?Black tea
  4. ?Green tea
  5. ?China
  6. ?Africa
  7. ?Milk

 

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号