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

Devops海洋的渔夫

发布于 2019-05-31 16:18:30

4.1K0

发布于 2019-05-31 16:18:30

文章被收录于专栏：Devops专栏

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

有序列表

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>

浏览器展示如下：

关

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2019.01.20 ，如有侵权请联系 cloudcommunity@tencent.com 删除

html

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

html

登录后参与评论

0 条评论

热度