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 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

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 Create 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 Create an ordered list 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>

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>

</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

jQuery implements clicking left and right buttons to switch pictures

Recommend

Tencent Interview: What are the reasons why a SQL statement executes very slowly? ---Don't watch the regret series (recommended)

To be honest, this question involves a lot of cor...

Detailed explanation of the solution to the Baidu https authentication prompt "Please redirect your http site 301 to the https site"

I recently wanted to convert a website to https a...

Web page HTML code explanation: ordered list and unordered list

jQuery implements clicking left and right buttons to switch pictures

How to implement scheduled backup of MySQL in Linux

nginx solves the problem of slow image display and incomplete download

How to allow remote connection in MySql

Implementation of waterfall layout + dynamic rendering

A complete list of meta tag settings for mobile devices

Detailed explanation of the actual process of master-slave synchronization of MySQL database

Native js implements regular validation of the form (submit only after validation)

Cross-database association query method in MySQL

How to use mqtt in uniapp project

Recommend

Tencent Interview: What are the reasons why a SQL statement executes very slowly? ---Don't watch the regret series (recommended)

Remote Desktop Connection between Windows and Linux

How to install MySQL database on Ubuntu

A detailed introduction to the CSS naming specification BEM from QQtabBar

WeChat applet picker multi-column selector (mode = multiSelector)

Mysql5.6.36 script compilation, installation and initialization tutorial

How to import CSS styles into HTML external style sheets

How to draw special graphics in CSS

Detailed explanation of the solution to the Baidu https authentication prompt "Please redirect your http site 301 to the https site"

The button has a gray border that is ugly. How to remove it?

Simple writing of MYSQL stored procedures and functions

Understand the difference between BR and P tags through examples

js realizes the dynamic loading of data by waterfall flow bottoming out

How to add abort function to promise in JS

MySQL decimal unsigned update negative numbers converted to 0