上一节:
下一节:

  HTML 列表

  • HTML列表

    HTML列表通常用来罗列一些清单，例如： 
    <ul>
  <li>Java</li>
  <li>HTML</li>
  <li>PHP</li>
  <li>Python</li>
</ul>
<hr>
<ol>
  <li>学习HTML</li>
  <li>学习JavaScript</li>
  <li>学习CSS</li>
  <li>学习PHP</li>
</ol>
    尝试一下

  • HTML列表 | 无序列表

    无序列表以<ul>标记开头。每个列表项都以<li>标记开头 。默认情况下，列表项将标有项目符号（小黑圈）： 
    <ul>
  <li>Java</li>
  <li>HTML</li>
  <li>PHP</li>
  <li>Python</li>
</ul>
    尝试一下

  • 无序HTML列表 | 选择列表项标记

    CSS list-style-type属性用于定义列表项标记的样式：
    值 描述
    disc 标记为一个实心小圆点（默认是这种情况）
    circle 标记为一个小圆圈
    square 标记为一个正方形
    none 删除标记，什么都没有 
    <!-- 圆圈 -->
      <ul style="list-style-type:circle">
        <li>PHP</li>
        <li>Java</li>
        <li>Python</li>
      </ul>
      <!-- 方形 -->
      <ul style="list-style-type:square">
        <li>PHP</li>
        <li>Java</li>
        <li>Python</li>
      </ul>
      <!-- 无标记 -->
      <ul style="list-style-type:none">
        <li>PHP</li>
        <li>Java</li>
        <li>Python</li>
      </ul>
    尝试一下

  • HTML列表 | 有序列表

    有序列表以<ol>标记开头。每个列表项都以<li>标记开头。默认情况下，列表项将标有数字： 
    <ol>
  <li>Java</li>
  <li>HTML</li>
  <li>PHP</li>
  <li>Python</li>
</ol>
    尝试一下

  • 有序列表类型属性

    <ol>标签的type属性定义了列表项标记的类型：
    值 描述
    type="1" 以阿拉伯数字排序（这是默认情况）
    type="A" 以大写字母排序
    type="a" 以小写字母排序
    type="I" 以大写罗马数字排序
    type="i" 以大写罗马数字排序 
    <!-- 数字: -->
          <ol type="1">
            <li>PHP</li>
            <li>Java</li>
            <li>Python</li>
          </ol>
          <!--大写字母：-->
          <ol type="A">
            <li>PHP</li>
            <li>Java</li>
            <li>Python</li>
          </ol>
          <!--小写字母：-->
          <ol type="a">
            <li>PHP</li>
            <li>Java</li>
            <li>Python</li>
          </ol>
          <!--大写罗马数字：-->
          <ol type="I">
            <li>PHP</li>
            <li>Java</li>
            <li>Python</li>
          </ol>
          <!--小写罗马数字：-->
          <ol type="i">
            <li>PHP</li>
            <li>Java</li>
            <li>Python</li>
          </ol>
    尝试一下

  • HTML描述列表

    HTML还支持描述列表。描述列表是术语列表，其中包含每个术语的描述。所述<dl>标记定义了描述列表，所述<dt>标记定义了术语（名称），和<dd> 标记描述各术语： 
    <dl>
  <dt>PHP</dt>
  <dd>- 后端编程语言</dd>
  <dt>JavaScript</dt>
  <dd>- 前端编程语言</dd>
</dl>
    尝试一下

  • 控制列表计数

    默认情况下，有序列表将从1开始计数。如果要从指定的数字开始计数，可以使用以下start属性： 
    <ol start="20">
  <li>Java</li>
  <li>PHP</li>
  <li>Python</li>
</ol>
    尝试一下

  • 嵌套的HTML列表

    列表可以嵌套（列表中的列表）： 
    <ul>
  <li>PHP</li>
  <li>Java
    <ul>
      <li>Java SE</li>
      <li>Java EE</li>
      <li>Java ME</li>
    </ul>
  </li>
  <li>Python</li>
</ul>
    尝试一下
    注意：列表项可以包含新列表和其他HTML元素，如图像和链接等。

  • CSS的水平列表

    可以使用CSS以多种不同方式设置HTML列表的样式。一种流行的方法是水平设置列表，以创建导航菜单： 
    <style>
          ul {
              list-style-type: none;
              margin: 0;
              padding: 0;
              overflow: hidden;
              background-color: #333333;
          }

          li {
              float: left;
          }

          li a {
              display: block;
              color: white;
              text-align: center;
              padding: 16px;
              text-decoration: none;
          }

          li a:hover {
              background-color: #111111;
          }
          </style>
           

          <h2>导航菜单</h2>
          <p>在这个例子中我们演示了创建一个导航菜单:</p>

          <ul>
            <li><a href="#home">主页</a></li>
            <li><a href="#news">新闻</a></li>
            <li><a href="#contact">联系方式</a></li>
            <li><a href="#about">关于我们</a></li>
          </ul>
    尝试一下

  • 章节总结

    • 使用HTML <ul>元素定义无序列表
    • 使用CSS list-style-type属性定义列表项标记
    • 使用HTML <ol>元素定义有序列表
    • 使用HTML type属性定义编号类型
    • 使用HTML <li>元素定义列表项
    • 使用HTML <dl>元素定义描述列表
    • 使用HTML <dt>元素定义描述术语
    • 使用HTML <dd>元素在描述列表中描述术语
    • 列表可以嵌套在列表中
    • 列表项可以包含其他HTML元素
    • 使用CSS属性float:left或display:inline水平显示列表
上一节:
下一节: