html嵌套列表

73次阅读
没有评论

HTML中实现嵌套列表可以通过使用<ul><li>标签来完成,其中<ul>表示无序列表,<li>表示列表项。可以在一个<li>标签内嵌套另一个<ul>标签来创建一个新的嵌套列表。嵌套列表可以有多级,每一级使用一个新的<ul>和一些嵌套的<li>标签。

下面是一个完整的HTML页面示例,其中包含了一个嵌套列表:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Nested List Example</title>
</head>
<body>
<h1>My Favorite Things</h1>
<ul>
    <li>Food
        <ul>
            <li>Pizza</li>
            <li>Sushi</li>
        </ul>
    </li>
    <li>Books
        <ul>
            <li>The Great Gatsby</li>
            <li>To Kill a Mockingbird</li>
        </ul>
    </li>
    <li>Movies
        <ul>
            <li>The Shawshank Redemption</li>
            <li>The Godfather</li>
        </ul>
    </li>
</ul>
</body>
</html>

在这个示例中,我们创建了一个包含三个主要项目的嵌套列表:食物、书籍和电影。每个主要项目下都有一个包含若干子项目的嵌套列表。注意,嵌套的<ul><li>标签必须正确嵌套和关闭,否则HTML代码将无法正确解析。

正文完
 
评论(没有评论)