HTML列表有哪些类型呢？_随笔

HTML 列表（List）可以将若干条相关的内容整理起来，让内容看起来更加有条理。在列表内您可以放置文本、图像、链接等，也可以在一个列表中定义另一个列表（列表嵌套）。

HTML 为我们提供了三种不同形式的列表：

有序列表，使用 <ol>+ <li>标签

无序列表，使用 <ul>+ <li>标签

定义列表，使用 <dl>+ <dt>+ <dd>标签

1. 有序列表

在 HTML 中， <ol>标签用来表示有序列表。有序列表之间的内容有先后顺序之分，例如菜谱中的一系列步骤，这些步骤需要按顺序完成，这时就可以使用有序列表。

我们来看一个简单的实例：

<!DOCTYPE html>

<html>

<head>

<title>HTML有序列表</title>

</head>

<body>

<p>煮米饭的步骤：</p>

<ol>

<li>加入一勺米</li>

</ol>

</body>

</html>

有序列表需要使用 <ol>和 <li>标签：

<ol>是 order list 的简称，表示有序列表，它可以为列表的每一项进行编号，默认从数字 1 开始。

<li>是 list item 的简称，表示列表的每一项，<ol>中有多少个 <li>就表示有多少条内容。列表项中可以包含文本、图片、链接等，甚至还可以是另外一个列表。

注意，<ol>一般和 <li>配合使用，不会单独出现，而且不建议在 <ol>中直接使用除 <li>之外的其他标签。

2. 无序列表

HTML 使用 <ul>标签来表示无序列表。无序列表和有序列表类似，都是使用 <li>标签来表示列表的每一项，但是无序列表之间的内容没有顺序。例如，早饭的种类不需要表明顺序，这时就可以使用无序列表。

我们来看一个简单的例子：

<!DOCTYPE html>

<html>

<head>

<title>HTML无序列表</title>

</head>

<body>

<p>早餐的种类：</p>

<ul>

</ul>

</body>

</html>

浏览器运行结果如图所示：

无序列表需要使用 <ul>和 <li>标签：

<ul>是 unordered list 的简称，表示无序列表。

<ul>和 <ol>中的 <li>一样，都表示列表中的每一项。默认情况下，无序列表的每一项都使用●符号表示。

注意，<ul>一般和 <li>配合使用，不会单独出现，而且不建议在 <ul>中直接使用除 <li>之外的其他标签。

3. 定义列表

在 HTML 中，<dl>标签用于创建定义列表。定义列表由标题（术语）和描述两部分组成，描述是对标题的解释和说明，标题是对描述的总结和提炼。

定义列表具体语法格式如下：

<dl>

</dl>

定义列表需要使用 <dl>、<dt>和 <dd>标签：

<dl>是 definition list 的简称，表示定义列表。

<dt>是 definition term 的简称，表示定义术语，也就是我们说的标题。

<dd>是 definition description 的简称，表示定义描述。

可以认为 <dt>定义了一个概念（术语），<dd>用来对概念（术语）进行解释。

注意，<dt>和 <dd>是同级标签，它们都是 <dl>的子标签。一般情况下，每个 <dt>搭配一个 <dd>，一个 <dl>可以包含多对 <dt>和 <dd>。

我们来看一个简单的例子：

<!DOCTYPE html>

<html>

<head>

<title>HTML定义列表</title>

</head>

<body>

<dl>

<dd>HTML 是一种专门用来开发网页的标记语言，您可以转到《<a href="#">HTML教程</a>》了解更多。</dd>

<dd>CSS 层叠样式表可以控制 HTML 文档的显示样式，用来美化网页，您可以转到《<a href="#">CSS教程</a>》了解更多。</dd>

<dt>JavaScript</dt>

<dd>JavaScript 简称 JS，是一种用来开发网站（包括前端和后台）的脚本编程语言，您可以转到《<a href="#">JS教程</a>》了解更多。</dd>

</dl>

</body>

</html>

<dt>和 <dd>虽然是同级标签，但是它们的默认样式不同，<dd>带有一段缩进，而 <dt>顶格显示，这样层次更加分明。

4. 总结

列表分类说明

有序列表 <ol>表示有序列表，<li>表示列表中的每一项，默认使用阿拉伯数字编号。

无序列表 <ul>表示无序列表，<li>表示列表中的每一项，默认使用●符号作为作为每一项的标记。

定义列表 <dl>表示定义列表，<dt>表示定义术语、<dd>表示定义描述。一般情况下，每个 <dt>搭配一个 <dd>，一个 <dl>可以包含多对 <dt>和 <dd>。

超文本置标语言(第一版)——在1993年6月发为互联网工程工作小组 (IETF)工作草案发布（并非标准）.

HTML 2.0——1995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布已经过时

HTML 3.2——1996年1月14日，W3C推荐标准

HTML 4.0——1997年12月18日，W3C推荐标准

HTML 4.01（微小改进）——1999年12月24日，W3C推荐标准

ISO/IEC 15445:2000（“ISO HTML”）——2000年5月15日发布，基于严格的HTML 4.01语法，是国际标准化组织和国际电工委员会的标准

XHTML 1.0——发布于2000年1月26日，是W3C推荐标准，后来经过修订于2002年8月1日重新发布。

XHTML 1.1, 于2001年5月31日发布

(XHTML 2.0, W3C工作草案)

HTML没有1.0版本是因为当时有很多不同的版本。有些人认为蒂姆·伯纳斯-李的版本应该算初版，这个版本没有IMG元素。当时被称为HTML+的后续版的开发工作于1993年开始，最初是被设计成为“HTML的一个超集”。第一个正式规范在为了和当时的各种HTML标准区分开来，使用了2.0作为其版本号。HTML+的发展继续下去，但是它从未成为标准。

HTML3.0规范是由当时刚成立的W3C于1995年3月提出，提供了很多新的特性，例如表格、文字绕排和复杂数学元素的显示。虽然它是被设计用来兼容2.0版本的，但是实现这个标准的工作在当时过于复杂，在草案于1995年9月过期时，标准开发也因为缺乏浏览器支持而中止了。3.1版从未被正式提出，而下一个被提出的版本是开发代号为Wilbur的HTML 3.2，去掉了大部分3.0中的新特性，但是加入了很多特定浏览器，例如Netscape和Mosaic的元素和属性。HTML对数学公式的支持最后成为另外一个标准MathML。

HTML 4.0同样也加入了很多特定浏览器的元素和属性，但是同时也开始“清理”这个标准，把一些元素和属性标记为过时的，建议不再使用它们。HTML的未来和CSS结合会更好。

HTML4.01的新突破

1997年 HTML 3.2版已经极大丰富了HTML功能。

1997年12月推出HTML 4.0版将HTML语言推向一个新高度，该版本倡导了两个理念。

（1）将文档结构和显示样式分离；

（2）更广泛的文档兼容性。

由于同期CSS层叠样式表的配套推出，更使得HTML和CSS对于网页制作的能力达到前所未有的高度。

1999年12月，W3C网络标准化组织推出改进版的HTML4.01，该语言相当成熟可靠，一直沿用至今。

HTML4.01相比先前的版本在国际化设置，提高兼容性，样式表支持，以及脚本，打印方面都有所提高。

当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表：

外部样式表

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

<head>

</head>内部样式表

当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过 <style>标签定义内部样式表。

<head>

body {background-color: red}

p {margin-left: 20px}

</style>

</head>内联样式

当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

This is a paragraph

</p>

标签描述

<div> 定义文档中的节或区域（块级）。

<span> 定义文档中的行内的小块或区域。

<font> 规定文本的字体、字体尺寸、字体颜色。不赞成使用。请使用样式。

<basefont> 定义基准字体。不赞成使用。请使用样式。

<center> 对文本进行水平居中。不赞成使用。请使用样式。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/7658142.html

HTML列表有哪些类型呢？

发表评论

评论列表（0条）