5.3 HTML 自定义列表

HTML 自定义列表

自定义列表不仅仅是一列项目,而是项目及其注释的组合。

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

自定义列表中的一个术语名可以对应多重定义或者多个术语名对应同一个定义,如果只有术语名或者只有定义也是可行的,也就是说 <dt><dd> 在其中数量不限、对应关系不限。

  1. <dl>
  2. <dt>Coffee</dt>
  3. <dd>- black hot drink</dd>
  4. <dt>Milk</dt>
  5. <dd>- white cold drink</dd>
  6. </dl>

浏览器显示如下:
Coffee
-black hot drink
Milk
-white cold drink

注意事项 - 有用提示

提示: 列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

视频标签讲解:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. </head>
  8. <body>
  9. <!-- 无序列表 -->
  10. <ul>
  11. <li type="circle">这是一列</li>
  12. <li>这是一列</li>
  13. <li type="square">这是一列</li>
  14. <li type="none">这是一列</li>
  15. <li>这是一列</li>
  16. <li>这是一列</li>
  17. <li>这是一列</li>
  18. </ul>
  19. <!-- 有序列表 -->
  20. <ol>
  21. <li type='A'>这是第一个</li>
  22. <li type='A'>这是第一个</li>
  23. <li type='A'>这是第一个</li>
  24. <li>这是第一个</li>
  25. <li>这是第一个</li>
  26. <li>这是第一个</li>
  27. <li>这是第一个</li>
  28. </ol>
  29. <!-- 自定义列表的使用 -->
  30. <dl>
  31. <dt>一级</dt>
  32. <dd>二级</dd>
  33. <dd>二级</dd>
  34. <dd>二级</dd>
  35. <dd>二级</dd>
  36. <dt>一级</dt>
  37. <dd>二级</dd>
  38. <dd>二级</dd>
  39. <dd>二级</dd>
  40. <dd>二级</dd>
  41. </dl>
  42. </body>
  43. </html>

本节列表标签介绍到此结束。
继续往后学吧~

本教程会出电子书,后续敬请期待。

↓↓↓学完本课,快来写博客整理你的学习笔记吧。

相关课程推荐

本文版权归71muke所有,如果有错漏欢迎留言指正。如需转载需71muke授权。联系方式:330168885@qq.com
TOP