HTML列表说明
说明清单,它由名称 - 值组,并且被称为前HTML5一个定义列表。 说明列表用于的“术语和定义,元数据的话题和价值观,问题和答案,或名称值数据的任何其他组”的群体。
DL在HTML标签的存在与HTML 2.0规范; 仍是当前。
一个无序列表和HTML有序列表的例子:
无序列表:
- 项目
- 项目
- 项目
- 项目
有序列表:
- 第一项
- 第二项
- 第三项
- 第四个项目
无序HTML列表
一个无序列表开始与<ul>标签。 每个列表项开始与<li>标记。
列表项将子弹标记(small black circles) :
无序HTML列表-的Style属性
甲style属性可被添加到一个无序列表 ,以限定所述标记物的式:
样式 | 描述 |
---|---|
list-style-type:disc | 该列表中的项目将标有子弹(default) |
list-style-type:circle | 该列表项目将被打上圈 |
list-style-type:square | 该列表中的项目将被标记为正方形 |
list-style-type:none | 该列表中的项目将不会被标记 |
有序HTML列表
有序列表开始与<ol>标记。 每个列表项开始与<li>标记。
该列表项目将被打上编号:
有序HTML列表-该Type属性
甲type属性可被添加到有序列表 ,以限定所述标记物的类型:
类型 | 描述 |
---|---|
type="1" | 列表项将带有数字编号(default) |
type="A" | 该列表中的项目将用大写字母编号 |
type="a" | 列表项将与小写字母编号 |
type="I" | 列表项将与大写罗马数字编号 |
type="i" | 列表项将与小写罗马数字编号 |
HTML说明列出
HTML还支持描述列表。
说明列表项的列表,每个学期的描述。
所述<dl>标签定义的描述列表,则<dt>标签定义的术语(name) ,和<dd>标签描述了每个术语:
例
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
试一试» 嵌套的HTML列表
列表可以嵌套(lists inside lists) :
例
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
试一试» 列表项目可以包含新的列表,以及其他HTML元素,如图像和链接等。
水平列出
HTML列表可以与CSS许多不同的方式来称呼。
一种流行的方式,就是样式列表进行横向显示:
例
<!DOCTYPE html>
<html>
<head>
<style>
ul#menu li {
display:inline;
}
</style>
</head>
<body>
<h2>Horizontal List</h2>
<ul id="menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>PHP</li>
</ul>
</body>
</html>
试一试» 随着一点点额外的样式,你可以把它看起来像一个菜单:
例
ul#menu {
padding: 0;
}
ul#menu li {
display: inline;
}
ul#menu li a {
background-color: black;
color: white;
padding: 10px 20px;
text-decoration: none;
border-radius: 4px 4px 0 0;
}
ul#menu li a:hover {
background-color: orange;
}
试一试» 章节总结
- 使用HTML <ul>元件,以限定一个无序列表
- 使用HTML style属性来定义项目符号样式
- 使用HTML <ol>元素来定义的有序列表
- 使用HTML type属性来定义的编号类型
- 使用HTML <li>元素定义一个列表项
- 使用HTML <dl>元素来定义的描述列表
- 使用HTML <dt>元素来定义的描述术语
- 使用HTML <dd>元素来定义描述数据
- 列表可以嵌套在列表
- 列表项目可以包含其他HTML元素
- 使用CSS属性显示:内联到横向显示一个列表
测试自己与练习!
HTML标签列表
标签 | 描述 |
---|---|
<ul> | 定义无序列表 |
<ol> | 定义有序列表 |
<li> | 定义列表项 |
<dl> | 定义描述列表 |
<dt> | 定义一个描述列表术语 |
<dd> | 定义描述的描述列表 |