有序列表、无序列表、嵌套列表

た 入场券 2023-06-30 02:57 164阅读 0赞 
  1. <!DOCTYPE HTML PUBLIC "-//DTD//W3C HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html lang="zh-cn">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>HTML 列表-有序表列、无序列表、嵌套列表</title>
  6. </head>
  7. <body>
  8. <!-- 无序列表 -->
  9. <h4>无序列表：</h4>
  10. <ul>
  11.     <li>Coffee</li>
  12.     <li>Tea</li>
  13.     <li>Milk</li>
  14. </ul>
  15. <hr/>
  16. <!-- 有序列表 -->
  17. <h4>有序列表</h4>
  18. <ol>
  19.     <li>Coffee</li>
  20.     <li>Tea</li>
  21.     <li>Milk</li>
  22. </ol>
  23. <ol start="50">
  24.     <li>Coffee</li>
  25.     <li>Tea</li>
  26.     <li>Milk</li>
  27. </ol>
  28. <hr/>
  29. <!-- 不同类开明的有序列表 -->
  30. <h4>不同类型的有序列表</h4>
  31. <h4>编号列表：</h4>
  32. <ol>
  33.     <li>Apples</li>
  34.     <li>Bananas</li>
  35.     <li>Lemons</li>
  36.     <li>Oranges</li>
  37. </ol>
  38. <h4>大写字母列表：</h4>
  39. <ol type="A">
  40.     <li>Apples</li>
  41.     <li>Bananas</li>
  42.     <li>Lemons</li>
  43.     <li>Oranges</li>
  44. </ol>
  45. <h4>小写字母列表：</h4>
  46. <ol type="a">
  47.     <li>Apples</li>
  48.     <li>Bananas</li>
  49.     <li>Lemons</li>
  50.     <li>Oranges</li>
  51. </ol>
  52. <h4>罗马数字列表：</h4>
  53. <ol type="I">
  54.     <li>Apples</li>
  55.     <li>Bananas</li>
  56.     <li>Lemons</li>
  57.     <li>Oranges</li>
  58. </ol>
  59. <h4>小写罗马数字列表：</h4>
  60. <ol type="i">
  61.     <li>Apples</li>
  62.     <li>Bananas</li>
  63.     <li>Lemons</li>
  64.     <li>Oranges</li>
  65. </ol>
  66. <hr/>
  67. <!-- 不同类型的无序列表 -->
  68. <h4>不同类型的无序列表</h4>
  69. <h4>圆点列表：</h4>
  70. <ul type="disc">
  71.     <li>Apples</li>
  72.     <li>Bananas</li>
  73.     <li>Lemons</li>
  74.     <li>Oranges</li>
  75. </ul>
  76. <h4>圆圈列表：</h4>
  77. <ul type="circle">
  78.     <li>Apples</li>
  79.     <li>Bananas</li>
  80.     <li>Lemons</li>
  81.     <li>Oranges</li>
  82. </ul>
  83. <h4>正方形列表：</h4>
  84. <ul type="square">
  85.     <li>Apples</li>
  86.     <li>Bananas</li>
  87.     <li>Lemons</li>
  88.     <li>Oranges</li>
  89. </ul>
  90. <hr/>
  91. <!-- 嵌套列表 -->
  92. <h4>嵌套列表</h4>
  93. <ul>
  94.     <li>Coffee</li>
  95.     <li>Tea
  96.         <ul>
  97.             <li>Blank tea</li>
  98.             <li>Green tea</li>
  99.         </ul>
  100.     </li>
  101.     <li>Milk</li>
  102. </ul>
  103. <hr/>
  104. <!-- 嵌套列表2 -->
  105. <h4>嵌套列表2</h4>
  106. <ul>
  107.     <li>Coffee</li>
  108.     <li>Tea
  109.         <ul>
  110.             <li>Black tea</li>
  111.             <li>Green tea
  112.                 <ul>
  113.                     <li>China</li>
  114.                     <li>Africa</li>
  115.                 </ul>
  116.             </li>
  117.         </ul>
  118.     </li>
  119.     <li>Milk</li>
  120. </ul>
  121. <hr/>
  122. <!-- 自定义列表 -->
  123. <h4>定义列表</h4>
  124. <dl>
  125.     <dt>Coffee</dt>
  126.     <dd>-black hot diink</dd>
  127.     <dt>Milk</dt>
  128.     <dd>-white cold drink</dd>
  129. </dl>
  130. <hr/>
  131. </body>
  132. </html>

发表评论

表情：
评论列表 （有 0 条评论，164人围观）

还没有评论，来说两句吧...

相关阅读