HTML學習筆記2—列表與清單

    HTML中,列表有三種類型:無序列表(符號列表)、有序列表(編號列表)、定義列表。

    一、無序號條例式清單<ul>與<li>

      1.格式:

        <ul>

            <li>…</li>

            <li>…</li>

            …

            <li>…</li>

        </ul>

        <ul>無序條列清單的開始。</ul>表示結束。<li>…</li>表示一個項目

        不能在<ul></ul>中輸入文字,必須要在<li></li>中輸入文字,才能顯示在網頁中。

        <ul>與<li>是塊級元素,會自動換行。

      2.<ul><li>的屬性

        屬性名稱     屬性值                 說明

        type         disc                  實心圓(默認值)

                     circle                空心圓

                     square                實心方塊

        style        list-style:none;      清除列表前的項目符號

                     jpadding-left:0px;    設置列表前縮進(0px表示是0像素)

        如:<ul type="circle" style="jpadding-left:10px;">表示設置該列表所有項的項目符號爲空心圓,左縮進爲10像素

            <li style=" list-style:none; jpadding-left:0px;">清除當前列表項前的縮進和項目符號

      3.列表嵌套:第一級默認實心圓,第二級默認空心圓,第三級默認實心方塊

    二、有序號條例式清單<ol>與<li>

      1.格式:

        <ol>

            <li>列表的項目</li>

            <li>列表的項目</li>

    <li>列表的項目</li>

    <li>列表的項目</li>

    <li>列表的項目</li>

    <li>列表的項目</li>

        </ol>

        <ol>有序條列清單的開始。</ol>表示結束。<li>…</li>表示一個項目

      2.<ol><li>的屬性

        屬性名稱      屬性值                    說明

        type          1                      表示以1,2,3來表示

                      a                      表示以a,b,c來表示

                      A                      表示以A,B,C來表示

                      i                      表示以i,ii ,iii 來表示

                      I                      表示以I,II,III 來表示

        style         list-style:none;       清除列表前的編號

                      jpadding-left:0px;     設置列表前縮進(0px表示是0像素)

        start         數字                   設置起始位置是第幾位(<li>沒有此屬性)

        如:<ol type="A" start="6">表示列表的編號會從第六個大寫字母F開始編號。

            其他屬性用法與<ul>類似,不再贅述

    三、敘述式清單(定義列表)

      1.格式:

        <dl>

    <dt>定義術語(項目標題)</dt>

    <dd>定義說明(標題小具體的內容)</dd>

    <dd>定義說明(標題小具體的內容)</dd>

    <dd>定義說明(標題小具體的內容)</dd>

    <dd>定義說明(標題小具體的內容)</dd>

    <dt>定義術語(項目標題)</dt>

    <dd>定義說明(標題小具體的內容)</dd>

    <dd>定義說明(標題小具體的內容)</dd>

    <dd>定義說明(標題小具體的內容)</dd>

    <dd>定義說明(標題小具體的內容)</dd>

    <dt>定義術語(項目標題)</dt>

    <dd>定義說明(標題小具體的內容)</dd>

    <dd>定義說明(標題小具體的內容)</dd>

    <dd>定義說明(標題小具體的內容)</dd>

    <dd>定義說明(標題小具體的內容)</dd>

        </dl>

        <dl>敘述清單的開始    <dt>表示一個項目    <dd>表示一個項目下的更詳細的內容

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章