Web page HTML code explanation: ordered list and unordered list
|
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. Lists used to organize data <br />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 Create an unordered list <br />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>  4.4.3 Create an ordered list <br />As the name suggests, an ordered list is a list structure in which the list items have a certain order. There can be various serial numbers from top to bottom, 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 |
<<: Vue makes div height draggable
>>: Detailed example of concatenating multiple fields in mysql
Recommend
Differences between ES6 inheritance and ES5 inheritance in js
Table of contents Inheritance ES5 prototype inher...
Writing tab effects with JS
This article example shares the specific code for...
How to deploy MongoDB container with Docker
Table of contents What is Docker deploy 1. Pull t...
Detailed explanation of how to configure openGauss database in docker
For Windows User Using openGauss in Docker Pull t...
MySQL explain obtains query instruction information principle and example
explain is used to obtain query execution plan in...
Simple implementation of Mysql add, delete, modify and query statements
Simple implementation of Mysql add, delete, modif...
Detailed tutorial on installing ElasticSearch 6.x in docker
First, pull the image (or just create a container...
MySQL database master-slave replication and read-write separation
Table of contents 1. Master-slave replication Mas...
How to use the MySQL authorization command grant
The examples in this article run on MySQL 5.0 and...
Briefly explain the use of group by in sql statements
1. Overview Group by means to group data accordin...
Handwriting implementation of new in JS
Table of contents 1 Introduction to the new opera...
How to display web pages properly in various resolutions and browsers
The key codes are as follows: Copy code The code i...
How to completely uninstall mysql under CentOS
This article records the complete uninstallation ...
A complete list of commonly used MySQL functions (classified and summarized)
1. Mathematical Functions ABS(x) returns the abso...
Detailed explanation of the use of HTML header tags
HTML consists of two parts: head and body ** The ...