登录  /  注册
首页 > web前端 > html教程 > 正文

详解网页HTML有序列表ol和无序列表ul

高洛峰
发布： 2017-03-10 13:23:00
原创
3379人浏览过

 本文详解网页html有序列表ol和无序列表ul

用于组织数据的列表 学习了这么多控制网页显示的HTML标签，读者可以初步制作纯文章页面了。本节学习HTML中的列表元素，列表形式在网站设计中占有比较大的比重，显示信息非常整齐直观，便于用户理解。在后面的CSS样式学习中将大量使用到列表元素的高级作用。  

 用于组织数据的列表

学习了这么多控制网页显示的HTML标签，读者可以初步制作纯文章页面了。本节学习HTML中的列表元素，列表形式在网站设计中占有比较大的比重，显示信息非常整齐直观，便于用户理解。在后面的CSS样式学习中将大量使用到列表元素的高级作用。

详解网页HTML有序列表ol和无序列表ul

 4.4.1  列表的结构组成

HTML的列表元素是一个由列表标签封闭的结构，包含的列表项由

  • 组成。具体结构如图4.17所示。

     4.4.2  制作无序列表

    顾名思义，无序列表就是列表结构中的列表项没有先后顺序的列表形式。大部分网页应用中的列表均采用无序列表，其列表标签采用

      ，编写方法如下：

         

      • 列表项一

        •  

      • 列表项二

        •  

      • 列表项三

        •  

      • 列表项四

        •  

      • 列表项五

      详解网页HTML有序列表ol和无序列表ul 4.4.3  制作有序列表

      顾名思义，有序列表就是列表结构中的列表项有先后顺序的列表形式，从上到下可以有各种不同的序列编号，如1、2、3或a、b、c等。在D:\web\目录下创建网页文件，命名为ul_ol.htm，编写代码如代码4.17所示。

      代码4.17  列表的设置：ul_ol.htm

       

      列表的设置

      网页前台技术

         

      • HTML

        •  

      • CSS

        •  

      • JavaScript

        •  

      • FLASH

      网页后台的学习

         

      1. ASP

        2.  

      2. ASP.net

        3.  

      3. PHP

        4.  

      4. CGI

        5.  

      5. Ruby

        6.  

      6. Python

      在浏览器地址栏输入http://localhost/ul_ol.htm，浏览效果如图4.18所示。

      详解网页HTML有序列表ol和无序列表ul

      图4.18  列表的设置

      以上就是详解网页HTML有序列表ol和无序列表ul的详细内容，更多请关注php中文网其它相关文章！

      • 智能AI问答
      PHP中文网智能助手能迅速回答你的编程问题，提供实时的代码和解决方案，帮助你解决各种难题。不仅如此，它还能提供编程资源和学习指导，帮助你快速提升编程技能。无论你是初学者还是专业人士，AI智能助手都能成为你的可靠助手，助力你在编程领域取得更大的成就。
      我要提问
      来源：php中文网
      收藏 点赞
      上一篇：一个好用的html视频播放器兼容主流浏览器 下一篇：HTML有关超链接详解
      本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
      作者最新文章
      最新问题
      子窗口操作父窗口，输出没反应 前两句可执行，最后一句没法应
      P粉722478067来自于2024-04-19 15:37:47
      0 0 18
      父窗口没有输出 document.onclick = function(){ window.opener.document.write('我是子窗口的输出');  &nb...
      P粉722478067来自于2024-04-18 23:52:34
      0 0 40
      关于CSS思维导图的课件在哪？ 课件
      凡人来自于2024-04-16 10:10:18
      0 0 129
      PX自动转换为REM错误  <style>html {   font-size: calc(100vw / 3.75);      }...
      凡人来自于2024-04-16 09:34:16
      0 0 762
      PHP数组从URL参数中获取的行为不如预期 我有一个包含类别ID的URL参数，我想将其视为一个数组，如下所示：http://example.com?cat[]=3,9,13在PHP中，我使用它从URL参数获取数组：$catI...
      P粉785905797来自于2024-04-06 22:09:02
      0 1 438
      通过添加 Width 属性将内容向左移动 我已经为主体提供了边距。主要{左边缘：200px;右边距：200px；文本对齐：居中}由于我想以两行而不是一行显示文本，因此我在样式中添加了width属性。.p{字体大小：12px...
      P粉738046172来自于2024-04-06 22:01:35
      0 2 316
      我应该在 apache 中哪里放置 CustomLog 指令 我正在使用php:7.2-apachedocker。我需要禁用运行状况检查url登录访问日志。基于此链接，他们提到了有关修改Customlog指令的信息。我不是关于需要更改Cust...
      P粉573809727来自于2024-04-06 22:03:59
      0 1 441
      返回值中变量的格式是什么？ 我是php的新学习者。我发现有一段代码：if($x<time()){return[false,'error'];}逻辑或变量并不重要，但我不明白[false,'error']...
      P粉757556355来自于2024-04-06 21:55:20
      0 1 266
      页面突然无法拉动 css 或 bootstrap 所以我正在开发一个页面，我昨天做了一部分，效果很好，今天我继续做剩下的部分，一切都很好。当我尝试将其作为普通html页面打开时，CSS或BOOTSTRAP不起作用，仅显示页面文本，...
      P粉771233336来自于2024-04-06 21:58:04
      0 1 357
      如何在 React 中的排序方法上触发渲染（带有过滤器和分页）？ 这是我的Sort.js样式组件：<SortWrapper><SortText>SortBy</SortText><SortSelecton...
      P粉970736384来自于2024-04-06 21:28:37
      0 1 1863
      相关专题
      更多>
      热门推荐
      热门教程
      更多>
      相关推荐
      热门推荐
      最新课程
      最新下载
      更多>
      网站特效
      网站源码
      网站素材
      前端模板
      关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
      php中文网：公益在线php培训，帮助PHP学习者快速成长！
      关注服务号 技术交流群
      app下载
      PHP中文网订阅号
      每天精选资源文章推送
      PHP中文网APP
      随时随地碎片化学习
      PHP中文网抖音号
      发现有趣的

      Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

    • 精品班

    • 技术支持

    • 技术咨询

    • 学习群

    • 会员优惠

    • 返回顶部