HTML网页列表标记学习教程_HTML/Xhtml_网页制作-html tutorial-php.cn

Rumah

hujung hadapan web

html tutorial

HTML网页列表标记学习教程_HTML/Xhtml_网页制作

PHP中文网

May 16, 2016 pm 04:44 PM

HTML网页列表标记学习教程. 在html页面中，列表可以起到提纲写领的作用。列表分为两种类型，一是有序列表，一是无序列表。前者用项目符号来标记无序的项目，而后者则使用编号来记录项目的顺序。所谓有序，指的是按照数字或字母等顺序排列列表项目。所谓 HTML网页列表标记学习教程.
在html页面中，列表可以起到提纲写领的作用。列表分为两种类型，一是有序列表，一是无序列表。前者用项目符号来标记无序的项目，而后者则使用编号来记录项目的顺序。所谓有序，指的是按照数字或字母等顺序排列列表项目。所谓无序，是指以●、○、□等开头的，没有顺序的列表项目。
关于列表的主要标记，如下表所示

目录列表

、: 定义列表的标记
列表项目的标记有序列表标记

有序列表使用编号，而不是项目符号来编排项目。列表中的项目采用数字或英文字母开头，通常各项目间有先后的顺序性。在有序列表中，主要使用
和
两个标记以及type和两个start属性。

基本语法

项目一
项目二
项目三 ……

语法解释
在有序列表中，使用
作为有序的声明，使用
作为每一个项目的起始。文件范例：7-1.htm
通过
和
标记建立有序列表。
01  02  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> 文件说明
Salin selepas log masuk
第11行定义了列表的类型为有序，第12行到第15行使用了
标记作为列表项目的开始。
#p# 有序列表的类型属性TYPE
在有序列表的默认情况下，使用数字序号作为列表的开始，我们可以通过type属性将有序列表的类型设置为英文或罗马字母。
基本语法

语法解释
其中value的值如下表所示1 数字1，2，3…… a 小写字母a，b，c A 大写字母A，B，C i 小写罗马数字i，ii，iii…… I 大写罗马数字Ⅰ，Ⅲ，Ⅲ…… 文件范例：7-2.htm
通过type属性设定有序列表编号的类型。
01  02  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> 文件说明
Salin selepas log masuk
第11行定义了列表的编号类型为小写字母，第19行定义了列表的编号类型为大写的罗马字母，第27行定义了列表的编号类型为小写的罗马字母。
#p# 有序列表的起始属性START
在默认的情况下，有序列表从数字1开始记数，这个起始值通过start属性可以调整，并且英文字母和罗马字母的起始值也可以调整。
基本语法

语法解释
其中不论列表编号的类型是数字、英文字母还是罗马字母，value的值都是其始的数字。文件范例：7-3.htm
通过start属性设定有序列表的起始编号。
01  02  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> 文件说明
Salin selepas log masuk
第11行定义了数字有序列表从5开始，第19行定义了罗马数字的有序列表从Ⅲ开始。
#p# 无序列表标记

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

项目一
项目二
项目三 ……
语法解释
在无序列表中，使用
作为无序的声明，使用
作为每一个项目的起始。文件范例：7-4.htm
通过
和
标记建立无序列表。
01  02  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> 文件说明
Salin selepas log masuk
Salin selepas log masuk
第11行定义了列表的类型为无序，第12行至15行使用了
标记作为列表项目的开始。
#p# 无序列表标记

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

项目一
项目二
项目三 ……
语法解释
在无序列表中，使用
作为无序的声明，使用
作为每一个项目的起始。文件范例：7-4.htm
通过
和
标记建立无序列表。
01  02  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> 文件说明
Salin selepas log masuk
Salin selepas log masuk
第11行定义了列表的类型为无序，第12行至15行使用了
标记作为列表项目的开始。
#p# 目录列表标记
目录列表用于显示文件内容的目录大纲，通常用于设计一个压缩窄列的列表，用于显示一系列的列表内容，例如字典中的索引或单词表中的单词等。列表中每项至多只能有20个字符。
基本语法
项目一
项目二
项目三 ……
语法解释
在目录列表中，使用
作为目录列表的声明，使用
作为每一个项目的起始。文件范例：7-5.htm
通过和
标记建立目录列表。
01  02  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> 文件说明
Salin selepas log masuk
第11行定义了列表的类型为目录，第12行至第15行使用了
标记作为列表项目的开始。
#p# 定义列表标记

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

名词一
解释一
名词二
解释二
名词三
解释三 ……
语法解释
在定义列表中，使用
作为定义列表的声明，使用
作为名词的标题，
用来解释名词。文件范例：7-6.htm
通过
、
、
标记建立定义列表。
01  02  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> 文件说明
Salin selepas log masuk
第11行定义了列表的类型为定义列表，第12行至15行使用了
显示软件名称，
显示软件的说明。
#p# 菜单列表标记
菜单列表用于显示菜单内容，设计单列的菜单。在Internet Explorer浏览器中的显示和无序列表是相同的。
基本语法

项目一

项目二

项目三

……

语法解释
在菜单列表中，使用
作为菜单列表的声明，使用
作为每一个项目的起始。文件范例：7-7.htm
通过和
标记建立目录列表。
01  02  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> 文件说明
Salin selepas log masuk
第11行定义了列表的类型为菜单，第12行至第15行使用了
标记作为列表项目的开始。
#p# 无序列表的类型属性TYPE
在无序列表的默认情况下，使用●作为列表的开始，我们可以通过TYPE属性将无序列表的类型设置为○或□。
基本语法

语法解释
其中value的值如下表所示disc ● circle ○ square □ 文件范例：7-8.htm
通过type属性设定无序列表编号的类型。
01  02  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> 文件说明
Salin selepas log masuk
第11行定义了列表的编号类型为○，第19行定义了列表的编号类型为□。
#p# 定义列表的嵌套
嵌套列表指的是多于一级层次的列表，一级项目下面可以存在二级项目、三级项目等。项目列表可以进行嵌套，以实现多级项目列表的形式。定义列表是一种两个层次的列表，用于解释名词的定义，名词为第一层次，解释为第二层次，并且不包含项目符号。
基本语法

名词一
解释一
解释二
解释三
名词二
解释一
解释二
解释三 ……
语法解释
在定义列表中，一个
标记下可以有多个
标记作为名词的解释和说明，以实现定义列表的嵌套。文件范例：7-9.htm
通过
、
、
标记建立定义列表的嵌套。
01  02  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> 文件说明
Salin selepas log masuk
第12、15、18、21行定义了定义列表的第一级，并使用了标记加注了下划线，第13和14行、第16和第17行、第19行和第20行、第22行和23行定义了列表的解释。
#p# 无序列表和有序列表的嵌套
这种嵌套类型是最常见的列表嵌套，重复地使用
和通过
和
标记建立列表的嵌套。
01  02  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> 文件说明
Salin selepas log masuk
第10行定义了列表的第一级，第11、18、24行定义了无序列表的内容，并使用了标记加注了下划线，第12至17行、第19至23行、第25至28行定义了二级列表。

标记描述值描述值描述

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

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

Menjana ai hentai secara percuma.

Tunjukkan Lagi

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)

3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Tetapan grafik terbaik

3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Penyelesaian Riddle Seashell

2 minggu yang lalu By DDD

R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa

3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

WWE 2K25: Cara Membuka Segala -galanya Di Myrise

3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?

7456

Tutorial CakePHP

1376

Apakah format nama akaun stim

kunci pengaktifan win11 kekal

Sambungan NYT menunjukkan dan jawapan

Tunjukkan Lagi

Related knowledge

Sempadan Jadual dalam HTML Sep 04, 2024 pm 04:49 PM

Panduan untuk Sempadan Jadual dalam HTML. Di sini kita membincangkan pelbagai cara untuk menentukan sempadan jadual dengan contoh Sempadan Jadual dalam HTML.

Jadual Bersarang dalam HTML Sep 04, 2024 pm 04:49 PM

Ini ialah panduan untuk Nested Table dalam HTML. Di sini kita membincangkan cara membuat jadual dalam jadual bersama-sama dengan contoh masing-masing.

HTML jidar-kiri Sep 04, 2024 pm 04:48 PM

Panduan untuk HTML margin-kiri. Di sini kita membincangkan gambaran keseluruhan ringkas tentang HTML margin-left dan Contoh-contohnya bersama-sama dengan Pelaksanaan Kodnya.

Susun Atur Jadual HTML Sep 04, 2024 pm 04:54 PM

Panduan untuk Susun Atur Jadual HTML. Di sini kita membincangkan Nilai Susun Atur Jadual HTML bersama-sama dengan contoh dan output n perincian.

Senarai Tertib HTML Sep 04, 2024 pm 04:43 PM

Panduan kepada Senarai Tertib HTML. Di sini kami juga membincangkan pengenalan senarai dan jenis Tertib HTML bersama-sama dengan contoh mereka masing-masing

Pemegang Tempat Input HTML Sep 04, 2024 pm 04:54 PM

Panduan untuk Pemegang Tempat Input HTML. Di sini kita membincangkan Contoh Pemegang Tempat Input HTML bersama-sama dengan kod dan output.

Memindahkan Teks dalam HTML Sep 04, 2024 pm 04:45 PM

Panduan untuk Memindahkan Teks dalam HTML. Di sini kita membincangkan pengenalan, cara teg marquee berfungsi dengan sintaks dan contoh untuk dilaksanakan.

Butang onclick HTML Sep 04, 2024 pm 04:49 PM

Panduan untuk Butang onclick HTML. Di sini kita membincangkan pengenalan, kerja, contoh dan onclick Event masing-masing dalam pelbagai acara.

See all articles