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
Steps for Docker to build a private warehouse Harbor
Harbor Harbor is an open source solution for buil...
Add a copy code button code to the website code block pre tag
Referring to other more professional blog systems...
Nginx implements high availability cluster construction (Keepalived+Haproxy+Nginx)
1. Components and implemented functions Keepalive...
Solution to the problem that MySQL commands cannot be entered in Chinese
Find the problem Recently, when I connected to th...
HTML Language Encyclopedia
123WORDPRESS.COM--HTML超文本标记语言速查手册<!-- --> !D...
Javascript to achieve drumming effect
This article shares the specific code of Javascri...
How to find the my.ini configuration file in MySQL 5.6 under Windows
Make a note so you can come back and check it lat...
Solve the problem that the MySQL database crashes unexpectedly, causing the table data file to be damaged and unable to start
Problem: The MySQL database crashed unexpectedly ...
10 ways to view compressed file contents in Linux (summary)
Generally speaking, when we view the contents of ...
Use nginx.vim tool for syntax highlighting and formatting configuration nginx.conf file
I use tengine, the installation directory is /usr...
Mysql optimization Zabbix partition optimization
The biggest bottleneck of using zabbix is the d...
Summary of fragmented knowledge of Docker management
Table of contents 1. Overview 2. Application Exam...
Example of using JS to determine whether an element is an array
Here are the types of data that can be verified l...
MySQL 5.5.56 installation-free version configuration method
The configuration method of MySQL 5.5.56 free ins...
Mysql database master-slave separation example code
introduce Setting up read-write separation for th...