web前端开发零基础入门8_2、创建一个无序列表,包括10个列表项,再加一个按钮,点击按钮,隐藏或显示无序列表

作者：Monodyee | 2024-03-28 09:32:49

踩

2、创建一个无序列表,包括10个列表项,再加一个按钮,点击按钮,隐藏或显示无序列表

文章目录

一.列表（小复习）
二.列表嵌套
- - 提示
三.自己写简单列表

一.列表（小复习）

—、建立列表

在网页中使用列表可以将相应的内容以条目的形式列举出来，进而使页面显得整齐而有常用的列表有：无序列表、有序列表和定义列表

1. 无序列表

无序列表是指列表中各列表项没有先后顺序之分，各列表项以并列关系呈现，在每个列表项前用符号作为分项标识，因此也称为符号列表。

语法：

<ul> 
<li> 列表项 </li>
<li> 列表项 </li>
<li> 列表项 </li>
</ul> 
1
2
3
4
5

说明：
①在一个无序列表中可以包含多个列表项列表中各列表项自动换行，不需要再在其后添加 hr 标记进行换行
②默认情况下，无序列表的列表项前的符号为实心圆．，可以通过设置 pe 属性来改它的符号类型。
在这里插入图片描述

2无序列表

有序列表是指列表中各表项有严格的先后顺序，在每个列表项前使用号进行排列，因此也称为编号列表。

语法

<ol> 
<li> 列表项一 </li>
<li> 列表项二 </li>
<li> 列表项 </li>
</ol>
1
2
3
4
5

说明

①各列表项在默认情况采用拉伯数始进行编通过设置type性来改变列表
项的编号类型。
②各列表项根据编号类型从第一个序号开始往下编号，可以通过设 art 来改
的起始值。要注意的是，不管列表项采用哪种类型编，设置 start 的起始值只能指定为数字。
③如果在已建立好的有序列表中新增或删除列序列中各列项的编号将自动
进行调整。
在这里插入图片描述

提示

目前 HTML 范不建议使用type和start 属性，推荐使用 CSS 样式来定义列表样式和起始值。

3定义列表

定义列表通常用于解释名词或定义概念，其列表项包含两个部分：一部分是要解释的名词，另一部分是具体的解释，因此也称描述列表。

语法

<dl> 
<dt> 名词 </dt><dd> 解释 l</dd>
<dt> 名词 2</dt><dd> 解释 2</dd>
<dt> 名词 3</dt><dd> 解释 3</dd>
<ldl> 
1
2
3
4
5

说明

定义列表中，＜dt> 标记后面是要解释的名词，＜dd> 标记后面则是相应名词的具体解释内容，具体解释内容在显示时会自动缩进。

二.列表嵌套

在一个列表中嵌套另一个列表称为列表嵌套使用列表嵌套可以实现多层次项目的列表从理论上讲，列表嵌套的层次是无限制的，但是为了避免嵌套层太多导致混乱，建议最好不要超过三层。

<ul> 
<h> 无序列表符号
<ol> 
<li> 实心圆 disc</li>
<li> 空心圆 circle<lli>
<li> 实心方块 square</li>
</ol> 
<lli> 
<h> 有序列表编号 </li>
<h> 自定义列表 </li>
</ul>
1
2
3
4
5
6
7
8
9
10
11

在这里插入图片描述

提示

一般在列表项标记 li· ·····lli 内进行嵌套，嵌套后的列表中各列表中项之间逻辑层次明朗 ul ol dl是容器型标记，需要成对使用，若缺应的闭合标记，嵌套的列表会出现层次混乱的情况。

三.自己写简单列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单列表</title>
</head>
<body>
    <ul>邹雪森是猪
        <li>1.pink pig</li>
        <li>2.black pig</li>
        <li>3.bule pig</li>
    
    </ul>
    <hr>
    <ol>张力文是养猪人
    <li>粉猪</li>
    <li>黑猪</li>
    <li>蓝猪</li>
    </ol>
    <hr>
    <dl>为何非要当猪，又为何养猪
        <dt>邹雪森</dt>
        <dd>于2002年12月04日出生的小猪仔 因为当猪可以天天吃吃喝喝</dd>
        <dt>张力文</dt>
        <dd>于2003年06月18日出生的养猪人 因为养猪可以致富</dd>

    </dl>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Monodyee/article/detail/329239