current position:Home>HTML lists and semantics

HTML lists and semantics

2021-08-27 07:26:09 Like_ Frost

List is the most commonly used data arrangement in web pages , stay HTML in , There are three types of lists : Ordered list 、 Unordered lists and definition lists .

One 、 Ordered list

1、 Basic usage

Usage mode :<ol> <li></li> </ol>,ol namely ordered list,li namely list, The list items of an ordered list are in order , It is written as follows :

    <ol>
        <li>  List item 1 </li>
        <li>  List item 2 </li>
        <li>  List item 3 </li>
    </ol>
 Copy code 

It's shown in the browser as follows :

  1. List item 1
  2. List item 2
  3. List item 3

notes :ol Labels and li Label collaboration , It can't be used alone , also ol The internal label must be li label .

2、 The symbol of the list item

In the use of ol When listing , The default list item symbol is 1. 2. ……, To change the default list item symbol , have access to type attribute , usage :<ol type="type"> </ol> , It is written as follows :

    <ol type="a">
        <li>  List item 1 </li>
        <li>  List item 2 </li>
        <li>  List item 3 </li>
    </ol>
 Copy code 

It's shown in the browser as follows :

  1. List item 1
  2. List item 2
  3. List item 3

type The attribute values are shown in the following table :

type List item symbol
1 1. 2. 3……
a a. b. c……
A A. B. C……
i i. ii. iii……
I I. II. III……

For such settings , You can also use CSS Of list-style-type attribute .

Two 、 Unordered list

1、 Basic usage

Usage mode :<ul> <li></li> </ul>,ul namely unordered list,li namely list, The list items of an unordered list are unordered , It is written as follows :

    <ul>
        <li>  List item 1 </li>
        <li>  List item 2 </li>
        <li>  List item 3 </li>
    </ul>
 Copy code 

It's shown in the browser as follows :

  • List item 1
  • List item 2
  • List item 3

notes :ul Labels and li Label collaboration , It can't be used alone , also ul The internal label must be li label ;ul The text inside the element , Only in li Add... Inside the element .

2、 The symbol of the list item

In the use of ul When listing , The default list item symbol is ● , To change the default list item symbol , have access to type attribute , usage :<ul type="type"> </ul> , It is written as follows :

    <ul type="circle">
        <li>  List item 1 </li>
        <li>  List item 2 </li>
        <li>  List item 3 </li>
    </ul>
 Copy code 

It's shown in the browser as follows :

  • List item 1
  • List item 2
  • List item 3

type The attribute values are shown in the following table :

type List item symbol
disc Solid round ●
circle The hollow circle ○
square Square ■

For such settings , You can also use CSS Of list-style-type attribute .

3、 ... and 、 Definition list

The definition list consists of two parts : Nouns and descriptions , The basic usage is :

    <dl>
        <dt>  Noun  </dt>
        <dd>  describe  </dd>
    </dl>
 Copy code 

among ,dl namely definition list, Represents a list of definitions ;dt namely definition term, A noun to explain ;dd namely definition description, Express the specific explanation of the noun .

There are the following codes :

        <dl>
            <dt> Noun  1</dt>
            <dd> Noun  1  Description of </dd>
            <dt> Noun  2</dt>
            <dd> Noun  2  Description of </dd>
            <dt> Noun  3</dt>
            <dd> Noun  3  Description of </dd>
        </dl>
 Copy code 

Displayed in the browser as :

Noun 1
Noun 1 Description of
Noun 2
Noun 2 Description of
Noun 3
Noun 3 Description of

Four 、HTML semantic

Although sometimes using different labels can achieve the same effect , But it reduces the code Readability .

For example, you want to implement a default sequence table , have access to ol To achieve , It can also be used. div Manually sign list items , The two can achieve the same effect in the browser , But for programmers , Use ol You can see the meaning of this code at a glance , And can quickly find out the cause of the error when it occurs . This is it. HTML Semantically , Focus on HTML The semantics of can not only enhance the readability of the code , More conducive to search engine optimization (SEO).

Study HTML The purpose is to : Where needed , Use the correct label .

copyright notice
author[Like_ Frost],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210827072606610a.html

Random recommended