HTML 列表

HTML 布局►◄HTML 构建块

html 支持有序、无序和定义列表

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>

有用提示

列表项内部可以使用段落、换行符、图片、链接以及其他列表等。