List tags in HTML

The characteristics of the list are neat, tidy, and ordered, and the layout will be more free and convenient; the
list can be divided into three categories: unordered list , ordered list , custom list ;
1, unordered list

<p>无序列表 基本语法格式</p>
<p>您的爱好是:</p>
<ul>
    <li>篮球</li>
    <li>长跑</li>
    <li>游泳</li></ul>

Result graph:
Insert picture description here
Note:
a. There is no order level between the lists of the unordered list and they are parallel;
b. Only li tags can be nested between ul tags, and writing text directly in ul tags and other tags are not Yes, you can write text and other labels in the li tag. The li tag is equivalent to a large container;
c. The unordered list will have its own style attributes. The black dot is its default attribute, but in actual layout, Will set the style in CSS.

2. Ordered list

<p>有序列表 基本语法格式</p>
<p>分数排行榜:</p>
<ol>
    <li>100</li>
    <li>95</li>
    <li>80</li></ol>

Result graph:
Insert picture description here
Note:
a. An ordered list is an ordered list, and each list item will be arranged in a certain order;
b. Only li tags can be nested between ol tags, and text and other tags are directly written in ol tags. No, you can write text and other labels in the li tag. The li tag is equivalent to a large container;
c. The ordered list will have its own style attributes, the number is its default attribute, but in the actual layout, it will Set the style in CSS.

3. User-defined list
User-defined list is often used to explain and describe terms or nouns. There is no symbol in front of each list item;

<p>自定义列表 基本语法格式</p>
<dl>  <!--没有样式-->
    <dt>关于我们</dt>
    <dd>CSDN博客</dd>
    <dd>weixin_46410264</dd>
    <dd>ResidualBridge</dd>
</dl>

Result graph:
Insert picture description here
Note:
a.dl tags can only contain dt tags and dd tags;
b.dt tags and dd tags are not limited in number, often a dt tag corresponds to multiple dd tags;
c.dt tags and dd tags belong to The parallel relationship does not belong to the inclusion relationship.

Published 13 original articles · praised 2 · visits 326

Guess you like

Origin blog.csdn.net/weixin_46410264/article/details/104564597