집 > 기사 > 웹 프론트엔드 > HTML은 여러 목록 모드를 제공합니다

HTML은 여러 목록 모드를 제공합니다

青灯夜游원래의: 2021-11-17 16:41:507702검색

HTML은 3가지 목록 모드를 제공합니다. 1. "

" 및 "
" 태그를 사용하여 생성된 정렬된 목록 2. "" 및 "

" 태그 3. "
", "
" 및 "

" 태그를 사용하여 생성된 목록을 정의합니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, HTML5 버전, Dell G3 컴퓨터.

HTML 목록(List)은 여러 관련 콘텐츠를 구성하여 콘텐츠를 더욱 체계적으로 보이게 할 수 있습니다. 목록 내에 텍스트, 이미지, 링크 등을 배치할 수 있으며 다른 목록(중첩 목록) 내에 목록을 정의할 수 있습니다.

HTML은 세 가지 다른 형태의 목록을 제공합니다.

1. 태그를 사용하는 순서가 지정된 목록
2. - 태그를 사용하는 순서 없는 목록 목록의 경우
    +
    태그를 사용하세요.
  - 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>
```
  주문 목록에는
  1. 태그가 필요합니다.
    - 는 목록 항목의 약어로, 목록의 각 항목을 나타냅니다.
    1. 와 함께 사용되며 단독으로 표시되지 않으며
      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은 여러 목록 모드를 제공합니다

无序列表需要使用

标签：

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

注意，

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

之外的其他标签。

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="http://www.php.cn/course/list/11.html" target="_blank">HTML教程</a>》了解更多。</dd>
        <dt>CSS</dt>
        <dd>CSS 层叠样式表可以控制 HTML 文档的显示样式，用来美化网页，您可以转到《<a href="https://www.php.cn/course/list/12.html" target="_blank">CSS教程</a>》了解更多。</dd>
        <dt>JavaScript</dt>
        <dd>JavaScript 简称 JS，是一种用来开发网站（包括前端和后台）的脚本编程语言，您可以转到《<a href="https://www.php.cn/course/list/2.html" target="_blank">JS教程</a>》了解更多。</dd>
    </dl>
</body>
</html>

HTML은 여러 목록 모드를 제공합니다

和

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

带有一段缩进，而

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

HTML은 여러 목록 모드를 제공합니다

HTML에서는
태그가 사용됩니다. 순서가 지정된 목록의 콘텐츠에는 레시피의 일련의 단계와 같은 순서가 있습니다. 이 경우 순서가 지정된 목록을 사용할 수 있습니다.

3. 定义列表

4. 总结

관련 기사

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

HTML은 여러 목록 모드를 제공합니다

HTML에서는 태그가 사용됩니다. 순서가 지정된 목록의 콘텐츠에는 레시피의 일련의 단계와 같은 순서가 있습니다. 이 경우 순서가 지정된 목록을 사용할 수 있습니다.

3. 定义列表

4. 总结

관련 기사

HTML에서는
태그가 사용됩니다. 순서가 지정된 목록의 콘텐츠에는 레시피의 일련의 단계와 같은 순서가 있습니다. 이 경우 순서가 지정된 목록을 사용할 수 있습니다.