首页 > 其他分享 >HTML(五)列表详解

HTML(五)列表详解

时间:2024-10-13 12:18:44浏览次数:3  
标签:序列表 项一 无序 列表 HTML 前导 详解 项二

在HTML中,列表可以分为两种,一种为有序列表。另一种为无序列表

今天就来详细讲解一下这两种列表如何实现,效果如何

1.有序列表

有序列表的标准格式如下:

   <ol>
        <li>列表项一</li>
        <li>列表项二</li>
   </ol>

这里的列表项可以随意更改内容,使用示例如下:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>title</title>
</head>

<body>
 
    <ol>
        <li>吃饭</li>
        <li>睡觉</li>
    </ol>
    
</body>
</html>

效果图如下:

2.有序列表更改前导符

什么是前导符?

前导符就是我们在使用列表打出文字前的小标题,如上图中的 1.    2. 这些都是前导符


前导符的标准语言使用如下:

 <ol type="前导符">
        <li>列表项一</li>
        <li>列表项二</li>
 </ol>

 这里的前导符有五种,如下图:

 接下来是实际代码演示+效果

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>title</title>
</head>

<body>
 
    <ol type="a">
        <li>列表项一</li>
        <li>列表项二</li>
    </ol>

    <ol type="A">
        <li>列表项一</li>
        <li>列表项二</li>
    </ol>

    <ol type="1">
        <li>列表项一</li>
        <li>列表项二</li>
    </ol>

    <ol type="i">
        <li>列表项一</li>
        <li>列表项二</li>
    </ol>

    <ol type="I">
        <li>列表项一</li>
        <li>列表项二</li>
    </ol>
</body>
</html>


 3.无序列表

在HTML中另外一种列表被称作无序列表,无序列表与有序列表极其相似,只有微小的差距

无序列表标准格式如下:

    <ul>
        <li>列表项一</li>
        <li>列表项儿</li>
    </ul>

无序列表使用及效果如下:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>title</title>
</head>

<body>
 
    <ul>
        <li>吃饭</li>
        <li>睡觉</li>
    </ul>

</body>
</html>


 4.无序列表更改前导符

这里不做演示了,与有序列表使用方法相同

标签:序列表,项一,无序,列表,HTML,前导,详解,项二
From: https://blog.csdn.net/2301_80349538/article/details/142896175

相关文章

  • 大学生HTML期末大作业——HTML+CSS+JavaScript游戏网站(英雄联盟)
    HTML+CSS+JS【游戏网站】网页设计期末课程大作业web前端开发技术web课程设计网页规划与设计......
  • 基于Java+Jsp+Html+MySQL实现的企业仓储管理系统设计与实现(源码+文档+部署视频)
    文章目录1.前言2.详细视频演示3.论文参考4.项目运行截图5.技术框架5.1后端采用SpringBoot框架5.2前端框架Vue6.选题推荐毕设案例8.系统测试8.1系统测试的目的8.2系统功能测试9.代码参考10.为什么选择我?11.获取源码1.前言......
  • HTML入门教程一口气讲完!(下)\^o^/
    HTML表单HTML 表单和输入HTML表单用于收集不同类型的用户输入。在线实例创建文本字段(Textfield)本例演示如何在HTML页面创建文本域。用户可以在文本域中写入文本。创建密码字段本例演示如何创建HTML的密码域。(在本页底端可以找到更多实例。)HTML表单......
  • 【C语言基础】核心关键字详解与应用
    目录一、void1.1.作用1.2.代码示例二、基本数据类型(char、int、float、double等)2.1.char(字符类型)2.2.int(整型)2.3.float(单精度浮点型)2.4.double(双精度浮点型)2.5.代码示例三、控制流程语句(if、else、switch、case、default等)3.1.if和else语句3.2.switch......
  • 前端学习第四天笔记 函数 对象 math对象 Date对象 DOM概述 document对象的获取元素、
    文章目录函数函数的声明函数名的提升对象math对象Math.abs()Math.max()和Math.min()Math.floor()和Math.ceil()Math.random()Date对象Date.now()Date对象中的Get方法DOM概述节点节点树Node.nodeType属性document对象_方法/获取元素document.getElementsByTagName()do......
  • HTML+CSS 核心笔记 (四)
    选择器结构伪类选择器作用:根据元素的结构关系查找元素:nth-child(公式) 作用:根据元素的结构关系查找多个元素提示:公式中的n取值从0开始伪元素选择器作用:创建虚拟元素(伪元素),用来摆放装饰性的内容必须设置content:””属性,用来设置伪元素的......
  • 初始html
    html骨架html骨架结构由四个标签组成:html规定了网页的整体。head规定了网页的"头部",包含字符编码等等信息。title规定了网页的标题。body规定了网页的"身体"。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="v......
  • 机器学习中的模型设计与训练流程详解
    目录前言1.模型设计1.1数据特性分析1.2计算资源限制1.3应用场景需求2.模型训练2.1训练集与验证集的划分2.2损失函数的选择2.3模型参数更新3.优化方法3.1梯度下降法3.2正则化方法4.模型测试4.1性能评估指标4.2模型的泛化能力5.模型选择5.1数据规模与......
  • 操作符详解
    ⽬录1.操作符的分类2.⼆进制和进制转换3.原码、反码、补码4.移位操作符5.位操作符:&、|、^、~6.单⽬操作符7.逗号表达式8.下标访问[]、函数调⽤()9.结构成员访问操作符10.操作符的属性:优先级、结合性11.表达式求值1.操作符的分类•算术操作符:+、......
  • div标签和html的综合练习
    一、div标签1、在html中,<div>标签的作用是将我们的网页分割成独立的版块,同时方便浏览器进行定位。2、div标签拥有以下几个元素:header,nav,section,aside,footer。也正是通过这些属性,我们才可以对各个部分进行定位。a.header:文章的头部;<divid="header">我是头部</div>b.nav:文......