列表
列表是一种条理化地排列信息的方法。它把内容一条条地水平排列显示,直观、清晰。而它也不同于表格,一般列表没有表格复杂。
☆列表标记使用的通用格式
<标记>
<条目标记1>条目内容1
<条目标记2>条目内容2
<条目标记3>条目内容3
……
</标记>
常用列表标记符:
<dl>:列表
<dt>:上层项目
<dd> :下层项目
1.<dir>和</dir>
2.<menu>和</menu>
3.<ul>和</ul>
4. <ol>与</ol>
<dir>和</dir>把其间包含的内容以列表方式显示,并在每个条目前加上一个标记符号。该标记在HTML5中已经不建议使用!
<menu>和</menu>与<dir>作用相同,这两个标记比较简单,不能实现复杂的变化。
在“条目内容”后不用加换行标记<br>
☆列表的嵌套
主要是ul和ol列表可以相互嵌套。
☆两个可带属性的复杂列表标记ul和ol
1. <ul>和</ul>
此标记可以带属性,变成<ul type=f>的形式,f有如下几种:
f为disc:条目以符号“●”引导。
f为circle:条目以符号“○”引导。
f为square:条目以符号“■”引导。
2. <ol>与</ol>
此标记会自动给条目排序并加上序号,也可带有属性:
1) < ol type=f>
f为A:以大写字母排序。如A,B,C,D等。
f为a:以小写字母排序。如a,b,c,d等。
f为I:以大写罗马数字排序。如I,II,III,IV等。
f为i:以小写罗马数字排序。如i,ii,iii,iv等。
f为1:以阿拉伯数字排序。如1,2,3,4等。
2) <ol start=n>
n是一个数字,此标记符表示重新定义的起始号。
dl、dt、dd代码演示:
<html>
<head>
<title>列表演示</title>
</head>
<dl><!-- ①dl 列表 -->
<dt>部门</dt><!-- ②dt上层项目 -->
<dd>部门1</dd><!--③ dd下层项目 -->
<dd>部门2</dd>
<dd>部门3</dd>
</dl>
运行结果:
dir列表代码演示:
<dir><!-- ④dir列表 -->
<li>这是第一项</li><!-- ⑤li项目 -->
<li>这是第二项</li>
<li>这是第三项</li>
</dir>
运行结果:
menu列表:
<menu>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</menu>
运行结果:
ul无序列表代码演示:
<!-- 列表更多使用ul和ol 都是可以带属性的-->
<ul type="square"><!--⑥ul中的项是无序的,可以设置属性type -->
<li>这是第一项</li>
<li>这是第二项</li>
<li>这是第三项</li>
</ul>
运行结果:
ol有序列表代码演示:
<ol type="A" start="2"><!--⑦ol中的项是有序的,可以设置属性type -->
<li>这是第一项</li>
<li>这是第二项</li>
<li>这是第三项</li>
</ol>
</html>
运行结果:
关于列表的再次深度理解:
<!-- 演示列表标签 -->
<html>
<head><title>演示列表标签</title></head>
<body>
<!--●<ul>标签:定义无序列表,可选属性type(disc、square、circle)默认为disc-->
<ul type="square">
<li>无序列表项1</li>
<li>无序列表项2</li>
<li>无序列表项3</li>
<li>无序列表项4</li>
<li>无序列表项5</li>
</ul>
<hr color="#ff00ff" >
<!--●<ol>标签:定义有序列表,可选属性type(A、a、I、i、1) ;start:从第几个开始标记序号-->
<ol start="13" type="i" >
<!--●<li>标签:定义列表的项目,可选属性type(disc、square、circle、A、a、I、i、1) ;value-->
<li type="disc">有序列表项1</li>
<li>有序列表项2</li>
<li>有序列表项3</li>
<li>有序列表项4</li>
<li>有序列表项5</li>
</ol>
<hr color="#ff00ff" >
<!---●<dl>标签:定义定义列表-->
<dl>
<!---●<dt>标签:定义定义列表中的项目 -->
<dt>定义定义列表中的项目</dt>
<!--●<dd>标签:定义定义列表中项目的描述-->
<dd>HTML</dd>
<dd>C/C++</dd>
</dl>
<hr color="#ff00ff" >
<!--●列表中定义超链接,实现菜单切换功能 -->
<ul >
<li><a href="file:/f:/测试文件/abc.txt">链接1</a></li>
<li><a href="file:/f:/测试文件/abcs1.txt">链接2</a></li>
<li><a href="file:/f:/测试文件/abcd.txt">链接3</a></li>
</ul>
</body>
</html>
运行结果:
列表标签总结:
1、列表标签中有:
<ul> 定义无序列表。
<ol> 定义有序列表。
<li> 定义列表的项目。
<dir> 不赞成使用。定义目录列表。
<dl> 定义定义列表。
<dt> 定义定义列表中的项目。
<dd> 定义定义列表中项目的描述。
<menu> 定义命令的菜单/列表。
<command> 定义命令按钮。