【零基础入门前端系列】—无序列表、有序列表、定义列表(四)

news2025/2/22 12:25:41

一、HTML无序列表

无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。

无序列表使用 <ul> 标签

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

在这里插入图片描述

在这里插入图片描述
嵌套结构:

<ul>
        <li>北京
            <ul>
                <li>大兴
                    <ul>
                        <li>经海路</li>
                    </ul>
                </li>
                <li>海淀</li>
            </ul>
        </li>
        <li>河北</li>
        <li>湖南</li>
    </ul>

在这里插入图片描述
ul 和li的属性

  • type:设置项目符号的类型

取值:

  • disc:默认值,黑色实心圆
  • circle:空心圆
  • square:黑色实心矩形
  • none:不显示
   <ul type="square">
        <li>春秋招,加油</li>
        <li>春秋招,加油</li>
        <li>春秋招,加油</li>
        <li>春秋招,加油</li>
        <li>春秋招,加油</li>
    </ul>

在这里插入图片描述

二、HTML有序列表

<ol>
        <li>春秋招,加油</li>
        <li>春秋招,加油</li>
        <li>春秋招,加油</li>
        <li>春秋招,加油</li>
        <li>春秋招,加油</li>
    </ol>

在这里插入图片描述
ol和li的属性

  • type:设置项目符号类型
  • 取值:1(默认值)、a、A、I
  • start:设置从第几个开始,取值为数字
  • reversed:倒序(当属性等于属性值的时候可以简写为一个属性)
 <ol type="I">
        <li>春秋招,加油</li>
        <li>春秋招,加油</li>
        <li>春秋招,加油</li>
        <li>春秋招,加油</li>
        <li>春秋招,加油</li>
    </ol>

在这里插入图片描述

三、自定义列表

自定义列表不仅仅是一列项目,而是项目及其注释的组合。

自定义列表以<dl>标签开始,每个自定义列表项以<dt>开始。每个自定义类表项的定义以<dd>开始

<dl>
        <dt>水果</dt>
        <dd>樱桃</dd>
        <dd>草莓</dd>
    </dl>

    <dl>
        <dt>奶茶店</dt>
        <dd>蜜雪冰城</dd>
        <dd>古茗</dd>
    </dl>

在这里插入图片描述
练习题
在这里插入图片描述

 <h3>绿叶学习网问卷调查</h3>
    <h4>你通过什么途径来到该学习网站的?</h4>
    <ol>
        <li>百度搜索</li>
        <li>360搜索</li>
        <li>其他</li>
    </ol>
    <h4>你觉得绿叶学习网页设计怎么样?</h4>
    <ol>
        <li>美观</li>
        <li>粗糙</li>
        <li>还行</li>
    </ol>
    <h4>绿叶学习网的HTML入门课程怎么样?</h4>
    <ul>
        <li>浅显易懂,重点突出</li>
        <li>内容丰富,技巧很多</li>
        <li>一句话,非常喜欢!</li>
    </ul>

在这里插入图片描述

 <ol>
        <li>发展历史</li>
        <li>管理团队
            <ul type="circle">
                <li>团队</li>
                <li>董事会</li>
            </ul>
        </li>
        <li>产品服务
            <ul type="circle">
                <li>门户网站</li>
                <li>在线游戏</li>
                <li>软件</li>
                <li>服务</li>
            </ul>
        </li>
        <li>企业文化
            <ul type="circle">
                <li>愿景</li>
                <li>价值观</li>
            </ul>
        </li>
        <li>社会责任</li>
        <li>涉查事件</li>
        <li>公司地址</li>
    </ol>

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/344679.html

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

相关文章

VSCode 的下载安装及基本使用

目录 一、VSCode 是什么&#xff1f; 二、VSCode 的下载和安装 2.1 - 下载 2.2 - 安装 2.3 - 安装汉化插件 三、MinGW-w64 的下载安装及配置 3.1 - 介绍 3.2 - 下载 3.3 - 解压安装 3.4 - 环境变量配置 3.5 - 验证配置是否成功 3.6 - 安装 C/C 插件 四、在 VSCode …

SD卡里的视频无法正常播放出来怎么办?

在日常工作和学习中经常会用到SD卡这个存储设备&#xff0c;它存储空间大&#xff0c;使用方便&#xff0c;很多设备上都使用SD卡作为存储工具。SD卡已经成为我们众多电子设备中重要的一员&#xff0c;为我们存储着相片、视频、文档、音频等数据。 SD卡为我们提供了巨大便利&a…

QT(51)-动态链接库-windows

1.qt- 调用win32 DLL 2.qt- 调用MFC DLL 0概述&#xff1a; 01.扩展DLL&#xff1a; 必须有一个DllMain()函数&#xff0c;且调用AfxInitExtensionModule()函数。 CRuntimeClass类-初始化函数CDynLinkLibrary。02.windows定位DLL文件&#xff1a; 1&#xff09…

第五章 在React中如何定义组件

一、安装react开发者工具 在开始之前&#xff0c;我们先做准备一下辅助工具&#xff0c;类似于Vue的开发者工具&#xff0c;React 开发者工具是一款浏览器扩展&#xff0c;可以帮助您在浏览器中调试 React 应用程序。 下面是如何安装 React 开发者工具的步骤&#xff1a; 打开…

常用类详解(三)StringBuilder

(1)一个可爱的字符序列。此类提供一个与StringBuffer兼容的API&#xff0c;但不保证同步(StringBuilder不是线程安全的)&#xff0c;该类被设计用作StringBuffer的一个简易替换&#xff0c;用在字符串缓冲区被单个线程使用的时候。如果可能&#xff0c;建议优先采用该类&#x…

保护品牌线上声誉的5种方法

我们如今生活在一个搜索便捷的世界&#xff0c;对于一个企业和个人来说&#xff0c;品牌的线上声誉也尤为重要。在客户考虑与您的公司开展业务之前&#xff0c;他们理所当然会先使用众多软件和平台搜索相关信息&#xff0c;以帮助他们了解和做决定。 因此&#xff0c;您的品牌…

2023最新整理软件测试面试题附答案

包含的模块&#xff1a; 本文分为十九个模块&#xff0c;分别是&#xff1a;软件测试 基础、liunx、MySQL、web测试、接口测试、APP测试 、管理工具、Python、性能测试、selenium、lordrunner、计算机网络、组成原理、数据结构与算法、逻辑题、人力资源需要的可以找我获取&…

预算砍砍砍,IT运维如何降本增效

疫情短暂过去&#xff0c;一个乐观的共识正在蔓延&#xff1a;2023年的互联网&#xff0c;绝对不会比2022年更差。 “降本”是过去一年许多公司的核心策略&#xff0c;营销大幅缩水、亏损业务大量撤裁&#xff0c;以及层出不穷的裁员消息。而2023年在可预期的经济复苏下&#…

ChatGPT走红| 微软ATP带你开启高校AI人才培育新时代

与传统搜索引擎不同的是&#xff0c;ChatGPT不是机械罗列出相关网页结果&#xff0c;而是将答案进行整理、优化&#xff0c;以对话形式呈现给用户&#xff0c;还能很快根据上下文互动&#xff01;甚至有人用它辅助自己写论文、完成文字性作业……▍抢跑早规划 入门AI不迷茫AI体…

【C++】类和对象(三)

目录 一、构造函数补充 1、初始化列表 1.1、初始化列表概念 1.2、初始化列表性质 2、explicit关键字 二、static成员 1、概念及使用 2、性质总结 三、友元 1、友元函数 2、友元类 四、内部类 五、拷贝对象时的一些编译器优化 一、构造函数补充 在《类和对象&#x…

GeoTools:FeatureShapefile之CRUD操作

之前在《GIS开源框架&#xff1a;ArcGIS文件地理数据库(GDB)解析与入库》中&#xff0c;从地理数据库的角度对Feature要素进行了解释&#xff0c;接下来&#xff0c;我们将从GeoTools库的角度&#xff0c;重新认识Feature要素&#xff0c;并通过GeoTools实现Shapefile文件在Fea…

产品、技术:如何编写有效的流程文档?

流程文档是指一系列的、连续的、有规律的活动过程&#xff0c;而这些活动以特定的方式进行&#xff0c;并导致特定结果&#xff08;创造价值&#xff09;的产生。流程梳理是指围绕企业的内部要素与外部要素&#xff0c;对整个企业的业务特点和现状进行深入细致的分析、整理、提…

Fiddler使用笔记(柠檬班)

Fiddler笔记 内部功能 Replay 重放请求。 号 移除请求&#xff0c;可以通过Shift Delete来选择要保存的请求&#xff0c;其他的都删掉。 Go 断点的时候使用&#xff0c;作用是转到下一步。 Stream 流模式&#xff0c;一般不用它。 Decode 用于解码信息。通常对响应…

Ambire AdEx 2023 年路线图

Ambire AdEx 是为简化 web3 显示广告而建立的&#xff0c;领先于时代。到 2023 年&#xff0c;它将专注于服务用户需求&#xff0c;同时保持其作为区块链隐私解决方案的核心&#xff0c;反对传统的数字广告模式。 回顾 2022 年 2022 年&#xff0c;AdEx 网络处理了超过 1 亿次展…

Hudi-并发控制

并发控制 Hudi支持的并发控制 MVCC Hudi的表操作&#xff0c;如压缩、清理、提交&#xff0c;hudi会利用多版本并发控制来提供多个表操作写入和查询之间的快照隔离。使用MVCC这种模型&#xff0c;Hudi支持并发任意数量的操作作业&#xff0c;并保证不会发生任何冲突。Hudi默…

小米电视安装 Plex 打造家庭影院

背景 最近突然想重温教父&#xff0c;本来想着直接投屏就可以&#xff0c;后来看了别人搭建的基于 NAS 的家庭影院很动心&#xff0c;也想依葫芦画瓢做一个&#xff0c;跟对象申请经费的时候被拒了&#xff0c;理由是有这钱还不如开个会员直接看。 我寻思不同电影在不同的平台…

遥感反演叶面积指数 (LAI)

叶面积指数 叶面积指数&#xff08;Leaf Area Index, LAI&#xff09;是反映一个生态系统中单位面积上的叶面积综合的一半&#xff0c;是模拟陆地生态过程、水热循环和生物地球化学循环的重要参数。 本文主要介绍LAI的遥感反演方法&#xff0c;其主要分为统计方法、植被辐射传输…

传奇私服搭建网站的几种方法

搭建网站的几种方法&#xff1a;一些人&#xff0c;连简单的搭建网站都不会&#xff0c;还要请技术帮忙&#xff0c;真是牛B&#xff0c;这里简单介绍下几种办法一&#xff1a;2003系统下&#xff0c;直接使用IIS&#xff0c;这个太简单了&#xff0c;桌面上就有IIS&#xff0c…

权威报告!这五个消费趋势,告诉你如何抓住中国消费者的心和钱包

有人说2023年是消费复苏的一年&#xff0c;市场回暖趋势明显&#xff1b;也有人说之前的亏空太大&#xff0c;想要短时间追上来不太可能&#xff0c;因此2023的消费市场最多是不低迷&#xff0c;达不到火热。这可把做生意的各位老板整纠结了&#xff0c;究竟今年要不要投个大手…

mysql 跳过事务 gtid

企业生产场景mysql主从复制故障原因 企业生产场景mysql主从复制故障原因 实验一&#xff1a; 目的&#xff1a;解决主从不同步&#xff08;本例中sql线程出现问题&#xff09; 方法&#xff1a;模拟故障场景 1.在SLAVE上建立一个名为yingying数据库。…