有序列表是一种讲究排序列表结构,使用<ol>标签定义,其中包含多个<li>列表项目。一般网页设计中,列表结构可以互用有序或者无序类表标签。但是,在强调项目排序栏目中,选用有序列表会更科学,如新闻列表(根据新闻时间排序)、排行榜(强调项目的名次)等。

  

<ol type="a" start="5" >
<li>中国</li>
<li>日本</li>
<li>美国</li>
<li>非洲</li>
</ol>

<ol>标签包含3个比较实用的属性,这些属性同时获得HTML5支持,且其中reversed为新增属性

属性 取值 说明
reversed  reversed 定义列表循序为降序,如9.8.7....
start     number 定义有序列表的起始值
type   1,A,a,I,i 定义在类表中使用的标记类型

定义列表

  定义列表以<dl>标签形式出现,在<dl>标签中包含<dt>和<dd>标签,一个<dt>标签对应着一个或多个<dd>标签。

  

<dl>
<dt>定义列表标题</dt>
<dd>定义列表内容</dd>
</dl>
<dl>
<dt>定义列表标题</dt>
<dd>定义列表1</dd>
<dd>定义列表内容2</dd>
</dl>
<dl>
<dt>定义列表标题1</dt>
<dd>定义列表内容1</dd>
<dt>定义列表标题2</dt>
<dd>定义列表内容2</dd>
</dl>

有序列表ol和定义列表dl,dt,dd的更多相关文章

  1. 有序列表ol,无序列表ul,定义列表dl

    ====================非常重要=================无序列表ul中有一个type属性四个属性值type="disc" 实心圆点(默认) type=&q ...

  2. HTML 列表 <ol><ul><li><dl><dt><dd>

    <ol>标签-有序列表 定义和用法: <ol>标签定义有序列表. HTML 与 XHTML 之间的差异 在 HTML 4.01 中,ol 元素的 "compact&q ...

  3. html-2, a img ul li ol dl dt dd 标签与列表标签的简单使用

    <!-- a:  a{ /*清除a标签的下划线*/ text-decoration: none; }  (1)超链接 href 超链接的地址 target: _self 默认 在当前中打开链接地 ...

  4. dl,dt,dd标签 VS 传统table实现数据列表

    过去有很多网页设计师喜欢将他们的网页效果图用table布局实现成网页,但是这样做会遇到一个比较麻烦的问题就是,后期调试和维护会相当的困难.现在,越来越多的前端开发er们开始使用xHTML+CSS替代最 ...

  5. DIV+CSS中标签ul ol li dl dt dd用法

    ul ol li dl dt dd都是DIV+CSS做网页长用的东西,相当于一棵树的树技,下面就了解一下这些东西的全体用法,本人用dd,dt,dd用得很少,懂得结合使用对做架构是很有好处的哦! DIV ...

  6. Div+css中ul ol li dl dt dd使用

    ol 有序列表.<ol><li>……</li><li>……</li><li>……</li></ol>表现 ...

  7. HTML中的ul, ol,li , dl,dt, dd标签

    ul: unordered lists ol: ordered lists li: Lists ol 有序列表. <ol><li>……</li><li> ...

  8. ol,li,ul,dl,dt,dd

    块级元素div尽量少用,其实和table一样,嵌套越少越好,它也是会影响速度的! ol 有序列表. <ol> <li>……</li> <li>……< ...

  9. 【HTML】dl dt dd

    摘要 看到没怎么使用过的html 标签,记录下 定义 dl 类似于 ul ,无任何样式,自定义列表容器, ul 为无序列表容器,ol 为有序列表容器 dt dd 类似于 li ,无任何样式,为帮助实现 ...

随机推荐

  1. 登录状态保持Session/Cookie

    登录成功: 1.Session保存User对象. 2.Cookie保存唯一值UserID(或者usercode)和加密Sign(生成规则自己定义,MD5用户名,用户ID,私有串等),并设置过期时间. ...

  2. s11 day104 数据库表结构与立即支付流程

    数据库表结构: 13张 1. 课程大类 2.课程子类 3.学位课程 4.老师表 5.奖学金 6.专题课 7.课程详情 8.课程大纲 9.常见问题 10.章节 11.课时 12.作业表 13.价格策略 ...

  3. python scapy 网卡抓包

    首先需要安装scapy包,点击下载 from scapy.all import * def pack_callback(packet): print packet.show() if packet[' ...

  4. 深度优先搜索 - 简单demo

    输入一个数n,输出 1 ~ n 的全排列,例如输入 3,全排列则为:123,132,213,231,312,321 一共六种. 这里采用深度优先搜索来解决这个问题: #include<stdio ...

  5. poj1511

    Invitation Cards Time Limit: 8000MS   Memory Limit: 262144K Total Submissions: 25099   Accepted: 829 ...

  6. Python大法之从火车余票查询到打造抢Supreme神器

    本文作者:i春秋作家——阿甫哥哥 系列文章专辑:https://bbs.ichunqiu.com/forum.php?mod=collection&action=view&ctid=9 ...

  7. Spring配置项<context:annotation-config>的解释说明

    今天在闲逛CSDN论坛时,看到一位博主写的一篇关于<Spring中IOC的Annotation的实现>的文章, 于是点击进去看了下, 发现在说明中对Spring配置文件中的有些配置节点模凌 ...

  8. PHP之旅8 URL与表单

    表单 表单的出现让用户和后台主机有了直接的交互,网站开始变的‘动态起来’,在HTML的各个标记符中,与PHP关系最为紧密的要属表单标记符了,常见的表单标记符有<form>.<inpu ...

  9. OpenCV2计算机编程手册(二)基于类的图像处理

    1. 在算法设计中使用策略(Strategy)模式 策略设计模式的目标是将算法封装在类中.因此,可以更容易地替换一个现有的算法,或者组合使用多个算法以拥有更复杂的处理逻辑.此外,该模式将算法的复杂度隐 ...

  10. 直接插入排序实现(Java)

    直接插入排序介绍 直接插入排序的基本操作是将一个记录插入到已经排好序的有序表中,从而得到一个新的.记录数增1的有序表.     怎么理解呢?就是将n个待排序的元素看成一个有序表和一个无序表,开始时有序 ...