站長(zhǎng)資訊網(wǎng)
最全最豐富的資訊網(wǎng)站

HTML提供了幾種列表模式

HTML提供了3種列表模式:1、有序列表,使用“<ol>”和“<li>”標(biāo)簽創(chuàng)建,有序列表之間的內(nèi)容有先后順序之分;2、無序列表,使用“<ul>”和“<li>”標(biāo)簽創(chuàng)建;3、定義列表,使用“<dl>”、“<dt>”和“<dd>”標(biāo)簽創(chuàng)建。

HTML提供了幾種列表模式

本教程操作環(huán)境:windows7系統(tǒng)、HTML5版、Dell G3電腦。

HTML 列表(List)可以將若干條相關(guān)的內(nèi)容整理起來,讓內(nèi)容看起來更加有條理。在列表內(nèi)您可以放置文本、圖像、鏈接等,也可以在一個(gè)列表中定義另一個(gè)列表(列表嵌套)。

HTML 為我們提供了三種不同形式的列表:

  • 有序列表,使用 <ol> + <li> 標(biāo)簽
  • 無序列表,使用 <ul> + <li> 標(biāo)簽
  • 定義列表,使用 <dl> + <dt> + <dd> 標(biāo)簽

1. 有序列表

在 HTML 中, <ol> 標(biāo)簽用來表示有序列表。有序列表之間的內(nèi)容有先后順序之分,例如菜譜中的一系列步驟,這些步驟需要按順序完成,這時(shí)就可以使用有序列表。

我們來看一個(gè)簡(jiǎn)單的實(shí)例:

<!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <title>HTML有序列表</title> </head> <body>     <p>煮米飯的步驟:</p>     <ol>         <li>將水煮沸</li>         <li>加入一勺米</li>         <li>攪拌均勻</li>         <li>繼續(xù)煮10分鐘</li>     </ol> </body> </html>

HTML提供了幾種列表模式

有序列表需要使用 <ol> 和 <li> 標(biāo)簽:

  • <ol> 是 order list 的簡(jiǎn)稱,表示有序列表,它可以為列表的每一項(xiàng)進(jìn)行編號(hào),默認(rèn)從數(shù)字 1 開始。
  • <li> 是 list item 的簡(jiǎn)稱,表示列表的每一項(xiàng),<ol> 中有多少個(gè) <li> 就表示有多少條內(nèi)容。列表項(xiàng)中可以包含文本、圖片、鏈接等,甚至還可以是另外一個(gè)列表。

注意,<ol> 一般和 <li> 配合使用,不會(huì)單獨(dú)出現(xiàn),而且不建議在 <ol> 中直接使用除 <li> 之外的其他標(biāo)簽。

2. 無序列表

HTML 使用 <ul> 標(biāo)簽來表示無序列表。無序列表和有序列表類似,都是使用 <li> 標(biāo)簽來表示列表的每一項(xiàng),但是無序列表之間的內(nèi)容沒有順序。例如,早飯的種類不需要表明順序,這時(shí)就可以使用無序列表。

我們來看一個(gè)簡(jiǎn)單的例子:

復(fù)制純文本復(fù)制
<!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <title>HTML無序列表</title> </head> <body>     <p>早餐的種類:</p>     <ul>         <li>雞蛋</li>         <li>牛奶</li>         <li>面包</li>         <li>生菜</li>     </ul> </body> </html>
<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>HTML無序列表</title> </head> <body>     <p>早餐的種類:</p>     <ul>         <li>雞蛋</li>         <li>牛奶</li>         <li>面包</li>         <li>生菜</li>     </ul> </body> </html>

瀏覽器運(yùn)行結(jié)果如圖所示:

HTML提供了幾種列表模式

無序列表需要使用 <ul> 和 <li> 標(biāo)簽:

  • <ul> 是 unordered list 的簡(jiǎn)稱,表示無序列表。
  • <ul> 和 <ol> 中的 <li> 一樣,都表示列表中的每一項(xiàng)。默認(rèn)情況下,無序列表的每一項(xiàng)都使用符號(hào)表示。

注意,<ul> 一般和 <li> 配合使用,不會(huì)單獨(dú)出現(xiàn),而且不建議在 <ul> 中直接使用除 <li> 之外的其他標(biāo)簽。

3. 定義列表

在 HTML 中,<dl> 標(biāo)簽用于創(chuàng)建定義列表。定義列表由標(biāo)題(術(shù)語)和描述兩部分組成,描述是對(duì)標(biāo)題的解釋和說明,標(biāo)題是對(duì)描述的總結(jié)和提煉。

定義列表具體語法格式如下:

<dl>     <dt>標(biāo)題1<dt>     <dd>描述文本2<dd>     <dt>標(biāo)題2<dt>     <dd>描述文本2<dd>     <dt>標(biāo)題3<dt>     <dd>描述文本3<dd> </dl>

定義列表需要使用 <dl>、<dt> 和 <dd> 標(biāo)簽:

  • <dl> 是 definition list 的簡(jiǎn)稱,表示定義列表。
  • <dt> 是 definition term 的簡(jiǎn)稱,表示定義術(shù)語,也就是我們說的標(biāo)題。
  • <dd> 是 definition description 的簡(jiǎn)稱,表示定義描述 。

可以認(rèn)為 <dt> 定義了一個(gè)概念(術(shù)語),<dd> 用來對(duì)概念(術(shù)語)進(jìn)行解釋。

注意,<dt> 和 <dd> 是同級(jí)標(biāo)簽,它們都是 <dl> 的子標(biāo)簽。一般情況下,每個(gè) <dt> 搭配一個(gè) <dd>,一個(gè) <dl> 可以包含多對(duì) <dt> 和 <dd>。

我們來看一個(gè)簡(jiǎn)單的例子:

<!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <title>HTML定義列表</title> </head> <body>     <dl>         <dt>HTML</dt>         <dd>HTML 是一種專門用來開發(fā)網(wǎng)頁的標(biāo)記語言,您可以轉(zhuǎn)到《<a href="http://www.php.cn/course/list/11.html" target="_blank">HTML教程</a>》了解

贊(0)
分享到: 更多 (0)
網(wǎng)站地圖   滬ICP備18035694號(hào)-2    滬公網(wǎng)安備31011702889846號(hào)
亚洲性日韩精品国产一区二区| 国产成人A∨麻豆精品| 热久久视久久精品18| 99视频精品全国在线观看| 99久久国产精品免费一区二区| 精品性高朝久久久久久久| 国产成人精品男人的天堂538| 久久久久国产精品嫩草影院| 精品国产日韩久久亚洲| 国产成人综合日韩精品婷婷九月| 久久精品国产亚洲av麻豆图片| 9久热精品免费观看视频| 亚洲人成国产精品无码| 日韩精品无码免费视频| 日韩在线观看高清视频| 日韩精品无码免费专区午夜| 国产精品亚洲一区二区三区| 精品国产一区在线观看| 国产精品无码久久四虎| 国产香蕉九九久久精品免费| 亚洲精品无码中文久久字幕| 2021久久国自产拍精品| 91精品国产自产在线老师啪| 91大神在线精品网址| 999精品久久久中文字幕蜜桃| 99re这里只有精品国产精品| 国产精品伊人久久伊人电影 | 日韩中文字幕精品免费一区| 91精品国产综合久久久久| 99这里只精品热在线获取| 人妻精品久久久久中文字幕69| 久久九九久精品国产| 精品国产热久久久福利| 亚洲精品无码激情AV| 免费日韩在线视频| 无码精品人妻一区二区三区影院 | 亚洲精品动漫在线| 1313午夜精品久久午夜片| 人妻AV一区二区三区精品| 日韩精品久久无码人妻中文字幕 | 亚洲国产精品成人AV在线|