웹 프론트엔드 HTML 튜토리얼 HTML 웹페이지 목록 마크업 학습 튜토리얼_HTML/Xhtml_웹페이지 제작

HTML 웹페이지 목록 마크업 학습 튜토리얼_HTML/Xhtml_웹페이지 제작

May 16, 2016 pm 04:44 PM

HTML 웹페이지 목록 마크업 학습 튜토리얼입니다. HTML 페이지에서 목록은 개요 작성 역할을 할 수 있습니다. 목록은 두 가지 유형으로 나뉘는데, 하나는 순서가 있는 목록이고 다른 하나는 순서가 없는 목록입니다. 전자는 순서가 없는 항목을 표시하기 위해 글머리 기호를 사용하고, 후자는 항목의 순서를 기록하기 위해 숫자를 사용합니다. 소위 순서 지정이란 목록 항목을 숫자 또는 알파벳 순서로 배열하는 것을 의미합니다. 소위 HTML 웹페이지 목록 마크업 학습 튜토리얼
HTML 페이지에서 목록은 개요 작성 역할을 할 수 있습니다. 목록은 두 가지 유형으로 나뉘는데, 하나는 순서가 있는 목록이고 다른 하나는 순서가 없는 목록입니다. 전자는 순서가 없는 항목을 표시하기 위해 글머리 기호를 사용하고, 후자는 항목의 순서를 기록하기 위해 숫자를 사용합니다. 소위 순서 지정이란 목록 항목을 숫자 또는 알파벳 순서로 배열하는 것을 의미합니다. 무질서는 순서 없이 ●, ○, □ 등으로 시작하는 목록 항목을 말합니다.
목록에 대한 주요 태그는 아래 표와 같습니다

    ​ ​ 순서가 지정되지 않은 목록                                     ~ 주문목록                                     > 디렉토리 목록                                     > ​ ​ 정의 목록                                     ~ 메뉴 목록                                     ~ 목록의 레이블 정의                                     > 목록 항목 태그                   ​ 정렬된 목록 태그

      정렬된 목록은 글머리 기호 대신 숫자를 사용하여 항목을 구성합니다. 목록의 항목은 숫자나 영문자로 시작하며 일반적으로 항목 사이에 순서가 있습니다. 순서가 지정된 목록에서는
      1. 두 개의 태그와 type 및 두 개의 시작 속성이 주로 사용됩니다.

        • 기본문법
          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
          은 기본적으로 순서 목록의 시작으로 숫자 순서를 사용합니다. 유형 속성을 통해 순서 목록의 유형을 영어 또는 로마자로 설정할 수 있습니다.

          • 기본문법

          구문 설명
          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中文网(www.php.cn)!


본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25 : Myrise에서 모든 것을 잠금 해제하는 방법
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

HTML의 테이블 테두리 HTML의 테이블 테두리 Sep 04, 2024 pm 04:49 PM

HTML의 테이블 테두리 안내. 여기에서는 HTML의 테이블 테두리 예제를 사용하여 테이블 테두리를 정의하는 여러 가지 방법을 논의합니다.

HTML의 중첩 테이블 HTML의 중첩 테이블 Sep 04, 2024 pm 04:49 PM

HTML의 Nested Table에 대한 안내입니다. 여기에서는 각 예와 함께 테이블 내에 테이블을 만드는 방법을 설명합니다.

HTML 여백-왼쪽 HTML 여백-왼쪽 Sep 04, 2024 pm 04:48 PM

HTML 여백-왼쪽 안내. 여기에서는 HTML margin-left에 대한 간략한 개요와 코드 구현과 함께 예제를 논의합니다.

HTML 테이블 레이아웃 HTML 테이블 레이아웃 Sep 04, 2024 pm 04:54 PM

HTML 테이블 레이아웃 안내. 여기에서는 HTML 테이블 레이아웃의 값에 대해 예제 및 출력 n 세부 사항과 함께 논의합니다.

HTML 정렬 목록 HTML 정렬 목록 Sep 04, 2024 pm 04:43 PM

HTML 순서 목록에 대한 안내입니다. 여기서는 HTML Ordered 목록 및 유형에 대한 소개와 각각의 예에 대해서도 설명합니다.

HTML 입력 자리 표시자 HTML 입력 자리 표시자 Sep 04, 2024 pm 04:54 PM

HTML 입력 자리 표시자 안내. 여기서는 코드 및 출력과 함께 HTML 입력 자리 표시자의 예를 논의합니다.

HTML에서 텍스트 이동 HTML에서 텍스트 이동 Sep 04, 2024 pm 04:45 PM

HTML에서 텍스트 이동 안내. 여기서는 Marquee 태그가 구문과 함께 작동하는 방식과 구현할 예제에 대해 소개합니다.

HTML 온클릭 버튼 HTML 온클릭 버튼 Sep 04, 2024 pm 04:49 PM

HTML onclick 버튼에 대한 안내입니다. 여기에서는 각각의 소개, 작업, 예제 및 다양한 이벤트의 onclick 이벤트에 대해 설명합니다.

See all articles