1.无序列表
(1)是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记
(2)始于 <ul> 标签,每个列表项始于 <li>
(3)列表项内部可以使用段落、换行符、图片、链接以及其他列表等等
示例代码:
<span style="font-family:Microsoft YaHei;"><span style="font-family:Microsoft YaHei;"><span style="font-family:Microsoft YaHei;"><html>
<head>
</head>
<meta charset="utf-8">
<body style="background-color:green;color:white">
<!--定义无序列表-->
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>D:\download\testimg2.gif</li>
</ul>
</body>
</html></span></span></span>
展示效果:
(4)不同类型的无序列表:
示例代码:
<span style="font-family:Microsoft YaHei;"><span style="font-family:Microsoft YaHei;"><html>
<head>
</head>
<meta charset="utf-8">
<body style="background-color:green;color:white">
<h4>Disc 项目符号列表:</h4>
<ul type="disc">
<li>苹果</li>
<li>橘子</li>
<li>香蕉</li>
</ul>
<h4>Circle 项目符号列表:</h4>
<ul type="circle">
<li>苹果</li>
<li>橘子</li>
<li>香蕉</li>
</ul>
<h4>Square 项目符号列表:</h4>
<ul type="square">
<li>苹果</li>
<li>橘子</li>
<li>香蕉</li>
</ul>
</body>
</html></span></span>
展示效果:
(5)嵌套列表1:
示例代码:
<span style="font-family:Microsoft YaHei;"><span style="font-family:Microsoft YaHei;"><html>
<head>
</head>
<meta charset="utf-8">
<body style="background-color:green;color:white">
<!--嵌套列表-->
<h4>嵌套列表1:</h4>
<ul>
<li>咖啡</li>
<li>茶
<ul>
<li>红茶</li>
<li>绿茶</li>
</ul>
</li>
<li>牛奶</li>
</ul>
</body>
</html></span></span>
展示效果:
(6)嵌套列表2:
示例代码:
<span style="font-family:Microsoft YaHei;"><span style="font-family:Microsoft YaHei;"><html>
<head>
</head>
<meta charset="utf-8">
<body style="background-color:green;color:white">
<h4>嵌套列表2:</h4>
<ul>
<li>咖啡</li>
<li>茶
<ul>
<li>红茶</li>
<li>
绿茶
<ul>
<li>中国茶</li>
<li>非洲茶</li>
</ul>
</li>
</ul>
</li>
<li>牛奶</li>
</ul>
</body>
</html></span></span>
展示效果:
2.有序列表
(1)也是一列项目,列表项目使用数字进行标记
(2)有序列表始于 <ol> 标签,每个列表项始于 <li> 标签
(3)列表项内部可以使用段落、换行符、图片、链接以及其他列表等
示例代码:
<span style="font-family:Microsoft YaHei;"><span style="font-family:Microsoft YaHei;"><span style="font-family:Microsoft YaHei;"><html>
<head>
</head>
<meta charset="utf-8">
<body style="background-color:green;color:white">
<!--定义有序列表-->
<ol>
<li>Coffee</li>
<li>Milk</li>
<li>D:\download\testimg2.gif</li>
</ol>
</body>
</html></span></span></span>
展示效果:
(4)不同类型的有序列表
示例代码:
<!--不同类型的有序列表-->
<h4>数字列表:</h4>
<ol>
<li>苹果</li>
<li>橘子</li>
<li>香蕉</li>
</ol>
<h4>字母列表:</h4>
<ol type="A">
<li>苹果</li>
<li>橘子</li>
<li>香蕉</li>
</ol>
<h4>小写字母列表:</h4>
<ol type="a">
<li>苹果</li>
<li>橘子</li>
<li>香蕉</li>
</ol>
<h4>罗马字母列表:</h4>
<ol type="I">
<li>苹果</li>
<li>橘子</li>
<li>香蕉</li>
</ol>
<h4>小写罗马字母列表:</h4>
<ol type="i">
<li>苹果</li>
<li>橘子</li>
<li>香蕉</li>
</ol>
展示效果:
3.自定义列表
(1)自定义列表不仅仅是一列项目,而是项目及其注释的组合。
(2)自定义列表以 <dl> 标签开始,每个自定义列表项以 <dt> 开始,每个自定义列表项的定义以 <dd> 开始。
示例代码:
<span style="font-family:Microsoft YaHei;"><span style="font-family:Microsoft YaHei;"><span style="font-family:Microsoft YaHei;"><html>
<head>
</head>
<meta charset="utf-8">
<body style="background-color:green;color:white">
<!--定义自定义列表-->
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dd>aaaaaa</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
</body>
</html></span></span></span>
展示效果: