整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
篇介紹了html 中文本格式及段落等標簽，今天說下列表，什么是列表？它就是一種數據排列方式，以條列式的方式顯示文本，使讀者一目了然。列表主要有以下三種：
無序列表在每行開始位置顯示一個符號，語法如下：
<html>
<body>
<h4>一個無序列表：</h4>
<ul>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
</body>
</html>顯示效果：
無序列表的符號可以通過在ul 標簽上設置 type 屬性顯示不同的符號，比如：
1、disc —— 實心圓點 (默認類型)
2、circle —— 空心圓圈
3、square —— 實心方塊
實例代碼：
<html>
<body>
<h4>一個無序列表：</h4>
<ul type="disc">
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
<h4>一個無序列表：</h4>
<ul type="circle">
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
<h4>一個無序列表：</h4>
<ul type="square">
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
</body>顯示效果：
有序列表使用數字或字母符號排列，表示文本按一定順序顯示，語法如下：
<!DOCTYPE html>
<html>
<body>
<ol>
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
</body>
</html>效果如下：
同無序列表一樣，在ol上通過type 屬性設置使用那種符號表示順序，有以下幾種：
1、1，表示數字 1、2、3..... （默認數字）
2、a，表示小寫字母 a、b、c....
3、A，表示大寫字母 A、B、C ....
4、i，表示小寫羅馬字母 i、ii、iii、iv....
5、I，表示大寫羅馬字母 I、II、III、IV....
顯示效果如下：
html代碼：
<!DOCTYPE html>
<html>
<body>
數字
<ol type="1">
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
小寫字母
<ol type="a">
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
大寫字母
<ol type="A">
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
小寫羅馬字母
<ol type="i">
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
大寫羅馬字母
<ol type="I">
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
</body>
</html>有序列表還可以通過start 屬性設置起始數組，如下：
<ol start="3">
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>顯示效果：
不同以上2種列表，定義列表主要用來解釋名詞，由2種層次列表顯示，第一層是被解釋的名詞，第二層是詳細地解釋文字，語法如下：
<html>
<body>
<h2>一個定義列表：</h2>
<dl>
<dt>計算機</dt>
<dd>用來計算的儀器 ... ...</dd>
<dt>顯示器</dt>
<dd>以視覺方式顯示信息的裝置 ... ...</dd>
</dl>
</body>
</html>
顯示效果：
第一行<dt>是要解釋的名詞，第二行標簽<dd>是解釋文本，會自動縮進。
以上三種列表是可以嵌套使用的，看如下示例：
<html>
<body>
<h4>一個嵌套列表：</h4>
<ul>
<li>咖啡</li>
<li>茶
<ul>
<li>紅茶</li>
<li>綠茶</li>
</ul>
</li>
<li>牛奶</li>
</ul>
</body>
</html>效果：
每嵌套一層，它的符號是不一樣的，你可以試試再嵌套一層看看效果。
當然，不同列表類型也可互相嵌套，根據顯示效果可以自由使用，一般建議不要這樣使用，不同類型列表顯示在一塊不是很美觀。如下面無序列表中嵌套有序列表：
<html>
<body>
<h4>一個嵌套列表：</h4>
<ul>
<li>咖啡</li>
<li>茶
<ul>
<li>紅茶</li>
<li>綠茶
<ol>
<li>中國茶</li>
<li>非洲茶</li>
</ol>
</li>
</ul>
</li>
<li>牛奶</li>
</ul>
</body>
</html>效果如下：
列表是網頁制作中經常會使用的標簽，比如在制作網頁導航欄菜單時會經常用到ul列表，以后會講如何通過ul標簽制作一個下拉菜單，感謝您閱讀及關注，祝你學習愉快。
上篇：前端入門——html 文字格式、標題與段落
下篇：前端入門——html 超鏈接
網絡上，有序列表可以使您的 HTML 頁面更有組織、簡潔且易于閱讀。在本文中，我將向您展示如何在 HTML 中創建高質量、有趣的有序列表。您將學習如何在平凡的列表中帶來鮮為人知的＂Wow＂效果。讓我們開始吧！
HTML 中的有序列表（ordered list）使用 <ol> 元素創建，并且對于每個列表項使用 <li> 元素。下面是一段有序列表的基本示例：
html<ol>
<li>項目 1</li>
<li>項目 2</li>
</ol>
在上面的示例中，您可以看到列表由 <ol> 元素包圍，每個列表項使用 <li> 元素表示。
要讓您的有序列表更具吸引力，您可以通過使用 CSS 進行累積 з?熄culation。以下是一些建議：
css1、無序列表概念：用來放置一些對于順序無關緊要的內容，例如下面的新聞內容。
2、有序列表概念：有序列表用于存放內容不能錯亂的信息，比如下面的阿里云內容。
3、自定義列表：自定義列表用于正文之外的框框欄欄之類的。
列表樣式2
列表樣式3
列表標簽是用 ul 表示，但是不是單獨使用的，需要和 li 標簽配合使用，并且列表標簽也有屬性，用法：
<ul type="disc"> ，屬性有多個值：
disc ：小圓點，默認屬性
circle ：小圓圈
square ：實心方塊
none ：不要任何符號
源碼：↓
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--網頁抬頭-->
<title>Title</title>
</head>
<body>
<!--列表與列表屬性-->
<ul type="disc">
<li>這是列表a</li>
<li>這是列表b</li>
<li>這是列表c</li>
</ul>
</body>
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
