首頁 >web前端 >html教學 >html支援的清單標籤：無序列表、有序列表和定義列表（介紹）

html支援的清單標籤：無序列表、有序列表和定義列表（介紹）

青灯夜游原創: 2018-09-20 17:32:3922137瀏覽

從某種意義上講，不是描述性的文本的其他任何內容都可以認為是清單。例如：人口普查、太陽系、家譜、參觀菜單，甚至你的所有朋友都可以表示為一個清單或清單裡的清單。那麼在html列表樣式有哪些呢？本章帶給大家html支援的清單標籤：無序列表、有序列表和自訂清單（介紹）。有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

一、html無序列表

無序列表是一個沒有順序的清單項目，在各列前面使用●□◇ ◆等符號以示區隔。

html無序列表始於

；無序列表的type屬性有三個數值可選，這三個選項分別為:disc實心園、circle空心園、square小方塊。預設屬性是disc實心園。
基本語法：
```
<ul>
    <li type="value"> 项目1</li>
    <li type="value"> 项目2</li>
    <li type="value"> 项目3</li>
</ul>
```
value值為項目符號的型別（type型別），無序列表的type型別有：

html無序列表程式碼實例：
```
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>html---无序列表</title>
	</head>
	<body>
		<ul>
			<li>默认的无序列表</li>
			<li>默认的无序列表</li>
			<li>默认的无序列表</li>
		</ul>
		<ul>
			<li type="circle">添加circle属性</li>
			<li type="circle">添加circle属性</li>
			<li type="circle">添加circle属性</li>
		</ul>
		<ul>
			<li type="square">添加square属性</li>
			<li type="square">添加square属性</li>
			<li type="square">添加square属性</li>
		</ul>
	</body>
</html>
```
效果圖：

#也可以使用css list-style-type屬性定義上圖的html無序列表樣式。

二、html有序列表

有序列表是一列按照字母或數字等順序排列的列表項目，注意有序列表的結果是帶有前後順序之分的編號,如果插入和刪除一個列表項，編號會自動調整。

html有序列表始於
1. 標籤。
  基本語法：
```
<ol type="value1" start="value2">
    <li>项目1</li>
    <li>项目2</li>
    <li>项目3</li>
</ol>
```
  value1表示有序列表項目符號的類型（type類型）, value2表示項目開始的數值. start是編號開始的數字，如start=2則編號從2開始，如果從1開始可以省略，或是在
2. 標籤中設定value＝"n"改變清單行項目的特定編號，例如
3. 。 type=用於編號的數字,字母等的類型，如type=a，則編號用英文字母。使用這些屬性，把它們放在
  1. 的初始標籤中。
    有序列表type類型有:
    
    html有序列表程式碼實例：
```
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>html---有序列表</title>
	</head>
	<body>
		<ol>
        <li>默认的有序列表</li>
        <li>默认的有序列表</li>
        <li>默认的有序列表</li>
    </ol>
    <ol  type="a" start="2">
        <li>第1项</li>
        <li>第2项</li>
        <li>第3项</li>
        <li value="20">第4项</li>
    </ol>
    <ol  type="I" start="2">
        <li>第1项</li>
        <li>第2项</li>
        <li>第3项</li>
    </ol>
	</body>
</html>
```
    效果圖：
    
    #同樣也可以使用css list-style-type屬性定義上圖的html有序列表樣式。
    
    三、html自訂清單
    
    自訂清單不只是一列項目，而是項目及其註解的組合。
    
    html自訂清單以
    標籤開始。每個自訂清單項目以
    開始。每個自訂清單項目的定義以
    開始。用於對術語或名詞進行解釋和描述，自訂清單的清單項目前沒有任何項目符號。
    基本語法：
    <dl> <dt>名词1</dt> <dd>名词1解释1</dd> <dd>名词1解释2</dd> <dt>名词2</dt> <dd>名词2解释1</dd> <dd>名词2解释2</dd> </dl>
    html自訂清單程式碼實例：
    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>html---有序列表</title> </head> <body> <dl> <dt>计算机</dt> <dd>用来计算的仪器 ... ...</dd> <dt>显示器</dt> <dd>以视觉方式显示信息的装置 ... ...</dd> </dl> </body> </html>
    效果圖：
    
    ##四、簡單介紹css list-style-type屬性
    #list-style-type 屬性設定清單項目標記的型別。
    可能值為：

以上是html支援的清單標籤：無序列表、有序列表和定義列表（介紹）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

css html ul li

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：分享查看頁面原始碼的四種方法下一篇：分享查看頁面原始碼的四種方法

看更多