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

Posted 2022-12-19 你在开玩笑吧

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>商丘市</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>

代码一与代码三的效果是一样的，但写法有点小差别，在菜鸟教程上也出现了这两种不同的写法，但我更倾向于代码一的写法，其结构更直观。

其他参考案例：
参考一
 参考二
 参考三

以上是关于HTML--嵌套列表的使用(一）的主要内容，如果未能解决你的问题，请参考以下文章