web 0基础第二节 列表标签

news2024/10/12 17:59:04

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.coloradmin.cn/o/2208401.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

低代码BPM流程引擎:赋能业务流程的高效工具

什么是低代码BPM流程引擎&#xff1f; 低代码BPM流程引擎是一种通过图形化界面和简单配置&#xff0c;允许用户快速设计、管理和优化业务流程的软件工具。与传统的BPM解决方案相比&#xff0c;低代码平台降低了对专业开发人员的依赖&#xff0c;让业务人员也能参与到流程设计中…

Vivado - 在硬件中调试 Serial I/O (IBERT)

目录 1. 简介 2. 硬件平台 2.1 ZCU102 2.1.1 Clock Sources & Destinations 2.2 ZCU106 2.2.1 Clock Sources & Destinations 2.2.2 IP 配置 2.2.3 约束 3. 结果 3.1 创建 Links 3.1.1 IBERT UI 3.1.2 创建 Links 3.1.3 配置链路 3.1.4 扫描参数 3.1.5 …

国产AI工具「神笔马良」!只需上传剧本,AI一键成片!(附保姆级教程)

大家好&#xff0c;我是程序员X小鹿&#xff0c;前互联网大厂程序员&#xff0c;自由职业2年&#xff0c;也一名 AIGC 爱好者&#xff0c;持续分享更多前沿的「AI 工具」和「AI副业玩法」&#xff0c;欢迎一起交流~&#xff08;AI资料点文末卡片自取&#xff09; 记得 AI 视频刚…

使用阿里巴巴的图

参考链接1 引用彩色图标可参考以下链接 &#xff08;到第三步 测试图标效果 的时候 还是可以保持之前的写法&#xff1a;<i/sapn class“iconfont icon-xxx”>也会出现彩色的&#xff09; 参考链接2 阿里巴巴字体使用 也可以直接将官网的代码复制过来到页面的css区域

想要去日本做IT,本篇文章给您一些中肯的建议!

关于在日本从事IT行业&#xff0c;以下是一些建议&#xff1a; 一、了解行业现状与趋势 行业需求旺盛&#xff1a;随着人工智能、大数据、云计算等技术的不断发展&#xff0c;日本IT行业对程序员的需求持续增长&#xff0c;特别是在金融科技、电子商务、游戏开发、移动应用等…

如何评估TPM管理咨询公司的人才培养效果?

在探讨如何评估TPM管理咨询公司的人才培养效果时&#xff0c;我们需要从多个维度进行深入分析&#xff0c;以确保评估的全面性和准确性。TPM管理咨询公司作为推动企业生产效率与质量管理提升的重要力量&#xff0c;其人才培养效果直接关系到咨询项目的实施效果及企业的长远发展…

3DCAT实时云渲染赋能2024广东旅博会智慧文旅元宇宙体验馆上线!

广东国际旅游产业博览会&#xff08;以下简称“旅博会”&#xff09;是广东省倾力打造的省级展会品牌&#xff0c;自2009年独立成展至今已成功举办十五届。2024广东旅博会于9月13—15日在广州中国进出口商品交易会展馆A区举办&#xff0c;线上旅博会“智慧文旅元宇宙体验馆”于…

Word 首行缩进 2 字符怎么设置?具体步骤演示

在日常的文档编辑和排版中&#xff0c;首行缩进是一个非常常见且重要的排版需求。尤其是在中文文档中&#xff0c;首行缩进能够提高文章的美观度和可读性&#xff0c;使文章结构更加清晰。那 Word 首行缩进 2 字符怎么设置呢&#xff1f;下面就给大家展示具体的操作步骤。 设置…

SA2601A ,600V高速风筒半桥栅极驱动芯片

描述 SA2601A是一款针对于双NMOS的半桥栅极驱动芯片&#xff0c;专为高压、高速驱动N型功率MOSFET和IGBT设计&#xff0c;可在高达600V电压下工作。 SA2601A内置VCC和VBS欠压(UVLO)保护功能&#xff0c;防止功率管在过低的电压下工作&#xff0c;提高效率。 SA2601A输入脚兼容3…

Django的模板语法

Django的模板语法 1、初步认识2、原理 1、初步认识 本质上&#xff1a;在HTML中写一些占位符&#xff0c;由数据对这些占位符进行替换和处理。 在views.py中用字典&#xff08;键值对&#xff09;的形式传参&#xff0c;在html文件中用两个花括号来显示单独的值 列表、元组等数…

神经网络超参数优化

遗传算法与深度学习实战&#xff08;16&#xff09;——神经网络超参数优化 0. 前言1. 深度学习基础1.1 传统机器学习1.2 深度学习 2. 神经网络超参数调整2.1 超参数调整策略2.2 超参数调整对神经网络影响 3. 超参数调整规则小结系列链接 0. 前言 我们已经学习了多种形式的进化…

Python编程常用的36个经典案例!

Python 的简洁和强大使其成为许多开发者的首选语言。本文将介绍36个常用的Python经典代码案例。这些示例覆盖了基础语法、常见任务、以及一些高级功能。 1. 列表推导式 fizz_buzz_list ["FizzBuzz" if i % 15 0 else "Fizz" if i % 3 0 else "Buz…

腾讯云-云直播

云直播&#xff08;Cloud Streaming Services&#xff09;为您提供极速、稳定、专业的直播云端处理服务&#xff0c;根据业务中不同直播场景的需求&#xff0c;云直播提供标准直播、快直播、慢直播和云导播台服务&#xff0c;分别针对大规模实时观看、高并发推流录制及超低延时…

鸿蒙开发之ArkUI 界面篇 三十二 Styles(封装组件)

鸿蒙提供了Extend组件&#xff0c;作用是对组件的属性、点击事件的封装&#xff0c;简化代码、方便调用&#xff0c;但是这个组件的缺点是只能封装一种组件&#xff0c;例如只能封装Text或者是Button&#xff0c;不能跨组件使用&#xff0c;如果不同组件有相同的地方、需要使用…

常见锁策略总结:从悲观锁到自旋锁

欢迎浏览高耳机的博客 希望我们彼此都有更好的收获 感谢三连支持&#xff01; 在多线程编程中,锁是保证数据一致性和线程安全的重要机制.本文将直观且简洁的介绍常见的锁策略,包括它们的基本逻辑,使用场景以及优缺点. 悲观锁 与 乐观锁 悲观锁:预防性策略 悲观锁是一种主动锁…

Pandas处理时间序列之预测

import pandas as pd import numpy as np import matplotlib.pylab as plt %matplotlib inline from matplotlib.pylab import rcParams rcParams[figure.figsize] 15, 6 一、移动平均过程&#xff08;MA&#xff09; 移动平均过程&#xff08;Moving Average process&#…

机器学习——自动化机器学习(AutoML)

机器学习——自动化机器学习&#xff08;AutoML&#xff09; 自动化机器学习&#xff08;AutoML&#xff09;——2024年的新趋势什么是AutoML&#xff1f;AutoML的关键组成部分AutoML的优势AutoML 实例&#xff1a;使用Auto-sklearn进行回归分析AutoML的应用领域2024年值得关注…

webm格式怎么转换成mp4?这几种方法可以轻松完成视频转换!

webm格式怎么转换成mp4&#xff1f;WebM&#xff0c;作为一种新兴的视频文件格式&#xff0c;尽管携带了众多优势&#xff0c;却也不乏其固有的局限性&#xff0c;这些局限在实际应用中尤为凸显&#xff0c;成为了用户关注的焦点。本文将深入探讨WebM格式面临的挑战&#xff0c…

Compose第六弹 对话框与弹窗

1.compose中怎么使用对话框&#xff1f; 2.怎么显示Popup弹窗&#xff1f; 一、Compose显示对话框 二、Popup Popup就类似以前的Popupwindow&#xff0c;我们可以看到其实上面的DropdownMenu是Popup的一个具体实现。 2.1 Popup定义 Popup的定义如下&#xff1a; Composable…

ANSYS apdl界面频繁停止工作,需要卸载重装吗

如果经常出现以上报错界面&#xff0c;无需重装&#xff0c;一般是因为你在此图形显示界面滚动了鼠标滚轮&#xff0c;导致ANSYS停止工作 出现这个界面是因为前一次ANSYS非正常退出&#xff0c;再次进入就会出现