HTML:列表实现

作业内容

  • 使用HTML实现如下列表


知识点 : HTML列表使用

  • 无序列表

无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记
无序列表始于<ul> 标签
每个列表项始于 <li>标签
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

<ul>
       <li>Coffee</li>
       <li>Milk</li>
</ul>

浏览器显示如下:

  • Coffee
  • Milk
  • 有序列表

有序列表也是一列项目,列表项目使用数字进行标记
有序列表始于 <ol> 标签
每个列表项始于 <li> 标签
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

<ol>
    <li>Coffee</li>
    <li>Milk</li>
</ol>

浏览器显示如下:
1.Coffee
2.Milk

思路

通过观察列表结构发现:该列表结构为

  • 一个无序列表
    这个无序列表有两行
    每行包含一个有序列表
    每个有序列表有两行
    每行包含一个无序列表
    每个无序列表有两行

实现

<!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>object</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>

参考

w3school HTML 列表

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

推荐阅读更多精彩内容

  • HTML 是用来描述网页内容的一种语言。全称超文本标记语言 (Hyper Text Markup Language...
    TW张苗阅读 667评论 1 2
  • 一. 初步了解#### 先简单了解下(有序列表)和(无序列表)的实现吧。 无序列表 浏览器显示如下:CoffeeM...
    元气满满321阅读 430评论 6 4
  • 今天,我要实现的列表是这样的: 列表实现的源代码参见github 完成这个列表我们来拆分一下任务吧,这个列表从外向...
    星期六1111阅读 1,001评论 2 3
  • 今天来讲一讲怎样用 HTML 来实现下面的列表。 第一步 可以看到第一层 JavaScript 和 Java 两个...
    ittianbao阅读 306评论 3 3
  • 一.明确目标: 二.拆分列表:分析列表的嵌套层数,以及每层之间的关系;明确每层都属于无序还是有序列表; 三.写实现...
    葶寳寳阅读 385评论 1 3