最新的Web开发教程

HTML列表

HTML列表说明

说明清单,它由名称 - 值组,并且被称为前HTML5一个定义列表。 说明列表用于的“术语和定义,元数据的话题和价值观,问题和答案,或名称值数据的任何其他组”的群体。

DL在HTML标签的存在与HTML 2.0规范; 仍是当前。


一个无序列表和HTML有序列表的例子:

无序列表:

  • 项目
  • 项目
  • 项目
  • 项目

有序列表:

  1. 第一项
  2. 第二项
  3. 第三项
  4. 第四个项目

无序HTML列表

一个无序列表开始与<ul>标签。 每个列表项开始与<li>标记。

列表项将子弹标记(small black circles)

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

试一试»


无序HTML列表-的Style属性

style属性可被添加到一个无序列表 ,以限定所述标记物的式:

样式 描述
list-style-type:disc 该列表中的项目将标有子弹(default)
list-style-type:circle 该列表项目将被打上圈
list-style-type:square 该列表中的项目将被标记为正方形
list-style-type:none 该列表中的项目将不会被标记

Disc

<ul style="list-style-type:disc">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
试一试»

Circle

<ul style="list-style-type:circle">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
试一试»

Square

<ul style="list-style-type:square">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
试一试»

None

<ul style="list-style-type:none">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
试一试»

有序HTML列表

有序列表开始与<ol>标记。 每个列表项开始与<li>标记。

该列表项目将被打上编号:

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
试一试»

有序HTML列表-该Type属性

type属性可被添加到有序列表 ,以限定所述标记物的类型:

类型 描述
type="1" 列表项将带有数字编号(default)
type="A" 该列表中的项目将用大写字母编号
type="a" 列表项将与小写字母编号
type="I" 列表项将与大写罗马数字编号
type="i" 列表项将与小写罗马数字编号

编号:

<ol type="1">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
试一试»

大写字母:

<ol type="A">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
试一试»

小写字母:

<ol type="A">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
试一试»

大写罗马数字:

<ol type="I">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
试一试»

小写罗马数字:

<ol type="I">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
试一试»

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属性显示:内联到横向显示一个列表

测试自己与练习!

练习1» 练习2» 练习3» 练习4» 练习5» 练习6»


HTML标签列表

标签 描述
<ul> 定义无序列表
<ol> 定义有序列表
<li> 定义列表项
<dl> 定义描述列表
<dt> 定义一个描述列表术语
<dd> 定义描述的描述列表