HTML 无序列表和有序列表（超详细）_有序列表的html代码是

作者：Cpp五条 | 2024-03-28 08:29:22

踩

有序列表的html代码是

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>

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：【wpsshop博客】