列表

首页 > HTML实例讲解 > 列表

列表

要在网页上显示列表可以使用 <ul> 标签和 <ol> 标签。

<ul> 标签用来生成无序列表(Unorderd List)。

<ul>
<li>HTML
<li>CSS
<li>JavaScript
</ul>
  • HTML
  • CSS
  • JavaScript

<ol> 标签用来生成有序列表(Orderd List)。

<ol>
<li>HTML
<li>CSS
<li>JavaScript
</ol>
  1. HTML
  2. CSS
  3. JavaScript

改变列表的项目符号

想改变列表的项目符号,可以在 <ol> 标签、 <ul> 标签或 <li> 标签里指定 type 属性。

<ol type="a">
<li>HTML
<li>CSS
</ol>
  1. HTML
  2. CSS

type 属性可以设定下面这些内容。

【列表的项目符号】
标签说明
<ol type="1">1, 2, 3, 4, 5, ...(默认值)
<ol type="a">a, b, c, d, e, ...
<ol type="A">A, B, C, D, E, ...
<ol type="i">i, ii, iii, iv, v, ...
<ol type="I">I, II, III, IV, V, ...
<ul type="disc">
  • 黑点(默认值)
<ul type="circle">
  • 白圈
<ul type="square">
  • 黑方块

也可以使用 CSS 中的 list-style-typelist-style-image 实现。

<ol style="list-style-type: hiragana">
<li>HTML
<li>CSS
</ol>
  1. HTML
  2. CSS

定义描述列表

要在网页上显示定义描述列表可以使用 <dl><dt><dd>。</dt>、</dd> 可省略结束标签。

<dl>
<dt>HTML</dt>
<dd>HTML的定义是……</dd>
<dt>CSS</dt>
<dd>CSS的定义是……</dd>
</dl>
HTML
HTML的定义是……
CSS
CSS的定义是……