點擊下載
本文文檔

當前位置：首頁 - 科技 - 知識百科 - 正文

HTML網頁列表標記學習教程_HTML/Xhtml_網頁制作

來源：懂視網責編：小采時間：2020-11-27 16:46:18

HTML網頁列表標記學習教程_HTML/Xhtml_網頁制作

HTML網頁列表標記學習教程_HTML/Xhtml_網頁制作:HTML網頁列表標記學習教程. 在html頁面中，列表可以起到提綱寫領的作用。列表分為兩種類型，一是有序列表，一是無序列表。前者用項目符號來標記無序的項目，而后者則使用編號來記錄項目的順序。所謂有序，指的是按照數字或字母等順序排列列表項目。所謂

推薦度：

點擊下載本文 文檔為doc格式

導讀HTML網頁列表標記學習教程_HTML/Xhtml_網頁制作:HTML網頁列表標記學習教程. 在html頁面中，列表可以起到提綱寫領的作用。列表分為兩種類型，一是有序列表，一是無序列表。前者用項目符號來標記無序的項目，而后者則使用編號來記錄項目的順序。所謂有序，指的是按照數字或字母等順序排列列表項目。所謂

HTML網頁列表標記學習教程. 在html頁面中，列表可以起到提綱寫領的作用。列表分為兩種類型，一是有序列表，一是無序列表。前者用項目符號來標記無序的項目，而后者則使用編號來記錄項目的順序。所謂有序，指的是按照數字或字母等順序排列列表項目。所謂 HTML網頁列表標記學習教程.
在html頁面中，列表可以起到提綱寫領的作用。列表分為兩種類型，一是有序列表，一是無序列表。前者用項目符號來標記無序的項目，而后者則使用編號來記錄項目的順序。所謂有序，指的是按照數字或字母等順序排列列表項目。所謂無序，是指以●、○、□等開頭的，沒有順序的列表項目。
關于列表的主要標記，如下表所示
<ul> 無序列表 <ol> 有序列表 <dir> 目錄列表 <dl> 定義列表 <menu> 菜單列表 <dt>、<dd> 定義列表的標記 <li> 列表項目的標記有序列表標記<OL>
有序列表使用編號，而不是項目符號來編排項目。列表中的項目采用數字或英文字母開頭，通常各項目間有先后的順序性。在有序列表中，主要使用<ol>和<li>兩個標記以及type和兩個start屬性。

基本語法 <ol> <li>項目一 <li>項目二 <li>項目三 …… </ol>

語法解釋
在有序列表中，使用<ol>作為有序的聲明，使用<li>作為每一個項目的起始。文件范例：7-1.htm
通過<ol>和<li>標記建立有序列表。

01 <!-- ------------------------------ -->
02 <!-- 文件范例：7-1.htm -->
03 <!-- 文件說明：建立有序列表 -->
04 <!-- ------------------------------ -->
05 <html>
06 <head>
07 <title>建立有序列表</title>
08 </head>
09 <body>
10 <h2>圖像設計軟件</h2>
11 <ol>
12 <li>Photoshop
13 <li>Illustrator
14 <li>Freehand
15 <li>CorelDraw
16 </ol>
17 </body>
18 </html>

文件說明

第11行定義了列表的類型為有序，第12行到第15行使用了<li>標記作為列表項目的開始。
#p# 有序列表的類型屬性TYPE
在有序列表的默認情況下，使用數字序號作為列表的開始，我們可以通過type屬性將有序列表的類型設置為英文或羅馬字母。

基本語法 <ol type=value> </ol>

語法解釋
其中value的值如下表所示1 數字1，2，3…… a 小寫字母a，b，c A 大寫字母A，B，C i 小寫羅馬數字i，ii，iii…… I 大寫羅馬數字Ⅰ，Ⅲ，Ⅲ…… 文件范例：7-2.htm
通過type屬性設定有序列表編號的類型。

01 <!-- ------------------------------ -->
02 <!-- 文件范例：7-2.htm -->
03 <!-- 文件說明：設定有序列表編號類型-->
04 <!-- ------------------------------ -->
05 <html>
06 <head>
07 <title>設定有序列表編號類型</title>
08 </head>
09 <body>
10 <h2>圖像設計軟件</h2>
11 <ol type=a>
12 <li>Photoshop
13 <li>Illustrator
14 <li>Freehand
15 <li>CorelDraw
16 </ol>
17 <hr>
18 <h2>圖像設計軟件</h2>
19 <ol type=I>
20 <li>Photoshop
21 <li>Illustrator
22 <li>Freehand
23 <li>CorelDraw
24 </ol>
25 <hr>
26 <h2>網頁動畫軟件</h2>
27 <ol type=i>
28 <li>Flash
29 <li>LiveMotion
30 </OL>
31</body>
32 </html>

文件說明

第11行定義了列表的編號類型為小寫字母，第19行定義了列表的編號類型為大寫的羅馬字母，第27行定義了列表的編號類型為小寫的羅馬字母。
#p# 有序列表的起始屬性START
在默認的情況下，有序列表從數字1開始記數，這個起始值通過start屬性可以調整，并且英文字母和羅馬字母的起始值也可以調整。

基本語法 <ol start=value> </ol>

語法解釋
其中不論列表編號的類型是數字、英文字母還是羅馬字母，value的值都是其始的數字。文件范例：7-3.htm
通過start屬性設定有序列表的起始編號。

01 <!-- ------------------------------ -->
02 <!-- 文件范例：7-3.htm -->
03 <!-- 文件說明：設定有序列表起始編號-->
04 <!-- ------------------------------ -->
05 <html>
06 <head>
07 <title>設定有序列表起始編號</title>
08 </head>
09 <body>
10 <h2>圖像設計軟件</h2>
11 <ol start=5>
12 <li>Photoshop
13 <li>Illustrator
14 <li>Freehand
15 <li>CorelDraw
16 </ol>
17 <hr>
18 <h2>圖像設計軟件</h2>
19 <ol type=I start=3>
20 <li>Photoshop
21 <li>Illustrator
22 <li>Freehand
23 <li>CorelDraw
24 </ol>
25 </body>
26 </html>

文件說明

第11行定義了數字有序列表從5開始，第19行定義了羅馬數字的有序列表從Ⅲ開始。
#p# 無序列表標記<UL>
在無序列表中，各個列表項之間沒有順序級別之分，它通常使用一個項目符號作為每個列表項的前綴。無序列表主要使用<ul>、<dir>、<dl>、<menu>、<li>幾個標記和type屬性。

基本語法 <ul>

語法解釋
在無序列表中，使用<ul>作為無序的聲明，使用<li>作為每一個項目的起始。文件范例：7-4.htm
通過<ul>和<li>標記建立無序列表。

01 <!-- ------------------------------ -->
02 <!-- 文件范例：7-4.htm -->
03 <!-- 文件說明：建立無序列表 -->
04 <!-- ------------------------------ -->
05 <html>
06 <head>
07 <title>建立無序列表</title>
08 </head>
09 <body>
10 <h2>圖像設計軟件</h2>
11 <ul>
12 <li>Photoshop
13 <li>Illustrator
14 <li>Freehand
15 <li>CorelDraw
16 </ul>
17 </body>
18 </html>

文件說明

第11行定義了列表的類型為無序，第12行至15行使用了<li>標記作為列表項目的開始。
#p# 無序列表標記<UL>
在無序列表中，各個列表項之間沒有順序級別之分，它通常使用一個項目符號作為每個列表項的前綴。無序列表主要使用<ul>、<dir>、<dl>、<menu>、<li>幾個標記和type屬性。

基本語法 <ul>

語法解釋
在無序列表中，使用<ul>作為無序的聲明，使用<li>作為每一個項目的起始。文件范例：7-4.htm
通過<ul>和<li>標記建立無序列表。

01 <!-- ------------------------------ -->
02 <!-- 文件范例：7-4.htm -->
03 <!-- 文件說明：建立無序列表 -->
04 <!-- ------------------------------ -->
05 <html>
06 <head>
07 <title>建立無序列表</title>
08 </head>
09 <body>
10 <h2>圖像設計軟件</h2>
11 <ul>
12 <li>Photoshop
13 <li>Illustrator
14 <li>Freehand
15 <li>CorelDraw
16 </ul>
17 </body>
18 </html>

文件說明

第11行定義了列表的類型為無序，第12行至15行使用了<li>標記作為列表項目的開始。
#p# 目錄列表標記<DIR>
目錄列表用于顯示文件內容的目錄大綱，通常用于設計一個壓縮窄列的列表，用于顯示一系列的列表內容，例如字典中的索引或單詞表中的單詞等。列表中每項至多只能有20個字符。

基本語法 <dir> <li>項目一 <li>項目二 <li>項目三 …… </dir>

語法解釋
在目錄列表中，使用<dir>作為目錄列表的聲明，使用<li>作為每一個項目的起始。文件范例：7-5.htm
通過<dir>和<li>標記建立目錄列表。

01 <!-- ------------------------------ -->
02 <!-- 文件范例：7-5.htm -->
03 <!-- 文件說明：建立目錄列表 -->
04 <!-- ------------------------------ -->
05 <html>
06 <head>
07 <title>建立目錄列表</title>
08 </head>
09 <body>
10 <h2>圖像設計軟件</h2>
11 <dir>
12 <li>Photoshop
13 <li>Illustrator
14 <li>Freehand
15 <li>CorelDraw
16 </dir>
17 </body>
18 </html>

文件說明

第11行定義了列表的類型為目錄，第12行至第15行使用了<li>標記作為列表項目的開始。
#p# 定義列表標記<DL>
定義列表是一種兩個層次的列表，用于解釋名詞的定義，名詞為第一層次，解釋為第二層次，并且不包含項目符號。定義列表也稱為字典列表，因為它與字典具有相同的格式。在定義列表中，每個列表項帶有一個縮進的定義字段，就好象字典對文字進行解釋一樣。

基本語法 <dl> <dt>名詞一<dd>解釋一 <dt>名詞二<dd>解釋二 <dt>名詞三<dd>解釋三 …… </dl>

語法解釋
在定義列表中，使用<dl>作為定義列表的聲明，使用<dt>作為名詞的標題，<dd>用來解釋名詞。文件范例：7-6.htm
通過<dl>、<dt>、<dd>標記建立定義列表。

01 <!-- ------------------------------ -->
02 <!-- 文件范例：7-6.htm -->
03 <!-- 文件說明：建立定義列表 -->
04 <!-- ------------------------------ -->
05 <html>
06 <head>
07<title>建立定義列表</title>
08 </head>
09 <body>
10 <h2>圖像設計軟件</h2>
11 <dl>
12 <dt>Photoshop<dd>Adobe公司的圖像處理軟件
13 <dt>Illustrator<dd>Adobe公司的矢量繪圖軟件
14 <dt>Freehand<dd>Macromedia公司的矢量繪圖軟件
15 <dt>CorelDraw<dd>Corel公司的圖形圖像軟件
16 </dl>
17 </body>
18 </html> 

文件說明

第11行定義了列表的類型為定義列表，第12行至15行使用了<dt>顯示軟件名稱，<dd>顯示軟件的說明。
#p# 菜單列表標記<MENU>
菜單列表用于顯示菜單內容，設計單列的菜單。在Internet Explorer瀏覽器中的顯示和無序列表是相同的。

基本語法 <menu>

<li>項目一

<li>項目二

<li>項目三

……

</menu>

語法解釋
在菜單列表中，使用<menu>作為菜單列表的聲明，使用<li>作為每一個項目的起始。文件范例：7-7.htm
通過<menu>和<li>標記建立目錄列表。

01 <!-- ------------------------------ -->
02 <!-- 文件范例：7-7.htm -->
03 <!-- 文件說明：建立菜單列表 -->
04 <!-- ------------------------------ -->
05 <html>
06 <head>
07 <title>建立菜單列表</title>
08 </head>
09 <body>
10 <h2>圖像設計軟件</h2>
11 <menu>
12 <li>Photoshop
13 <li>Illustrator
14 <li>Freehand
15 <li>CorelDraw
16 </menu>
17 </body>
18 </html>

文件說明

第11行定義了列表的類型為菜單，第12行至第15行使用了<li>標記作為列表項目的開始。
#p# 無序列表的類型屬性TYPE
在無序列表的默認情況下，使用●作為列表的開始，我們可以通過TYPE屬性將無序列表的類型設置為○或□。

基本語法 <ul type=value> </ul>

語法解釋
其中value的值如下表所示disc ● circle ○ square □ 文件范例：7-8.htm
通過type屬性設定無序列表編號的類型。

01 <!-- ------------------------------ -->
02 <!-- 文件范例：7-8.htm -->
03 <!-- 文件說明：設定無序列表編號類型-->
04 <!-- ------------------------------ -->
05 <html>
06 <head>
07 <title>設定無序列表編號類型</title>
08 </head>
09 <body>
10 <h2>圖像設計軟件</h2>
11 <ul type=circle>
12 <li>Photoshop
13 <li>Illustrator
14 <li>Freehand
15 <li>CorelDraw
16 </ul>
17 <hr>
18 <h2>圖像設計軟件</h2>
19 <ul type=square>
20 <li>Photoshop
21 <li>Illustrator
22 <li>Freehand
23 <li>CorelDraw
24 </ul>
25 <body>
26 </html>

文件說明

第11行定義了列表的編號類型為○，第19行定義了列表的編號類型為□。
#p# 定義列表的嵌套
嵌套列表指的是多于一級層次的列表，一級項目下面可以存在二級項目、三級項目等。項目列表可以進行嵌套，以實現多級項目列表的形式。定義列表是一種兩個層次的列表，用于解釋名詞的定義，名詞為第一層次，解釋為第二層次，并且不包含項目符號。

基本語法 <dl> <dt>名詞一 <dd>解釋一 <dd>解釋二 <dd>解釋三 <dt>名詞二 <dd>解釋一 <dd>解釋二 <dd>解釋三 …… </dl>

語法解釋
在定義列表中，一個<dt>標記下可以有多個<dd>標記作為名詞的解釋和說明，以實現定義列表的嵌套。文件范例：7-9.htm
通過<dl>、<dt>、<dd>標記建立定義列表的嵌套。

01 <!-- ------------------------------ -->
02 <!-- 文件范例：7-9.htm -->
03 <!-- 文件說明：定義列表嵌套 -->
04 <!-- ------------------------------ -->
05 <html>
06 <head>
07 <title>定義列表嵌套</title>
08 </head>
09 <body>
10 <h2>圖像設計軟件</h2>
11 <dl>
12 <dt><u>Photoshop</u>
13 <dd>Adobe公司出品
14 <dd>圖像處理軟件
15 <dt><u>Illustrator</u>
16 <dd>Adobe公司出品
17 <dd>矢量繪圖軟件
18 <dt><u>Freehand</u>
19 <dd>Macromedia公司出品
20 <dd>矢量繪圖軟件
21 <dt><u>CorelDraw</u>
22 <dd>Corel公司出品
23 <dd>圖形圖像軟件
24 </dl>
25 </body>
26 </html>

文件說明

第12、15、18、21行定義了定義列表的第一級，并使用了<u>標記加注了下劃線，第13和14行、第16和第17行、第19行和第20行、第22行和23行定義了列表的解釋。
#p# 無序列表和有序列表的嵌套
這種嵌套類型是最常見的列表嵌套，重復地使用<ol>和<ul標記可以組合出嵌套列表。文件范例：7-10.htm
通過<ol>和<ul>標記建立列表的嵌套。

01 <!-- ------------------------------ -->
02 <!-- 文件范例：7-10.htm -->
03 <!-- 文件說明：列表嵌套 -->
04 <!-- ------------------------------ -->
05 <html>
06 <head>
07 <title>列表嵌套</title>
08 </head>
09 <body>
10 <ul type=square>
11 <li><u>圖像設計軟件</u>
12 <ol type=I>
13 <li>Photoshop
14 <li>Illustrator
15 <li>Freehand
16 <li>CorelDraw
17 </ol>
18 <li><u>網頁制作軟件</u>
19 <ol type=I>
20 <li>Dreamweaver
21 <li>Frontpage
22 <li>Golive
23 </ol>
24 <li><u>網頁動畫軟件</u>
25 <ol type=I>
26 <li>Flash
27 <li>LiveMotion
28 </ol>
29 </ul>
30 </body>
31 </html>

文件說明

第10行定義了列表的第一級，第11、18、24行定義了無序列表的內容，并使用了標記加注了下劃線，第12至17行、第19至23行、第25至28行定義了二級列表。

標記	描述	值	描述	值	描述

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

HTML網頁列表標記學習教程_HTML/Xhtml_網頁制作

推薦度：

點擊下載本文 文檔為doc格式

標簽：標簽制作標記

熱門焦點

HTML網頁列表標記學習教程_HTML/Xhtml_網頁制作

HTML網頁列表標記學習教程_HTML/Xhtml_網頁制作

HTML網頁列表標記學習教程_HTML/Xhtml_網頁制作

最新推薦

猜你喜歡

熱門推薦