HTML列表

八卦阵  金牌会员 | 2025-2-16 04:54:50 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 961|帖子 961|积分 2883

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要 登录 才可以下载或查看，没有账号？立即注册

x
我们HTML的列表分为3种，分别为有序列表、无序列表和定义列表，对应的标签分别是：
  1. <!-- 有序列表 -->
  2. <ol>
  4. <!-- 无序列表 -->
  5. <ul>
  7. <!-- 定义列表 -->
  8. <dl>
  10. <!-- 列表元素 -->
  11. <li>
复制代码
我们逐一进行讲解
有序列表：
我们写一个结果排名列表，盼望效果：

  • 张三：98分
  • 李四：88分
  • 王五：78分
  • 赵六：68分
  • 孙七：58分
  • 老八：48分
我们可以用ol套着6个li来写，代码：
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>有序列表</title>
  6.     </head>
  7.     <body>
  8.         <!-- 定义一个有序列表 -->
  9.         <ol>
  10.             <!-- 列表元素 -->
  11.             <li>张三：98分</li>
  12.             <li>李四：88分</li>
  13.             <li>王五：78分</li>
  14.             <li>赵六：68分</li>
  15.             <li>孙七：58分</li>
  16.             <li>老八：48分</li>
  17.         </ol>
  18.     </body>
  19. </html>
复制代码
运行结果：

我们还可以共同CSS和JS，将第一名变成红色并提示：
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>有序列表</title>
  6.         <style>
  7.             /* 伪类选择器(结构伪类)，选中ol的第一个儿子li元素 */
  8.             ol>li:first-child {
  9.                 color: red;
  10.             }
  11.         </style>
  12.         <script>
  13.             // 代码提示
  14.             alert("下面是成绩排名，第一名为红色，其余为黑色");
  15.         </script>
  16.     </head>
  17.     <body>
  18.         <!-- 定义一个有序列表 -->
  19.         <ol>
  20.             <!-- 列表元素 -->
  21.             <li>张三：98分</li>
  22.             <li>李四：88分</li>
  23.             <li>王五：78分</li>
  24.             <li>赵六：68分</li>
  25.             <li>孙七：58分</li>
  26.             <li>老八：48分</li>
  27.         </ol>
  28.     </body>
  29. </html>
复制代码
大概这样写：
   HTML：
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>有序列表</title>
  6.     </head>
  7.     <body>
  8.         <!-- 定义一个有序列表 -->
  9.         <ol>
  10.             <!-- 列表元素 -->
  11.             <li>张三：98分</li>
  12.             <li>李四：88分</li>
  13.             <li>王五：78分</li>
  14.             <li>赵六：68分</li>
  15.             <li>孙七：58分</li>
  16.             <li>老八：48分</li>
  17.         </ol>
  18.     </body>
  19. </html>
复制代码
CSS：
  1. /* 伪类选择器(结构伪类)，选中ol的第一个儿子li元素 */
  2. ol>li:first-child {
  3.     color: red;
  4. }
复制代码
JavaScript：
  1. // 代码提示
  2. alert("下面是成绩排名，第一名为红色，其余为黑色");
复制代码
运行结果：

无序列表：
比方显示我想去的几个城市，盼望效果：


  • 北京
  • 上海
  • 成都
  • 重庆
代码：
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>无序列表</title>
  6.     </head>
  7.     <body>
  8.         <!-- 定义一个无序列表 -->
  9.         <ul>
  10.             <!-- 列表元素 -->
  11.             <li>北京</li>
  12.             <li>上海</li>
  13.             <li>成都</li>
  14.             <li>重庆</li>
  15.         </ul>
  16.     </body>
  17. </html>
复制代码
运行结果：

定义列表：
我们写一个学习方法，盼望效果：
   怎样进步学习结果？
          上课认真听讲，记条记，作业按时保质保量的完成
  怎样学习前端？
          多写代码，多看教学视频、博客
  我们可以用dt代表第一行和第三行，dd代表第二行和第四行
代码：
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>定义列表</title>
  6.     </head>
  7.     <body>
  8.         <!-- 定义一个定义列表 -->
  9.         <dl>
  10.             <!-- 列表元素 -->
  11.             <dt>如何提高学习成绩？</dt>
  12.             <dd>上课认真听讲，记笔记，作业按时保质保量的完成</dd>
  13.             <dt>如何学习前端？</dt>
  14.             <dd>多写代码，多看教学视频、博客</dd>
  15.         </dl>
  16.     </body>
  17. </html>
复制代码
运行结果：

再见！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

八卦阵

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

AI 运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表