HTML提供了哪些列表模式

本篇內容介紹了“HTML提供了哪些列表模式”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

創新互聯專注為客戶提供全方位的互聯網綜合服務，包含不限于成都網站設計、成都網站建設、青陽網絡推廣、微信平臺小程序開發、青陽網絡營銷、青陽企業策劃、青陽品牌公關、搜索引擎seo、人物專訪、企業宣傳片、企業代運營等，從售前售中售后，我們都將竭誠為您服務，您的肯定，是我們最大的嘉獎；創新互聯為所有大學生創業者提供青陽建站搭建服務，24小時服務熱線：028-86922220，官方網址：m.kartarina.com

HTML提供了3種列表模式：1、有序列表，使用“<ol>”和“<li>”標簽創建，有序列表之間的內容有先后順序之分；2、無序列表，使用“<ul>”和“<li>”標簽創建；3、定義列表，使用“<dl>”、“<dt>”和“<dd>”標簽創建。

HTML提供了哪些列表模式

本教程操作環境：windows7系統、HTML5版、Dell G3電腦。

HTML 列表（List）可以將若干條相關的內容整理起來，讓內容看起來更加有條理。在列表內您可以放置文本、圖像、鏈接等，也可以在一個列表中定義另一個列表（列表嵌套）。

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

有序列表，使用 <ol> + <li> 標簽
無序列表，使用 <ul> + <li> 標簽
定義列表，使用 <dl> + <dt> + <dd> 標簽

1. 有序列表

在 HTML 中， <ol> 標簽用來表示有序列表。有序列表之間的內容有先后順序之分，例如菜譜中的一系列步驟，這些步驟需要按順序完成，這時就可以使用有序列表。

我們來看一個簡單的實例：

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

HTML提供了哪些列表模式

有序列表需要使用 <ol> 和 <li> 標簽：

<ol> 是 order list 的簡稱，表示有序列表，它可以為列表的每一項進行編號，默認從數字 1 開始。
<li> 是 list item 的簡稱，表示列表的每一項，<ol> 中有多少個 <li> 就表示有多少條內容。列表項中可以包含文本、圖片、鏈接等，甚至還可以是另外一個列表。

注意，<ol> 一般和 <li> 配合使用，不會單獨出現，而且不建議在 <ol> 中直接使用除 <li> 之外的其他標簽。

2. 無序列表

HTML 使用 <ul> 標簽來表示無序列表。無序列表和有序列表類似，都是使用 <li> 標簽來表示列表的每一項，但是無序列表之間的內容沒有順序。例如，早飯的種類不需要表明順序，這時就可以使用無序列表。

我們來看一個簡單的例子：

復制純文本復制

<!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>

瀏覽器運行結果如圖所示：

HTML提供了哪些列表模式

無序列表需要使用 <ul> 和 <li> 標簽：

<ul> 是 unordered list 的簡稱，表示無序列表。
<ul> 和 <ol> 中的 <li> 一樣，都表示列表中的每一項。默認情況下，無序列表的每一項都使用●符號表示。

注意，<ul> 一般和 <li> 配合使用，不會單獨出現，而且不建議在 <ul> 中直接使用除 <li> 之外的其他標簽。

3. 定義列表

在 HTML 中，<dl> 標簽用于創建定義列表。定義列表由標題（術語）和描述兩部分組成，描述是對標題的解釋和說明，標題是對描述的總結和提煉。

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

<dl>
    <dt>標題1<dt>
    <dd>描述文本2<dd>
    <dt>標題2<dt>
    <dd>描述文本2<dd>
    <dt>標題3<dt>
    <dd>描述文本3<dd>
</dl>

定義列表需要使用 <dl>、<dt> 和 <dd> 標簽：

<dl> 是 definition list 的簡稱，表示定義列表。
<dt> 是 definition term 的簡稱，表示定義術語，也就是我們說的標題。
<dd> 是 definition description 的簡稱，表示定義描述。

可以認為 <dt> 定義了一個概念（術語），<dd> 用來對概念（術語）進行解釋。

注意，<dt> 和 <dd> 是同級標簽，它們都是 <dl> 的子標簽。一般情況下，每個 <dt> 搭配一個 <dd>，一個 <dl> 可以包含多對 <dt> 和 <dd>。

我們來看一個簡單的例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML定義列表</title>
</head>
<body>
    <dl>
        <dt>HTML</dt>
        <dd>HTML 是一種專門用來開發網頁的標記語言，您可以轉到《<a href="http://m.kartarina.com/course/list/11.html" target="_blank">HTML教程</a>》了解更多。</dd>
        <dt>CSS</dt>
        <dd>CSS 層疊樣式表可以控制 HTML 文檔的顯示樣式，用來美化網頁，您可以轉到《<a href="http://m.kartarina.com/course/list/12.html" target="_blank">CSS教程</a>》了解更多。</dd>
        <dt>JavaScript</dt>
        <dd>JavaScript 簡稱 JS，是一種用來開發網站（包括前端和后臺）的腳本編程語言，您可以轉到《<a href="http://m.kartarina.com/course/list/2.html" target="_blank">JS教程</a>》了解更多。</dd>
    </dl>
</body>
</html>

HTML提供了哪些列表模式

<dt> 和 <dd> 雖然是同級標簽，但是它們的默認樣式不同，<dd> 帶有一段縮進，而 <dt> 頂格顯示，這樣層次更加分明。

“HTML提供了哪些列表模式”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注創新互聯網站，小編將為大家輸出更多高質量的實用文章！

當前題目：HTML提供了哪些列表模式
文章出自：http://m.kartarina.com/article16/igccdg.html

成都網站建設公司_創新互聯，為您提供Google、關鍵詞優化、電子商務、、品牌網站制作、網頁設計公司

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創新互聯

猜你還喜歡下面的內容