zltzlt 发表于 2020-1-21 21:00:19

列表

HTML 列表

列表分有序列表、无序列表和定义列表。

有序列表

例子:

<!DOCTYPE html>
<html>
    <head>
      <title>列表演示</title>
    </head>
    <body>
      <ol>
            <li>HTML5</li>
            <li>CSS3</li>
            <li>JavaScript</li>
      </ol>
    </body>
</html>

显示效果:



可以为有序列表设置 reversed、start、type 属性改变显示样式:

<!DOCTYPE html>
<html>
    <head>
      <title>列表演示</title>
    </head>
    <body>
      <!-- 设置起始值为 0 -->
      <ol start="0">
            <li>HTML5</li>
            <li>CSS3</li>
            <li>JavaScript</li>
      </ol>
    </body>
</html>



<!DOCTYPE html>
<html>
    <head>
      <title>列表演示</title>
    </head>
    <body>
      <!-- 罗马数字 -->
      <ol type="I">
            <li>HTML5</li>
            <li>CSS3</li>
            <li>JavaScript</li>
      </ol>
    </body>
</html>



<!DOCTYPE html>
<html>
    <head>
      <title>列表演示</title>
    </head>
    <body>
      <!-- 反转列表 -->
      <ol reversed>
            <li>HTML5</li>
            <li>CSS3</li>
            <li>JavaScript</li>
      </ol>
    </body>
</html>



无序列表

例子:

<!DOCTYPE html>
<html>
    <head>
      <title>列表演示</title>
    </head>
    <body>
      <ul>
            <li>HTML5</li>
            <li>CSS3</li>
            <li>JavaScript</li>
      </ul>
    </body>
</html>

显示效果:



可以对无序列表设置 CSS 属性改变显示样式:

<!DOCTYPE html>
<html>
    <head>
      <title>列表演示</title>
    </head>
    <body>
      <ul style="list-style-type: circle;">
            <li>HTML5</li>
            <li>CSS3</li>
            <li>JavaScript</li>
      </ul>
      <ul style="list-style-type: disc;">
            <li>HTML5</li>
            <li>CSS3</li>
            <li>JavaScript</li>
      </ul>
      <ul style="list-style-type: square;">
            <li>HTML5</li>
            <li>CSS3</li>
            <li>JavaScript</li>
      </ul>
      <!-- none 表示不显示 -->
      <ul style="list-style-type: none;">
            <li>HTML5</li>
            <li>CSS3</li>
            <li>JavaScript</li>
      </ul>
    </body>
</html>

显示效果:

一个账号 发表于 2020-1-22 17:39:16

你最近学HTML啦?!

zltzlt 发表于 2020-1-22 17:39:55

一个账号 发表于 2020-1-22 17:39
你最近学HTML啦?!

页: [1]
查看完整版本: 列表