html中的清單

HTML中清單中共有三種：有序清單、無序清單和定義清單。

1、有序清單是一列使用數字進行标記的項目，它使用<li>包含于<ol>标簽（ordered lists）内；

<ol>

<li>開始部分</li>

<li>次要部分</li>

<li>結尾部分</li>

</ol>

2、無序清單是一組使用黑點狀進行标記的項目，它使用<li>包含在<ul>标簽（unordered lists）内；

<ul>

<li>關于主題</li>

<li>關于形式</li>

<li>關于内容</li>

</ul>

3、定義清單語義上表示項目及其注釋的組合，它以<dl>标簽（definition lists）開始，自定義清單項以<dt>（definition title）開始，自定義清單項的定義以<dd>（definition description）開始。 

<dl>

<dt>CSS</dt>

<dd>CSS概念</dd>

<dd>CSS應用</dd>

<dd>CSS hacks</dd>

</dl>

從語義上來講，三組标簽分别對應不同具有含義的清單：無序清單适合成員之間無級别順序關系的情形；有序清單适合各項目之間存在順序關系的情形；定義清單用于一個術語名對應多重定義或者多個術語名同一個給出的定義，也可以隻有術語名稱或隻有定義，也就是說<dt>與<dd>在其中數量不限、對應關系不限。

清單的CSS

清單最重要的CSS屬性便是list-style屬性，它的文法如下：

list-style:list-style-image||list-style-position||list-style-type

list-style-image可定義清單前所使用圖檔，list-style-position屬性取值含outside、inside；outside為預設值，清單項目标記此時被放置在文本以外，它将環繞文本在文本之外，inside清單項目旋轉在文本以内，環繞文本對齊。

<style type="text/css">

ul{border:dotted 1px #666;}

li{background:#ddd;}

ul.out{list-style-position:outside;}

ul.in{list-style-position:inside;}

</style>

list-style-position為outside

<ul class="out">

<h4>list-style-position為inside</h4>

<ul class="in">

若清單外标簽<ul>或<dl>或<ol>的padding-left設定為0，且list-style-position為outside時，清單符号将不會顯示，如上例中ul添加padding-left:0;将顯示如下：

list-style-type為清單顯示類型 ，它共有9種常見屬性值：

disc:預設值。實心圓

circle:空心圓

square:實心方塊

decimal:阿拉伯數字

lower-roman:小寫羅馬數字

upper-roman:大寫羅馬數字

lower-alpha:小寫英文字母

upper-alpha:大寫英文字母

none:不使用項目符号

我們可以看到，三種不同清單實際上隻是list-style-type預設值不一樣而已，通過設定list-style-type即可實作不同顯示效果。

<a target="_blank" href="http://www.51obj.cn/demo/list-style-type.html">檢視示範</a>

清單之間的嵌套

清單嵌套的html書寫是不少人容易犯的錯誤，經常寫錯格式是這樣的：

&lt;li&gt;男性&lt;/li&gt;

&lt;li&gt;

&lt;ol&gt;女性

&lt;li&gt;女孩子&lt;/li&gt;

&lt;li&gt;姑娘&lt;/li&gt;

&lt;li&gt;大媽&lt;/li&gt;

&lt;/li&gt;

這裡包括兩處錯誤：一是&lt;ul&gt;後不允許直接跟文字，二是這裡的文字“女性”應當在第二個&lt;li&gt;後。正确格式如下：

&lt;li&gt;女性

下例以文章清單為例，html如下：

&lt;h4&gt;www.51obj.cn站點文章清單摘要&lt;/h4&gt;

&lt;dt&gt;&lt;a href="http://www.51obj.cn/" title="51obj.cn"&gt;文章一：javascript程式的優化&lt;/a&gt;&lt;/dt&gt;

&lt;dd&gt;文章釋出時間:2010-4-17&lt;/dd&gt;

&lt;dt&gt;&lt;a href="http://www.51obj.cn/" title="51obj.cn"&gt;文章二：深入解析javascript中eval&lt;/a&gt;&lt;/dt&gt;

&lt;dd&gt;文章釋出時間：2010-4-17&lt;/dd&gt;

&lt;dt&gt;&lt;a href="http://www.51obj.cn/" title="51obj.cn"&gt;文章三：實作SQLite高并發的問題&lt;/a&gt;&lt;/dt&gt;

CSS樣式如下：

h4{font-size:14px; color:#333;}

a{color:#069;}

dl{ border:dashed 1px #666; font-size:14px; padding:4px; background:#FDFBDB;}

dt{clear:left; float:left; padding:4px 0;}

dd{ text-align:right; padding:4px 0;font-size:12px; color:#666;}

效果圖：

本文轉蓬萊仙羽 51CTO部落格，原文連結：http://blog.51cto.com/dingxiaowei/1366105，如需轉載請自行聯系原作者