検索

ホームページ  >  記事  >  ウェブフロントエンド  >  HTML Webページリストマークアップ学習チュートリアル_HTML/Xhtml_Webページ制作

HTML Webページリストマークアップ学習チュートリアル_HTML/Xhtml_Webページ制作

PHP中文网
PHP中文网オリジナル
2016-05-16 16:44:102061ブラウズ

HTML Web ページ リストのマークアップ学習チュートリアル。 HTML ページでは、リストがアウトラインの記述の役割を果たすことができます。リストは 2 つのタイプに分けられ、1 つは順序付きリスト、もう 1 つは順序なしリストです。前者は箇条書きを使用して順序のない項目をマークし、後者は番号を使用して項目の順序を記録します。 いわゆる順序付けとは、リスト項目を数値順またはアルファベット順に配置することを指します。 いわゆる HTML Web ページのリスト マークアップ学習チュートリアル。
HTML ページでは、リストがアウトラインの記述の役割を果たすことができます。リストは 2 つのタイプに分けられ、1 つは順序付きリスト、もう 1 つは順序なしリストです。前者は箇条書きを使用して順序のない項目をマークし、後者は番号を使用して項目の順序を記録します。 いわゆる順序付けとは、リスト項目を数値順またはアルファベット順に配置することを指します。 いわゆるディスオーダーとは、●、○、□などで始まる項目を順序なく列挙することを指します。
リストに関する主なタグは以下の表のとおりです
ff6d136ddc5fdfeffaf53ff6ee95f185 順序なしリスト                                                                                                                                    順序付きリスト                                                                                                                             ディレクトリリスト                                                                                                                         定義一覧                                                                                                                                   メニュー一覧                                                                                                                        リストのラベルを定義します                                                                                                                                     リストアイテムタグ                   ​ 順序付きリスト タグc82288867cc1587ebeab2ac62c9b98dd
順序付きリストでは、箇条書きの代わりに番号を使用して項目を整理します。リスト内の項目は数字または英字で始まり、通常、項目の間にはシーケンスがあります。順序付きリストでは、type 属性と 2 つの start 属性のほかに、2 つのタグ

    と
  1. が主に使用されます。
    • 基本文法 c34106e0b4e09414b63b2ea253ff83d6 25edfb22a4f469ecb59f1190150159c6項目 125edfb22a4f469ecb59f1190150159c6項目 225edfb22a4f469ecb59f1190150159c6項目 3... f6f112ef45f603be226bc581f9dd5e90

    構文説明
    順序付きリストでは、b9538cf83b2b3fbdc46a16811182579e順序立てたステートメントとして、各項目の先頭に 25edfb22a4f469ecb59f1190150159c6 を使用します。 ファイルの例: 7-1.htm

      タグと
    1. タグを使用して順序付きリストを作成します。 
      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 行目ではリスト項目の先頭として 25edfb22a4f469ecb59f1190150159c6 マークを使用します。
                                                                              #p# 順序付きリストの type 属性 TYPE
      デフォルトでは、順序付きリストはリストの先頭として数値シーケンスを使用します。type 属性を使用して、順序付きリストのタイプを英語またはローマ字に設定できます。

      • 基本文法 36eda1e8b34fa48471f679178d99ecb1 f6f112ef45f603be226bc581f9dd5e90

      構文説明
      value の値は次の表 1 に示すとおりです。 数字1、2、3...                                     ある 小文字の a、b、c                                     あ 大文字の A、B、C                                     私 小文字のローマ数字 i、ii、iii...                                     私 大文字ローマ数字Ⅰ、Ⅲ、Ⅲ...                   ​ ファイル例: 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属性可以调整，并且英文字母和罗马字母的起始值也可以调整。

      • 基本语法 a2865466f8f860397375d0fd0f21b3b1 f6f112ef45f603be226bc581f9dd5e90

      语法解释
      其中不论列表编号的类型是数字、英文字母还是罗马字母，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# 无序列表标记64349c75da2f924823fe3c3e91a71ff3
      在无序列表中，各个列表项之间没有顺序级别之分，它通常使用一个项目符号作为每个列表项的前缀。无序列表主要使用ff6d136ddc5fdfeffaf53ff6ee95f185、c64710d9629832af8312be7789856824、5c69336ffbc20d23018e48b396cdd57a、5c0e96d12fc7501cef2ae2efde646ee0、25edfb22a4f469ecb59f1190150159c6几个标记和type属性。

      • 基本语法 ff6d136ddc5fdfeffaf53ff6ee95f185

      • 25edfb22a4f469ecb59f1190150159c6项目一 25edfb22a4f469ecb59f1190150159c6项目二 25edfb22a4f469ecb59f1190150159c6项目三 …… 929d1f5ca49e04fdcb27f9465b944689

      语法解释
      在无序列表中，使用ff6d136ddc5fdfeffaf53ff6ee95f185作为无序的声明，使用25edfb22a4f469ecb59f1190150159c6作为每一个项目的起始。 文件范例：7-4.htm
      通过ff6d136ddc5fdfeffaf53ff6ee95f185和25edfb22a4f469ecb59f1190150159c6标记建立无序列表。

      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行使用了25edfb22a4f469ecb59f1190150159c6标记作为列表项目的开始。
                                                     #p# 无序列表标记64349c75da2f924823fe3c3e91a71ff3
      在无序列表中，各个列表项之间没有顺序级别之分，它通常使用一个项目符号作为每个列表项的前缀。无序列表主要使用ff6d136ddc5fdfeffaf53ff6ee95f185、c64710d9629832af8312be7789856824、5c69336ffbc20d23018e48b396cdd57a、5c0e96d12fc7501cef2ae2efde646ee0、25edfb22a4f469ecb59f1190150159c6几个标记和type属性。

      • 基本语法 ff6d136ddc5fdfeffaf53ff6ee95f185

      • 25edfb22a4f469ecb59f1190150159c6项目一 25edfb22a4f469ecb59f1190150159c6项目二 25edfb22a4f469ecb59f1190150159c6项目三 …… 929d1f5ca49e04fdcb27f9465b944689

      语法解释
      在无序列表中，使用ff6d136ddc5fdfeffaf53ff6ee95f185作为无序的声明，使用25edfb22a4f469ecb59f1190150159c6作为每一个项目的起始。 文件范例：7-4.htm
      通过ff6d136ddc5fdfeffaf53ff6ee95f185和25edfb22a4f469ecb59f1190150159c6标记建立无序列表。

      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行使用了25edfb22a4f469ecb59f1190150159c6标记作为列表项目的开始。
                                                     #p# 目录列表标记22a3afa6929a2c87025fe3045a234971
      目录列表用于显示文件内容的目录大纲，通常用于设计一个压缩窄列的列表，用于显示一系列的列表内容，例如字典中的索引或单词表中的单词等。列表中每项至多只能有20个字符。

      • 基本语法 c64710d9629832af8312be7789856824 25edfb22a4f469ecb59f1190150159c6项目一 25edfb22a4f469ecb59f1190150159c6项目二 25edfb22a4f469ecb59f1190150159c6项目三   …… 7d35c0c880b036d71b5eb74c3bb96705

      语法解释
      在目录列表中，使用c64710d9629832af8312be7789856824作为目录列表的声明，使用25edfb22a4f469ecb59f1190150159c6作为每一个项目的起始。 文件范例：7-5.htm
      通过c64710d9629832af8312be7789856824和25edfb22a4f469ecb59f1190150159c6标记建立目录列表。

      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行使用了25edfb22a4f469ecb59f1190150159c6标记作为列表项目的开始。
                                                     #p# 定义列表标记7b89938e4f463ea3de8d3da8e06d3965
      定义列表是一种两个层次的列表，用于解释名词的定义，名词为第一层次，解释为第二层次，并且不包含项目符号。定义列表也称为字典列表，因为它与字典具有相同的格式。在定义列表中，每个列表项带有一个缩进的定义字段，就好象字典对文字进行解释一样。

      • 基本语法 5c69336ffbc20d23018e48b396cdd57a 73de882deff7a050a357292d0a1fca94名词一67bc4f89d416b0b8236eaa5f43dee742解释一 73de882deff7a050a357292d0a1fca94名词二67bc4f89d416b0b8236eaa5f43dee742解释二 73de882deff7a050a357292d0a1fca94名词三67bc4f89d416b0b8236eaa5f43dee742解释三  …… cd324b2387ec29e44e8e788c60648872

      语法解释
      在定义列表中，使用5c69336ffbc20d23018e48b396cdd57a作为定义列表的声明，使用73de882deff7a050a357292d0a1fca94作为名词的标题，67bc4f89d416b0b8236eaa5f43dee742用来解释名词。 文件范例：7-6.htm
      通过5c69336ffbc20d23018e48b396cdd57a、73de882deff7a050a357292d0a1fca94、67bc4f89d416b0b8236eaa5f43dee742标记建立定义列表。

      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行使用了73de882deff7a050a357292d0a1fca94显示软件名称，67bc4f89d416b0b8236eaa5f43dee742显示软件的说明。
                                                     #p# 菜单列表标记3e366e781d266a7cfb208f01a0fb3706
      菜单列表用于显示菜单内容，设计单列的菜单。在Internet Explorer浏览器中的显示和无序列表是相同的。

      • 基本语法 5c0e96d12fc7501cef2ae2efde646ee0

      • 25edfb22a4f469ecb59f1190150159c6项目一

      • 25edfb22a4f469ecb59f1190150159c6项目二

      • 25edfb22a4f469ecb59f1190150159c6项目三

      • ……

      • 5a9a0e9117a868e744002d2d9e892511

      语法解释
      在菜单列表中，使用5c0e96d12fc7501cef2ae2efde646ee0作为菜单列表的声明，使用25edfb22a4f469ecb59f1190150159c6作为每一个项目的起始。 文件范例：7-7.htm
      通过5c0e96d12fc7501cef2ae2efde646ee0和25edfb22a4f469ecb59f1190150159c6标记建立目录列表。

      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行使用了25edfb22a4f469ecb59f1190150159c6标记作为列表项目的开始。
                                                     #p# 无序列表的类型属性TYPE
      在无序列表的默认情况下，使用●作为列表的开始，我们可以通过TYPE属性将无序列表的类型设置为○或□。

      • 基本语法 01a0a57a2f842edf78a6a3008fc82049 929d1f5ca49e04fdcb27f9465b944689

      语法解释
      其中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# 定义列表的嵌套
      嵌套列表指的是多于一级层次的列表，一级项目下面可以存在二级项目、三级项目等。项目列表可以进行嵌套，以实现多级项目列表的形式。定义列表是一种两个层次的列表，用于解释名词的定义，名词为第一层次，解释为第二层次，并且不包含项目符号。

      • 基本语法 5c69336ffbc20d23018e48b396cdd57a 73de882deff7a050a357292d0a1fca94名词一 67bc4f89d416b0b8236eaa5f43dee742解释一 67bc4f89d416b0b8236eaa5f43dee742解释二 67bc4f89d416b0b8236eaa5f43dee742解释三 73de882deff7a050a357292d0a1fca94名词二 67bc4f89d416b0b8236eaa5f43dee742解释一 67bc4f89d416b0b8236eaa5f43dee742解释二 67bc4f89d416b0b8236eaa5f43dee742解释三  …… cd324b2387ec29e44e8e788c60648872

      语法解释
      在定义列表中，一个73de882deff7a050a357292d0a1fca94标记下可以有多个67bc4f89d416b0b8236eaa5f43dee742标记作为名词的解释和说明，以实现定义列表的嵌套。 文件范例：7-9.htm
      通过5c69336ffbc20d23018e48b396cdd57a、73de882deff7a050a357292d0a1fca94、67bc4f89d416b0b8236eaa5f43dee742标记建立定义列表的嵌套。

      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行定义了定义列表的第一级，并使用了88f336217b3880082bb52d49b5de60a5标记加注了下划线，第13和14行 、第16和第17行、第19行和第20行、第22行和23行定义了列表的解释。
                                                     #p# 无序列表和有序列表的嵌套
      这种嵌套类型是最常见的列表嵌套，重复地使用c34106e0b4e09414b63b2ea253ff83d6和通过c34106e0b4e09414b63b2ea253ff83d6和ff6d136ddc5fdfeffaf53ff6ee95f185标记建立列表的嵌套。

      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行定义了二级列表。                                                

      标记 描述 值 描述 值 描述

       以上就是HTML网页列表标记学习教程_HTML/Xhtml_网页制作的内容，更多相关内容请关注PHP中文网（www.php.cn）！


声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：XHTMLコード_HTML/Xhtml_Webページ制作のアプリケーションでよくある問題のまとめ次の記事：XHTMLコード_HTML/Xhtml_Webページ制作のアプリケーションでよくある問題のまとめ

関連記事

続きを見る