一、无序列表:
1.标签:
所有内容写在li里面
<ul>
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
<li>内容4</li>
</ul>
2.结果:
3.常用结构:
li里面包含a标签:
<ul>
<li>
<a href="#">内容</a>
</li>
<li>
<a href="#">内容</a>
</li>
<li>
<a href="#">内容</a>
</li>
</ul>
4.嵌套结构:
<ul>
<li>
中国
<ul>
<li>
北京
<ul>
<li>
大兴区
</li>
<li>
通州区
</li>
<li>
海淀区
<ul>
<li>
中关村
</li>
<li>
颐和园
</li>
</ul>
</li>
</ul>
</li>
<li>上海</li>
<li>深圳</li>
</ul>
</li>
</ul>
5.ul和li的属性:
type:设置项目符合的类型
*取值:disc——黑色实心圆
circle——空心圆
square——实心矩形
none——不显示
二、有序列表:
1.标签:
<ol>
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
</ol>
2.结果:
3.常用结构:
<ol>
<li>
<a href="#">内容1</a>
</li>
<li>
<a href="#">内容2</a>
</li>
<li>
<a href="#">内容3</a>
</li>
</ol>
4.嵌套结构:
<ol>
<li>
中国
<ol>
<li>
北京
<ol>
<li>
大兴区
</li>
<li>
通州区
</li>
<li>
海淀区
<ol>
<li>
中关村
</li>
<li>
颐和园
</li>
</ol>
</li>
</ol>
</li>
<li>上海</li>
<li>深圳</li>
</ol>
</li>
</ol>
5.ol和li的属性:
type:设置项目符号 取值1(默认)a A i I;
start: 从第几个开始 取值number(数字);
reversed=“reversed” 当属性和属性值相同,可以简写为属性 ,倒序;
三、自定义列表:
1.标签:
<!--d代表defined自定义;l代表list列表;t代表title主题;d代表description描述-->
<dl>
<dt>主题1</dt>
<dd>描述1</dd>
<dd>描述2</dd>
<dd>描述3</dd>
<dd>描述4</dd>
<dd>描述5</dd>
<dt>主题2</dt>
<dd>描述1</dd>
<dd>描述2</dd>
<dd>描述3</dd>
</dl>
2.结果:
3.常用结构:
<dl>
<dt>
<img src="images/img1.jfif" alt="">
</dt>
<dd>
这是一个可爱的哆啦A梦
</dd>
</dl>