當(dāng)前位置：軟件學(xué)堂 > 資訊首頁(yè) > 網(wǎng)絡(luò)編程 > DIV+CSS > html有序無(wú)序定義列表詳解（案例介紹）

html有序無(wú)序定義列表詳解（案例介紹）

2013/8/19 17:15:33作者：佚名來(lái)源：網(wǎng)絡(luò)

移動(dòng)端

在前面小編已經(jīng)把html中有序列表、無(wú)序列表及定義列表通過(guò)單獨(dú)案例的方式進(jìn)行講解，而今天我們來(lái)繪制一個(gè)將有序無(wú)序和自定義結(jié)合在一起的案例，方便大家以后在實(shí)習(xí)過(guò)程能運(yùn)用自如html列表。先來(lái)看看效果展示：

html有序無(wú)序定義列表詳解（案例介紹）

1、無(wú)序列表

無(wú)序列表是一個(gè)項(xiàng)目的列表，此列項(xiàng)目使用粗體圓點(diǎn)（典型的小黑圓圈）進(jìn)行標(biāo)記。無(wú)序列表始于 <ul> 標(biāo)簽。每個(gè)列表項(xiàng)始于 <li>。

2、有序列表

同樣，有序列表也是一列項(xiàng)目，列表項(xiàng)目使用數(shù)字進(jìn)行標(biāo)記。有序列表始于 <ol> 標(biāo)簽。每個(gè)列表項(xiàng)始于 <li> 標(biāo)簽。

3、定義列表

自定義列表不僅僅是一列項(xiàng)目，而是項(xiàng)目及其注釋的組合。自定義列表以 <dl> 標(biāo)簽開(kāi)始。每個(gè)自定義列表項(xiàng)以 <dt> 開(kāi)始。每個(gè)自定義列表項(xiàng)的定義以 <dd> 開(kāi)始。

代碼如下：
	
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>列表</title>
</head>
<body>
<h1 align="center">列表定義</h1>
<ol type="1" >
<li>鏈接</li>
      <ol type="A">
          <li>頁(yè)面之間的跳轉(zhuǎn)</li>
          <li>鏈接結(jié)構(gòu)</li>
          <li>絕對(duì)路徑和相對(duì)路徑</li>
          <li>錨鏈接</li>
		  <li>鏈接下載</li>
      </ol>
<li>字體標(biāo)簽</li>
      <ol type="A">
          <li>字體標(biāo)簽的效果</li>
          <li>字體標(biāo)簽的屬性</li>
          <li>字體標(biāo)簽的seo權(quán)重</li>
      </ol>
<li>區(qū)段標(biāo)簽</li>
	<ol type="A">
          <li>和上下文進(jìn)行分區(qū)和隔離</li>
          <li>  &lt;hr color="#FF0000" /&gt;水平線</li>
          <li>字體標(biāo)簽的seo權(quán)重</li>
      </ol>
<li>HTML主題結(jié)構(gòu)</li>
<ol type="A">
          <li>html頭部標(biāo)記</li>
			  <ol type="I">
          <li>DOCTYPE文檔聲明</li>
          <li>html &lt;title&gt;</li>
          <li>html &lt;base /&gt;</li>
              </ol>
          <li>html主題標(biāo)記</li>
      </ol>
</ol>
<dl>年底電影排行
	   <dt>9月熱播電影
		  <dd>小時(shí)代2</dd>
		  <dd>速度與激情6</dd>
	   </dt>
</dl>
</body>
</html>

請(qǐng)點(diǎn)擊：html有序無(wú)序定義列表 下載本實(shí)例相關(guān)素材及源碼

標(biāo)簽： html有序無(wú)序  列表  案例介紹