客服微信
zhaocom666
作者 / 管理员 时间 / 2020-06-06 23:45:52阅读 / 160
html中有序列表和无序列表介绍以及其区别
一、html有序列表简介
有序列表的各个列表项是有顺序的。有序列表从<ol>开始,到</ol>结束,中间的列表项是<li>标签内容。有序列表的列表项是有先后顺序的,一般采用数字或字母作为顺序,默认是采用数字顺序。
语法:
1 2 3 4 5 | < ol > < li >有序列表项</ li > < li >有序列表项</ li > < li >有序列表项</ li > </ ol > |
说明:
<ol>,即“ordered list(有序列表)”。<li>,即“list(列表项)”。理解标签语义更有利于你记忆,而记忆HTML标签的语义是HTML的基础。更多标签语义请查看
。在该语法中,<ol>和</ol>标志着有序列表的开始和结束,而<li>和</li>标签表示这是一个列表项。在有序列表中可以包含多个列表项。
注意,<ol>标签和<li>标签是配合使用,没有单独使用,而且<ol>标签内部不能存在任何其他标签,一般情况下只能存在<li>标签(对于初学者,我们忽略嵌套列表)。这个概念要非常清楚,在网站开发中很容易犯错。
有序列表属性
属性 | 值 | 描述 |
reversed | reversed | 规定列表顺序为降序(5,4,3...) |
start | number | 规定有序列表的起始值 |
type | 1,A,a,I,i | 规定列表中使用的标记类型 |
案例1:(正常)
<ol>
<li>语文</li>
<li>数学</li>
<li>英语</li>
</ol>
运行结果:
语文
数学
英语
案例2:(start属性)
<ol start="50">
<li>语文</li>
<li>数学</li>
<li>英语</li>
</ol>
运行结果:
语文
数学
英语
案例3:(type属性)
<ol type="i">
<li>语文</li>
<li>数学</li>
<li>英语</li>
</ol>
运行结果:
语文
数学
英语
案例4:(reversed属性)
<ol reversed="reversed">
<li>语文</li>
<li>数学</li>
<li>英语</li>
</ol>
运行结果:
语文
数学
英语
二、html无序列表简介
无序列表,很好理解,有序列表的列表项是有一定顺序的,而无序列表的列表项是没有顺序的。默认情况下,无序列表的项目符号是●,不过可以通过无序列表type属性来改变无序列表的列表项符号。
语法:
<
ul
>
<
li
>无序列表项
</
li
>
<
li
>无序列表项
</
li
>
</
ul
>