Skip to content

Latest commit

 

History

History
190 lines (152 loc) · 6.98 KB

index.md

File metadata and controls

190 lines (152 loc) · 6.98 KB
Raw
title slug l10n
<ul>：无序列表元素
Web/HTML/Element/ul
sourceCommit
829db137a01feb14af7beaec178a3ea0118b4777

{{HTMLSidebar}}

HTML <ul> 元素表示无序的项目列表，通常渲染为项目符号列表。

{{EmbedInteractiveExample("pages/tabbed/ul.html", "tabbed-standard")}}

属性

此元素包含全局属性。

  • compact {{Deprecated_inline}}

    • : 此布尔属性提示列表是否需要被渲染为更紧凑的样式。{{glossary("user agent", "用户代理")}}决定如何解释这个属性，且并非所有浏览器都支持它。

      [!WARNING] 请不要使用这个属性，它已经被弃用了：请使用 CSS 来更改样式。如果想达到与 compact 属性相同的效果，将 CSS 属性 {{cssxref("line-height")}} 的值设为 80% 即可。

  • type {{Deprecated_inline}}

    • : 用于设置列表的着重号样式，定义于 HTML3.2 和过渡版本 HTML 4.0/4.01 中的可用值有：

      • circle
      • disc
      • square

      存在第四种定义于 WebTV 接口的着重号样式，但并不是所有浏览器都支持：triangle。

      如果未设置此 HTML 属性且没有 CSS {{ cssxref("list-style-type") }} 属性作用于这个元素，用户代理会决定使用哪种着重号样式，一般来说这也和嵌套的层级数有关。

      [!WARNING] 请不要使用这个属性，它已经被弃用了：请使用 CSS {{ cssxref("list-style-type") }} 属性作为代替。

使用说明

  • <ul> 元素用来将没有数字顺序的一组数据进行分组，并且它们的数字顺序是没有意义的。举个例子，无序列表的列表项通常通过一个字符进行装饰，这些字符的形式可以是点，圆乃至方形。虽然这个字符没有直接在页面上定义，但是可以用与之相关的 CSS 对其进行操作，例如使用 {{ cssxref("list-style-type") }} 属性。
  • <ul> 和 {{ HTMLElement("ol") }} 元素可以嵌套任意深度。此外，嵌套列表可以不受限制地在 <ol> 和 <ul> 之间交替使用。
  • {{ HTMLElement("ol") }} 和 <ul> 元素二者都代表一组数据，不过它们彼此是有区别的，{{ HTMLElement("ol") }} 元素中的顺序是有意义的。如果想确定到底需要使用哪一个列表元素，可以试着去改变数据的顺序。如果想表达的语义改变了，就需要使用 {{ HTMLElement("ol") }} 元素，否则该使用 <ul> 元素。

示例

简单的示例

<ul>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ul>

结果

{{EmbedLiveSample("简单的示例", 400, 100)}}

嵌套列表

<ul>
  <li>第一项</li>
  <li>
    第二项
    <!-- 注意，关闭的 </li> 标签没有放置在这里！-->
    <ul>
      <li>第二项第一子项</li>
      <li>
        第二项第二子项
        <!-- 第二个嵌套的无序列表也一样！-->
        <ul>
          <li>第二项第二子项第一子子项</li>
          <li>第二项第二子项第二子子项</li>
          <li>第二项第二子项第三子子项</li>
        </ul>
      </li>
      <!-- 为包含第三个无序列表的 li 关闭 </li> 标签 -->
      <li>第二项第三子项</li>
    </ul>
    <!-- 关闭的 </li> 标签在这里！ -->
  </li>
  <li>第三项</li>
</ul>

结果

{{EmbedLiveSample("嵌套列表", 400, 220)}}

无序列表中的有序列表

<ul>
  <li>第一项</li>
  <li>
    第二项
    <!-- 注意，关闭的 </li> 标签没有放置在这里！ -->
    <ol>
      <li>第二项第一子项</li>
      <li>第二项第二子项</li>
      <li>第二项第三子项</li>
    </ol>
    <!-- 关闭的 </li> 标签在这里 -->
  </li>
  <li>第三项</li>
</ul>

结果

{{EmbedLiveSample("无序列表中的有序列表", 400, 150)}}

技术概要

内容分类 流式内容，如果 <ul> 元素的子元素包含至少一个 {{HTMLElement("li")}} 元素，则为可感知内容。
允许的内容 0 或多个 {{HTMLElement("li")}} 元素、{{HTMLElement("script")}} 和 {{HTMLElement("template")}} 元素。
标签省略 不允许，开始标签和结束标签都不能省略。
允许的父元素 任何接受流式内容的元素。
隐含的 ARIA 角色 list
允许的 ARIA 角色 directory、group、listbox、menu、menubar、none、presentation、radiogroup、tablist、toolbar、tree
DOM 接口 {{domxref("HTMLUListElement")}}

规范

{{Specifications}}

浏览器兼容性

{{Compat}}

参见

  • 其他列表相关的 HTML 元素：{{HTMLElement("ol")}}、{{HTMLElement("li")}} 和 {{HTMLElement("menu")}}

  • 可能对 <ul> 元素的样式特别有用的 CSS 属性：

    • {{CSSxRef("list-style")}} 属性，用于选择显示序数的方法。
    • CSS 计数器，用于操作复杂的嵌套列表。
    • {{CSSxRef("line-height")}} 属性，用于模拟过时的 compact 属性。
    • {{CSSxRef("margin")}} 属性，用于控制列表的缩进。