无序列表。有序列表，自定义列表

1.无序列表

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<h3>你喜欢的水果</h3>
	<ul>
	  <li>苹果</li>
	  <li>香蕉</li>
	  <li>葡萄</li>
	  <li>西瓜</li>
	  <li>橘子</li>
	  <!--ul里面只能放p标签-->
	  <li>
	    <h4>蔬菜</h4>
	    <p>西红柿</p>
      </li>
    </ul>
</body>
</html>

如图无序列表。有序列表，自定义列表
2.有序列表

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<ol>
       <li>美国</li>
       <li>中国</li>
       <li>英国</li>
       <li>俄罗斯</li>
       <!--ol标签也只能放li标签，但其他标签可以放在li标签里面-->
	</ol>
</body>
</html>

如图
无序列表。有序列表，自定义列表
3.自定义列表

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<dl>
   <dt>北京</dt>
   <dd>昌平</dd>
   <dd>顺义</dd>
   <dd>海淀</dd>
   <dd>朝阳</dd>
</dl>
<dl>
   <dt>雍正</dt>
   <dd>甄嬛</dd>
   <dd>皇后</dd>
   <dd>沈梅庄</dd>
   <dd>年妃</dd>
   <!--网站底部的解释说明-->
</dl>
	
</body>
</html>

结果
无序列表。有序列表，自定义列表

无序列表。有序列表，自定义列表

相关推荐