什么是HTML列表

发布时间：2023-03-15 13:15:07 所属栏目：教程来源：

导读：无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记

无序列表使用 <ul> 标签

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
HTML 有序列表
同样，有序列表也是一列项目，列

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记

无序列表使用 <ul> 标签

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
HTML 有序列表
同样，有序列表也是一列项目，列表项目使用数字进行标记

有序列表始于 <ol> 标签

每个列表项始于 <li> 标签

列表项项使用数字来标记

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
HTML 自定义列表
自定义列表不仅仅是一列项目，而是项目及其注释的组合

自定义列表以 <dl> 标签开始

每个自定义列表项以 <dt> 开始

每个自定义列表项的定义以 <dd> 开始

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
列表的css
列表最重要的css属性便是list-style属性，它的语法如下：

list-style:list-style-image||list-style-position||list-style-type
list-style-image可定义列表前所使用图片，list-style-position属性取值含outside、inside；outside为默认值，列表项目标记此时被放置在文本以外，它将环绕文本在文本之外，inside列表项目旋转在文本以内，环绕文本对齐。

列表最重要的CSS属性便是list-style属性，它的语法如下：

list-style:list-style-image||list-style-position||list-style-type
list-style-image可定义列表前所使用图片，list-style-position属性取值含outside、inside；outside为默认值，列表项目标记此时被放置在文本以外，它将环绕文本在文本之外，inside列表项目旋转在文本以内，环绕文本对齐。

<style type="text/css">
ul{border:dotted 1px #666;}
li{background:#ddd;}
ul.out{list-style-position:outside;}
ul.in{list-style-position:inside;}
</style>
list-style-position为outside

<ul class="out">
<li>关于主题</li>
<li>关于形式</li>
<li>关于内容</li></ul>
<h4>list-style-position为inside</h4>
<ul class="in">
<li>关于主题</li>
<li>关于形式</li>
<li>关于内容</li></ul>
若列表外标签<ul>或<dl>或<ol>的padding-left设置为0，且list-style-position为outside时，列表符号将不会显示，如上例中ul添加padding-left:0;将显示如下：

list-style-type为列表显示类型，它共有9种常见属性值：

disc:默认值。实心圆

circle:空心圆

square:实心方块

decimal:阿拉伯数字

lower-roman:小写罗马数字

upper-roman:大写罗马数字

lower-alpha:小写英文字母

upper-alpha:大写英文字母

none:不使用项目符号

我们可以看到，三种不同列表实际上只是list-style-type默认值不一样而已，通过设置list-style-type即可实现不同显示效果。

列表之间的嵌套
列表嵌套的html书写是不少人容易犯的错误，经常写错格式是这样的：

<ul>
<li>男性</li>
<li>
<ol>女性
<li>女孩子</li>
<li>姑娘</li>
<li>大妈</li></ol>
</li>
</ul>
这里包括两处错误：一是<ul>后不允许直接跟文字，二是这里的文字“女性”应当在第二个<li>后。正确格式如下：

<ul>
<li>男性</li>
<li>女性
<ol>
<li>女孩子</li>
<li>姑娘</li>
<li>大妈</li></ol>
</li>
</ul>
使用适合的标签进行合理的嵌套可以实现很多复杂的布局，比如常见的tab标签、滑动门等完全不需要使用js操作DOM即可完成，而且实现简单，语义性强。

下例以文章列表为例，html如下：

<h4>站点文章列表摘要</h4>
<dl>
<dt>
<a>文章一：JavaScript程序的优化</a>
</dt>
<dd>文章发布时间:2021-4-17</dd>
<dt>
<a>文章二：深入解析JavaScript中eval</a>
</dt>
<dd>文章发布时间：2021-4-17</dd>
<dt>
<a>文章三：实现sqlite高并发的问题</a>
</dt>
<dd>文章发布时间:2021-4-17</dd></dl>
CSS样式如下：

<style type="text/css">
h4 {
   font-size:14px;
   color:#333;
}
a {
   color:#069;
}
dl {
   border:dashed 1px #666;
   font-size:14px;
   padding:4px;
   background:#FDFBDB;
}
dt {
   clear:left;
   float:left;
   padding:4px 0;
}
dd {
   text-align:right;
   padding:4px 0;
   font-size:12px;
   color:#666;
}
</style>

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!