HTML列表制作講解-零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

序列表

經(jīng)過(guò)之前關(guān)于表格、表單的學(xué)習(xí)后，再來(lái)學(xué)習(xí)列表，就顯得非常的簡(jiǎn)單和容易理解了。

學(xué)習(xí)是構(gòu)建知識(shí)體系的過(guò)程，沒(méi)有形成體系的知識(shí)學(xué)習(xí)再多也是碎片，是很難形成技能或深刻理解的，因此，如果您是零基礎(chǔ)的初學(xué)者，第一次看我的教程，如果時(shí)間允許的話，請(qǐng)務(wù)必從目錄中找尋第一篇，循序漸進(jìn)的學(xué)習(xí)。

列表分為有序列表、無(wú)序列表和定義列表，同時(shí)列表之中還能嵌套列表，和表格非常相似。

首先介紹有序列表

要用<ol></ol>標(biāo)簽告訴瀏覽器這里是列表。

然后在里面添加<li></li>標(biāo)簽，在這個(gè)標(biāo)簽中添加內(nèi)容即可。

示例代碼如下

<p>我喜歡的水果</p>
<ol>
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>蘋果</li> 
  <li>桃子</li>
</ol>

大家可以把它放到一個(gè)新的html框架中看看效果。

完整代碼如下：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>列表</title>
  </head> 
  <body>
  <h>有序列表</h>
  <p>我喜歡的水果</p>
  <ol> 
    <li>葡萄</li> 
    <li>西瓜</li> 
    <li>蘋果</li> 
    <li>桃子</li>
    </ol>
  </body> 
  </html>

頁(yè)面效果如下：

通過(guò)修改<ol>標(biāo)簽中的type屬性我們可以改變序號(hào)顯示的樣式，默認(rèn)的是數(shù)字，大家看一下不同的type值的不同效果吧！示例代碼如下：

<ol type="A">
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>蘋果</li> 
  <li>桃子</li>
</ol>
<ol type="a"> 
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>蘋果</li> 
  <li>桃子</li>
  、</ol><ol type="I"> <li>葡萄</li> <li>西瓜</li> <li>蘋果</li> <li>桃子</li></ol>

頁(yè)面效果如下：

下面給大家介紹一下搜狗輸入法中如何輸入羅馬數(shù)字。

step1.點(diǎn)擊"輸入方式"

step2.點(diǎn)擊"特殊符號(hào)"后選擇數(shù)字序號(hào)，找到羅馬數(shù)字即可

除此之外我們還可以使用CSS的方法為有序列表的序號(hào)提供更多樣式。在<ol>標(biāo)簽中修改style屬性可以直接調(diào)用這些css中的屬性。寫法是style="list-style-type:屬性值；"

示例代碼如下：(使用日語(yǔ)中的片假名表示序號(hào))

<ol style="list-style-type:hiragana;"> 
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>蘋果</li> 
  <li>桃子</li>
</ol>

頁(yè)面效果如圖所示：

是不是很有趣，這里的測(cè)試就不一一做了。為大家奉上list-style-type的值的列表與說(shuō)明，大家自己課下去嘗試，這個(gè)列表中既有有序列表的值也有無(wú)序列表的值。

如圖：

資料來(lái)自w3school

無(wú)序列表

無(wú)序列表與有序列表的區(qū)別在于最外層的標(biāo)簽，它的寫法是這樣的：<ul></ul>。

有一個(gè)記憶的小技巧，有序的英文是order，故有序列表為order list（列表），縮寫為ol。

無(wú)序?yàn)閡norder，無(wú)序列表為unorder list，縮寫為ul。

無(wú)序列表<ul>標(biāo)簽的type屬性用來(lái)控制列表前的標(biāo)記顯示演示。

示例代碼如下：

<h>無(wú)序列表</h>
<p>我喜歡的水果</p>
<ul> 
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>蘋果</li> 
  <li>桃子</li>
</ul>
<ul type="disc"> 
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>蘋果</li> 
  <li>桃子</li>
</ul>
<ul type="circle"> 
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>蘋果</li> 
  <li>桃子</li>
</ul>
<ul type="square"> 
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>蘋果</li> 
  <li>桃子</li>
</ul>

頁(yè)面效果如下：

通過(guò)圖片我們可知，無(wú)序列表默認(rèn)的列表標(biāo)識(shí)就是type="disc"。

style屬性的話大家自己試試吧，這里就不啰嗦了。

定義列表

這個(gè)列表比較特殊，也比較不常見(jiàn)，主要就是顯示名詞定義的。

首先要寫入<dl></dl>標(biāo)簽。這是告訴瀏覽器這里是個(gè)定義列表，和<ol>或<ul>一樣。

定義的英文是definition，定義列表就是definition list，縮寫是dl。

下面在<dl></dl>標(biāo)簽中間寫入定義的名稱<dt></dt>,即definition title（標(biāo)題）。

與定義名稱標(biāo)簽并列的是定義描述<dd></dd>,即definition describe（描述）。

示例代碼如下：

<dl> 
  <dt>計(jì)算機(jī)</dt> 
  <dd>用來(lái)計(jì)算的儀器 ... ...</dd> 
  <dt>顯示器</dt> 
  <dd>以視覺(jué)方式顯示信息的裝置 ... ...</dd>
</dl>

頁(yè)面效果如下：

今天的內(nèi)容結(jié)束了！

列表嵌套列表的測(cè)試大家自己試試吧，學(xué)到現(xiàn)在，相信你們都可以完成了！

如果您喜歡我的教程請(qǐng)關(guān)注我，點(diǎn)贊也能讓我充滿動(dòng)力！

如果您有任何疑問(wèn)請(qǐng)給我留言，如有問(wèn)題或錯(cuò)誤請(qǐng)予以斧正！

HTML完整學(xué)習(xí)目錄

HTML序章（學(xué)習(xí)目的、對(duì)象、基本概念）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML是什么？——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

第一個(gè)HTML頁(yè)面如何寫？——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML頁(yè)面中head標(biāo)簽有啥用？——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

初識(shí)meta標(biāo)簽與SEO——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML中的元素使用方法1——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML中的元素使用方法2——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML元素中的屬性1——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML元素中的屬性2（路徑詳解）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

使用HTML添加表格1（基本元素）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

使用HTML添加表格2（表格頭部與腳部）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

使用HTML添加表格3（間距與顏色）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

使用HTML添加表格4（行顏色與表格嵌套）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

16進(jìn)制顏色表示與RGB色彩模型——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML中的塊級(jí)元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

初識(shí)HTML中的<div>塊元素——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

在HTML頁(yè)面中嵌入其他頁(yè)面的方法——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

封閉在家學(xué)網(wǎng)頁(yè)制作！為頁(yè)面嵌入PDF文件——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML表單元素初識(shí)1——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML表單元素初識(shí)2——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML表單3（下拉列表、多行文字輸入）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML表單4（form的action、method屬性）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML列表制作講解——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

為HTML頁(yè)面添加視頻、音頻的方法——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML中使用<a>標(biāo)簽實(shí)現(xiàn)文本內(nèi)鏈接——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

格元素詳解與練習(xí)

提到表格，大家最先想到的就是EXCEL這款軟件，實(shí)際上在對(duì)表格的操作上，HTML與EXCEL非常相似。

在展示數(shù)據(jù)，統(tǒng)計(jì)數(shù)據(jù)方面，表格比文字描述更具表達(dá)優(yōu)勢(shì)，在網(wǎng)頁(yè)中，表格也經(jīng)常被用來(lái)展示數(shù)據(jù)、計(jì)劃日常安排等內(nèi)容。如圖所示：

今天我們就來(lái)學(xué)習(xí)一下如何向頁(yè)面中添加表格元素。

首先來(lái)介紹一下表格元素中的基本標(biāo)簽。

NO.1：<table></table>

這個(gè)標(biāo)簽是書寫表格的第一個(gè)標(biāo)簽，它本身在頁(yè)面上看不出什么內(nèi)容，但是它的屬性可以控制表格顯示的全局樣式。這個(gè)標(biāo)簽的開始標(biāo)簽寫在表格元素的開頭，結(jié)尾標(biāo)簽寫在表格元素的結(jié)尾。

NO.2：<caption></caption>

這個(gè)標(biāo)簽是表格的標(biāo)題標(biāo)簽。

NO.3：<tr></tr>

這個(gè)標(biāo)簽定義表格的列標(biāo)簽。

NO.4：<th></th>

這個(gè)標(biāo)簽是列表標(biāo)題標(biāo)簽，例如，男生、女士、姓名等。

NO.5：<td></td>

這個(gè)標(biāo)簽定義表格的行標(biāo)簽。

OK，這些基本標(biāo)簽就可以構(gòu)建一個(gè)基礎(chǔ)的表格元素。示例代碼如下：

頁(yè)面效果如圖所示：沒(méi)有表格的外邊框。

如何添加外邊框呢？在<table>標(biāo)簽中修改border屬性即可，示例代碼如下：border="1"是給表格添加寬為1的邊界線。

<table border = "1"><!-- border="1"是給表格添加寬為1的邊界線 -->

效果如圖所示：

這時(shí)，您會(huì)發(fā)現(xiàn)表格在頁(yè)面上的尺寸非常小，可不可以按照頁(yè)面尺寸來(lái)顯示表格嗎？當(dāng)然可以，這就需要為<table>標(biāo)簽修改第二個(gè)屬性width，示例代碼如圖所示：width = "100%"指的是表格寬度與平面寬度一致。

<table border = "1" width = "100%"><!-- width = "100%"指的是表格寬度與平面寬度一致 -->

效果如圖所示：

ok！今天的講解先到這里，明天我會(huì)繼續(xù)為大家講解<thead></thead>、<tfoot></tfoot>、<tbody></tbody>三個(gè)標(biāo)簽，以及合并單元格操作。

今天的完整代碼示例如下：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>第一個(gè)網(wǎng)頁(yè)</title>
</head> 
<body><h1>第一個(gè)網(wǎng)頁(yè)</h1><hr>
<h2>表格元素</h2><hr>
<table border = "1" width = "100%">
  <caption>表格標(biāo)題</caption>
<tr>
  <th>姓名</th>
<th>年齡</th>
</tr>
<tr><td>一列一行</td>
<td>一列二行</td>
</tr>
<tr>
  <td>二列一行</td>
<td>二列二行</td>
</tr>
</table>
</body> 
</html>

正所謂萬(wàn)丈高樓平地起，html技術(shù)雖然簡(jiǎn)單，但是內(nèi)容相對(duì)繁瑣，也是以后進(jìn)一步學(xué)習(xí)網(wǎng)頁(yè)制作的基礎(chǔ)，希望大家動(dòng)手寫每一段代碼，把每一步踩堅(jiān)實(shí)。

喜歡的小伙伴請(qǐng)關(guān)注我，閱讀中遇到任何問(wèn)題請(qǐng)給我留言，如有疏漏或錯(cuò)誤歡迎大家斧正，不勝感激！

HTML完整學(xué)習(xí)目錄

HTML序章（學(xué)習(xí)目的、對(duì)象、基本概念）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML是什么？——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

第一個(gè)HTML頁(yè)面如何寫？——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML頁(yè)面中head標(biāo)簽有啥用？——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

初識(shí)meta標(biāo)簽與SEO——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML中的元素使用方法1——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML中的元素使用方法2——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML元素中的屬性1——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML元素中的屬性2（路徑詳解）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

使用HTML添加表格1（基本元素）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

使用HTML添加表格2（表格頭部與腳部）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

使用HTML添加表格3（間距與顏色）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

使用HTML添加表格4（行顏色與表格嵌套）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

16進(jìn)制顏色表示與RGB色彩模型——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML中的塊級(jí)元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

初識(shí)HTML中的<div>塊元素——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

在HTML頁(yè)面中嵌入其他頁(yè)面的方法——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

封閉在家學(xué)網(wǎng)頁(yè)制作！為頁(yè)面嵌入PDF文件——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML表單元素初識(shí)1——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML表單元素初識(shí)2——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML表單3（下拉列表、多行文字輸入）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML表單4（form的action、method屬性）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML列表制作講解——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

為HTML頁(yè)面添加視頻、音頻的方法——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML中使用<a>標(biāo)簽實(shí)現(xiàn)文本內(nèi)鏈接——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

在線咨詢

上一篇：JavaScript 函數(shù)調(diào)用
下一篇：如何使用CSS實(shí)現(xiàn)精美視頻片頭制作

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

HTML列表制作講解-零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML完整學(xué)習(xí)目錄

HTML完整學(xué)習(xí)目錄

您的項(xiàng)目需求