列表
列表
一，无序列表的设计
1，无序列表标记--ul
无序列表的特征在于提供一种不编号的列表排序方式，在每一个项目文字之前，以符号作为分项标识。
再该语法中，<ul></ul>标记无序列表的开始和结束。<li>表示这是一个列表项的开始。在一个无序列表中可以包含多个列表项。
<html>
<head>
<title>创建无序列表</title>
</head>
<body>
<font size="+5" color="#990000">提供下载的软件类别</font>
<br>
<br>
<ul>
<li>系统程序
<li>媒体工具
<li>管理软件
<li>游戏娱乐
</ul>
</body>
</html>
效果图：
2，设置无序列表的符号类型--type
在默认的情况下，无序列表的项目符号是disc类型,而通过type参数可以调整无序列表的项目符号，避免列表符号的单调。
语法：
<ul type=符号类型>
<li>第一项
<li>第二项
.....
</ul>
disc类型：
circle类型：
square类型：
<html>
<head>
<title>创建无序列表</title>
</head>
<body>
<font size="+5" color="#990000">提供下载的软件类别</font>
<br>
<br>
<ul type=disc>
<li>系统程序
</ul>
<ul type=circle>
<li>媒体工具
</ul>
<ul type=square>
<li>管理软件
</ul>
</body>
</html>
效果图:
二，有序列表的设计
1，有序列表标记--ol
在有序列表中，各个列表使用编号而不是符号来进行排列。列表中的项目通常都有先后顺序，一般采用数字或者字母作为顺序号。
在该语法中，<ol> </ol>标志标记着有序列表的开始和结束。而<li>标记这是一个列表项的开始，在默认的情况下，采用数字序号进行排列。
<html>
<head>
<title>创建有序列表</title>
</head>
<body>
<font size="+5" color="#990000">创建HTML文件的步骤</font>
<ol>
<li>启动编写HTML文件的软件，如Dreamweaver
<li>编写文件代码
<li>保存文件
<li>运行文件并查看效果
</ol>
</body>
</html>
效果图：
2,有序列表的序号类型
默认情况下，有序列表的序号是数字的，通过type属性可以调整序号的类型。
语法
<ol type=符号类型>
<li>第一项
<li>第二项
.....
</ol>
| type取值 | 项目类表的序号类型 |
| 1 | 数字1，2，3，4... |
| a | 小写英文字母a,b,c,d... |
| A | 大写英文字母A,B,C,D... |
| ⅰ | 小写罗马数字ⅰ，ⅱ，ⅲ，ⅳ，ⅴ，ⅵ，ⅶ，ⅷ，ⅸ，ⅹ |
| Ⅰ | 大写罗马数字Ⅰ，Ⅱ，Ⅲ，Ⅳ，Ⅴ，Ⅵ，Ⅶ，Ⅷ，Ⅸ，Ⅹ |
三，定义列表标记
HTML中还有一种列表标记，称为定义列表，不同于前两种，它主要用于解释名词，包含两个层次的列表，第一层次是需要解释的名词，第二层次是具体的解释。
语法
<dl>
<dt>名词1<dd>解释1
<dt>名词1<dd>解释1
<dt>名词1<dd>解释1
.....
</dl>
作为解释的内容在显示时会自动缩进
<html>
<head>
<title>创建定义列表</title>
</head>
<body>
<font size="+5" color="#990000">网页创作的相关知识</font>
<dl>
<dt>HTML<dd>HTML是英文Hyper Text Makkup Language的缩写，即超文本标志语言
<dt>CSS<dd>CSS是Cascading Style Sheets（层叠样式表单）的简称，一种设计网页样式的工具
<dt>JavaScript<dd>JavaScript是一种新的描述语言，可以被嵌入HTML的文件之中
<dt>CGI<dd>CGI是一段程序，它运行在Server上，提供同客户端HTML页面的接口
</dl>
</body>
</html>
效果图：
四，菜单列表标记
菜单列表主要用于设计单列的菜单列表。菜单列表在浏览器中显示效果和无序列表是相同的，因此他的功能也可以通过无序列表来实现。
语法
<menu>
<li>列表项1
<li>列表项2
<li>列表项3
...
</menu>
五，目录列表
目标列表一般用来创建多列的目标列表，它在浏览器中的显示效果与无序列表相同，因此它的功能也能通过无序列表来实现。
语法
<dir>
<li>列表项1
<li>列表项2
<li>列表项3
...
</dir>
六，列表的高级应用
1，列表的简化
在制作的列表清单过长时，浏览器可能需要滚条才能看到所有的内容。为了节省空间，避免过多的留白，可以考虑compact参数来紧密排列各要项的内容。
语法
<dl compact></dl>
compact参数除了与定义列表结合之外，还可以与各种列表结合使用，达到列表的简化功能。
2，设置列表文字的颜色
在创建列表时，可以单独控制列表中文字的颜色。
语法
<li><font color="颜色代码">列表中的内容</font><li>
也可以在列表中进行整体颜色的设置
<html>
<head>
<title>设置列表文字的颜色</title>
</head>
<body>
<ol>
<li><font color="#66FF66">问题1</font>
<li><font color="#CC0099">问题2</font>
<li><font color="#0000CC">问题3</font>
</ol>
</body>
</html>
效果图：
<html>
<head>
<title>创建嵌套列表</title>
</head>
<body>
<ol>
<li>问题1
<ul type=disc>
<li>答案1
<li>答案2
<li>答案3
<li>答案4
</ul>
<li>问题2
<ul type=circle>
<li>答案1
<li>答案2
<li>答案3
<li>答案4
</ul>
<li>问题3
<ul type=square>
<li>答案1
<li>答案2
<li>答案3
<li>答案4
</ul>
</ol>
</body>
</html>
效果图：
浙公网安备 33010602011771号