HTML にはいくつかのリストモードが用意されています-フロントエンドQ&A-php.cn

HTML にはいくつかのリストモードが用意されています

青灯夜游

リリース： 2021-11-17 16:42:10

オリジナル

7728 人が閲覧しました

HTML は 3 つのリストモードを提供します: 1. 順序付きリスト。「

」タグと「
」タグを使用して作成され、順序付きリスト間の内容は順序どおりです。2. 順序なしリストを作成します。「
」タグと「
」タグを使用する; 3. 「
」、「
」および「

」タグを使用してリストを定義します。

HTML にはいくつかのリストモードが用意されています

このチュートリアルの動作環境: Windows 7 システム、HTML5 バージョン、Dell G3 コンピューター。

HTML リスト (リスト) では、複数の関連するコンテンツを整理して、コンテンツをより整理して見せることができます。リスト内にはテキスト、画像、リンクなどを配置できます。別のリスト内にリストを定義することもできます (ネストされたリスト)。

HTML は 3 つの異なる形式のリストを提供します:

順序付きリスト、
1. タグを使用します
2. 順序なしリスト、
3. tag
4. リストを定義するには、
  
  tag

1 を使用します。順序付きリスト

HTML では、

簡単な例を見てみましょう:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML有序列表</title>
</head>
<body>
    <p>煮米饭的步骤：</p>
    <ol>
        <li>将水煮沸</li>
        <li>加入一勺米</li>
        <li>搅拌均匀</li>
        <li>继续煮10分钟</li>
    </ol>
</body>
</html>

ログイン後にコピー

HTML にはいくつかのリストモードが用意されています

順序付きリストでは、

タグを使用する必要があります:

2. は list item の略で、リスト内の各項目を表します。
  1. の数は、コンテンツの数を示します。リスト項目には、テキスト、画像、リンクなど、または別のリストを含めることができます。

と組み合わせて使用され、単独では使用されないことに注意してください。また、
以外の他のタグを

内で直接使用することはお勧めできません。オル＞。

2. 順序なしリスト

HTML では、

タグを使用してリスト内の各項目を表しますが、順序なしリストの内容は順序通りではありません。たとえば、朝食の種類に順序を示す必要がない場合は、順序なしのリストを使用できます。

簡単な例を見てみましょう:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML无序列表</title>
</head>
<body>
    <p>早餐的种类：</p>
    <ul>
        <li>鸡蛋</li>
        <li>牛奶</li>
        <li>面包</li>
        <li>生菜</li>
    </ul>
</body>
</html>

ログイン後にコピー

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML无序列表</title>
</head>
<body>
    <p>早餐的种类：</p>
    <ul>
        <li>鸡蛋</li>
        <li>牛奶</li>
        <li>面包</li>
        <li>生菜</li>
    </ul>
</body>
</html>

ログイン後にコピー

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

HTML にはいくつかのリストモードが用意されています

无序列表需要使用

标签：

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

注意，

配合使用，不会单独出现，而且不建议在

之外的其他标签。

3. 定义列表

在 HTML 中，

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

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

<dl>
    <dt>标题1<dt>
    <dd>描述文本2<dd>
    <dt>标题2<dt>
    <dd>描述文本2<dd>
    <dt>标题3<dt>
    <dd>描述文本3<dd>
</dl>

ログイン後にコピー

定义列表需要使用

和

标签：

是 definition list 的简称，表示定义列表。
是 definition term 的简称，表示定义术语，也就是我们说的标题。
是 definition description 的简称，表示定义描述。

可以认为

定义了一个概念（术语），

用来对概念（术语）进行解释。

注意，

和

是同级标签，它们都是

搭配一个

，一个

和

。

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML定义列表</title>
</head>
<body>
    <dl>
        <dt>HTML</dt>
        <dd>HTML 是一种专门用来开发网页的标记语言，您可以转到《<a href="//m.sbmmt.com/course/list/11.html" target="_blank">HTML教程</a>》了解更多。</dd>
        <dt>CSS</dt>
        <dd>CSS 层叠样式表可以控制 HTML 文档的显示样式，用来美化网页，您可以转到《<a href="//m.sbmmt.com/course/list/12.html" target="_blank">CSS教程</a>》了解更多。</dd>
        <dt>JavaScript</dt>
        <dd>JavaScript 简称 JS，是一种用来开发网站（包括前端和后台）的脚本编程语言，您可以转到《<a href="//m.sbmmt.com/course/list/2.html" target="_blank">JS教程</a>》了解更多。</dd>
    </dl>
</body>
</html>

ログイン後にコピー

HTML にはいくつかのリストモードが用意されています

和

虽然是同级标签，但是它们的默认样式不同，

带有一段缩进，而

顶格显示，这样层次更加分明。 4. 总结 列表分类说明 有序列表 表示有序列表， 表示列表中的每一项，默认使用阿拉伯数字编号。 无序列表 表示无序列表， 表示列表中的每一项，默认使用●符号作为作为每一项的标记。 定义列表 表示定义列表， 表示定义术语、 表示定义描述。一般情况下，每个 搭配一个 ，一个 可以包含多对 和 。 推荐教程：《html视频教程》

列表分类	说明
有序列表	表示有序列表，表示列表中的每一项，默认使用阿拉伯数字编号。
无序列表	表示无序列表，表示列表中的每一项，默认使用`●`符号作为作为每一项的标记。
定义列表	表示定义列表，表示定义术语、表示定义描述。一般情况下，每个搭配一个，一个可以包含多对和。