无序,有序,定义列表

一.列表:

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>  


 

显示效果为:



猜你喜欢

转载自blog.csdn.net/qq1043002305/article/details/79948540