无序,有序,定义列表

原创 2018年04月15日 13:37:49

一.列表:

1.无序列表:

<ul>

    <li>.....</li>

    <li>....</li>

    .......

</ul>

注意:根据W3C标准,<ul>标签里只能嵌套<li>标签不能嵌套以他标签,<li>标签里可以嵌套其他标签

无序列表的特性:

a.没有顺序,每个<li>标签独占一行(块元素);

b,默认<li>标签前面有一个实星小圆点;

2.有序列表:

<ol>

    <li>.......</li>

    <li>.......</li>

    .........    

</ol>

注意:<ol>标签里只能嵌套<li>标签不能嵌套以他标签,<li>标签里可以嵌套其他标签

有序列表的特性:

a.有序,<li>独占一行;

b.<li>前面有顺序标记;

3.定义列表:

<dl>

    <dt>标题一</dt>

    <dd>.......</dd>

    <dd>.......</dd>

     <dt>标题二</dt>

    <dd>.......</dd>

       .........

</dl>

特性:无序,默认没有标记

    

编写有序列表,代码如下:

[html] view plain copy
  1. <html>  
  2. <h2>数字显示</h2>  
  3. <ol>  
  4. <li>第一天</li>  
  5. <li>第二天</li>  
  6. <li>第三天</li>  
  7. <li>第四天</li>  
  8. </ol>  
  9.   
  10. <h2>字母显示</h2>  
  11. <ol type="a">  
  12. <li>第一天</li>  
  13. <li>第二天</li>  
  14. <li>第三天</li>  
  15. <li>第四天</li>  
  16. </ol>  
  17.   
  18. <h2>小写罗马数字显示</h2>  
  19. <ol type="i">  
  20. <li>第一天</li>  
  21. <li>第二天</li>  
  22. <li>第三天</li>  
  23. <li>第四天</li>  
  24. </ol>  
  25.   
  26. <h2>大写罗马数字显示</h2>  
  27. <ol type="I">  
  28. <li>第一天</li>  
  29. <li>第二天</li>  
  30. <li>第三天</li>  
  31. <li>第四天</li>  
  32. </ol>  
  33.   
  34. <h2>数字显示,自己确定开始数字</h2>  
  35. <ol start="5">  
  36. <li>第一天</li>  
  37. <li>第二天</li>  
  38. <li>第三天</li>  
  39. <li>第四天</li>  
  40. </ol>  
  41. <html>  


 

显示效果为:

无序列表的代码如下:

[html] view plain copy
  1. <html>  
  2. ********默认为实心圆*********  
  3. <ul>  
  4. <li>第一天</li>  
  5. <li>第二天</li>  
  6. <li>第三天</li>  
  7. <li>第四天</li>  
  8. </ul>  
  9.   
  10. ********空心圆显示*********  
  11. <ul type="circle">  
  12. <li>第一天</li>  
  13. <li>第二天</li>  
  14. <li>第三天</li>  
  15. <li>第四天</li>  
  16. </ul>  
  17.   
  18. ********实心矩形显示*********  
  19. <ul type="square">  
  20. <li>第一天</li>  
  21. <li>第二天</li>  
  22. <li>第三天</li>  
  23. <li>第四天</li>  
  24. </ul>  
  25. </html>  


 

显示效果为:



列表标签:无序列表、有序列表、定义列表

无序列表:给一堆数据添加列表语义, 并且这一堆数据中所有的数据都没有先后之分。 格式: 需要显示的条目内容 li其实是英文list item的缩写注意:1.一定要记住ul标签是用来给一...
  • ethunsex
  • ethunsex
  • 2017-03-12 13:06:47
  • 727

HTML5(六)有序列表、无序列表、定义列表

有序列表通常用来表示内容之间的顺序或者是重要性关系,每一个列表都分为多个子项,每一个子项都有相应的编号。 无序列表仅仅用于表示内容之间存在有并列关系,也是分为多个子项,但是子项之前没有相应的编号,只有...
  • u013225534
  • u013225534
  • 2016-07-21 23:02:49
  • 8437

ul 无序列表、ol 有序列表、dl 定义列表

ul和ol的用法:            ul或ol和li必须成对出现,而且ul的儿子只能是li标签,但是li里面什么标签都可以放(包括ul、p等等),一般用于导航条什么的。 dl是组标签,dl定...
  • fuxiaomi2016
  • fuxiaomi2016
  • 2016-09-27 13:11:59
  • 3270

HTML/CSS中有序<ol>、无序<ul>、定义列表用法详解

ul
  • xiaokangmiclong
  • xiaokangmiclong
  • 2015-12-16 11:41:29
  • 4562

html中关于有序列表、无序列表和自定义列表之间的区别

有序列表(ol-li) dd aa dd 如图一 可以发现在有序列表中默认的type类型是...
  • qingyisuo
  • qingyisuo
  • 2017-12-28 13:43:47
  • 448

Html DW-5-有序无序自定义 列表

无序列表:ul和li                            First             Second             Third            ...
  • limaning
  • limaning
  • 2014-10-20 21:47:16
  • 1547

html有序列表与无序列表自定义列表

html> html lang="en"> head> meta http-equiv="content-type" content="text/html" charset="UTF-8"> ...
  • pangqiandou
  • pangqiandou
  • 2016-09-23 15:45:02
  • 2368

html5无序列表,有序列表,定义列表,组合标签,div分区标签

html5无序列表,有序列表,定义列表,组合标签,div分区标签
  • ztt0918
  • ztt0918
  • 2017-03-21 17:15:06
  • 672

html无序有序列表嵌套

有序无序列表嵌套 轻松一刻 Question:一位好心的女巫说送你到一下哪或者谁家休息 红磨坊 七个小矮人 美人鱼 一休 饼屋 附近亲戚家 不理他 An...
  • u010383937
  • u010383937
  • 2017-05-15 23:18:37
  • 711

web前端之列表(五)————有序无序自定义

1。无序列表 wuxu.html
  • qq939782569
  • qq939782569
  • 2017-03-23 09:30:24
  • 528
收藏助手
不良信息举报
您举报文章:无序,有序,定义列表
举报原因:
原因补充:

(最多只允许输入30个字)