HTML 웹페이지 목록 마크업 학습 튜토리얼입니다.
HTML 페이지에서 목록은 개요 작성 역할을 할 수 있습니다. 목록은 두 가지 유형으로 나뉘는데, 하나는 순서가 있는 목록이고 다른 하나는 순서가 없는 목록입니다. 전자는 순서가 없는 항목을 표시하기 위해 글머리 기호를 사용하고, 후자는 항목의 순서를 기록하기 위해 숫자를 사용합니다.
소위 순서 지정이란 목록 항목을 숫자 또는 알파벳 순서로 배열하는 것을 의미합니다.
소위
HTML 웹페이지 목록 마크업 학습 튜토리얼
HTML 페이지에서 목록은 개요 작성 역할을 할 수 있습니다. 목록은 두 가지 유형으로 나뉘는데, 하나는 순서가 있는 목록이고 다른 하나는 순서가 없는 목록입니다. 전자는 순서가 없는 항목을 표시하기 위해 글머리 기호를 사용하고, 후자는 항목의 순서를 기록하기 위해 숫자를 사용합니다.
소위 순서 지정이란 목록 항목을 숫자 또는 알파벳 순서로 배열하는 것을 의미합니다.
무질서는 순서 없이 ●, ○, □ 등으로 시작하는 목록 항목을 말합니다.
목록에 대한 주요 태그는 아래 표와 같습니다
구문 설명
순서 목록에서 < ol>순서대로 설명하려면 각 항목의 시작 부분에
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행에서는
구문 설명
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#
无序列表标记
语法解释
在无序列表中，使用
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行使用了
语法解释
在无序列表中，使用
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行使用了
语法解释
在目录列表中，使用
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行使用了
语法解释
在定义列表中，使用
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行使用了
语法解释
在菜单列表中，使用
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
