h18 HTML Lists 列表
HTML List is a collection of related infomation. The lists can be ordered 有序的,排序的 or unordered 无序的,没有排序的 depending on the requirement. In html we can create both order and unorder lists 列表 by using <ol> and <ul> tags. Each type of list can be decorated using porper attributes or CSS also. There is one more list which is description list - HTML <dl>, <dt> & <dd> tag are used to create description lists.
Lists in HTML
As HTML offers three ways for specifying lists of information namely ordered, unordered, and definition lists. All lists must contain one or more list items.
Examples of HTML Lists
In the below examples we will see unorder list, order list, description lists, and their variation as well, will use CSS to decorate the list.
HTML Unorder Lists
Unorder lists are marked with bullet points, by using html <ul> & <li> tag we can create a unorder list. This is also know as unorder list.
Example
In this example we will create 5 items in a unorder list.
<!DOCTYPE html> <html> <head> <title>HTML List</title> </head> <body> <h2>Example of HTML List</h2> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>Java</li> <li>JavaFX</li> </ul> </body> </html>
HTML Order Lists
Order list are marked with numbers by default, we can xhnage the number into alphabet, roman numbers, etc. By using html <ol> & <li> tag we can create a order list and using type attribute we can change the default numeric marking.
Example
In this example we will create 5 items in a order list, try to use the type attribute to chnage numeric order marking.
<!DOCTYPE html> <html> <head> <title>HTML List</title> </head> <body> <h2>Example of HTML List</h2> <ol> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>Java</li> <li>JavaFX</li> </ol> </body> </html>
HTML Description Lists
Description list is list of items with description, to create a desccription list we can use <dl>, <dt> & <dd> tag.
The <dl>
tag defines a description list.
The <dl>
tag is used in conjunction with <dt> (defines terms/names) and <dd> (describes each term/name).
Example
In this example we will create 3 description list with the descripion.
<!DOCTYPE html> <html> <head> <title>HTML List</title> </head> <body> <h2>Example of HTML List</h2> <dl> <dt>HTML</dt> <dd>HyperText markup languague</dd> <dt>CSS</dt> <dd>Cascading Style Sheet</dd> <dt>JS</dt> <dd>JavaScript</dd> </dl> </body> </html>
HTML Nested Lists
A list created within another list is known as Nested List. HTML also allow nesting of lists within one another to generate a complex document structures.
Example
In the following example, we are nesting an unordered list within an ordered list.
<!DOCTYPE html> <html> <head> <title>HTML List</title> </head> <body> <h2>Example of HTML Nested List</h2> <ol> <li>Item One</li> <li>Item Two <ul> <li>Subitem A</li> <li>Subitem B</li> </ul> </li> <li>Item Three</li> </ol> </body> </html>
Grouping with the <div> Tag
To enhance styling and layout, lists are often wrapped inside the <div> elements. This grouping aids in applying consistent styles and creating visually appealing list structures.
div -- division 划分,分开, block element 块元素
Example
In this example, we are grouping unordered lists with div tag.
<!DOCTYPE html> <html> <head> <title>HTML List</title> </head> <body> <h2>Grouping of HTML List elements with div tag</h2> <div> <p>First List</p> <ol> <li>Item One</li> <li>Item Two</li> </ol> </div> <div> <p>Second List</p> <ol> <li>Item Three</li> <li>Item Four</li> </ol> </div> </body> </html>
Applying CSS to HTML List
Lists can be styled using CSS to enhance visual presentation. Custom styles can be applied to list items, creating unique and visually appealing designs. For this, we use the <style> tag which is a way of specifying internal CSS.
Example
The following example demonstrate how to apply CSS to the HTML list using style tag.
<!DOCTYPE html> <html> <head> <title>HTML List</title> <style> li { font-size: 16px; } div { color: red; } </style> </head> <body> <h2>HTML List with CSS</h2> <div> <p>First List</p> <ol> <li>Item One</li> <li>Item Two</li> </ol> </div> <div> <p>Second List</p> <ol> <li>Item Three</li> <li>Item Four</li> </ol> </div> </body> </html>
Marker Types in HTML Lists
CSS allows customization of marker types for list items. To do so, we use the CSS list-style-type property which can be set to change markers to circles, squares, or other symbols.
Example
In this example, we are using the list-style-type property of CSS to set the markers of list items.
<!DOCTYPE html> <html> <head> <title>HTML List</title> <style> li { font-size: 16px; list-style-type: square; } </style> </head> <body> <h2>HTML list-style-type Property</h2> <div> <p>First List</p> <ol> <li>Item One</li> <li>Item Two</li> </ol> </div> <div> <p>Second List</p> <ol> <li>Item Three</li> <li>Item Four</li> </ol> </div> </body> </html>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
2014-05-18 Windows Myeclipse 10 安装 Perl 插件
2010-05-18 14个优化网站性能提高网站访问速度技巧
2009-05-18 如何查看sql server版本号
2009-05-18 BlogEngine.NET Extensions
2009-05-18 BlogEngine.NET Widgets
2008-05-18 C语言程序设计 练习题参考答案 第八章 文件(2)
2008-05-18 C语言程序设计 练习题参考答案 第八章 文件(1)