当前位置:

html中有序列表和无序列表介绍以及其区别(上) / 教程文档

5月前 阅读 / 92 来源 / 原创 文 / 管理员

html中有序列表和无序列表介绍以及其区别有序列表:属性值描述reversedreversed规定列表顺序为降序(5,4,3...)startnumber规定有序列表...

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的基础。更多标签语义请查看HTML标签的含义

在该语法中,<ol>和</ol>标志着有序列表的开始和结束,而<li>和</li>标签表示这是一个列表项。在有序列表中可以包含多个列表项。

注意,<ol>标签和<li>标签是配合使用,没有单独使用,而且<ol>标签内部不能存在任何其他标签,一般情况下只能存在<li>标签(对于初学者,我们忽略嵌套列表)。这个概念要非常清楚,在网站开发中很容易犯错。


有序列表属性

属性
描述
reversedreversed规定列表顺序为降序(5,4,3...)
startnumber规定有序列表的起始值
type1,A,a,I,i规定列表中使用的标记类型


案例1:(正常)

<ol>

  <li>语文</li>

  <li>数学</li>  

  <li>英语</li>

</ol>

运行结果:

  1. 语文

  2. 数学

  3. 英语


案例2:(start属性)

<ol start="50">

 <li>语文</li>

  <li>数学</li>

  <li>英语</li>

</ol>

运行结果:

  1. 语文

  2. 数学

  3. 英语


 案例3:(type属性)

 <ol type="i">

 <li>语文</li>

  <li>数学</li>

  <li>英语</li>

</ol>

运行结果:

  1. 语文

  2. 数学

  3. 英语


 案例4:(reversed属性)

 <ol reversed="reversed">

 <li>语文</li>

  <li>数学</li>

  <li>英语</li>

</ol>

运行结果:

  1. 语文

  2. 数学

  3. 英语

二、html无序列表简介

无序列表,很好理解,有序列表的列表项是有一定顺序的,而无序列表的列表项是没有顺序的。默认情况下,无序列表的项目符号是●,不过可以通过无序列表type属性来改变无序列表的列表项符号。

语法:

<ul>

    <li>无序列表项</li>

    <li>无序列表项</li>

</ul>


评论列表
共0条评论
  • 这篇文章还没有收到评论,赶紧来抢沙发吧~

猜你喜欢

内容管理系统 · Powered By YzmCMS皖ICP备17010873号
学生网页作业定制、企业网站联系客服微信:zhaocom666
相关侵权、举报、投诉及建议等,请发E-mail:2528730315@qq.com

友情链接: 大学生网页作业 网页制作成品下载 网页教程 网页作业模板 网页成品

客服微信

客服微信

zhaocom666

模板问题

定制问题

作业定制

企业建站

微信客服