HTML 无序列表
Lists in HTML are a concept of gathering a number of data or elements arranged in a specific order organized for the purpose of being used in the program execution. HTML uses three types of lists, namely Ordered List, Unordered List and Definition List, where Unordered List is a type of list where the data or elements can be arranged in the list in no specific order. The syntax for the HTML Unordered List is
- ………..
- is the tag that indicates the unordered list type.
- Ordered List
- Unordered list
- Definition List
The three types of lists we could use to bring order to the web pages. Below are the different types:
In this article, we shall go through the unordered list specification with an example. The unordered list is a list that doesn’t require any order of numbering in their list; instead, we use bullets for the list levels.
Syntax of HTML Unordered List
The syntax for the unordered list is similar to the ordered list we created in the previous article. Unordered list is created using an element named
- element and ends with
- element.
<ul> <li></li> ……….. </ul>
Example #1
This shows how this short item list is implemented in a browser.
<html> <head> <title> Demo on Unordered list</title><br> </head> <body bgcolor="orange" text="green" order=""> <h1><u>Demo on Unordered list</u></h1> <h2>Ingredients for making of cake</h2> <h3> <ul type="square"> <li>Baking Powder</li> <li >Flour</li> <li> Sugar</li> <li>Coco poder</li> </ul> <h3> </body> </html>
Output:
This will give you the result like
Example #2
Unordered List with colors and for the positions.
<!DOCTYPE html> <html> <head> <title>unordered list Demo2</title> </head> <body> <h1>Unordered Disc</h1> <ul> <li>Lion</li> <li>Tiger</li> <li>Giraffe</li> <li>Camel</li> </ul> <h1>Top Rhymes </h1> <ul type="square"> <li>Johny Johny Yes papa</li> <li>Wheels on the Bus</li> <li> Baa Baa Black Sheep</li> </ul> <h1>Fruits Name List</h1> <ul type="circle" > <li > Avacado</li> <li> Orange</li> <li>Pears</li> <li> Banana</li> </ul> </body> </html>
Output:
Types of Attributes for HTML Unordered List
To figure the unordered list, there are three primary types of attributes for this unordered element. The unordered list is used where it is not required to represent the lists in any specific orders. The following sections explain the related attributes and examples of them.
This attribute gives the type of bullets to be used in the list.
- type =’disc’ – Gives default bullet structure
- type =’square’ – Looks like solid box bullets
- type =’circle’ – Gives Hollow box structure
1. Attribute type=’disc.’
This is the default type, and all the items are marked as bullets. Here we use type attribute, and all these attributes support in HTML 3, To define under HTML5, we are supposed to implement list-style CSS. Here is an example demo.
Example:
<html> <head> <title> Demo on Unordered list Types</title><br> </head> <body bgcolor="pink" text="blue" order=""> <h1><u>Demo on Unordered list Types</u></h1> <UL> <LI>This is Program Agenda. <UL> <LI>First a Welcome Note <LI>Second We Start with the talks </UL> <LI type="square">Opening Speech <LI>Mrs.Claria Winston from Ireland and Eyjolfur From Bank of America. <LI type="circle"> Tea Break <LI type="disk">Last part from the topic Data Lake By Surendran Thomas. </UL> </body> </html>
Output:
2. Attribute type=’square.’
Here the items are marked with Square bullets.
Example:
Demonstrating the HTML code with the square bullet embedded with style color and the position.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.5">
<style>
ul {
list-style: square;
}
ul li::before {
content: "\1022";
color: pink;
font-weight: bold;
display: inline-block;
width: 0.8em;
margin-left: -1em;
}
</style>
</head>
<body>
<h2>List of top hollywood movies-Square</h2>
<ul>
<li>World Of the wars</li>
<li>Mission Impossible</li>
<li>Independence Day special</li>
<li> Behind enemy lines</li>
</ul>
</body>
</html>
Output:
3. Attribute type=’circle.’
This attribute gives hollow bullet values. Below are the example rendering circle and square attribute together with the nested lists.
Example:
<HTML>
<HEAD>
<TITLE> EDUCBA List Example </TITLE>
;style>
h3{
color:orange;
}
ul{
list-style: none;
}
ul li::before {
content: "\25AA";
color: brown;
display: inline-block;
width: 1em;
margin-left: -0.8em;
font-weight: bold;
font-size:1rem;
}
</style>
</HEAD>
<BODY>
<H1> List of Mobiles</h1>
<UL>
<LI> Redmi Xiami
<LI> Iphone
<LI> Samsung
<LI> Nokia
</UL>
<H1>Mobile Operating System Supports</h1>
<UL TYPE = "circle">
<LI> Android
<LI> Windows phone
<LI TYPE = "circle"> Samsung
<LI TYPE = "square"> Nokia
</UL>
</BODY>
</HTML>
Output:
Replacing HTML list Items with Customizable Images
This would ultimately enhance the overall theme and makes the website visually good. The default bullets are replaced by native style or even can customizable using images with CSS help. Actually speaking, there are three styling lists to be used in HTML. Here we go with a list-style-type and list-style-image.
Using image bullet is to make the lists more unique and differentiate the information by type, Giving the presentation a look on the web page.
In the below example, the examples are demonstrated by style properties between the list elements.
Example #1 – Style properties between the list elements
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML unordered list with Styles</title>
</head>
<body>
<style>
ul li {
background: red;
}
ul.in.li {
list-style: circle inside none;
color: red;
left: -20px;
position: inside;
text-align: left;
width: 27px;
}</style>
<ul>
<li><span> Finland is a Scandinavian Country</span></li>
<li><span>Oslo is the capital city</span></li>
<li><span>Iceland is known for its beauty , hiking, fishing</span></li>
<li><span>Ranked among the chillness country in europe</span></li>
</ul><br/>
</body></html>
Output:
This will give out the output like
Example #2 – With image style
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-image: url('sqpurple.gif');
}
</style>
</head>
<body>
<h2>The list-style- Demo</h2>
<p>Harry Potter Characters:</p>
<ul id="circle">
<li> Harry</li>
<li>Hermione</li>
<li>Ron Weasely</li>
</ul>
</body>
</html>
Output:
结论
现在我们了解了如何在 HTML 中构建无序列表。我们已经通过不同的示例了解了无序块元素如何在创建网页中发挥作用，并探索了一些列表功能。即使这也可以用在导航菜单中垂直显示。无序列表的创建非常简单；考虑在哪里修复此方法以获得最佳位非常重要。换句话说，完美的文档更喜欢使用 HTML 列表格式。
以上是HTML 无序列表的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undress AI Tool
免费脱衣服图片
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
将CSS和JavaScript与HTML5结构有效整合。
Jul 12, 2025 am 03:01 AM
HTML5、CSS和JavaScript应通过语义化标签、合理加载顺序与解耦设计高效结合。1.使用HTML5语义化标签如、提升结构清晰度与可维护性，利于SEO和无障碍访问；2.CSS应置于中，使用外部文件并按模块拆分，避免内联样式与延迟加载问题；3.JavaScript推荐放在前引入，使用defer或async异步加载以避免阻塞渲染；4.减少三者间强依赖，通过data-*属性驱动行为、类名控制状态，统一命名规范提升协作效率。这些方法能有效优化页面性能与团队协作。
使用HTML按钮元素实现可点击按钮
Jul 07, 2025 am 02:31 AM
要使用HTML的button元素实现可点击按钮，首先需掌握其基本用法与常见注意事项。1.使用标签创建按钮，并通过type属性定义行为（如button、submit、reset），默认为submit；2.通过JavaScript添加交互功能，可内联写法或通过ID绑定事件监听器以提升维护性；3.利用CSS自定义样式，包括背景色、边框、圆角及hover/active状态效果，增强用户体验；4.注意常见问题：确保未启用disabled属性、正确绑定JS事件、避免布局遮挡，并借助开发者工具排查异常。掌握这
在HTML头部元素中配置文档元数据
Jul 09, 2025 am 02:30 AM
HTMLhead中的元数据对SEO、社交分享和浏览器行为至关重要。1.设置页面标题与描述，使用和并保持简洁唯一；2.添加OpenGraph与Twitter卡片信息以优化社交分享效果，注意图片尺寸并使用调试工具测试；3.定义字符集与视口设置确保多语言支持与移动端适配；4.可选标签如作者版权、robots控制及canonical防止重复内容也应合理配置。
使用新的HTML5方法（FormData）提交表单数据
Jul 08, 2025 am 02:28 AM
使用HTML5的FormDataAPI提交表单数据更方便，1.它可自动收集带name属性的表单字段或手动添加数据；2.支持通过fetch或XMLHttpRequest以multipart/form-data格式提交，适合文件上传；3.处理文件时只需将文件附加到FormData并发送请求即可；4.注意同名字段会被覆盖、需处理JSON转换及无嵌套结构等问题。
了解HTML5媒体源扩展（MSE）
Jul 08, 2025 am 02:31 AM
MSE（MediaSourceExtensions）是W3C标准的一部分，允许JavaScript动态构建媒体流，从而实现高级视频播放功能。它通过MediaSource管理媒体源、SourceBuffer存放数据、TimeRanges表示缓冲时间范围，使浏览器能动态加载并解码视频片段。使用MSE的流程包括：①创建MediaSource实例；②将其绑定到元素；③添加SourceBuffer接收特定格式数据；④通过fetch()获取分段数据并追加至缓冲区。常见注意事项有：①格式兼容性问题；②时间戳对
HTML中最常用的全局属性是什么？
Jul 10, 2025 am 10:58 AM
class、id、style、data-、title是HTML中最常用的全局属性。class用于指定一个或多个类名以方便样式设置和JavaScript操作；id为元素提供唯一标识符，适用于锚点跳转和JavaScript控制；style允许添加内联样式，适合临时调试但不推荐大量使用；data-属性用于存储自定义数据，便于前后端交互；title用于添加鼠标悬停提示，但其样式和行为受限于浏览器。合理选择这些属性可提升开发效率和用户体验。
如何使用HTML图和Figcaption元素将字幕与图像或媒体关联？
Jul 07, 2025 am 02:30 AM
使用HTML的和可以直观且语义清晰地为图片或媒体添加说明文字。1.用于包裹独立的媒体内容，如图片、视频或代码块；2.则作为其说明文字，置于内部，可位于媒体上方或下方；3.它们不仅提升页面结构清晰度，还增强可访问性和SEO效果；4.使用时应注意避免滥用，适用于需强调并附带说明的内容，而非普通装饰图；5.不可忽视的alt属性，它与figcaption的作用不同；6.figcaption位置灵活，可根据需要放在figure内顶部或底部。正确使用这两个标签，有助于构建语义清晰、易于理解的网页内容。
用HTML5` 标签显示进度条。
Jul 08, 2025 am 02:24 AM
HTML5的标签可直接实现网页进度条。1.基本用法是设置value和max属性，如显示30%进度；2.若进度未知可省略value，仅设max，如表示不确定状态；3.可通过CSS自定义样式，需处理浏览器兼容性；4.常用于上传文件、表单进度、游戏加载等场景；5.注意避免任务过快完成时使用，并考虑旧版IE的兼容问题。
