您的位置：首页 > Web前端 > HTML5

HTML5学习笔记02——列表

2016-07-07 16:14 369 查看

2.1有序列表<ol>

有序列表的标签是<ol>，列表项的内容写在<li>中，当列表项内容有多项时，可以在<li>标签中嵌套一个<ol>列表。

2.1.1有序列表的属性

(1) type:设置顺序编号的格式。有序列表的顺序编号是数字格式的1.2.3……。通过属性type可以修改顺序编号的格式。

type="1"数字格式

type="a"小写字母格式

type="A"大写字母格式

type="i"小写罗马数字格式

type="I"大写罗马数字格式

(2) start:开始的标号

例如：当顺序编号的格式为数字时，设置start="6"，编号从6开始往下，6,7,8……

(3) reversed:设置编号逆序

当reversed="true"是，列表的编号为逆序

2.2.2有序列表练习

<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<ol type="1" start="1">
<li>买米</li>
<li>煮饭</li>
<ol type="a">
<li>洗米</li>
<li>加适当水</li>
<li>放入电饭煲煮</li>
</ol>
<li>吃饭</li>
</ol>
</body>
</html>

2.2无序列表<ul>

无序列表也是与<li>标签配合使用。

<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<ul type="1">
<li>清华大学</li>
<li>北京大学</li>
<li>复旦大学</li>
<li>香港大学</li>
</ul>
</body>
</html>

2.3定义列表<dl>

使用<dl>时即插入了一个定义列表，列表中有两个标签。

<dt>概念名词

<dd>对该概念或名词的解释

<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<dl>
<dt>数据结构</dt>
<dd>计算机存储、组织数据的方式</dd>
<dt>操作系统</dt>
<dd>管理和控制计算机硬件与软件资源的计算机程序</dd>
</dl>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  html5
相关文章推荐
新的分享
章节导航