在之前的文章中，我們介紹了無(wú)序列表和有序列表的使用方法。但是這兩種列表只能按照順序列出項(xiàng)目，并沒(méi)有提供對(duì)每個(gè)項(xiàng)目進(jìn)行描述的功能。而定義列表則可以在每個(gè)項(xiàng)目后面添加具體的描述，讓列表更加豐富有用。 新

在之前的文章中，我們介紹了無(wú)序列表和有序列表的使用方法。但是這兩種列表只能按照順序列出項(xiàng)目，并沒(méi)有提供對(duì)每個(gè)項(xiàng)目進(jìn)行描述的功能。而定義列表則可以在每個(gè)項(xiàng)目后面添加具體的描述，讓列表更加豐富有用。

新建HTML文件

首先，我們需要新建一個(gè)HTML文件。將記事本的名字改為“html定義列表的使用（20）.html”，并將文件保存為HTML格式，以便瀏覽器可以正確打開(kāi)。

打開(kāi)文件

右擊HTML文件圖標(biāo)，在彈出的下拉菜單中選擇“打開(kāi)方式（H）”，然后選擇“Sublime Text”或者其他文本編輯器打開(kāi)。

編寫HTML代碼

在文件中編寫以下HTML代碼：

lt;!DOCTYPE htmlgt;
lt;htmlgt;
lt;headgt;
  lt;titlegt;html定義列表的使用（20）lt;/titlegt;
  lt;meta charset"UTF-8"gt;
lt;/headgt;
lt;bodygt;
  lt;dlgt;
    lt;dtgt;鄧稼先lt;/dtgt;
    lt;ddgt;偉大的科學(xué)家lt;/ddgt;
    lt;dtgt;牛頓lt;/dtgt;
    lt;ddgt;偉大的物理學(xué)家lt;/ddgt;
    lt;dtgt;huilt;/dtgt;
    lt;ddgt;創(chuàng)造無(wú)限可能和more best peoplelt;/ddgt;
  lt;/dlgt;
lt;/bodygt;
lt;/htmlgt;

保存并查看

保存文件后，右擊HTML文件圖標(biāo)，選擇“在瀏覽器中打開(kāi)”選項(xiàng)。您將看到定義列表的內(nèi)容在上方顯示，而描述內(nèi)容則會(huì)縮進(jìn)2個(gè)字符，以與定義內(nèi)容相區(qū)分。

源代碼參考

以下是本案例的完整源代碼：

lt;!DOCTYPE htmlgt;
lt;htmlgt;
lt;!-- 用lt;!DOCTYPE htmlgt;來(lái)聲明這是一個(gè)HTML5文檔 --gt;
lt;htmlgt;
lt;!-- 用lt;htmlgt;標(biāo)簽來(lái)包含網(wǎng)頁(yè)的主體 --gt;
lt;headgt;
lt;!-- 用lt;headgt;標(biāo)簽包含HTML文檔的頭部部分 --gt;
lt;titlegt;html定義列表的使用（20）lt;/titlegt;
lt;!-- 用lt;titlegt;標(biāo)簽來(lái)寫入網(wǎng)頁(yè)的標(biāo)題 --gt;
lt;meta charset"utf-8"gt;
lt;!-- 用lt;metagt;標(biāo)簽來(lái)設(shè)置文檔的編碼格式，以便瀏覽器能夠正確解讀網(wǎng)頁(yè) --gt;
lt;style type"text/css"gt;
lt;/stylegt;
lt;!-- 用lt;stylegt;標(biāo)簽來(lái)包含網(wǎng)頁(yè)中設(shè)置的樣式，并聲明其為CSS類型 --gt;
lt;/headgt;
lt;!-- 用lt;bodygt;標(biāo)簽包含HTML文檔的主體部分 --gt;
lt;bodygt;
lt;!-- lt;dlgt;標(biāo)簽用來(lái)定義列表，lt;dtgt;標(biāo)簽用來(lái)定義內(nèi)容，lt;ddgt;標(biāo)簽用來(lái)寫入描述的內(nèi)容 --gt;
lt;!-- 例子1 --gt;
lt;dlgt;
lt;dtgt;鄧稼先lt;/dtgt;
lt;ddgt;偉大的科學(xué)家lt;/ddgt;
lt;/dlgt;
lt;!-- 例子2 --gt;
lt;dlgt;
lt;!-- lt;dtgt;標(biāo)簽寫入定義的內(nèi)容 --gt;
lt;dtgt;牛頓lt;/dtgt;
lt;!-- lt;ddgt;標(biāo)簽寫入上面定義內(nèi)容的描述 --gt;
lt;ddgt;偉大的物理學(xué)家lt;/ddgt;
lt;dtgt;愛(ài)迪生lt;/dtgt;
lt;ddgt;偉大的發(fā)明學(xué)家lt;/ddgt;
lt;/dlgt;
lt;!-- 例子3 --gt;
lt;dlgt;
lt;dtgt;huilt;/dtgt;
lt;ddgt;創(chuàng)造無(wú)限可能和more best peoplelt;/ddgt;
lt;/dlgt;
lt;/bodygt;
lt;/htmlgt;