文章目录

  • ​​一、HTML 列表​​
  • ​​二、无序列表​​
  • ​​三、有序列表​​
  • ​​四、自定义列表​​






一、HTML 列表


列表 是 装载 结构 , 样式 一致的 文字 或 图表 的容器 ;

列表 由于其 整齐 , 整洁 , 有序 的特征 , 类似于表格 , 但是其 组合的自由程度高于表格 , 经常用来进行布局 ;

列表 中 没有 行的概念 , 在每一列中 , 自由摆放 ;



HTML 列表包括如下类型 :

  • 无序列表
  • 有序列表
  • 自定义列表





二、无序列表


无序列表

  • 外层标签 是 ​​<ul>​​ 标签 ,
  • 内层的 列表项 是 ​​<li>​​ 标签 ,

内部的 列表项 是没有顺序的 , 都是并列关系 ;

<!-- 无序列表 -->
<ul>
  <li>无序列表项1</li>
  <li>无序列表项2</li>
  <li>无序列表项3</li>
</ul>



无序列表标签注意事项 :

  • ​​<ul></ul>​​​ 标签 中只能使用 ​​<li></li>​​ 标签 , 不允许使用其它标签 ;
  • ​​<li></li>​​ 标签 相当于一个容器 , 不只是能放文字 , 还可以放复杂的布局 , 容纳几十上百个元素 ;
  • ​​<li></li>​​ 标签 中的 容器 的具体样式 , 一般 由 CSS 设置 ;


代码示例 :

<!DOCTYPE html> 
<html lang="en">
    <head>    
        <meta charset="UTF-8" /> 
        <title>网页标题</title>
        <base target="_blank"/>
    </head>
    <body>
        <!-- 无序列表 -->
        <ul>
            <li>无序列表项1</li>
            <li>无序列表项2</li>
            <li>无序列表项3</li>
        </ul>
    </body>
</html>

【HTML】HTML 列表 ( 无序列表 | 有序列表 | 自定义列表 )_无序列表






三、有序列表


有序列表 中 的 列表项 会按照一定的顺序进行排列 , 其与 无序列表 的区别是 外层使用的是 ​​<ol></ol>​​ 标签 ;

<!-- 有序列表 -->
<ol>
  <li>有序列表项1</li>
  <li>有序列表项2</li>
  <li>有序列表项3</li>
</ol>

代码示例 :

<!DOCTYPE html> 
<html lang="en">
    <head>    
        <meta charset="UTF-8" /> 
        <title>网页标题</title>
        <base target="_blank"/>
    </head>
    <body>
        <!-- 无序列表 -->
        <ul>
            <li>无序列表项1</li>
            <li>无序列表项2</li>
            <li>无序列表项3</li>
        </ul>
        <br/>
        <!-- 有序列表 -->
        <ol>
            <li>有序列表项1</li>
            <li>有序列表项2</li>
            <li>有序列表项3</li>
        </ol>
    </body>
</html>

【HTML】HTML 列表 ( 无序列表 | 有序列表 | 自定义列表 )_HTML_02






四、自定义列表


自定义列表 , 最外层的标签为 ​​<dl></dl>​​​ , 一级标签为 ​​<dt></dt>​​​ , 二级标签为 ​​<dd></dd>​​ ;

<!-- 自定义列表 -->
<dl>
  <dt>河北</dt>
  <dd>衡水</dd>
  <dd>邢台</dd>
  <dd>石家庄</dd>
  
  <dt>山东</dt>
  <dd>菏泽</dd>
  <dd>枣庄</dd>
  <dd>德州</dd>
</dl>

代码示例 :

<!DOCTYPE html> 
<html lang="en">
    <head>    
        <meta charset="UTF-8" /> 
        <title>网页标题</title>
        <base target="_blank"/>
    </head>
    <body>
        <!-- 无序列表 -->
        <ul>
            <li>无序列表项1</li>
            <li>无序列表项2</li>
            <li>无序列表项3</li>
        </ul>
        <br/>
        <!-- 有序列表 -->
        <ol>
            <li>有序列表项1</li>
            <li>有序列表项2</li>
            <li>有序列表项3</li>
        </ol>
        <br/>
        <!-- 自定义列表 -->
        <dl>
            <dt>河北</dt>
            <dd>衡水</dd>
            <dd>邢台</dd>
            <dd>石家庄</dd>
            
            <dt>山东</dt>
            <dd>菏泽</dd>
            <dd>枣庄</dd>
            <dd>德州</dd>
        </dl>
    </body>
</html>

【HTML】HTML 列表 ( 无序列表 | 有序列表 | 自定义列表 )_自定义列表_03