4.4.3 Making an ordered list
Web page HTML ordered list ol and unordered list ul
|
Lists for organizing data After learning so many HTML tags that control the display of web pages, readers can begin to create pure article pages. In this section, we will learn about list elements in HTML. Lists account for a relatively large proportion in website design. They display information very neatly and intuitively, making it easy for users to understand. In the subsequent CSS style learning, the advanced functions of list elements will be used extensively.
4.4.1 List structure The HTML list element 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 Creating an unordered list As the name suggests, an unordered list is a list structure in which the list items have no order. Most lists in web applications use unordered lists, and their list tags use <ul></ul>. The writing method is as follows: <ul> <li>List Item 1</li> <li>List Item 2</li> <li>List Item Three</li> <li>List Item Four</li> <li>List Item Five</li> </ul> As the name suggests, an ordered list is a list structure in which the list items have a certain order. From top to bottom, they can have various sequence numbers, such as 1, 2, 3 or a, b, c, etc. Create a web page file in the D:\web\ directory, name it ul_ol.htm, and write the code as shown in Code 4.17. List settings: ul_ol.htm <html> <head> <title>List Settings</title> </head> <body> <font size="5"> Web front-end technology <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>FLASH</li> </ul> Web backend learning <ol> <li>ASP</li> <li>ASP.net</li> <li>PHP</li> <li>CGI</li> Ruby Python </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 List settings |
<<: Implementation method of Nginx+tomcat load balancing cluster
>>: A brief discussion on the CSS overflow mechanism
Recommend
More elegant processing of dates in JavaScript based on Day.js
Table of contents Why use day.js Moment.js Day.js...
Pure CSS3 to create page switching effect example code
The one I wrote before is too complicated, let’s ...
How to use node to implement static file caching
Table of contents cache Cache location classifica...
Using text shadow and element shadow effects in CSS
Introduction to Text Shadows In CSS , use the tex...
How to display web pages properly in various resolutions and browsers
The key codes are as follows: Copy code The code i...
How to use Portainer to build a visual interface for Docker
Portainer Introduction Portainer is a graphical m...
CSS sets Overflow to hide the scroll bar while allowing scrolling
CSS sets Overflow to hide the scroll bar while al...
Getting Started Guide to Converting Vue to React
Table of contents design Component Communication ...
How to load Flash in HTML (2 implementation methods)
First method : CSS code: Copy code The code is as ...
Detailed explanation of the role of key in React
Table of contents Question: When the button is cl...
XHTML Getting Started Tutorial: XHTML Hyperlinks
It is no exaggeration to say that hyperlinks conne...
Analysis and solution of the reason why the frameset tag in HTML cannot be displayed normally
<frameset></frameset> is familiar to e...
About the problem of no virtual network card after VMware installation
1 Problem description: 1.1 When VMware is install...
MySQL 5.7 JSON type usage details
JSON is a lightweight data exchange format that u...
MySQL 5.7.18 binary package installation tutorial under Linux (without default configuration file my_default.cnf)
I am currently learning MySQL. I am a complete no...