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>表示一個項目下的更詳細的內容
轉載于:https://blog.51cto.com/raffaele/1553673
總結
以上是生活随笔為你收集整理的HTML学习笔记2—列表与清单的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 流媒体开发之开源项目live555---
- 下一篇: 直接让浏览器下载文件而不打开