html 有序列表、无序列表、自定义列表

最新推荐文章于 2024-07-26 14:13:35 发布

海洋的渔夫

最新推荐文章于 2024-07-26 14:13:35 发布

阅读量579

点赞数 1

本文链接：https://blog.csdn.net/u012887259/article/details/102425530

版权

仅供学习，转载请注明出处

有序列表

HTML有一个特殊元素，用于创建ordered lists（有序列表）, 或数字编号列表。
有序列表以<ol>元素开始，并包含一个或多个<li>元素。
例如：

<ol>
  <li>Garfield</li>
  <li>Sylvester</li>
</ol>

将创建一个包含"Garfield"和"Sylvester"的数字编号列表。

下来定义一个胖子老板售卖货品的有序列表

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <h3>胖子老板店铺：</h3>
    <ol>
        <li>槟榔10元/包</li>
        <li>肥仔可乐水3元/瓶</li>
        <li>蓝利群17元/包</li>
        <li>芙蓉王26元/包</li>
    </ol>
</body>
</html>

浏览器展示如下：

无序列表

HTML有一个特殊元素，用于创建unordered lists（无序列表）, 或带项目符号的列表。
无序列表以<ul>元素开始，并包含一个或多个<li>元素。

例如：

<ul>
  <li>milk</li>
  <li>cheese</li>
</ul>

将会创建一个带项目符号的"milk"和"cheese"列表。

将上面胖子老板的示例改为无序列表

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <h3>胖子老板店铺：</h3>
    <ul>
        <li>槟榔10元/包</li>
        <li>肥仔可乐水3元/瓶</li>
        <li>蓝利群17元/包</li>
        <li>芙蓉王26元/包</li>
    </ul>
</body>
</html>

浏览器展示如下：

在网页上生成的列表，每条项目上会有一个小图标，这个小图标在不同浏览器上显示效果不同，所以一般会用样式去掉默认的小图标，如果需要图标，可以用样式自定义图标，从而达到在不同浏览器上显示的效果相同,实际开发中一般用这种列表。

实际应用实例：

定义列表

定义列表通常用于术语的定义。<dl>标签表示列表的整体。<dt>标签定义术语的题目。<dd>标签是术语的解释。一个<dl>中可以有多个题目和解释，代码如下：

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <h3>前端三大块</h3>
    <dl>
        <dt>html</dt>
        <dd>负责页面的结构</dd>

        <dt>css</dt>
        <dd>负责页面的表现</dd>

        <dt>javascript</dt>
        <dd>负责页面的行为</dd>

    </dl>
</body>
</html>

浏览器展示如下：