HTML5列表設(shè)置

在 web 開發(fā)中，常常需要使用列表來展示數(shù)據(jù)。HTML5提供了三種列表類型：無序列表（Unordered list）、有序列表（Ordered list）、定義列表（Definition list）。

無序列表使用

<ul>

標(biāo)簽來定義，每個列表項(xiàng)使用

<li>

標(biāo)簽來包裹。

<ul>
<li>列表項(xiàng)1</li>
<li>列表項(xiàng)2</li>
<li>列表項(xiàng)3</li>
</ul>

有序列表使用

<ol>

標(biāo)簽來定義，每個列表項(xiàng)同樣使用

<li>

標(biāo)簽來包裹。

<ol>
<li>列表項(xiàng)1</li>
<li>列表項(xiàng)2</li>
<li>列表項(xiàng)3</li>
</ol>

定義列表使用

<dl>

標(biāo)簽來定義，每個定義對通過

<dt>

標(biāo)簽來定義，定義的描述通過

<dd>

標(biāo)簽來描述。

<dl>
<dt>定義1</dt>
<dd>描述1</dd>
<dt>定義2</dt>
<dd>描述2</dd>
<dt>定義3</dt>
<dd>描述3</dd>
</dl>

除此之外，列表還支持嵌套。例如，可以將無序列表嵌套在有序列表里，或?qū)⒂行蛄斜砬短自跓o序列表里。定義列表同樣也支持嵌套。

<ol>
<li>有序列表項(xiàng)1
<ul>
<li>無序列表項(xiàng)1</li>
<li>無序列表項(xiàng)2</li>
<li>無序列表項(xiàng)3</li>
</ul>
</li>
<li>有序列表項(xiàng)2</li>
<li>有序列表項(xiàng)3</li>
</ol>

總之，在 web 開發(fā)中，列表是一個不可或缺的元素，掌握好列表的設(shè)置方法可以極大地提高我們的頁面布局的效率。