无序,有序,定义列表

一.列表:

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>  


 

显示效果为:



阅读更多
个人分类: HTML5
上一篇HTML5基础
下一篇表格
想对作者说点什么? 我来说一句

HTML从入门到精通 第4章 列表

2010年10月06日 663KB 下载

PHP html ul无序列表 标签

2013年12月01日 41KB 下载

PHP html ol有序列表 标签

2013年12月01日 45KB 下载

16种链表的练习

2017年08月17日 12KB 下载

jquery图片展示

2013年04月16日 43KB 下载

链表有序合并(vc6.0开发)

2011年05月08日 34KB 下载

没有更多推荐了,返回首页

关闭
关闭