有序列表(ol)
定义:有序列表是一列项目,列表项目使用数字进行标记。有序列表始于<ol> 标签。每个列表项始于 <li> 标签。
有序列表有 type 和 start 属性。
语法格式:
<ol type=value1 start=value2>
<li></li>
</ol>
注:value1 表示有序列表项目符号的类型, value2 表示项目开始的数值。
type 属性如下所示:
type类型 描述
type=1 表示列表项目用数字表示(1,2,3...)
type=a 表示列表项目用小写字母表示(a,b,c...)
type=A 表示列表项目用大写字母表示(A,B,C...)
type=i 表示列表项目用小写罗马数字表示(i,ii,iii….)
type=I 表示列表项目用大写罗马数字表示(I,II,III…)
例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h4>数字列表:</h4>
<ol>
<li>春</li>
<li>夏</li>
<li>秋</li>
<li>冬</li>
</ol>
<h4>小写字母列表:</h4>
<ol type="a">
<li>春</li>
<li>夏</li>
<li>秋</li>
<li>冬</li>
</ol>
<h4>大写写字母列表:</h4>
<ol type="A">
<li>春</li>
<li>夏</li>
<li>秋</li>
<li>冬</li>
</ol>
<h4>小写罗马字母列表:</h4>
<ol type="i">
<li>春</li>
<li>夏</li>
<li>秋</li>
<li>冬</li>
</ol>
<h4>大写罗马字母列表:</h4>
<ol type="I">
<li>春</li>
<li>夏</li>
<li>秋</li>
<li>冬</li>
</ol>
</body>
</html>
注:type 默认为数字列表,即不给 type 设置属性值时显示的为数字列表。
无序列表(ul)
定义:无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。无序列表始于 <ul> 标签。每个列表项始于<li>。无序列表的各个列表项之间没有顺序级别之分,是并列的。
ul 的 type 属性:默认值: disc,方块: square,空心圆: circle。
语法格式:
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ul>
注:<ul></ul>标记用于定义无序列表,<li></li>标记嵌套在<ul></ul>标记中,用于描述具体的列表项,每对<ul></ul>中至少应包含一对<li></li>。
例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h4>Disc 项目符号列表:</h4>
<ul type="disc">
<li>春</li>
<li>夏</li>
<li>秋</li>
<li>冬</li>
</ul>
<h4>Circle 项目符号列表:</h4>
<ul type="circle">
<li>春</li>
<li>夏</li>
<li>秋</li>
<li>冬</li>
</ul>
<h4>Square 项目符号列表:</h4>
<ul type="square">
<li>春</li>
<li>夏</li>
<li>秋</li>
<li>冬</li>
</ul>
</body>
</html>
自定义列表(dl)
定义:自定义列表不仅仅是一列项目,而是项目及其注释的组合。自定义列表以<dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。自定义列表的列表项前没有任何项目符号。
语法格式:
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
...
<dt>名词2</dt>
<dd>名词2解释1</dd>
...
</dl>
例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<body>
<h2>一个自定义列表:</h2>
<dl>
<dt>春天</dt>
<dd>万物复苏 </dd>
<dd>百花争艳 </dd>
<dd>适合学习</dd>
<dt>夏天</dt>
<dd>夏日绵绵</dd>
<dd>烈日炎炎</dd>
<dd>适合学习</dd>
</dl>
</body>
</html>