Skip to Content

HTML列表标签

列表是一个父子组合标签，上阵父子兵，不能单独出现。

当HTML标签形成嵌套，必须注意代码的缩进（Tab键），<li>标签不能单独使用，它必须放到<ul>或者<ol>中使用，<ul>和<ol>的子标签只能是<li>，绝对不能出现其它任何标签。

<li>标签是容器，内部可以放任何其他标签。

无序列表 <ul>

无序列表使用<ul></ul>标签，每个列表项都是<li></li>标签。

  • 无序列表有type属性，可以定义前导符号的样式，但是在HTML5中已经被废弃，建议使用CSS替代。
type属性值描述
disc默认值，实心圆
circle空心圆
square实心方块
<ul>
    <li>牛奶</li>
    <li>
        咖啡
        <!-- <li>标签里面可以有其他标签 -->
        <p>有的咖啡会很苦</p>
    </li>
    <li>
        水果
        <!-- <li>标签里面可以嵌套<ul>标签 -->
        <ul>
            <li>苹果</li>
            <li>香蕉</li>
            <li>葡萄</li>
        </ul>
    </li>
</ul>

有序列表 <ol>

有序列表使用<ol></ol>标签，每个列表项都是<li></li>标签。

  • ol标签可以设置type属性，用来设置编号的类型：
type属性值描述
a表示小写英文字母编号
A表示大写英文字母编号
i表示小写罗马数字编号
I表示大写罗马数字编号
1表示大写罗马数字编号
  • start属性值必须是一个整数，指定了列表编号的起始值，此属性的值应为阿拉伯数字，尽管列表条目的编号类型 type属性可能指定为了罗马数字编号等其他类型的编号。
  • reversed属性指定列表中的条目是否是倒序排列的，reversed属性不需要值，只需要写reversed单词即可，这是HTML5的全新特性
<ol type="1" start="10" reversed>
    <li>张三</li>
    <li>李四</li>
    <li>王五</li>
    <li>赵六</li>
</ol>

定义列表 <dl>、<dt>和<dd>

需要逐条给出定义描述的列表，就是定义列表，<dl>是定义列表标签，内容交替出现<dt>、<dd>标签。也允许<dt>和<dd>不交替出现，而是分别处于不同的定义列表中。

<dl>
    <dt>HTML</dt>
    <dd>超文本标记语言</dd>
    <dt>CSS</dt>
    <dd>层叠式样式表</dd>
</dl>
<dl>
    <dt>js</dt>
    <dd>js脚本程序</dd>
</dl>

HTML表格标签

Last updated on