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:d ott ed?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种常见 属性 值：
dis c: 默 认值。实心圆
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> 文章 三：实现 sql ite高并发的问题</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>
有用 提示
列表项内部可以使用段落、换行符、 图片 、 链接 以及其他列表等。