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
Detailed explanation of how to automatically add prefix plugin after CSS3 packaging: autoprefixer
The project scaffolding built with vue-cli has al...
Steps to use ORM to add data in MySQL
【Foreword】 If you want to use ORM to operate data...
Solution to MySQL restarting automatically
Preface Recently, a problem occurred in the test ...
Linux CentOS6.5 yum install mysql5.6
This article shares the simple process of install...
Pure CSS to add style to select (no script) implementation
Change the default style of select, usually throug...
Nginx tp3.2.3 404 problem solution
Recently I changed Apache to nginx. When I moved ...
Detailed analysis of each stage of nginx's http request processing
When writing the HTTP module of nginx, it is nece...
Two ways to enable firewall in Linux service
There are two ways: 1. Service method Check the f...
A brief analysis of JS original value and reference value issues
Primitive values -> primitive types Number S...
Demonstration of building ElasticSearch middleware and common interfaces under centos7 in Linux system
1. Introduction to Middleware 1. Basic concepts E...
Detailed steps for developing WeChat mini-programs using Typescript
We don't need to elaborate too much on the ad...
mysql 8.0.18 mgr installation and its switching function
1. System installation package yum -y install mak...
Analysis of MySQL's planned tasks and event scheduling examples
This article uses examples to describe MySQL'...
Docker configures the storage location of local images and containers
Use the find command to find files larger than a ...
Detailed steps to install a virtual machine and use CentOS 8 using VMware 15
Preface: I'm currently learning Linux and .Ne...