html列表标签应用及实例代码详解

作者:IT技术 | 时间:2018-11-05

html列表平常多被应用到css网页排版布局上,下面我们对html列表标签的应用做一个详解并配以完整的实例代码,希望能让大家深入理解列表的应用。

html无序列表应用

<ul>
<li type="circle">内容1</li>
<li type="disc">内容2</li>
<li type="square">内容3</li>
</ul>

与无序列表的差别在于li前面的项目符号是大圆点

type属性

disc(默认值,实心圆点)

circle(空心圆环)

square(实心正方体)

html有序列表应用

<ol type="A">
<li>樱桃</li>
<li>香蕉</li>
<li>苹果</li>
</ol>

有序标签使用<ol>作为有序列表的声明,<li>作为每个列表的起始                                     

1,2...使用数字作为符合项

A/a 使用字母作为符号项

L/i 使用罗马字母作为项目符号

html自定义列表应用

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

html列表应用实例

html列表平常多被应用到css网页排版布局上,下面给一个本站的列表排版效果

html列表标签应用及实例代码详解

通过上面html列表标签应用及实例代码的讲解,你现在理解怎么应用html列表了吗?