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:leftdisplay:inline水平显示列表