html无序列表空心圆_04HTML标签之列表

此号会陆续更新前端从入门到放弃的笔记，需要全套笔记可以私信我领取哦。

一、无序列表

1、结构
<ul>
<li>....</li>
<li>....</li>
<li>....</li>
</ul>
2、常用结构
<ul>
<li><a href="#">....</a></li>
<li><a href="#">....</a></li>
<li><a href="#">....</a></li>
</ul>
3、嵌套结构
<ul>
<li>...
<ul>
<li>...</li>
</ul>
</li>
<li>...</li>
</ul>
4、ul和li的属性
type：设置项目符号的类型
取值：
disc 默认值，黑色实心圆
circle 空心圆
square 黑色实心矩形
none 不显示

二、有序列表

1、结构
<ol>
<li>...</li>
<li>...</li>
<li>...</li>
</ol>
2、常用结构
<ol>
<li><a href="#">...</a></li>
<li><a href="#">...</a></li>
<li><a href="#">...</a></li>
</ol>
3、嵌套结构
<ol>
<li>...
<ol>
<li>...</li>
</ol>
</li>
<li>...</li>
</ol>
4、ol和li的属性
1）type：设置项目符号类型
取值：
1 默认值
a
A
i
I
2）start:设置从第几个开始，取值为数字
3）reversed：倒序
reversed="reversed" 当属性等于属性值时，可以简写为一个属性
三、自定义列表

1、结构
<dl>
<dt>...</dt>
<dd>...</dd>
<dd>...</dd>
<dt>...</dt>
<dd>...</dd>
<dd>...</dd>
</dl>
2、例子1
<dl>
<dt>主题</dt>
<dd>描述</dd>
<dd>描述</dd>
<dd>描述</dd>
<dt>主题</dt>
<dd>描述</dd>
<dd>描述</dd>
<dd>描述</dd>
</dl>
3、例子2
<dl>
<dt><img src="images/img2.jpg" alt="" width="300"/></dt>
<dd>帅气的小伙子</dd>
</dl>