HTML筆記--列表標簽

標簽（空格分隔）： HTML

列表標簽：

• 定義列表：帶縮進的列表
  如這種樣式的：
  <dl>
  <dt>自定義縮進列表</dt>
  <dd>自定義1</dd>
  <dd>自定義1</dd>
  <dd>自定義1</dd>
  </dl>

• 通過以下幾個標簽來實現(xiàn)：

  • <dl></dl>（表示列表內(nèi)容）
  • <dt></dt>(表示不需要縮進的內(nèi)容)
  • <dd></dd>（表示需要縮進的內(nèi)容）
  • 注意后兩者需要在dl標簽內(nèi)部
  • 代碼：

    <dl>
        <dt>自定義縮進列表</dt>
        <dd>自定義1</dd>
        <dd>自定義1</dd>
        <dd>自定義1</dd>
    </dl>

• 有序標簽：
  想要實現(xiàn)如下效果：
  <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>有序列表的范圍
    • 這個標簽中有設(shè)置排序方式的屬性 1（默認） ；a； i
  • <li></li>表示列表每項的具體內(nèi)容

• 代碼

  <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>

• 無序標簽：
  • 想要實現(xiàn)這種標簽效果：
    <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>表示列表項的具體內(nèi)容
  • 代碼如下：

  `<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>`