无序列表简介

已于 2023-05-19 08:58:43 修改
阅读量2.9k 收藏 1
点赞数
文章标签： html 前端 servlet
于 2023-04-12 07:58:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/king220022/article/details/130097971
版权
文章介绍了HTML中无序列表的使用，包括<ul>和<li>标签的基本语法，以及如何通过type属性改变列表项的样式。强调了无序列表在前端开发中的广泛应用，并提醒读者注意ul元素的结构规则，其子元素必须是li且文本需放在li内。同时，提到了使用CSS的list-style-type属性替代type属性进行更复杂的样式设置。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

一、无序列表简介

无序列表，很好理解，有序列表的列表项是有一定顺序的，而无序列表的列表项是没有顺序的。默认情况下，无序列表的列表项符号是●，不过可以通过type属性来改变其样式。

语法：

<ul>

    <li>列表项</li>

    <li>列表项</li>

    <li>列表项</li>

</ul>

说明：

ul，即unordered list（无序列表）。li，即list（列表项）。

在该语法中，使用<ul></ul>标签表示一个无序列表的开始和结束，<li>表示这是一个列表项。一个无序列表可以包含多个列表项。

注意，ul标签和li标签也是配合一起使用，不可以单独使用，而且ul标签的子标签也只能是li标签，不能是其他标签。这一点跟有序列表是一样的。

举例：

在线测试

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>无序列表</title>

</head>

<body>

    <ul>

        <li>HTML</li>

        <li>CSS</li>

        <li>JavaScript</li>

        <li>jQuery</li>

        <li>Vue.js</li>

    </ul>

</body>

</html>

浏览器预览效果如下图所示。

二、type属性

跟有序列表一样，我们也可以使用type属性来定义列表项符号。

语法：

<ul type="属性值">

    <li>列表项</li>

    <li>列表项</li>

    <li>列表项</li>

</ul>

说明：

在无序列表中，type属性取值如下表所示。

属性值

列表项符号

disc

实心圆●（默认值）

circle

空心圆○

square

正方形■

表1 type属性取值

跟有序列表一样，对于无序列表的列表项符号，等学了CSS之后，我们可以放弃type属性，而使用list-style-type属性。

举例：

在线测试

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>type属性</title>

</head>

<body>

    <ul type="circle">

        <li>HTML</li>

        <li>CSS</li>

        <li>JavaScript</li>

        <li>jQuery</li>

        <li>Vue.js</li>

    </ul>

</body>

</html>

浏览器预览效果如下图所示。

三、深入无序列表

在实际的前端开发中，无序列表比有序列表更为实用。更准确点说，我们一般都是使用无序列表，几乎用不到有序列表。不说别的，就拿绿叶学习网来说，主导航、工具栏、动态栏等地方都用到了无序列表。凡是需要显示列表数据的地方都用到了，可谓无处不在！

下面，我们再来看看大型网站在哪些地方用到了无序列表，如下面3张图片所示。

可能很多人都疑惑：这些效果是怎样用无序列表做出来的呢？网页外观嘛，当然都是用CSS来实现的啊！现在不懂没关系，为了早日做出这种美观的效果，小伙伴们好好加油把CSS学好！

此外，对于无序列表来说，还有以下两点要注意。

  • （1）ul元素的子元素只能是li，不能是其他元素。
  • （2）ul元素内部的文本，只能在li元素内部添加，不能在li元素外部添加。

举例：ul的子元素只能是li，不能是其他元素

在线测试

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

</head>

<body>

    <ul>

        <div>前端最核心3个技术：</div>

        <li>HTML</li>

        <li>CSS</li>

        <li>JavaScript</li>

    </ul>

</body>

</html>

浏览器预览效果如下图所示。

分析：

上面代码是错误的，因为ul元素的子元素只能是li元素，不能是其他元素。正确做法是这样：

<div>前端最核心3个技术：</div>

<ul>

    <li>HTML</li>

    <li>CSS</li>

    <li>JavaScript</li>

</ul>

举例：文本不能直接放在ul元素内

在线测试

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

</head>

<body>

    <ul>

        前端最核心3个技术：

        <li>HTML</li>

        <li>CSS</li>

        <li>JavaScript</li>

    </ul>

</body>

</html>

浏览器预览效果如下图所示。

分析：

上面代码是错误的，因为文本不能直接放在ul元素内。

HTML5 是一种用于创建网页的标准标记语言无序列表（unordered list）使用 `＜ul＞` 标签来定义，列表项则使用 `＜li＞` 标签来表示
BLOG域名:programb.blog.csdn.net
06-26 2070
在HTML5中，无序列表（unordered list）是一种常用的方式来组织松散排列的内容，比如项目、要点或子菜单。（Animation and Transitions）：可以应用CSS动画和过渡功能，使列表项的显示更具动态感。（List Style Types）：除了点状和编号，还可以设置其他类型的列表样式，如圆点、方块、小写字母等。元素代表列表的一个条目，浏览器会自动生成数字作为每个列表项的标识。（Marker Styles）：你可以自定义数字或字母作为列表项的标记，而非默认的数字序列。
Typora入门教学
weixin_62312301的博客
07-31 995
Typora入门教学
UL、LI 无序列表实现纯CSS网站导航菜单
09-25
三行的纯CSS网站导航栏菜单，改改风格，让大家感到新鲜一点，其它主要还是使用了Li列表，整体布局简洁，美观大方，适合大部分网站使用，颜色和菜单空隙可随意调节，希望大家喜欢。
js无序列表
02-15
使用js实现无序列表，适合每一位初学者的小例子。
无序列表
qq_39093474的博客
08-27 2377
  1.什么是列表标签 作用：给一堆数据添加列表语义，也就是告诉搜素引擎告诉浏览器，这一顿数据是一个整体 2.html中列表标签的分类 1.无序列表（最多）（unordered list） 2.有序列表（最少）（ordered list） 3.定义列表（其次）（defintition list） 3.无序列表的作用 给一堆数据添加列表语义，并且这一堆数据没有先后之分 4.格式 ...
无序列表的介绍
xiao_suan_cai的博客
06-12 8912
  列表分为两种类型：一种是有序列表；另一种是无序列表。前者使用编号来记录项目的顺序，而后者使用项目符号来标记无序的项目。   所谓有序列表，是指按照数字或字母顺序排列列表项目，如图1.1所示：   所谓无序列表，是指以全●、○、▽、▲等开头的，没有顺序的列表项目   ...
HTML入门教程：构建无序列表与页面结构
其中，无序列表（UL）常用于呈现项目列表，如例子中展示的星期天至星期六的列表。此外，还涵盖了HTML文档的结构、基本HTML标签的运用、特殊字符的插入、超级链接的创建等内容。 HTML简介: HTML，全称HyperText ...
markdown的二级无序列表
08-14
回答: Markdown的二级无序列表可以通过在列表项前加上两个空格和一个减号或星号来创建。例如，要创建一个二级无序列表项，可以在列表项前加上两个空格和一个减号或星号，如下所示： ``` - 一级列表项 - 二级列表项...
web前端介绍仙人掌，要有图片还有图像左文字右，有序列表和无序列表都有体现
最新发布
09-18
在Web前端展示仙人掌的内容，我们可以创建一个图文并茂的布局，结合有序列表(ol)和无序...这个示例展示了如何将图片居中，并用左右对齐的方式显示文本内容，同时使用有序和无序列表分别列出仙人掌的一些分类和特性。
列表标签-无序列表
Blue_lan18的博客
01-17 1814
无序列表是用来布局的，无序列表的各个列表项之间没有顺序之分，是并列的。ul中只能嵌套li，不允许有其他标签或文字。li标签里可以放任何元素。 例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="view
HTML无序列表
又菜又爱玩的小熊
02-21 3745
文章目录一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码如下（示例）： import numpy as np import pandas as pd import matplotlib.pyplot as plt import seaborn as sns import warnings warnings.filterwarnings('ignor
前端基础：HTML表格标签、无序列表、自定义列表
weixin_49555741的博客
03-13 3114
目录 1. 表格标签 1.2 基本语法 1.2 表头单元格标签 1.2.1 表头单元格语法 1.3表格属性 1.3 表格结构标签 1.4 合并单元格 1.4.1 合并单元格的方式 1.4.2 目标单元格 1.4.3 合并单元格三步骤 2. 列表标签 2.1 无序列表（重点） 2.1.1 基本语法 2.2 有序列表(了解） 2.3 自定义列表（重点） 2.3.1 自定义标签语法 1. 表格标签 表格主要是用来显示、展示数据的，一个好的表格可以把繁杂的数...
什么是无序列表
weixin_74900246的博客
02-24 175
保姆级教学
什么是无序列表？如何定义无序列表？
zy1992As的博客
06-15 7307
无序列表是网页中最常用的列表，之所以称为“无序列表”，是因为其各个列表项之间为并列关系，没有顺序级别之分。例如传智播客官网的导航栏结构清晰，各列表项之间(如“网页平面”与“java培训”)排序不分先后，这个导航栏就可以看做一个无序列表。定义无序列表的基本语法格式如下： 在上面的语法中，标记用于定义无序列表，标记嵌套在标记中，用于描述具体的列表项，每对中至少应包含一对。值得一提的是，和都拥有type属...
前端开发入门——有序列表与无序列表整理
sxtweb的博客
08-27 1491
本文创建于2020年8月，以下为正文： 本文学习HTML中的列表标签，列表形式在网站设计中占有比较大的比重，显示信息非常整齐直观，便于用户理解。在后面的CSS样式学习中将大量使用到列表元素的高级作用。用于组织数据的列表！ 列表标签 在HTML页面中，合理的使用列表标签可以起到提纲和格式排序文件的作用。列表是一个接一个显示条目的首选方式，而不是使用< br>标记。哇整的列表定义包括开始和结束标记，以及表示列表中的每个条目的标记。 列表分为两大类：有序列表和无序列表。 无序列表 无序列表是一个没
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值