HTML实现有序列表和无序列表

先看看效果图

ul和ol

在HTML众多标签里,ul是无序列表标签,ol是有序列表标签,它们可以相互嵌套使用,而效果图中最外层的JavaScriptJava就是一个ul,在每个ul里嵌套了两个ol,在每个ol中又嵌套了两个ul,话不多说,上代码!

源码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul>
        <li>JavaScript
            <ol>
                <li>第一章
                    <ul>
                        <li>const</li>
                        <li>let</li>
                    </ul>
                </li>
                <li>第二章
                    <ul>
                        <li>function</li>
                        <li>object</li>
                    </ul>
                </li>
            </ol>
        </li>
        <li>Java
            <ol>
                <li>第一章
                    <ul>
                        <li>class</li>
                        <li>package</li>
                    </ul>
                </li>
                <li>第二章
                    <ul>
                        <li>private</li>
                        <li>public</li>
                    </ul>
                </li>
            </ol>
        </li>
    </ul>
</body>
</html>

有不懂的地方可以留言~
3Q~

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Bootstrap是什么? 一套易用、优雅、灵活、可扩展的前端工具集--BootStrap。GitHub上介绍 的...
    凛0_0阅读 10,923评论 3 184
  • HTML 是用来描述网页内容的一种语言。全称超文本标记语言 (Hyper Text Markup Language...
    TW张苗阅读 665评论 1 2
  • 1、HTML介绍 1 2、Html和CSS的关系 HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户...
    夏沫xx阅读 1,433评论 0 8
  • HTML需要掌握标签 标签(空格分隔): H5+CSS [TOC] 常用标签 img 注意点 和H系列标签/p标签...
    袁俊亮技术博客阅读 2,060评论 1 8
  • 本文主要是起笔记的作用,内容来自慕课网. 认识HTML、CSS、JavaScript 学习web前端开发基础技术需...
    0o冻僵的企鹅o0阅读 689评论 3 7