HTML--嵌套列表的使用（二） 傷城~ 2023-07-25 14:23 2阅读 0赞 <!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> <hr> <h4>一个嵌套列表：</h4> <ul> <li>咖啡</li> <li>茶</li> <ul> <li>红茶</li> <li>绿茶</li> <ul> <li>中国茶</li> <li>非洲茶</li> </ul> </ul> <li>牛奶</li> </ul> <hr> <!--dd与dt是dl下属于同级的标签,正常情况下二者应该是对齐的但有时候为了体现层次与结构会适当的增加空格，比如下面的这个案例--> <dl> <dt>北京市大学</dt> <dd>清华大学</dd> <dd>北京大学</dd> <dd>人民大学</dd> <dt>上海市大学</dt> <dd>复旦大学</dd> <dd>交通大学</dd> <dd>同济大学</dd> <dt>南京市的大学</dt> <dd>南京大学</dd> <dd>南航大学</dd> <dd>人民大学</dd> </dl> <hr> <!-- dt和dd是放于dl标签内，标签dt与dd处于dl下相同级。也就是dt不能放入dd内，dd不能放入dt内。在dl下，dt与dd处于同级标签。DD标签可以若干。同时不能不加dl地单独使用dt标签或dd标签。 --> <dl> <dt>中国</dt> <dd> <dl> <dt>辽宁省</dt> <dd>沈阳</dd> <dd>大连</dd> <dd>丹东</dd> </dl> </dd> <dd> <dl> <dt>山东省</dt> <dd>青岛</dd> <dd>烟台</dd> <dd>济南</dd> </dl> </dd> <dt>美国</dt> <dd> <dl> <dt>加州</dt> <dd>A市</dd> <dd>B市</dd> <dd>C市</dd> </dl> </dd> <dd> <dl> <dt>阿拉斯加州</dt> <dd>D市</dd> <dd>E市</dd> <dd>F市</dd> </dl> </dd> </dl> <!--从上面的代码中可以看出dt标签与dd标签始终是并列的，是同级的--> <!--自定义列表由列表标题与列表内容组成，dt标签里面是标题，dd标签里面是内容，在上面的例子中，第一个列表标题是中国，而列表的内容则是一个个由省与相应省里面的市构成的列表，这个列表我们暂且称它为子列表，即：“中国”这个列表标题(dt)的列表内容（dd)是一个个子列表(另一个dl、dt、dd结构）--> </body> </html> 参考文章：[自定义列表（dl、dt、dd）的使用][dl_dt_dd] [dl_dt_dd]: https://blog.csdn.net/u014326381/article/details/48028045?depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-4&utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-4
还没有评论，来说两句吧...