列表元素

HTML 包含专门用于创建项目列表的元素，用于创建普通列表、编号列表、符号列表以及描述列表。

所有列表都是由父元素和子元素构成。父元素用于指定要创建的列表类型，子元素用于指定要创建的列表的项目类型。下面列出三种列表类型以及它们组成的元素：

□有序列表，ol 为父元素，li 为列表项。

□无序列表，ul 为父元素，li 为列表项。

□描述列表，dl 为父元素，dt 和 dd 分别代表 dl 中的术语和描述。

1.创建列表：输入 ol (有序列表）或 ul（无序列表）。对于有序列表包含 start、type、reversed 这三个可选的属性。输入根据需要的 li 元素。

   <ol>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    ...
</ol>
<ul>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    ...
 </ul>

2. 选择标记：创建列表时，无论是有序列表还是无序列表，都可以选择出现在列表项目左侧的标记的类型。

在样式表中，输入 list – style – type : marker,这里的 marker 是以下属性值中的一种。

□ disc（圆点，●）
□ circle(圆圈，○)
□ square（方块，□）
□ decimal(数字，1、2、3）
□ upper-alpha（大写字母，A、B、C）
□ lower-alpha（小写字母，a、b、c）
□ upper-roman(大写罗马数字，Ⅰ Ⅱ Ⅲ Ⅳ Ⅴ）
□ lower-roman(小写罗马数字，i ii iii iv）
□ none（无标记列表）

3.使用定制的标记：可以用图像创建自己定制的标记。

1）在目标列表或列表项样式规则中，输入 list – style : none;以取消常规标记，
2）在目标列表的样式规则中，设置 margin – left 和 / 或 padding – left 属性，指定列表项目缩进的大小。
3）在目标列表的 li 元素样式规则中，输入 background : url(image.ext) repeat – type horizontal vertical;其中 image – text 是要作为定制标记图像的路径和
文件名，repeat – type 是 no – repeat、repeat – x 和 repeat – y 中的一种。horizontal 和vertical 值表示列表项目中背景图像的位置。

4）输入 padding – left : value,这里的 value 应不小于背景图像的宽度。

ul{
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}
li{
    background: url(xxx.png) no-repeat 0 0;
}

4.选择列表的起始编号

有时候可能希望编号从默认值 1 以外的某个数字开始。

1）在 ol 开始标签中输入 start = “n”,这里的n表示 n 列表的初始值。
2）在目标 li 项目输入 value = “n”,这里的 n 代表列表项目的值。
```
<ol start="2">
  <li>...</li>
  <li value="5">...</li>
  <li>...</li>
  ...
 </ol>
```
5.控制标记的位置

默认情况下，列表会从（其父元素的）左侧进行缩进。标记可以位于整个文本块的外面，也可以缩在文本块内。

控制标记位置：在目标列表或列表项目的样式规则中，输入 list – style – position:输入 inside 让标记缩在文本块内，或者输入 outside 让标记显示在列表项目的文本左边。（这是默认值，一般不需要指定声明）同时设置所有列表的样式：CSS 也为 list-style 提供了简写形式，list – style – type 设为 circle，并将 list – style – position 设为 inside。简写为如下形式：

  ul{
        list-style: circle inside;
    }

设置嵌套列表的样式：

qwe

aabbcc
1. ddeeff
2. gghhkk
cccooo
1. 112233
2. 445566
3. 778899
xxoo
1. iiuuyy
  1. ttyrr
  2. llkkjj
2. ******
……
……

<body>
 <h1> qwe </h1>
 <ol>
<li> aabbcc
    <ol>
        <li> ddeeff </li>
        <li> gghhkk </li>
    </ol>
</li>
<li>cccooo
    <ol>
        <li> 112233 </li>
        <li> 445566 </li>
        <li> 778899 </li>
    </ol>
</li>
<li>xxoo
    <ol>
        <li>iiuuyy
            <ol>
                <li> ttyrr </li>
                <li> llkkjj </li>
            </ol> 
        </li>
        <li>******</li>
    </ol>
</li>
<li>......</li>
<li>......</li>
</ol>
</body>

6.创建描述列表 HTML提供了专门用于描述成组出现的名称及其值之间关联的列表类型。这种类型在 HTML5 中称为描述列表。每个列表都包含在 dl 中，其中的每个名-值组成都有一个或多个 dt 元素（名称或术语）以及一个或多个 dd 元素（他们的值）。可以使用 dfn 元素包围 dt 中的名称，指出该列表时用于定义术语的。可以对描述列表进行嵌套，并通过 css 对它们添加样式。

创建描述列表步骤：输入 dl，然后输入 dt，输入需要描述或定义的单词或短语，包括其他语义元素。

Director: Jean-Pierre Jeunet
Writers: Guillaume Laurant(story); Jean-Pierre Jeunet
Cast

<dl>
<dt> Director </dt>
<dd> Jean-Pierre Jeunet </dd>

<dt> Writers </dt>
<dd> Guillaume Laurant(story) </dd>
<dd> Jean-Pierre Jeunet </dd>

<dt> Cast </dt>
<dl>
    <dt> Audery Tautou </dt>
    <dd> Amelie Poulain </dd>

    <dt> Mathieu Kassovitz </dt>
    <dd> Nino Quincampoix </dd>
</dl>
</dl>

今天的文章HTML 列表基础分享到此就结束了，感谢您的阅读。

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/14646.html

HTML 列表基础

列表元素

qwe

相关推荐

发表回复