專注Java教育14年
全國咨詢/投訴熱線：400-8080-105
更新時間：2021-03-22 17:53:12 來源：動力節(jié)點(diǎn) 瀏覽1151次
在使用HTML進(jìn)行前端開發(fā)的網(wǎng)站網(wǎng)頁中，漂亮的導(dǎo)航、整齊規(guī)范的文章標(biāo)題列表和圖片列表都是網(wǎng)頁設(shè)計的重要內(nèi)容。這些都是離不開HTML里一個重要的元素----列表，在HTML中有無序列表、有序列表和定義列表3種類型。其中，無序列表應(yīng)用最為廣泛，下面，我們就來一起認(rèn)識一下這3種HTML列表。
列表在文檔編輯中也是十分常見的，我們可以結(jié)合word里的列表來對比學(xué)習(xí)HTML的列表元素。在word中有符號列表、編號列表、多級列表。在HTML中也提供了三種類型的列表，分別是無序列表、有序列表和定義列表。無序列表沒有先后順序之分，類似word中的符號列表，有序列表用數(shù)字或字母作為順序，類似word中的編號列表，注意：定義列表是不同于word中的多級列表。簡單說來，定義列表項可分為上下兩部分，上面列出一個項目，下面是該項目的詳細(xì)內(nèi)容。
1、有序列表
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>教程</title>
</head>
<body>
<ol type="A">
????<li>蘋果</li>
????<li>香蕉</li>
????<li>雪梨</li>
????<li>西瓜</li>
? ? </ol>
? ? </body>
? ? </html>
有序列表-水果
2、無序列表
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>教程</title>
</head>
<body>
<ul type="A">
????<li>蘋果</li>
????<li>香蕉</li>
????<li>雪梨</li>
????<li>西瓜</li>
</ul>
</body>
</html>
無序列表-水果
3、定義列表
定義列表以<dl>標(biāo)簽開始，</dl>標(biāo)簽結(jié)束，中間插入的每個列表項都分為兩個部分，<dt> </dt>里面添加項目名稱，<dd> </dd>里面添加項目內(nèi)容或描述。定義列表語法格式如下：<dl>
<dt>項目名稱</dt>
<dd>項目內(nèi)容</dd>
……
</dl>
無序列表和有序列表的列表項前面都有標(biāo)記，無序列表的項目前是符號（實心圓、空心圓或?qū)嵭恼叫危行蛄斜淼捻椖壳笆蔷幪枺梢允菙?shù)字、字母或羅馬數(shù)字）。我們有兩種方式來設(shè)置列表項前的符號類型，一種是直接在HTML的列表標(biāo)簽中設(shè)置type屬性，另一種是用CSS的方式，設(shè)置CSS屬性list-style-type。有了CSS，在HTML中設(shè)置type屬性已經(jīng)被拋棄了，推薦使用CSS屬性list-style-type來設(shè)置列表項的標(biāo)記類型。
示例如下：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
????<title></title>
????<style type="text/css">
????????p{
????????????font-family:微軟雅黑;
????????????font-size:14pt;
????????????color:red;
????????????background-color:gray;
????????}
????????ol{ /*設(shè)置有序列表的編號為小寫羅馬數(shù)字*/
????????????list-style-type:lower-roman;
????????}
????</style>
</head>
<body>
????<p>WEB開發(fā)教程（無序列表）</p>
????<!--利用type屬性設(shè)置無序列表項目符號為實心正方形-->
????<ul type="square"><!--這種方式已拋棄，建議使用CSS屬性list-style-type-->
????????<li>HTML&CSS</li>
????????<li>JavaScript</li>
????????<li>ASP.NET</li>
????</ul>
????<p>B/S三層結(jié)構(gòu)（有序列表）</p>
????<ol><!--已在CSS中用list-style-type屬性設(shè)置列表項編號為小寫羅馬數(shù)字-->
????????<li>界面展示層</li>
????????<li>業(yè)務(wù)邏輯層</li>
????????<li>數(shù)據(jù)操縱層</li>
????</ol>
????<p>B/S與C/S（定義列表）</p>
????<dl>
????????<dt>B/S模式</dt>
????????<dd>瀏覽器/服務(wù)器模式，只要安裝一個瀏覽器。</dd>
????????<dt>C/S模式</dt>
????????<dd>客戶端/服務(wù)器模式，需要安裝客戶端軟件。</dd>
????</dl>
</body>
</html>
3種Html列表：有序列表，無序列表，定義列表。無序列表使用最為廣泛，常用于導(dǎo)航、文章標(biāo)題列表、圖片列表等有規(guī)律列表類內(nèi)容的排版布局。在CSS屬性list-style-type中，還可以設(shè)置值為none，表示去除列表項前的符號。我們可以在本站的HTML教程中查詢這些CSS屬性的具體代碼，幫助我們快速掌握HTML列表的使用技巧。
初級 202925
初級 203221
初級 202629
初級 203743
官方微信
官方抖音
Java實驗班
Java就業(yè)班
Java夜校直播班
Java在職加薪班
Java架構(gòu)師班
京公網(wǎng)安備 11030102010736號