HTML笔记--列表标签

标签（空格分隔）： HTML

列表标签：

• 定义列表：带缩进的列表
  如这种样式的：
  <dl>
  <dt>自定义缩进列表</dt>
  <dd>自定义1</dd>
  <dd>自定义1</dd>
  <dd>自定义1</dd>
  </dl>

• 通过以下几个标签来实现：

  • <dl></dl>（表示列表内容）
  • <dt></dt>(表示不需要缩进的内容)
  • <dd></dd>（表示需要缩进的内容）
  • 注意后两者需要在dl标签内部
  • 代码：

    <dl>
        <dt>自定义缩进列表</dt>
        <dd>自定义1</dd>
        <dd>自定义1</dd>
        <dd>自定义1</dd>
    </dl>

• 有序标签：
  想要实现如下效果：
  <ol type="1"><li>传智播客</li><li>黑马</li><li>千峰</li></ol>
  <ol type="i"><li>传智播客</li><li>黑马</li><li>千峰</li></ol>
  <ol type="a"><li>传智播客</li><li>黑马</li><li>千峰</li></ol>

• 需要通过

  • <ol></ol>有序列表的范围
    • 这个标签中有设置排序方式的属性 1（默认） ；a； i
  • <li></li>表示列表每项的具体内容

• 代码

  <ol type="1">

        <li>传智播客</li>
        <li>黑马</li>
        <li>千峰</li>
    </ol>

  <ol type="i">

        <li>传智播客</li>
        <li>黑马</li>
        <li>千峰</li>
    </ol> 

  <ol type="a">

        <li>传智播客</li>
        <li>黑马</li>
        <li>千峰</li>
    </ol>

• 无序标签：
  • 想要实现这种标签效果：
    <ul type="circle"><li>传智播客</li><li>黑马</li><li>千峰</li></ul>
    <ul type="disc"><li>传智播客</li><li>黑马</li><li>千峰</li></ul>
    <ul type="square"><li>传智播客</li><li>黑马</li><li>千峰</li></ul>

• 需要通过
  • <ul></ul>
    • 其中ul的属性type有以下几种方式：1.空心圆 circle ；2.实心圆： disc；3.实心方框：square；
  • <li><li>表示列表项的具体内容
  • 代码如下：

  `<ul type="circle"> 

        <li>传智播客</li> 
        <li>黑马</li> 
        <li>千峰</li> 
    </ul>`

 `<ul type="disc">

        <li>传智播客</li>
        <li>黑马</li>
        <li>千峰</li>
    </ul>`   

 `<ul type="square">

        <li>传智播客</li>
        <li>黑马</li>
        <li>千峰</li>
    </ul>`