html中對(duì)于下文的示例代碼詳細(xì)說明（圖）

HTML中列表中共有三種：有序列表、無序列表和定義列表。

1、有序列表是一列使用數(shù)字進(jìn)行標(biāo)記的項(xiàng)目，它使用<li>包含于<ol>標(biāo)簽（ordered lists）內(nèi)；

<ol>
<li>開始部分</li>
<li>次要部分</li>
<li>結(jié)尾部分</li>
</ol>

2、無序列表是一組使用黑點(diǎn)狀進(jìn)行標(biāo)記的項(xiàng)目，它使用<li>包含在<ul>標(biāo)簽（unordered lists）內(nèi)；

<ul>
<li>關(guān)于主題</li>
<li>關(guān)于形式</li>
<li>關(guān)于內(nèi)容</li>
</ul>

3、定義列表語義上表示項(xiàng)目及其注釋的組合，它以<dl>標(biāo)簽（definition lists）開始，自定義列表項(xiàng)以<dt>（definition title）開始，自定義列表項(xiàng)的定義以<dd>（definition description）開始。

<dl>
<dt>CSS</dt>
<dd>CSS概念</dd>
<dd>CSS應(yīng)用</dd>
<dd>CSS hacks</dd>
</dl>

從語義上來講，三組標(biāo)簽分別對(duì)應(yīng)不同具有含義的列表：無序列表適合成員之間無級(jí)別順序關(guān)系的情形；有序列表適合各項(xiàng)目之間存在順序關(guān)系的情形；定義列表用于一個(gè)術(shù)語名對(duì)應(yīng)多重定義或者多個(gè)術(shù)語名同一個(gè)給出的定義，也可以只有術(shù)語名稱或只有定義，也就是說<dt>與<dd>在其中數(shù)量不限、對(duì)應(yīng)關(guān)系不限。

列表的CSS

列表最重要的CSS屬性便是list-style屬性，它的語法如下：

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

list-style-image可定義列表前所使用圖片，list-style-position屬性取值含outside、inside；outside為默認(rèn)值，列表項(xiàng)目標(biāo)記此時(shí)被放置在文本以外，它將環(huán)繞文本在文本之外，inside列表項(xiàng)目旋轉(zhuǎn)在文本以內(nèi)，環(huán)繞文本對(duì)齊。

列表最重要的CSS屬性便是list-style屬性，它的語法如下：

Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->list-style:list-style-image  list-style-position  list-style-type

list-style-image可定義列表前所使用圖片，list-style-position屬性取值含outside、inside；outside為默認(rèn)值，列表項(xiàng)目標(biāo)記此時(shí)被放置在文本以外，它將環(huán)繞文本在文本之外，inside列表項(xiàng)目旋轉(zhuǎn)在文本以內(nèi)，環(huán)繞文本對(duì)齊。

<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">
<li>關(guān)于主題</li>
<li>關(guān)于形式</li>
<li>關(guān)于內(nèi)容</li>
</ul>
<h4>list-style-position為inside</h4>
<ul class="in">
<li>關(guān)于主題</li>
<li>關(guān)于形式</li>
<li>關(guān)于內(nèi)容</li>
</ul>

若列表外標(biāo)簽<ul>或<dl>或<ol>的padding-left設(shè)置為0，且list-style-position為outside時(shí)，列表符號(hào)將不會(huì)顯示，如上例中ul添加padding-left:0;將顯示如下：

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

• disc:默認(rèn)值。實(shí)心圓

• circle:空心圓

• square:實(shí)心方塊

• decimal:阿拉伯?dāng)?shù)字

• lower-roman:小寫羅馬數(shù)字

• upper-roman:大寫羅馬數(shù)字

• lower-alpha:小寫英文字母

• upper-alpha:大寫英文字母

• none:不使用項(xiàng)目符號(hào)

我們可以看到，三種不同列表實(shí)際上只是list-style-type默認(rèn)值不一樣而已，通過設(shè)置list-style-type即可實(shí)現(xiàn)不同顯示效果。

列表之間的嵌套

列表嵌套的html書寫是不少人容易犯的錯(cuò)誤，經(jīng)常寫錯(cuò)格式是這樣的：

<ul>
<li>男性</li>
<li>
<ol>女性
<li>女孩子</li>
<li>姑娘</li>
<li>大媽</li>
</ol>
</li>
</ul>

這里包括兩處錯(cuò)誤：一是<ul>后不允許直接跟文字，二是這里的文字“女性”應(yīng)當(dāng)在第二個(gè)<li>后。正確格式如下：

<ul>
<li>男性</li>
<li>女性
<ol>
<li>女孩子</li>
<li>姑娘</li>
<li>大媽</li>
</ol>
</li>
</ul>

使用適合的標(biāo)簽進(jìn)行合理的嵌套可以實(shí)現(xiàn)很多復(fù)雜的布局，比如常見的tab標(biāo)簽、滑動(dòng)門等完全不需要使用js操作DOM即可完成，而且實(shí)現(xiàn)簡(jiǎn)單，語義性強(qiáng)。例如還有這篇文章定義列表dl打造圖文并茂的CSS列表元素。

下例以文章列表為例，html如下：

<h4>www.51obj.cn站點(diǎn)文章列表摘要</h4>
<dl>
<dt><a href="http://www.51obj.cn/" title="51obj.cn">文章一：javascript程序的優(yōu)化</a></dt>
<dd>文章發(fā)布時(shí)間:2010-4-17</dd>
<dt><a href="http://www.51obj.cn/" title="51obj.cn">文章二：深入解析javascript中eval</a></dt>
<dd>文章發(fā)布時(shí)間：2010-4-17</dd>
<dt><a href="http://www.51obj.cn/" title="51obj.cn">文章三：實(shí)現(xiàn)SQLite高并發(fā)的問題</a></dt>
<dd>文章發(fā)布時(shí)間:2010-4-17</dd>
</dl>

CSS樣式如下：

<style type="text/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;}
</style>

效果圖：

以上就是html中關(guān)于列表的示例代碼詳解（圖）的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！