This section learns the list elements in HTML. The list form accounts for a relatively large proportion of website design, and the display information is very neat and intuitive, which is easy for users to understand. The advanced role of list elements will be used extensively in the subsequent CSS style learning.
Lists for organizing dataAfter learning so many HTML tags that control the display of web pages, readers can initially create pure article pages. This section learns the list elements in HTML. The list form accounts for a relatively large proportion of website design, and the display information is very neat and intuitive, which is easy for users to understand. The advanced role of list elements will be used extensively in the subsequent CSS style learning.
4.4.1 Structural composition of listThe list element of HTML is a structure enclosed by a list tag, and the list items contained are composed of <li></li>. The specific structure is shown in Figure 4.17.
4.4.2 Making an unordered listAs the name suggests, an unordered list is a list form in which the list items in the list structure have no order. Most web applications use unordered lists, and their list tags are <ul></ul>. The writing method is as follows:
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
<li>List Item 5</li>
</ul>
4.4.3 Make an ordered listAs the name suggests, an ordered list means that the list items in the list structure have a sequence of lists. From top to bottom, there can be various sequence numbers, such as 1, 2, 3, or a, b, c, etc. Create a web page file in the D:/web/ directory, named ul_ol.htm, and write the code as shown in code 4.17.
Code 4.17 List settings: ul_ol.htm
<html>
<head>
<title>List settings</title>
</head>
<body>
<font size=5>
Web front desk technology
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>FLASH</li>
</ul>
Learning of web background
<ol>
<li>ASP</li>
<li>ASP.net</li>
<li>PHP</li>
<li>CGI</li>
<li>Ruby</li>
<li>Python</li>
</ol>
</font>
</body>
</html>
Enter http://localhost/ul_ol.htm in the browser address bar, and the browsing effect is shown in Figure 4.18.
Figure 4.18 Settings of list