Web page HTML ordered list ol and unordered list ul

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.

Text box: Figure 4.17 Structure of list elements

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>

4.4.3 Making an ordered list

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

Parameters to make iframe transparent

<iframe src="./ads_top_tian.html" all...

How to run tomcat source code in maven mode

Preface Recently, I was analyzing the startup pro...

Analysis of the principle of Nginx+Tomcat to achieve load balancing and dynamic and static separation

1. Implementation principle of Nginx load balanci...

Detailed explanation of three ways to import CSS files

There are three ways to introduce CSS: inline sty...

The most commonly used HTML tags to create web pages

1. Optimization of commonly used HTML tags HTML s...

A simple way to change the password in MySQL 5.7

This is an official screenshot. After MySQL 5.7 i...

How to configure static network connection in Linux

Configuring network connectivity for Linux system...

ReactJs Basics Tutorial - Essential Edition

Table of contents 1. Introduction to ReactJS 2. U...

Native js to implement drop-down menu

Drop-down menus are also very common in real life...

The difference between VOLUME and docker -v in Dockerfile

There are obvious differences between volume moun...

Implementation of Node connection to MySQL query transaction processing

Table of contents Enter the topic mysql add, dele...

Handtrack.js library for real-time monitoring of hand movements (recommended)

【Introduction】: Handtrack.js is a prototype libra...

How to implement element floating and clear floating with CSS

Basic Introduction to Floating In the standard do...

Simple comparison of meta tags in html

The meta tag is used to define file information an...

js returns to the previous page and refreshes the code

1. Javascript returns to the previous page history...