HTML--嵌套列表的使用(一）

编程知识行业动态更新时间:2024-06-13 00:19:45

我自己的：
代码一：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<strong>嵌套列表</strong>
    <ul>
        <li>商丘市</li>
            <ul>
                <li>睢县</li>
                <li>宁陵</li>
                <li>虞城</li>
            </ul>
        <li>郑州市</li>
            <ul>
                <li>金水区</li>
                <li>中原区</li>
                <li>高新区</li>
            </ul>
    </ul>
</body>
</html>

参考案例：菜鸟教程案例
代码二：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
</head>
<body>
  <h1>
    My 列表
  </h1>
  <table border="2" cellpadding="30">
    <tr>
      <td>
	<ul>
      <li>Food</li>
      <ol>
          <li>薯片</li>
          <li>棒棒糖</li>
          <li>果冻</li>
          <li>巧克力</li>
          <li>辣条</li>
      </ol>
      <li>Fruits</li>
      <ol type="A">
        <li>西瓜</li>
        <li>桔子</li>
        <li>哈蜜瓜</li>
        <li>草莓</li>
        <li>葡萄</li>
        <li>香蕉</li>
        <li>苹果</li>
      </ol>
      <li>Meat</li>
      <ol type="I">
        <li>羊肉</li>
        <li>牛肉</li>
        <li>猪肉</li>
        <li>鸡肉</li>
        <li>涮羊肉</li>
        <li>生鱼片</li>
      </ol>
  </ul>
      </td>
    </tr>
  </table>
</body>
</html>

另需额外说明一下，关于嵌套列表的写法，在查阅别人代码的过程中我发现了两种不同的写法：
例如：
代码三：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<strong>嵌套列表</strong>
    <ul>
        <li>商丘市
            <ul>
                <li>睢县</li>
                <li>宁陵</li>
                <li>虞城</li>
			</ul>
		</li>
        <li>郑州市
            <ul>
                <li>金水区</li>
                <li>中原区</li>
                <li>高新区</li>
			</ul>
		</li>
    </ul>
</body>
</html>