1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <title>列表元素</title>
  9. </head>
  11. <body>
  12.     <!---无序列表
  13.     ul.nav>li*4>a
  14.     -->
  15.     <h3>导航</h3>
  16.     <ul class="nav">
  17.         <li>
  18.             <a href="">首页</a>
  19.         </li>
  20.         <li>
  21.             <a href="">教学规模</a>
  22.         </li>
  23.         <li>
  24.             <a href="">资料下载</a>
  25.         </li>
  26.         <li>
  27.             <a href="">登录/注册</a>
  28.         </li>
  29.     </ul>
  31.     <!---有序列表--->
  32.     <h3>工作计划</h3>
  33.     <ol start="4" class="plan">
  34.         <li>电话</li>
  35.         <li>整理资料</li>
  36.         <li>辅导孩子功课</li>
  37.         <li>批改作业</li>
  38.     </ol>
  40.     <!---自定义列表--->
  41.     <h3>前段三宝</h3>
  42.     <dl>
  43.         <dt>HTML:</dt>
  44.         <dd>超文本标记语言</dd>
  45.         <dd>主要用来写页面结构和元素</dd>
  47.         <dt>CSS:</dt>
  48.         <dd>层叠样式表</dd>
  49.         <dt>JS:</dt>
  50.         <dd>前端的通用脚本语言</dd>
  51.         <dd>测试</dd>
  52.     </dl>
  54.     <dl></dl>
  55.     <dd></dd>
  57.     <div>
  58.         <a href=""><img src="" alt="" /></a>
  59.     </div>
  60.     <div>
  61.         <a href=""><img src="" alt="" /></a>
  62.     </div>
  63.     <div>
  64.         <a href=""><img src="" alt="" /></a>
  65.     </div>
  66.     <div>
  67.         <a href=""><img src="" alt="" /></a>
  68.     </div>
  69. </body>
  71. </html>