HTML学习笔记（六）列表

最新推荐文章于 2020-05-14 21:31:03 发布

慕林溪

最新推荐文章于 2020-05-14 21:31:03 发布

阅读量674

点赞数

分类专栏： HTML 文章标签： html

本文链接：https://blog.csdn.net/sgz_06_666666/article/details/51028606

版权

HTML 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

无序列表

无序列表是一个项目的列表，通过粗体圆点、空心圆点等进行标记。默认为粗体小圆点。

无序列表 <ul> 标签。列表项 <li>。列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

小栗子：（不同类型的无序列表）

<html>
  <body>
    <h5>type="cirle"的列表：</h5>
    <ul type="circle">
      <li>橘子</li>
      <li>芒果</li>
      <li>葡萄</li>
    </ul>
    <h5>type="disc"的列表：(默认)</h5>
    <ul type="disc">
      <li>绘画</li>
      <li>唱歌</li>
      <li>骑行</li>
    </ul>
    <h5>type="square"的列表：</h5>
    <ul type="square">
      <li>程序猿</li>
      <li>攻城狮</li>
      <li>搬砖的</li>
    </ul>
  </body>
</html>

图示：

去掉前面的标记点：type="none"

有序列表

有序列表也是一列项目，列表项目使用数字进行标记。

有序列表<ol> 标签。每个列表项 <li> 标签。列表项内部可以使用段落、换行符、图片、链接以及其他列表等。

小栗子：（不同类型的有序列表）

<html>
  <body>
    <h5>数字形式标记：(默认)</h5>
    <ol>
      <li>枯藤</li>
      <li>老树</li>
      <li>昏鸦</li>
    </ol>
    <h5>大写字母形式标记：</h5>
    <ol type="A">
      <li>小桥</li>
      <li>流水</li>
      <li>人家</li>
    </ol>
    <h5>小写字母形式标记：</h5>
    <ol type="a">
      <li>古道</li>
      <li>西风</li>
      <li>瘦马</li>
    </ol>
    <h5>大写罗马字母标记：</h5>
    <ol type="I">
      <li>绘画</li>
      <li>唱歌</li>
      <li>骑行</li>
    </ol>
    <h5>小写罗马字母标记：</h5>
    <ol type="i">
      <li>芒果</li>
      <li>橘子</li>
      <li>葡萄</li>
    </ol>
  </body>
</html>

图示：

定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义列表<dl>标签。自定义列表项 <dt>标签 。自定义列表项的描述 <dd>标签。列表项内部可以使用段落、换行符、图片、链接以及其他列表等。

<html>
  <body>
  <h4自定义列表：></h4>
    <dl>
      <dt>程序猿</dt>
      <dd>一个神奇的职业，俗称码农...</dd>
      <dt>攻城狮</dt>
      <dd>一个神奇的职业，日常以搬砖为主...</dd>
    </dl>
  </body>
</html>

列表的嵌套：

小栗子：

<html>
  <body>
    <ul type="disc">
      <li>北京</li>
      <li>广州
        <ul type="circle">
          <li>天河</li>
          <li>萝岗</li>
          <li>海珠</li>
        </ul>
      </li>
      <li>上海</li>
    </ul>
  </body>
</html>

图示：