博客列表 >HTML列表

HTML列表

的确
的确原创
2020年02月24日 15:00:02691浏览
 

HTML无序列表

无序列表是一个项目的列表,此列项目是使用粗体圆点(典型的小黑圆圈)进行标记,无序列表使用<ul>标签

实例:

<ul>
<li>1</li>
<li>2</li>
<ul>


HTML有序列表

有序列表也是一列项目,列表使用数字项目进行标记。有序列表始于<ol>标签,每个列表始于<li>标签

实例:

<ol>
<li>1</li>
<li>2</li>
<ol>


HTML自定义列表

自定义列表不仅仅是一列项目,而是项目及注释的组合。自定义列表始于<dl>标签,每个自定义列表项以<dt>开始,每个自定义列表项定义以<dd>开始

实例:

<dl>
<dt>第一名</dt>
<dd>123</dd>
<dt>第二名</dt>
<dd>456</dd>
</dl>


注意:列表项内部可以使用段落、换行符、图片、链接等

不同类型的列表演示

不同类型的有序列表

实例:

<h4>编号列表 </h4> 
<ol>
<li>1</li>
<li>2</li>
</ol>
<br />
<h4>大小字母列表</h4>
<ol type="A">
<li>1</li>
<li>2</li>
</ol>
<br />
<h4>小写字母列表</h4>
<ol type="a">
<li>1</li>
<li>2</li>
</ol>
<br />
<h4>罗马数字列表</h4>
<ol type="I">
<li>1</li>
<li>2</li>
</ol>
<br />
<h4>小写罗马数字列表</h4>
<ol type="i">
<li>1</li>
<li>2</li>
</ol>


不同类型的无序列表

实例:

<h4>圆点列表</h4>  
<ul>
<li>1</li>
<li>2</li>
</ul>
<br />
<h4>圆圈列表</h4>
<ul style="list-style-type:circle;">
<li>1</li>
<li>2</li>
</ul>
<br />
<h4>正方形列表</h4>
<ul style="list-style-type:square;">
<li>1</li>
<li>2</li>
</ul>


嵌套列表

实例:

<h4>嵌套列表</h4>
<ul>
<li>一班</li>
<li>第一名
<ul>
<li>1</li>
<li>2</li>
</ul>
</li>
<li>第二名</li>
</ul>


嵌套列表2

实例:

<h4>嵌套列表2</h4>  
<ul>
<li>一班</li>
<li>第一名
<ul>
<li>1</li>
<li>2
<ul>
<li>数学</li>
<li>语文</li>
</ul>
</ul>
</li>
<li>第二名</li>
</ul>


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议