html列表标签效果实现
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>列表标签</title>
- </head>
- <!--
- 无序列表:<ul></ul>
- 有序列表:<ol></ol>
- 无序列表和有序列表都是通过 <li></li>来显示文字
- 都可以通过改变type的值来改变文字前的标记
- -->
- <body>
- <h1>无序列表</h1>
- <ul type="circle">
- <li>中国
- <ul>
- <li>北京
- <ul>
- <li>大兴区</li>
- <li>海淀区</li>
- <li>通州区</li>
- </ul>
- </li>
- <li>上海</li>
- <li>广州</li>
- </ul>
- </li>
- <li>美国</li>
- <li>日本</li>
- </ul>
- <h1>有序标签</h1>
- <ol type="A">
- <li>中国
- <ol>
- <li>北京
- <ol>
- <li>大兴区</li>
- <li>海淀区</li>
- <li>通州区</li>
- </ol>
- </li>
- <li>上海</li>
- <li>广州</li>
- </ol>
- </li>
- <li>美国</li>
- <li>日本</li>
- </ol>
- </body>
- </html>
效果图如下
来源: https://www.2cto.com/kf/201709/682935.html