web 0基础第二节 列表标签

server/2024/10/15 19:52:05/

1.有序列表

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>有序列表 比较重要</title>

    <!--

    列表:

    1.有序列表

        ol  来设置有序列表

          li:  设置列表项

                设置   属性type = “ 1 ” 或者 A  a  I  i  分别从这些作为序号开始排序  

                一般情况下默认用数字来排序

                属性start = “ 1000 ”  或B之类的  设置从这个序号开始排序

                <li type="a">  iejfcmvn</li>   这种方式只是影响该行的序号,不影响其他行的序号

     -->

   

</head>

<body>

    <!-- 1.有序基本格式 -->

     <ol type="I">

        <li>wei</li>

        <li>jin</li>

        <li>yu</li>

     </ol>

     <ol type="1">

        <li>wei</li>

        <li>jin</li>

        <li>yu</li>

     </ol>

     <ol >

        <li type="a">wei</li>

        <li>jin</li>

        <li>yu</li>

     </ol>

</body>

</html>

    2.无序列表

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>无序列表</title>

    <!--

    无序列表

        ul:无序列表

           li:列表项

          和有序列表不同,他的序号图标没有排列的意思,一般默认为实心圆点

     -->

</head>

<body>

    <!-- 实心圆  type=“ disc ” -->

    <ul>

        <li>wei</li>

        <li>jin</li>

        <li>yu</li>

    </ul>

    <!-- 空心圆  了解即可 -->

    <ul type="circle">

        <li>wei</li>

        <li>jin</li>

        <li>yu</li>

    </ul>

    <!-- 实心正方形  了解即可 -->

    <ul type="square">

        <li>wei</li>

        <li>jin</li>

        <li>yu</li>

    </ul>

</body>

</html>

   

    3.数据列表

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>数据列表</title>

    <!--

        格式:

           dl:数据列表             前面没有序号和原点之类的 但是有和标题一样的分级

                dt:数据小标题

                    dd:数据列表项

                   

    从列表实际情况可以看出,都是换了行的  所以列表是一个块级元素

                    -->

</head>

<body>

    <dl>

        <dt>水果

            <dd>芒果</dd>

            <dd>草莓</dd>

            <dd>葡萄</dd>

        </dt>

        <dt>爱好

            <dd>小说</dd>

            <dd>美食</dd>

            <dd>小动物</dd>

        </dt>

    </dl>

    <!-- 也可以尝试做嵌套和一些非常规的写法 -->

        <ol>

            <ul>

            <li>juefbu</li>

            <li>juhcu</li>

            <li>ekihci</li>

            </ul>

        </ol>

     <!--  认准的是最接近的列表种类吗   这目前是个猜想  可以自己再实验一下 -->

     <ol type="A">

        <li>

            <ul>

                <li>wei</li>

                <li>jin</li>

                <li>yu</li>

            </ul>

        </li>

        <li><pre>          

            wei

            sha

            yu</pre>

        </li>

     </ol>

     <li>

        jin yu s ge da sha diao

     </li>

</body>

</html>

 <!--想要嵌套,要把想嵌套的列表看做主列表的 的一个序列  也就是在写其中的列表之前要加上一个li-->

<!--在不设置是哪类列表 直接由li 组成 的一般默认为无序列表-->


http://www.ppmy.cn/server/132343.html

相关文章

windows使用vcpkg安装CGAL

1.1 安装 Vcpkg 第一步是vcpkg从https://github.com/microsoft/vcpkg克隆或下载。 C:\dev> git 克隆 https://github.com/microsoft/vcpkg C:\dev> cd vcpkg C:\dev\vcpkg>.\bootstrap-vcpkg.bat 1.2 使用 Vcpkg 安装 CGAL 默认情况下&#xff0c;vcpkg安装 32 位…

【三】【算法】P1007 独木桥,P1012 [NOIP1998 提高组] 拼数,P1019 [NOIP2000 提高组] 单词接龙

P1007 独木桥 独木桥 题目背景 战争已经进入到紧要时间。你是运输小队长&#xff0c;正在率领运输部队向前线运送物资。运输任务像做题一样的无聊。你希望找些刺激&#xff0c;于是命令你的士兵们到前方的一座独木桥上欣赏风景&#xff0c;而你留在桥下欣赏士兵们。士兵们十分愤…

探索Spring Boot在医疗病历B2B交互中的潜力

第2章 设计技术与开发环境 2.1 相关技术介绍 2.1.1 B/S模式分析 C/S模式主要由客户应用程序(Client)、服务器管理程序(Server)和中间件(middleware)三个部件组成。客户应用程序是系统中用户与数据组件交互。服务器程序负责系统资源&#xff0c;如管理信息数据库的有效管理&…

云上考场小程序+ssm论文源码调试讲解

2 关键技术简介 2.1 微信小程序 微信小程序&#xff0c;简称小程序&#xff0c;英文名Mini Program&#xff0c;是一种全新的连接用户与服务的方式&#xff0c;可以快速访问、快速传播&#xff0c;并具有良好的使用体验。 小程序的主要开发语言是JavaScript&#xff0c;它与…

Java锁

Java锁 本文仅借Java介绍软件锁&#xff0c;数据库方面另见数据库锁 声明&#xff1a;本文使用八爪鱼rpa工具从gitee自动搬运本人原创&#xff08;或摘录&#xff0c;会备注出处&#xff09;博客&#xff0c;如版式错乱请评论私信&#xff0c;如情况紧急或久未回复请致邮 xkm…

使用 Go 和 Gin 框架构建简单的用户和物品管理 Web 服务

使用 Go 和 Gin 框架构建简单的用户和物品管理 Web 服务 在本项目中&#xff0c;我们使用 Go 语言和 Gin 框架构建了一个简单的 Web 服务&#xff0c;能够管理用户和物品的信息。该服务实现了两个主要接口&#xff1a;根据用户 ID 获取用户名称&#xff0c;以及根据物品 ID 获…

物联网IoT平台 | 物联网IoT平台的定义

物联网IoT平台&#xff1a;定义、发展与应用在当今信息化时代&#xff0c;物联网&#xff08;Internet of Things&#xff0c;简称IoT&#xff09;已经成为推动社会进步和产业升级的重要力量。物联网IoT平台&#xff0c;作为连接物理世界与数字世界的桥梁&#xff0c;正逐步改变…

使用Windows创建一个MFC应用【带界面】

MFC使用教程【对初学者保姆型友好&#xff01;】 目录 前提条件 1&#xff1a;创建MFC应用程序 2. 项目结构解读 引用 外部依赖项 头文件 源文件 资源文件 文件功能详解 项目的主要流程 步骤2&#xff1a;配置OpenCV 安装OpenCV 包含目录与库文件 步骤3&#xff1…