HTML列表标签ul和ol,及相关应用,实例在线编辑

HTML列表标签在web前端当中的应用十分广泛,比如用来生成导航栏、侧边导航栏、内嵌在下拉列表当中等等。


HTML列表标签

HTML的列表标签分为两类:

  • 无序列表:<ul></ul>
  • 有序列表:<ol></ol>

列表项标签

<li></li>:都可以内嵌在<ul>标签和<ol>标签内;

<ul>
  <li>无序列表项的特点是没有序列号</li>
  <li>无序列表项左侧默认是圆点</li>
</ul>

<ol>
  <li>有序列表的主要特点是有序列号</li>
  <li>有序列表左侧的序列号是自动生成的</li>
</ol>

嵌套列表

有序列表和无序列表之间可以相互嵌套,两种列表本身也可以跟自己的进行嵌套,实例代码如下:

嵌套列表实例代码

<ul>
  <li>无序列表嵌套有序列表:
  	<ol>
  		<li>有序列表项1</li>
  		<li>有序列表项2</li>
	</ol>
  </li>
  <li>无序列表2</li>
</ul>

代码解析

如上代码,列表的嵌套方式有很多种形式,其它的嵌套方式可以在上面的编辑器里头自由发挥地试一试!



全栈前端 / HTML教程 :


















Copyright © 2022-2024 笨鸟工具 x1y1z1.com All Rights Reserved.