列表标签
1、有序列表(Order list)
标签:
ol>li*num
属性:
type 设置符号的类型,默认是1,可取值为 a A i I start 设置是重第几个数字开始,取值为数字 reversed 倒序,当前属性的参数等于属性值,可以不写参数 Html示例:
<body> <!-- 设置符号为大写字母,从第四个字母开始,也就是D开始,然后倒序(因为设置从第四个字母开始,所以倒序是D往前到字母) --> <ol type="A" start="4" reversed> <li>一</li> <!-- D.一 --> <li>二</li> <!-- C.二 --> <li>三</li> <!-- B.三 --> </ol> </body>
2、无序列表(Unordered List)
标签:
ul>li*num
属性:
type类型:
注意:这里的type设置符号类型,可以在ul里面设置,也可以单独在li里面设置,在ul里面设置是这个列表全部修改,而在li里米只针对当前列
disc 默认的实心圆 circle 空心圆 square 小方块 none 不显示 Html示例:
<body> <!-- 这是一个无序列表 --> <ul> <li>这是第一条</li> <li>这是第二条</li> <li>这是第三条</li> <li>这是第四条</li> <li>这是第五条</li> </ul> <!-- 列表一般和a标签搭配使用 --> <ul> <li><a href="https://www.baidu.com" target="_blank"><b>点击跳转百度</b></a></li> <li><a href="">点击跳转</a></li> <li><a href="">点击跳转</a></li> <li><a href="">点击跳转</a></li> </ul> <!-- 列表也可以相互嵌套 --> <ul> <li>中国 <ul> <li>武汉</li> <li>北京 <ul> <li>东城 <ul> <li type="circle">不知道</li> <li>不知道</li> </ul> </li> <li>西城</li> </ul> </li> </ul> </li> <li>美国</li> <li>法国</li> </ul> <!-- 无序列表的属性 --> <ul type="none"> <li type="circle"><a href="">空心圆</a></li> <li type="square"><a href="">小方块</a></li> <li type="disc"><a href="">实心圆</a></li> <li><a href=""></a>默认没有</li> <li><a href=""></a>默认没有</li> </ul> </body>
无序列表和有序列表嵌套小案例
<body> <!-- 模拟一个树菜单 --> <ol> <li><a href="#">发展团队</a></li> <li><a href="#">管理团队</a> <ul type="circle"> <li><a href="#">团队</a></li> <li><a href="#">董事会</a></li> </ul> </li> <li><a href="#">产品服务</a> <ul type="circle"> <li><a href="#">门户网站</a></li> <li><a href="#">在线游戏</a></li> <li><a href="#">软件</a></li> <li><a href="#">服务</a></li> </ul> </li> <li><a href="#">企业文化</a> <ul type="circle"> <li><a href="#">愿景</a></li> <li><a href="#">价值观</a></li> </ul> </li> <li><a href="#">社会责任</a></li> <li><a href="#">涉查事件</a></li> <li><a href="#">公司地址</a></li> </ol> </body>
3、自定义列表(definition list)
标签:
dl>dd*num
子标签:
dt definition term,一个主题,也可以理解为一个标签,一个自定义列表可以有多个主(标题) dd definition description,描述,就是对一个主题进行描述,一个主题也可以有多个描述 Html示例:
<body> <dl> <!-- 这是这个自定义列表的第一个主题 --> <dt>主题</dt> <!-- 这是这个主题的第一个描述 --> <dd>对主题进行描述</dd> <!-- 这是这个主题的第二个描述 --> <dd>一个主题可以有多个描述</dd> <!-- 这是这个自定义列表的的第二哥主题 --> <dt>一个dl可以有多个主题</dt> <dd>对主题进行描述</dd> <dd>一个主题可以有多个描述</dd> </dl> </body>