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
Write your HTML like this to make your code more compatible
For example, users who need screen reading softwar...
Vue implements the magnifying glass effect of tab switching
This article example shares the specific code of ...
New settings for text and fonts in CSS3
Text Shadow text-shadow: horizontal offset vertic...
A simple way to implement all functions of shopping cart in Vue
The main functions are as follows: Add product in...
How to solve the phantom read problem in MySQL
Table of contents Preface 1. What is phantom read...
Optimized record of using IN data volume in Mysql
The MySQL version number is 5.7.28. Table A has 3...
MySQL InnoDB MRR Optimization Guide
Preface MRR is the abbreviation of Multi-Range Re...
iframe parameters with instructions and examples
<iframe src=”test.jsp” width=”100″ height=”50″...
Create a new user in Linux and grant permissions to the specified directory
1 Create a user and specify the user's root p...
How to use docker to deploy spring boot and connect to skywalking
Table of contents 1. Overview 1. Introduction to ...
Docker container operation instructions summary and detailed explanation
1. Create and run a container docker run -it --rm...
How to use CSS to achieve two columns fixed in the middle and adaptive
1. Use absolute positioning and margin The princi...
Detailed discussion of MySQL stored procedures and stored functions
1 Stored Procedure 1.1 What is a stored procedure...
Explain the difference between iframe and frame in HTML with examples
I don't know if you have used the frameset at...
Solution for front-end browser font size less than 12px
Preface When I was working on a project recently,...