HTML入门教程
HTML入门教程
    • 请登录查看
    阅读(2073)

    HTML 列表

    最后一次修改 2017年08月03日

    HTML 无序列表

    ul 元素表示无序列表。

    ul 元素中的项目使用 li 元素表示。

    元素没有在HTML5中定义任何属性，并且您使用CSS控制列表的显示。

    HTML5中的 type 和 compact 属性已过时。

    您可以在以下代码中查看正在使用的 ul 元素。

    <!DOCTYPE HTML>
<html>
<body>
  I like:
  <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>Javascript</li>
  </ul>
</body>
</html>

    每个列表项都显示一个项目符号。您可以通过 list-style-typeCSS属性来控制要使用哪个样式项目符号。

    例2

    以下代码显示了如何创建嵌套列表。

    <!DOCTYPE HTML>
<html>
<body>
    <ul>
        <li>HTML</li>
        <li>CSS
            <ul>
                <li>Introdunction</li>
                <li>CSS attributes</li>
            </ul>
        </li>
        <li>Javascript</li>
    </ul>
</body>
</html>

    HTML 有序列表

    ol 元素表示有序列表。列表中的项目使用 li 元素表示。

    已在HTML5中添加reversed属性。 compact 属性现在在HTML5中已过时。

    以下代码显示了用于创建简单有序列表的 ol 元素。

    <!DOCTYPE HTML>
<html>
<body>
  I like:
  <ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>XML</li>
  </ol>
</body>
</html>

    属性

    您可以使用 ol 元素定义的属性来控制列表中的项目。

    start 属性定义列表中第一个项目的序数值。如果未定义此属性，则为第一个项目分配序号值1。

    您可以使用 type 属性来指示每个项目旁边应显示哪个标记。

    下表显示此属性支持的值。

    值描述例子
    1小数(默认)1., 2., 3., 4.
    a小写拉丁字母a., b., c., d.
    A大写拉丁字母A., B., C., D.
    i小写罗马数字i., ii., iii., iv.
    I大写罗马数字I., II., III., IV.

    例3

    以下代码显示了如何创建嵌套排序列表。

    <html>
<body>
<p>Here is a nested ordered list:</p>

<ol>
    <li>Item one</li>
    <li>Item two</li>
    <li>Item three</li>
    <li>Item four
        <ol>
            <li>Item 4.1</li>
            <li>Item 4.2</li>
            <li>Item 4.3</li>
        </ol>
    </li>
    <li>Item Five</li>
</ol>

</body>
</html>

    例4

    以下代码显示如何使用大写字母并从点4开始创建有序列表。

    <html>
<body>

<p>Here is an ordered list using capital letters and starting at point 4, which is a letter D:</p>

<ol type="A" start="4">
    <li>Point number one</li>
    <li>Point number two</li>
    <li>Point number three</li>
</ol>
</body>
</html>

    HTML 自定义列表

    描述列表由一组术语/描述分组组成。

    您使用三个元素来定义描述列表: dl ， dt 和 dd 元素。

    • dl 表示描述列表。

    • dt 表示描述列表中的术语。

    • dd 表示描述列表中的定义。

    多个 dd 元素可用于单个 dt 元素，这允许您为单个术语提供多个定义。

    以下代码创建说明列表。

    <!DOCTYPE HTML>
<html>
<body>
  I like:
  <dl>
    <dt>CSS</dt>
    <dd>Cascading Style Sheets</dd>
    <dd><i>a style sheet language used for
           describing the look and formatting
           of a document written in a markup language</i></dd>

    <dt>HTML</dt>
    <dd>The mark language</dd>

    <dt>Javascript</dt>
    <dd>The coding logic</dd>
  </dl>
</body>
</html>
    ← HTML 超链接
    HTML figure →
    提交