Table of contents
background:
1. Ordered List:
Ordered list is one of the earliest list types and was first introduced in HTML 2.0. In HTML 4.01, ordered lists were further standardized, with the addition of the <ol> tag and the type attribute to support mixed numeric and alphanumeric ordered lists.
2. Unordered List:
Unordered list was originally introduced in HTML 2.0. In HTML 4.01, unordered lists were further standardized, and the <ul> tag and type attribute were added to support unordered lists of custom symbols.
3. Custom List: Custom List
was first introduced in HTML 4.01, which allows developers to use CSS style sheets to customize attributes such as symbols, colors, and fonts of the list. In HTML 5, the syntax of custom lists is more concise, and custom symbols can be specified through the class attribute of the <li> element.
process:
Ordered list:
Introduction:
As the name suggests, an ordered list is a way of listing items in a specific order. Each item is marked with a unique number or letter. It can be used in: operating instructions (how to operate each step), web pages Popularity rankings (clearly know the level of popularity), time order (the order in which everything happens), etc...
Symbols: <ol> </ol>, <li></li>, which can be passed through the Type attribute To modify the numbering type in the project list, expression: Type="", below I use Arabic numerals (the default is numbers or not), letters, and Roman letters to represent the serial number of the list
Code display:
<html>
<head>
<tiele>有序列表</title>
</head>
<body>
<ol type="1"><!--默认阿拉伯数字类型，可以不写-->
<li>唐僧</li>
<li>孙悟空</li>
<li>猪八戒</li>
<li>沙和尚</li>
</ol>
<hr/><!--分隔符，展示效果更佳-->
<ol type="A"><!--字母类型表示-->
<li>唐僧</li>
<li>孙悟空</li>
<li>猪八戒</li>
<li>沙和尚</li>
<hr/><!--分隔符，展示效果更好-->
<ol type="I"><!--罗马数字类型表示-->
<ul>
<li>唐僧</li>
<li>孙悟空</li>
<li>猪八戒</li>
<li>沙和尚</li>
</ol>
</body>
</html>Show results:
Unordered list:
Introduction:
An unordered list is a list of items in no order. It is a commonly used list type. It usually presents information that does not need to be displayed in a specific order. It is used in: function lists (know the name of each function or operation), bills (convenient for users to search and browse), project list (let users clearly know the name and introduction of each project).
Symbols: <ul> </ul>, <li></li>, you can modify the type in the item list through the Type attribute, expression: Type="", below I use disk (default dot, can be omitted (write), square (square), circle (circle) mark
Code display:
<html>
<head>
<tiele>无序列表</title>
</head>
<body>
<ul type="disk"><!--默认圆点类型，可以不写-->
<li>唐僧</li>
<li>孙悟空</li>
<li>猪八戒</li>
<li>沙和尚</li>
</ul>
<hr/><!--分隔符，展示效果更好-->
<ul type="square"><!--方块类型表示-->
<li>唐僧</li>
<li>孙悟空</li>
<li>猪八戒</li>
<li>沙和尚</li>
<hr/><!--分隔符，展示效果更好-->
<ul type="I"><!--圆圈类型表示-->
<ul>
<li>唐僧</li>
<li>孙悟空</li>
<li>猪八戒</li>
<li>沙和尚</li>
</ul>
</body>
</html>Show results:
Custom list:
Introduction:
Custom List (Custom List) is a list type that can be used as bullets and styles. It can be used to present information with specific style requirements. Applicable to: article structure (set different symbols and styles), movie form (set different styles), etc.
Symbols: <dl> </dl>, <dt></dt>, <dd></dd> can be passed Type attribute to modify the type in the project list, expression: Type="" , <dl> can understand the title of the article, <dt> can understand the subtitle of the article, <dd> can understand the content of the article, below I will Let me explain it with an article from Journey to the West.
Code display:
<head>
<title>自定义列表</title>
</head>
<body>
<font size="6" face="全新硬笔行书简"><!--设置字体大小和字体样式-->
<h1><dl>西游记</h1>
<dt>简介：</dt>
<dd>《西游记》是中国古代第一部浪漫主义章回体长篇神魔小说。今见最早的《西游记》版本是明代万历二十年金陵世德堂《新刻出像官板大字西游记》，未署作者姓名。 鲁迅、董作宾等人根据《淮安府志》“吴承恩《西游记》”的记载予以最终论定“吴承恩原著”。
该小说主要讲述了孙悟空出世，跟随菩提祖师学艺及大闹天宫后，遇见了唐僧、猪八戒、沙僧和白龙马，西行取经，一路上历经艰险，降妖除魔，经历了九九八十一难，终于到达西天见到如来佛祖，最终五圣成真的故事。该小说以“玄奘取经”这一历史事件为蓝本，经作者的艺术加工，深刻地描绘出明代百姓的社会生活状况。
《西游记》是中国神魔小说的经典之作，达到了古代长篇浪漫主义小说的巅峰，与《三国演义》《水浒传》《红楼梦》并称为中国古典四大名著。《西游记》自问世以来在民间广为流传，各式各样的版本层出不穷。明代刊本有六种，清代刊本、抄本也有七种，典籍所记已佚版本十三种。鸦片战争以后，大量中国古典文学作品被译为西文，《西游记》渐渐传入欧美，被译为英、法、德、意、西、手语、世（世界语）、斯（斯瓦希里语）、俄、捷、罗、波、日、朝、越等语言。</dd>
</dl>
<body>
</html>Show results:
Summarize:
In HTML, whether it is ordered, unordered, or custom lists, they all act on the list of items. These list elements can help developers better organize and present information, making the page clearer, easier to read, and easier to read. navigation. At the same time, they are also one of the most basic elements in HTML