〖大前端 - 基础入门三大核心之 html 篇⑧〗- 无序列表

原创已于 2023-04-24 18:07:00 修改 · 2.2w 阅读

8 ·

CC 4.0 BY-SA版权

易编橙 · 终身成长社群，相遇已是上上签！

文章标签：

#html #大前端 #无序列表 #前端基础入门之html

于 2023-03-03 16:44:21 首次发布

大前端全栈架构白宝书同时被 2 个专栏收录

101 篇文章

订阅专栏

① - 基础入门三大核心篇

98 篇文章

订阅专栏

本文介绍了HTML5中的无序列表（ul）及其使用方法，包括列表嵌套、type属性，并探讨了无序列表在实际项目中的应用。此外，文章还提到了推荐他人订阅可获取收益的社区计划。

当前子专栏基础入门三大核心篇是免费开放阶段。推荐他人订阅，可获取扣除平台费用后的35%收益，文末名片加V！
说明：该文属于大前端全栈架构白宝书专栏，目前阶段免费开放，购买任意白宝书体系化专栏可加入TFS-CLUB 私域社区。
福利：除了通过订阅"白宝书系列专栏"加入社区获取所有付费专栏的内容之外，还可以通过加入星荐官共赢计划加入私域社区。

作者：不渴望力量的哈士奇(哈哥)，十余年工作经验, 跨域学习者，从事过全栈研发、产品经理等工作，目前任某金融品类App负责人。
荣誉：2022年度博客之星Top4、博客专家认证、全栈领域优质创作者、新星计划导师，“星荐官共赢计划” 发起人。
现象级专栏《白宝书系列》作者，文章知识点浅显易懂且不失深度；TFS-CLUB社区创立者，旨在以“赋能共赢”推动共建技术人成长共同体。

🏆 白宝书系列
🏅 Python全栈白宝书
🏅 产品思维训练白宝书
🏅 全域运营实战白宝书
🏅 大前端全栈架构白宝书

文章目录

⭐️ 无序列表

接下来我们来学习HTML5中的列表标签，html5提供了三种列表标签，分别是 无序列表、有序列表及定义列表，该章节为大家介绍的就是 “无序列表”。

标签	语义
<ul></ul>	无序列表（ul表示unordered list）
<ol></ol>	有序列表
<dl></dl>	定义列表

⭐️ 无序列表

无序列表，顾名思义，就是没有排列顺序的一个列表，例如我们去超市购买东西，将购买清单列成一个列表清单，这个清单不需要刻意的排列先后顺序。

实现无序列表需要<ul></ul>和<li></li>标签组合使用。<ul></ul>即无序列表，做为父标签；<li></li>即每个列表项，做为子标签。父标签子标签的形式叫做父子组合标签。

下面看个小栗子：

<ul>
    <li>鸡蛋</li>
    <li>可乐</li>
    <li>面包</li>
    <li>瓜子</li>
    <li>薯片</li>
</ul>

注意：当HTML标签形成嵌套，必须注意代码的缩进。

浏览效果如下：

关于父子组合标签：
和普通的嵌套不同，父子组合标签关系更加紧密。
<li>标签不能单独使用，必须要放到<ul>或<ol>中使用。同时，<ul>和<ol>的子标签也只能是<li>，不能是其他标签。

关于<li>标签：
<li>标签虽然不能单独使用，但是
标签可以做为容器，放置其他任何标签。例如：
<li>瓜子
	<p>焦糖瓜子&原味瓜子</p>
</li>

例如我们给上面的无序列表加个标题，下面两种做法第一种是错误的，第二种才是正确的。

🌟 列表的嵌套

上面我们说过，<li>标签里面是可以放置其他任何标签的，当<li>标签下面放置列表标签之后就形成了列表的嵌套。

列表嵌套中的子列表在展示时标识会不一样，并且会默认有一个缩进。

列表嵌套小实战：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>河北省部分地区</h1>
    <ul>
        <li>
            <h2>河北省</h2>
            <ul>
                <li>
                    <h3>石家庄市</h3>
                    <ul>
                        <li>桥西区</li>
                        <li>裕华区</li>
                    </ul>
                </li>
                <li>
                    <h3>邯郸市</h3>
                    <ul>
                        <li>邯山区</li>
                        <li>复兴区</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</body>
</html>