博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
HTML之列表
阅读量:6760 次
发布时间:2019-06-26

本文共 1939 字,大约阅读时间需要 6 分钟。

列表有三种类型:

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

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

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

一、有序列表格式:

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

运行结果:

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

不同类型的有序列表:

1.编号列表:

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

运行结果:

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

2.字母列表:

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

运行结果:

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

3.罗马数字列表:

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

运行结果:

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

二、无序列表格式:

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

运行结果:

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

不同类型的无序列表:

1.圆点列表:

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

运行结果:

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

2.圆圈列表:

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

运行结果:圆点变成圆圈

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

 

3.正方形列表:

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

运行结果:圆点变成方形

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

 

三、自定义列表:

Coffee
- black hot drink
Milk
- white cold drink

运行结果:

Coffee- black hot drinkMilk- white cold drink

四、嵌套列表:

  • Coffee
  • Tea
    • Black tea
    • Green tea
      • China
      • Africa
  • Milk

运行结果:

•Coffee•Tea          ◦Black tea      ◦Green tea                  ◾China          ◾Africa•Milk

 

转载于:https://www.cnblogs.com/lxx2014/p/9909363.html

你可能感兴趣的文章
geeksforgeeks-Array-Rotate and delete
查看>>
Shell if else
查看>>
iOS之 block,代替代理作为回调函数
查看>>
Linux信号(signal) 机制分析
查看>>
【iOS开发-59】LOL案例:单组tabView、alertView样式、实现监听,以及用reloadData数据刷新...
查看>>
STL_算法_Heap算法(堆排)(精)
查看>>
聊聊前端工程师的职业规划(转)
查看>>
Javascript高级程序设计 -- 第三章 -- 总结
查看>>
AWS 学习之路(技术专业人员Training and Certification)架构解决方案1
查看>>
打字游戏
查看>>
熟悉并了解uml的使用(一)
查看>>
Java中++,--,前缀后缀表达值的不同,与^的值计算
查看>>
week06 codelab01 react-router 去官网学习
查看>>
nginx的基础应用
查看>>
用Zend_xmlrpc构建webservice服务器
查看>>
python中的类继承之super
查看>>
SublimeText3按ctrl+b执行python无反应
查看>>
linux之各个文件夹作用
查看>>
posix多线程有感--线程高级编程(条件变量属性)
查看>>
linux内核mem_cgroup浅析
查看>>