Heim > Artikel > Web-Frontend > HTML-Webseitenlisten-Markup-Lerntutorial_HTML/Xhtml_Webseitenproduktion
HTML-Webseitenlisten-Markup-Lerntutorial_HTML/Xhtml_Webseitenproduktion
- PHP中文网Original
- 2016-05-16 16:44:102061Durchsuche
Tutorial zum Erlernen von HTML-Webseitenlisten-Markup.
In HTML-Seiten können Listen die Rolle des Gliederungsschreibens übernehmen. Listen werden in zwei Typen unterteilt: eine ist eine geordnete Liste und die andere ist eine ungeordnete Liste. Ersteres verwendet Aufzählungspunkte, um ungeordnete Elemente zu kennzeichnen, während letzteres Zahlen verwendet, um die Reihenfolge der Elemente festzuhalten.
Unter der sogenannten Sortierung versteht man das Anordnen von Listeneinträgen in numerischer oder alphabetischer Reihenfolge.
sog
Tutorial zum Erlernen der Markup-Markierung von HTML-Webseiten.
Auf HTML-Seiten können Listen die Rolle des Gliederungsschreibens spielen. Listen werden in zwei Typen unterteilt: eine ist eine geordnete Liste und die andere ist eine ungeordnete Liste. Ersteres verwendet Aufzählungspunkte, um ungeordnete Elemente zu kennzeichnen, während letzteres Zahlen verwendet, um die Reihenfolge der Elemente festzuhalten.
Unter der sogenannten Sortierung versteht man das Anordnen von Listeneinträgen in numerischer oder alphabetischer Reihenfolge.
Die sogenannte Unordnung bezieht sich auf Listenelemente, die mit ●, ○, □ usw. beginnen, ohne Reihenfolge.
Die wichtigsten Tags der Liste sind in der Tabelle unten aufgeführt
ff6d136ddc5fdfeffaf53ff6ee95f185
Ungeordnete Liste
Geordnete Liste
Verzeichnisliste
Definitionsliste
Menüliste
Definieren Sie die Bezeichnung der Liste
Listenelement-Tag
Tags für geordnete Listenc82288867cc1587ebeab2ac62c9b98dd
Geordnete Listen verwenden Zahlen anstelle von Aufzählungszeichen, um Elemente zu organisieren. Die Elemente in der Liste beginnen mit einer Zahl oder einem englischen Buchstaben, und zwischen den Elementen gibt es normalerweise eine Reihenfolge. In einer geordneten Liste werden hauptsächlich die beiden Tags c34106e0b4e09414b63b2ea253ff83d6 sowie der Typ und zwei Startattribute verwendet.
- Grundlegende Grammatik c34106e0b4e09414b63b2ea253ff83d6 25edfb22a4f469ecb59f1190150159c6Punkt eins25edfb22a4f469ecb59f1190150159c6Punkt zwei25edfb22a4f469ecb59f1190150159c6Punkt drei... f6f112ef45f603be226bc581f9dd5e90
Syntaxerklärung
Verwenden Sie in einer geordneten Liste 09471ad0eb7abf3904b81228b087d334Als geordnete Aussage verwenden Sie 25edfb22a4f469ecb59f1190150159c6 am Anfang jedes Elements.
Dateibeispiel: 7-1.htm
Erstellen Sie eine geordnete Liste mit den Tags c34106e0b4e09414b63b2ea253ff83d6
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> 文件说明
Zeile 11 definiert den Typ der Liste wie geordnet, und die Zeilen 12 bis 15 verwenden die Markierung 25edfb22a4f469ecb59f1190150159c6 als Anfang des Listenelements.
#P#
Das Typattribut TYPE
der geordneten Liste. Standardmäßig verwendet die geordnete Liste eine numerische Folge als Anfang der Liste. Über das Typattribut können wir den Typ der geordneten Liste auf englische oder lateinische Buchstaben festlegen.
- Grundlegende Grammatik 36eda1e8b34fa48471f679178d99ecb1 f6f112ef45f603be226bc581f9dd5e90
Syntaxerklärung
Der Wert von value ist in der folgenden Tabelle 1 dargestellt
Zahlen 1, 2, 3...
A
Kleinbuchstaben a, b, c
A
Großbuchstaben A, B, C
ich
Kleine römische Ziffern i, ii, iii...
ICH
Großgeschriebene römische Ziffern Ⅰ, Ⅲ, Ⅲ...
Dateibeispiel: 7-2.htm
Legen Sie den Typ der geordneten Listennummer über das Typattribut fest.
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和
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）！