HTML列表标签详解：无序列表与自定义列表-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_66455621/article/details/123224445

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表标签</title>
</head>
<body>
    <h2><b>&#160;列表标签</b></h2>
    
    <p>表格是用来显示数据的，那么<font color="red">列表就是用来布局的</font>。</p>
    <p><font color="red">列表</font>最大的特点就是整齐、整洁，它作为布局会更加自由和方便。</p>
    <p>根据使用情景不同，列表可以分为三大类：<font color="red">无序列表、有序列表</font>和<font color="red">自定义列表</font></p>

    <h2><b>&#160;无序列表（重点）</b></h2>
    <font color="red">&lt ul &gt</font>标签表示HTML页面中项目中无序列表，一般会以项目符号呈现列表项，而列表项使用<font color="red">&lt li &gt</font>标签定义。

    <ol>
        <p><li>无序列表的各个列表项之间没有顺序级别之分，是并列的。</li></p>
        <p><li>&lt ul &gt &lt /ul &gt 中只能嵌套 &lt li &gt &lt /li &gt,直接在&lt ul &gt &lt /ul &gt标签中输入其他标签或者文字的做法是不被允许的。</li></p>
        <P><li>&lt li &gt &lt /li &gt之间相当于容器，可以容纳所有元素。</li></P>
        <p><li>无序列表会带有自己的模式属性，但在实际使用时，我们会使用CSS来设置。</li></p>
    </ol>

    <h2><b>&#160;自定义列表（重点）</b></h2>
    在HTML标签中，<font color="red">&lt dl &gt</font>标签用于定义描述列表（或定义列表），该标签会与<font color="red">&lt dl &gt</font>（定义项目/名字）和<font color="red">&lt dd &gt</font>（描述每一个项目/名字）一起使用。<p></p>
    其基本语法如下：<p></p>
    &lt dl &gt<p></p>
        &nbsp;&nbsp;&lt dt &gt 名词1 &lt /dt &gt<p></p>
        &nbsp;&nbsp;&lt dd &gt名词1解释1 &lt /dd &gt<p></p>
        &nbsp;&nbsp;&lt dd &gt词1解释2 &lt /dd &gt<p></p>
    &lt /dl &gt<p></p>

<h3><b>案例</b></h3>
<dl>
    <dt>关于我们</dt>
    <dd>新浪微博</dd>
    <dd>官方微信</dd>
    <dd>联系我们</dd>
</dl><p></p>

<ol>
    <li>&lt dt &gt  &lt /dt &gt 里面只能包含&lt dt &gt 和 &lt dd &gt</li><p> </p>
    <li>&lt dt &gt 和 &lt dd &gt 个数没有限制，经常是一个&lt dt &gt 对应多个&lt dd &gt</li>
</ol>

<table align="center" border="1" cellpadding="10" cellspacing="0">
    <tr>
        <th>标签名</th>
        <th>定义</th>
        <th>说明</th>
    </tr>
    <tr>
        <td>&lt ul &gt &#160; &lt /ul &gt</td>
        <td>无序标签</td>
        <td>里面只能包含li没有顺序，使用较多，li里面可以包含任何标签</td>
    </tr>
    <tr>
        <td>&lt ol &gt &#160; &lt /ol &gt</td>
        <td>有序标签</td>
        <td>里面只能包含li，有顺序，使用相对较少。li里面可以包含任何标签</td>
    </tr>
    <tr>
        <td>&lt dl &gt &#160; &lt /dl &gt</td>
        <td>自定义列表</td>
        <td>里面只能包含dt和dd，dt和dd里面可以放任何标签</td>
    </tr>
</table><p></p>
</body>
</html>

列表标签

表格是用来显示数据的，那么列表就是用来布局的。

列表最大的特点就是整齐、整洁，它作为布局会更加自由和方便。

根据使用情景不同，列表可以分为三大类：无序列表、有序列表和自定义列表

无序列表（重点）

< ul >标签表示HTML页面中项目中无序列表，一般会以项目符号呈现列表项，而列表项使用< li >标签定义。

无序列表的各个列表项之间没有顺序级别之分，是并列的。
< ul > < /ul > 中只能嵌套 < li > < /li >,直接在< ul > < /ul >标签中输入其他标签或者文字的做法是不被允许的。
< li > < /li >之间相当于容器，可以容纳所有元素。
无序列表会带有自己的模式属性，但在实际使用时，我们会使用CSS来设置。

自定义列表（重点）

在HTML标签中，< dl >标签用于定义描述列表（或定义列表），该标签会与< dl >（定义项目/名字）和< dd >（描述每一个项目/名字）一起使用。

其基本语法如下：

< dl >

< dt > 名词1 < /dt >

< dd >名词1解释1 < /dd >

< dd >词1解释2 < /dd >

< /dl >

案例

关于我们

新浪微博

官方微信

联系我们

< dt > < /dt > 里面只能包含< dt > 和 < dd >
< dt > 和 < dd > 个数没有限制，经常是一个< dt > 对应多个< dd >

标签名	定义	说明
< ul > < /ul >	无序标签	里面只能包含li没有顺序，使用较多，li里面可以包含任何标签
< ol > < /ol >	有序标签	里面只能包含li，有顺序，使用相对较少。li里面可以包含任何标签
< dl > < /dl >	自定义列表	里面只能包含dt和dd，dt和dd里面可以放任何标签