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

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

PHP中文网
リリース: 2016-05-16 16:44:10
オリジナル
2074 人が閲覧しました

HTML Web ページ リストのマークアップ学習チュートリアル。 HTML ページでは、リストがアウトラインの記述の役割を果たすことができます。リストは 2 つのタイプに分けられ、1 つは順序付きリスト、もう 1 つは順序なしリストです。前者は箇条書きを使用して順序のない項目をマークし、後者は番号を使用して項目の順序を記録します。 いわゆる順序付けとは、リスト項目を数値順またはアルファベット順に配置することを指します。 いわゆる HTML Web ページのリスト マークアップ学習チュートリアル。
HTML ページでは、リストがアウトラインの記述の役割を果たすことができます。リストは 2 つのタイプに分けられ、1 つは順序付きリスト、もう 1 つは順序なしリストです。前者は箇条書きを使用して順序のない項目をマークし、後者は番号を使用して項目の順序を記録します。 いわゆる順序付けとは、リスト項目を数値順またはアルファベット順に配置することを指します。 いわゆるディスオーダーとは、●、○、□などで始まる項目を順序なく列挙することを指します。
リストに関する主なタグは以下の表のとおりです

    順序なしリスト                                                                                                                                    順序付きリスト                                                                                                                             ディレクトリリスト                                                                                                                         定義一覧                                                                                                                                   メニュー一覧                                                                                                                        リストのラベルを定義します                                                                                                                                     リストアイテムタグ                   ​ 順序付きリスト タグ

      順序付きリストでは、箇条書きの代わりに番号を使用して項目を整理します。リスト内の項目は数字または英字で始まり、通常、項目の間にはシーケンスがあります。順序付きリストでは、type 属性と 2 つの start 属性のほかに、2 つのタグ

      1. が主に使用されます。
        • 基本文法
          1. 項目 1
          2. 項目 2
          3. 項目 3...

        構文説明
        順序付きリストでは、< を使用します。 ol>順序立てたステートメントとして、各項目の先頭に

      2. を使用します。 ファイルの例: 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 行目ではリスト項目の先頭として

        2. マークを使用します。
                                                                                  #p# 順序付きリストの type 属性 TYPE
          デフォルトでは、順序付きリストはリストの先頭として数値シーケンスを使用します。type 属性を使用して、順序付きリストのタイプを英語またはローマ字に設定できます。

          • 基本文法

          構文説明
          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属性可以调整,并且英文字母和罗马字母的起始值也可以调整。

          • 基本语法

          语法解释
          其中不论列表编号的类型是数字、英文字母还是罗马字母,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# 无序列表标记


            在无序列表中,各个列表项之间没有顺序级别之分,它通常使用一个项目符号作为每个列表项的前缀。无序列表主要使用
            • 几个标记和type属性。

              • 基本语法

                • 项目一
                • 项目二
                • 项目三 ……

              语法解释
              在无序列表中,使用

                作为无序的声明,使用
              • 作为每一个项目的起始。 文件范例:7-4.htm
                通过
                • 标记建立无序列表。

                  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行使用了

                • 标记作为列表项目的开始。
                  #p# 无序列表标记

                    在无序列表中,各个列表项之间没有顺序级别之分,它通常使用一个项目符号作为每个列表项的前缀。无序列表主要使用
                    • 几个标记和type属性。

                      • 基本语法

                        • 项目一
                        • 项目二
                        • 项目三 ……

                      语法解释
                      在无序列表中,使用

                        作为无序的声明,使用
                      • 作为每一个项目的起始。 文件范例:7-4.htm
                        通过
                        • 标记建立无序列表。

                          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行使用了

                        • 标记作为列表项目的开始。
                          #p# 目录列表标记
                          目录列表用于显示文件内容的目录大纲,通常用于设计一个压缩窄列的列表,用于显示一系列的列表内容,例如字典中的索引或单词表中的单词等。列表中每项至多只能有20个字符。

                          • 基本语法
                          • 项目一
                          • 项目二
                          • 项目三 ……

                          语法解释
                          在目录列表中,使用

                          作为目录列表的声明,使用
                        • 作为每一个项目的起始。 文件范例:7-5.htm
                          通过
                        • 标记建立目录列表。

                          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行使用了

                        • 标记作为列表项目的开始。
                          #p# 定义列表标记

                          定义列表是一种两个层次的列表,用于解释名词的定义,名词为第一层次,解释为第二层次,并且不包含项目符号。定义列表也称为字典列表,因为它与字典具有相同的格式。在定义列表中,每个列表项带有一个缩进的定义字段,就好象字典对文字进行解释一样。

                          • 基本语法
                            名词一
                            解释一
                            名词二
                            解释二
                            名词三
                            解释三 ……

                          语法解释
                          在定义列表中,使用

                          作为定义列表的声明,使用
                          作为名词的标题,
                          用来解释名词。 文件范例:7-6.htm
                          通过
                          标记建立定义列表。

                          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行使用了

                          显示软件名称,
                          显示软件的说明。
                          #p# 菜单列表标记
                          菜单列表用于显示菜单内容,设计单列的菜单。在Internet Explorer浏览器中的显示和无序列表是相同的。

                          • 基本语法

                          • 项目一

                          • 项目二

                          • 项目三

                          • ……

                        语法解释
                        在菜单列表中,使用

                        作为菜单列表的声明,使用
                      • 作为每一个项目的起始。 文件范例:7-7.htm
                        通过
                      • 标记建立目录列表。

                        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行使用了

                      • 标记作为列表项目的开始。
                        #p# 无序列表的类型属性TYPE
                        在无序列表的默认情况下,使用●作为列表的开始,我们可以通过TYPE属性将无序列表的类型设置为○或□。

                        • 基本语法

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

                        • 基本语法
                          名词一
                          解释一
                          解释二
                          解释三
                          名词二
                          解释一
                          解释二
                          解释三 ……

                        语法解释
                        在定义列表中,一个

                        标记下可以有多个
                        标记作为名词的解释和说明,以实现定义列表的嵌套。 文件范例:7-9.htm
                        通过
                        标记建立定义列表的嵌套。

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

                          通过
                              标记建立列表的嵌套。

                              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中文网(m.sbmmt.com)!


関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート