HTML Tutorial: Unordered List

HTML Tutorial: Unordered List
<br />Original text: http://andymao.com/andy/post/102.html
The paragraph has been completed, and some basic application methods have also been discussed. But have they been applied? Of course, the applications can be richer, so these require continuous exploration and thinking in actual work, and then innovation and summary to come up with new application forms. Of course, paragraphs cannot be used everywhere like a panacea, but I believe everyone knows that the role of the "DIV" tag has been expanded (POPO once had an article "<DIV> is not a panacea"), and some people have used it together with CSS to discuss the issue. Here we have to reiterate: DIV is just a semanticless tag in HTML. It can be used for layout or as a semanticless part, while CSS is a style language. If the name is not right, the words will not flow. I am not being old-fashioned here, but this statement will bias people's understanding of the standards. Not understanding the basic levels and infinitely magnifying the functions of labels are not the correct learning attitudes. One of the reasons why I explain various tags and their uses in detail here is that I hope everyone can correctly understand the significance of WEB standards. The correct term should be "xHTML CSS" or "WEB standard" or simply "standard". Today is not the time to complain, let's talk about today's topic: "Unordered List"
I believe everyone has used lists. They are available in Word and many document editors. There are three types of lists in HTML: unordered lists, ordered lists, and definition lists. Eat one bite at a time and do one thing at a time. Today we will only talk about unordered lists, and the lists we will talk about today will not involve CSS beautification work. At this point, everyone should understand that my explanations are separate and not mainly about style beautification. This is also to tell you that label codes are very important. So first we need to understand the list. Our daily life and work are trivial and disorganized, and if we want to achieve efficient and friendly information exchange, we must sort out the information and classify it. This is the only way to effectively convey information. I think a basic function of lists is to use lists to simply summarize similar content. Common uses include: book catalogs, restaurant menus, staff lists, to-do lists, etc. Most of this information is not long information content, but brief titles. Of course, the purpose of a list is not just to summarize title information, and the list does not limit the amount of content. It’s just that we often use lists to summarize mostly title information.
So how do we understand unordered lists? The corresponding of disorder is order, which is easy to understand literally. Order means that it itself indicates the order of sequence, which is strict, and this information itself has a sequential characteristic. For example, when we write the operation steps, we need to clearly specify the first step and the second step. Such information must be in order, but what about disorder? That is to say, it is disordered and has no order at all. Here I would like to give an example for everyone to think about: the order of the list of leaders of government departments is their biggest headache. Although they sometimes write that the ranking is in no particular order, there is actually still a ranking. So here I would like to raise a question: should such a list be an ordered list or an unordered list? Of course, there is no standard answer to this question. Everyone has his or her own way of thinking. So what do you think? Feel free to leave your thoughts in the comments. I won’t tell you what I think here, I hope you can use your brains and think more.
The list tags are:
<ul>
<li>This is the content of the list</li>
<li>This is the content of the list</li>
<li>This is the content of the list</li>
<li>This is the content of the list</li>
</ul>

Here we should notice that the list has two parts, one is the outermost tag <ul></ul>, and the other is the content inside <li></li>. We can understand it this way: <li></li> are standardized small boxes, which mainly store list information, while <ul></ul> is a big box, and its function is to store small boxes. These small boxes will not get lost only if they are placed in a big box. Neat and easy to transport (transplant) and store (positioning). Lists can have many attributes just like paragraphs. For example, we can set an id, class, title, etc. for <ul></ul>, and their characteristics and functions are the same as those in paragraphs. <li></li> can also have these attributes, but in general, lists of the same type are not treated specially.
So the unordered list is basically covered. In fact, the most important content of this article is what kind of information should be used in an unordered list, and these require more analysis and thinking when applied in practice. So for those who haven't used list tags yet, start using list tags and give up using DIV instead of list tags. Or friends who use tables to present lists can also try to change it. Use the unordered list tag from now on. Of course, if you have already used it and found that it still does not satisfy you, then wait for the later explanation of how to use styles to develop the potential of the list. Although what I talked about today is relatively simple, I still hope that friends who read this article can think about the questions I raised above.

<<:  Vue song progress bar sample code

>>:  Installing the ping tool in a container built by Docker

Recommend

How to use Spark and Scala to analyze Apache access logs

Install First you need to install Java and Scala,...

CSS code to distinguish ie8/ie9/ie10/ie11 chrome firefox

Website compatibility debugging is really annoyin...

js and jquery to achieve tab status bar switching effect

Today we will make a simple case, using js and jq...

Django+mysql configuration and simple operation database example code

Step 1: Download the mysql driver cmd enters the ...

vue-router hook function implements routing guard

Table of contents Overview Global hook function R...

SASS Style Programming Guide for CSS

As more and more developers use SASS, we need to ...

How to write object and param to play flash in firefox

Copy code The code is as follows: <object clas...

Complete steps to enable gzip compression in nginx

Table of contents Preface 1. Configure gzip compr...

How to install and configure the Docker Compose orchestration tool in Docker.v19

1. Introduction to Compose Compose is a tool for ...

Linux five-step build kernel tree

Table of contents 0. The kernel tree that comes w...

MYSQL slow query and log example explanation

1. Introduction By enabling the slow query log, M...

CentOS 7 installation and configuration method graphic tutorial

This article records the detailed installation tu...

MySQL backup and recovery design ideas

background First, let me explain the background. ...