HTML 无序列表和有序列表（超详细）

最新推荐文章于 2024-05-05 09:49:41 发布

wangfei933

最新推荐文章于 2024-05-05 09:49:41 发布

阅读量6.6k

点赞数 3

分类专栏：标签文章标签： html

本文链接：https://blog.csdn.net/wangfei933/article/details/117451537

版权

标签专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML 支持有序、无序和定义列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表始于 <ul> 标签。每个列表项始于 <li>。

同样，有序列表也是一列项目，列表项目使用数字进行标记。

有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

代码如下

<!DOCTYPE html>
<html>
<head>
<meta ttp-equiv="Content-Type" content="text/html; charset=GBK"/>
<title>列表</title>
</head>
</html>
<body>
<table>
    这是无序列表
<ul>
<li>猴子</li>
<li>狐狸</li>
<li>小短腿</li>		
</ul>
  这是有序列表
<ol>
<li>猴子</li>
<li>狐狸</li>
<li>小短腿</li>		
</ol>
</table>
</body>

列表去点 list-style:none

    这是无序列表
<ul style="list-style:none">
<li>猴子</li>
<li>狐狸</li>
<li>小短腿</li>		
</ul>
  这是有序列表
<ol style="list-style:none">
<li>猴子</li>
<li>狐狸</li>
<li>小短腿</li>		
</ol>

如果你的HTML和css是分开的则在CSS文件里加上

ul li{

list-style: none;

}

嵌套列表

<!DOCTYPE html>
<html>
<head>
<meta ttp-equiv="Content-Type" content="text/html; charset=GBK"/>
<title>列表</title>
</head>
</html>
<body>
<table>
    这是嵌套列表ul
<ul style="list-style:none">
      <li>猴子
            <ul>会走路
                  <li>没有鞋子穿</li>
                  <li>因为有爪子</li>
            </ul>
            <ul>会爬树</ul>
      </li>
      <li>狐狸
            <ul>狡猾</ul>
            <ul>好看</ul>
      </li>       
      <li>小短腿</li>		
	</ul>
    这是嵌套列表ol
<ol style="list-style:none">
      <li>猴子
            <ol>会走路
                  <li>没有鞋子穿</li>
                  <li>因为有爪子</li>
            </ol>
            <ol>会爬树</ol>
      </li>
      <li>狐狸
            <ol>狡猾</ol>
            <ol>好看</ol>
      </li>       
      <li>小短腿</li>		
	</ul>	
</ol>
    这是嵌套列表ol和ul交叉嵌套
<ol style="list-style:none">
      <li>猴子
            <ul>会走路
                  <li>没有鞋子穿</li>
                  <li>因为有爪子</li>
            </ul>
            <ul>会爬树</ul>
      </li>
      <li>狐狸
            <ul>狡猾</ul>
            <ul>好看</ul>
      </li>       
      <li>小短腿</li>		
	</ul>	
</ol>
</table>
</body>