首页 > 其他分享 >HTML中的三个列表,具体的使用及列表样式

HTML中的三个列表,具体的使用及列表样式

时间:2023-12-09 10:44:56浏览次数:25  
标签:style cn 样式 direct 列表 ## HTML 定义

HTML有三种列表:
## 一、有序列表
有序列表(Ordered lists):用数字或字母来标记列表项,每个列表项前会有一个数字或字母。

```html
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
```
## 二、 无序列表
无序列表(Unordered lists):用符号来标记列表项,每个列表项前会有一个符号,常用的符号有圆点、方块和实心圆点。

```html
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
```
## 三、定义列表
定义列表(Definition lists):用于定义术语或概念,每个列表项由一个术语和对应的定义组成。

```html
<dl>
<dt>术语1</dt>
<dd>定义1</dd>
<dt>术语2</dt>
<dd>定义2</dd>
<dt>术语3</dt>
<dd>定义3</dd>
</dl>
```

这些列表都可以使用CSS样式进行美化和自定义。

## 四、列表样式
### 无标记符号

去除无序的圆点,属性:style="list-style:none"
```
<ul>
<li style="list-style:none">苹果</li>
<li>香蕉</li>
<li style="list-style:none">葡萄</li>
</ul>
```
结果
![在这里插入图片描述](/i/ll/?i=direct/19f2401eabe24a8f81c6694a92e7a10a.png)
### 空心圆
将实心圆换成空心圆,属性:style="list-style:circle"
```
<ul>
<li style="list-style:circle">苹果</li>
<li>香蕉</li>
<li style="list-style:circle">葡萄</li>
</ul>
```
结果
![在这里插入图片描述](/i/ll/?i=direct/0c14df7c1c0344f5ae771d8536bd63ca.png)

### 正方形
将实心圆换成正方形,属性:style="list-style:square"
```
<ul>
<li style="list-style:square">苹果</li>
<li>香蕉</li>
<li style="list-style:square">葡萄</li>
</ul>
```
结果
![在这里插入图片描述](/i/ll/?i=direct/c7c1b7bb0b7345f18e333eb775139065.png)
### 数字
无序也可以当有序用
```
<ul>
<li style="list-style:decimal">苹果</li>
<li>香蕉</li>
<li style="list-style:decimal">葡萄</li>
</ul>
```
结果
![在这里插入图片描述](/i/ll/?i=direct/c43bd2a1da354e13a070aff2dca17d41.png)

标签:style,cn,样式,direct,列表,##,HTML,定义
From: https://www.cnblogs.com/xioaliang/p/17890607.html

相关文章

  • Python:数据容器-list(列表)
    列表定义语法:字面量[元素1,元素2,元素3,...]定义变量变量名称=[元素1,元素2,元素3,...]定义空列表变量名称=[]变量名称=list()列表内的每个数据,称之为元素以[]作为标识列表内每个元素用,逗号隔开注意事项:列表可以一次多个数据,且可以为不同数据类型,支持嵌套"......
  • Python:列表的下标索引
    列表的下标(索引):取出特定位置的数据语法:列表[下标索引]列表的下标(索引)-反向反向索引就是从后向前:从-1开始,依次递减(-1、-2、-3...)嵌套列表的下标(索引)列表[内层列表[索引]]#通过下标索引取出对应位置的数据my_list=["itheima",666,True]#列表[下标索引],从前向后从......
  • Python:列表的常用操作方法
    列表上限:2**63、922372036854775807个查询元素查找指定元素在列表的下标,如果找不到,报错ValueError语法:列表.index(元素)插入元素在指定下标位置,插入指定的元素语法:列表.insert(下标,元素)追加元素将指定元素,追加到列表的尾部语法:列表.append(元素)将其他数据容器的内容......
  • Python:列表的循环遍历
    while循环遍历for循环遍历#列表的遍历-while循环遍历deflist_while_func():"""列表的遍历-while循环遍历:return:None"""list1=[21,25,21,23,22,20]index=0whileindex<len(list1):tmp=list1[ind......
  • HTML笔记
    1.什么是HTMl:HTML(HyperTextMarkupLanguage)是一种用于创建网页的标准标记语言。它使用一系列标签来定义网页的结构、内容和样式。HTML文档由一系列的元素组成,这些元素包括标题、段落、链接、图片、列表等。通过使用HTML标签,开发者可以创建出具有交互性和动态效果的网页。2.HTML......
  • Acwing 840. 模拟散列表
    题面:维护一个集合,支持如下几种操作:Ix,插入一个整数 \(x\);Qx,询问整数 \(x\) 是否在集合中出现过现在要进行 \(N\) 次操作,对于每个询问操作输出对应的结果。原题链接:840.模拟散列表-AcWing题库哈希表[1]基本概念哈希表也叫散列表,通过将键映射到索引位置(在关键......
  • 如何给网页和代码做HTML加密?
    ​如何给网页和代码做HTML加密?本篇文章给大家谈谈html混淆加密在线,以及HTML在线加密对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。   ​如何给代码加密?1、源代码加密软件推荐使用德人合科技的加密软件,是一套从源头上保障数据安全和使用安全的软件系统。采用的......
  • vue2、vue3适配大屏。分辨率变化,样式不变
    一、vue3适配大屏的,创建一个叫useDraw.jsexportdefaultfunction(){constscale={width:'1',height:'1',}constbaseWidth=1920constbaseHeight=1080constbaseProportion=parseFloat((baseWidth/baseHeight).toFixed(5......
  • 用html+css+js做canvas烟花模拟网页动画代码
    圣诞节、元旦就要到了,本案例我们将用html+css+js做canvas烟花模拟网页动画代码,程序员的浪漫这不就来了嘛,与家人朋友一起看烟花吧!   附源码<!DOCTYPEhtml><htmllang="en"><head> <metacharset="UTF-8"/> <title>烟花模拟器</title> <metaname="viewport"......
  • Python将列表数据保存为excel
    一、需求背景工作需要将列表数据写入到excel中,方便运营同学查看,数据示例如下:data_0=[[['Name','Age','Gender'],['Jack',22,'Male'],['Tom',34,'Female']],[['id&#......