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

<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>www.51obj.cn站点文章列表摘要</h4>
<dl>
    <dt><a>文章一：javascript程序的优化</a></dt>
    <dd>文章发布时间:2020-4-17</dd>
    <dt><a>文章二：深入解析javascript中eval</a></dt>
    <dd>文章发布时间：2020-4-17</dd>
    <dt><a>文章三：实现SQLite高并发的问题</a></dt>
    <dd>文章发布时间:2020-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>

有用提示

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

链接: https://fly63.com/course/1_17