Captain9911

HTML列表

  • Oct 11, 2022

关键词：html, ol, ul, dl

有序列表 ol

有序列表

  • 会自动在元素前面加序号进行显示。
  • ol中只能放li标签。
  • li相当于一个容器，可以容纳所有元素。
<ol>
    <li>第0个元素</li>
    <li>第1个元素</li>
    <li>第2个元素</li>
    <li>第3个元素</li>
</ol>

可以自定义开始的序号。

<ol start="10">
	<li>neirong0</li>
	<li>neirong1</li>
	<li>neirong2</li>
</ol>

可以自定义序号类型。

<!-- 这里的type可以为英文字母A或a，以及罗马数字I或i -->
<ol type="A">
	<li>neirong0</li>
	<li>neirong1</li>
	<li>neirong2</li>
</ol>

无序列表 ul

  • 会自动在元素前面加小圆点进行显示。
  • ul里只能放li标签。
  • 无序列表的li相当于一个容器，可以容纳所有元素。
<ul>
	<li>neirong0</li>
	<li>neirong1</li>
	<li>neirong2</li>
</ul>

自定义列表 dl

  • 自定义列表前面不会自动生成序号。
<dl>
	<dt>自定义列表项</dt>
	<dd>自定义列表项的定义0</dd>
	<dd>自定义列表项的定义1</dd>
	<dd>自定义列表项的定义2</dd>
	<dd>自定义列表项的定义3</dd>
	<dt>另一个自定义列表项</dt>
	<dd>另一个自定义列表项的定义0</dd>
	<dd>另一个自定义列表项的定义1</dd>
</dl>

列表的嵌套

<ul>
	<li>neirong0</li>
	<li>neirong1
		<ul>
			<li>qiantao</li>
			<li>yeshiqiantao
				<ol>
					<li>jixuqiantao</li>
					<li>qwer</li>
				</ol>
			</li>
			<li>qwer</li>
		</ul>
	</li>
	<li>neirong2</li>
</ul>
Search