HTML_列表详解

列表定义:

    除了专门的文本标签来修饰文本外,HTML还提供了打量的工具,帮助将文本内容组织成格式化表格。而列表的优点就存在于它的简单。

列表分类:

    列表分为:无序列表、有序列表、目录列表、定义列表、菜单列表。

列表主要标签:


无序列表:


①无序列表中的每个条目都又一个前导的<li>标签进行定义

②列表元素的末尾通常可以通过周围的文档结构推断出来,所以通常省略</li>结束标签

③不同的列表类型中使用<li>有一定的差别和限制。无序和有序列表中<li>后几乎可跟任何内容,包括:列表和段落等。

④一般情况下,浏览器会在每个条目前添加一个项目符号(即type属性的属性值),并让其占一行,每行会针对文档左边界缩进一定距离。

代码示例:

<body text="#000000">
<ul>
<li><font color="#CC3300"> email:571773795@qq.com </font></li>
<li><font color="#CC3300"> 电话号码:1830929****</font></li>
</ul>
</body>
运行结果:


有序列表:


    浏览器一般都会将有序列表内容的格式设置成与无序列表类型相似的外观,唯一的不同在于列表条目前边添加的是编号,而不是项目符号。编号从第一条目开始依次往后递增。

    另外值得一提的是type属性和start属性的属性值,没有人为设定属性值的情况下,项目符号从1开始依次递增; 并且start必须要和type连用,放到type属性的后边,type属性具体的属性值如下:


代码示例:

<ol type="a" compact="compact">
<li><font color="#CC3300">email:571773795@qq.com</font></li>
<li><font color="#CC3300">电话号码:1830929****</font></li>
<li><font color="#CC3300">第三条目</font></li>
</ol>
运行结果:


目录列表:

    目录列表是无序列表的一种特殊形式。HTML创建者最初创建<dir>标签的时候,是希望用其显示文件列表,同时浏览器中各列表元素能够尽量短,不超过20字;有些浏览器会以多列格式显示元素,而不使用前导的项目符号。


①<li>同样可以在目录列表中定义条目

②<dir>目录列表中的<li>标签不能包含任何块元素,例如:段落、其他列表、预先格式化的文本或者表单

代码及结果展示:


定义列表:

    定义列表与以上谈及的无序列表、有序列表不同,定义列表的条目可以带有文本、图片或者其他的多媒体元素,因此定义列表是表现术语表、名次列表或其他名称/值样式列表的理想表现方式。


①定义列表的每个条目都由两部分组成:术语、定义或解释

②每一个条目不在是<li>来标记,而是用<dt>来标记,紧跟着<dd>标签来表示条目的定义或解释

③HTML文档不要求必须有</dt>标签来结尾

④<dd>标签用于标记定义列表中条目的定义或解释部分的开始

除非使用样式表规则来显示属性,否则浏览器一般会在左边显示条目或术语名称,下行缩进显示其定义或解释,如果术语名称非常的短,可能放到一行中显示。

⑥与其他列表一样,通过<p>在条目之间添加更多的空间

代码与运行结果展示:


菜单列表:

    菜单列表是除了目录列表之外的无序列表的另外一种特殊形式。菜单列表用于显示菜单内容,设计单列的菜单等等,菜单列表中的项目一般比较短,浏览时方便,并可链接其他的菜单。


①<menu>菜单的外观一般更加的紧凑或者使用某种图形化下来菜单显示;如果列表的条目短到一定的程度,浏览器甚至可能会多列格式显示,不添加项目符号。

②使用<li>标签,<li>标签不能包含任何块元素,例如:段落、其他列表、预先格式化的文本或者表单

代码与运行结果展示:


评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

博士僧小星

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值