浅谈3种HTML列表

更新时间：2021-03-22 17:53:12 来源：极悦浏览956次

在使用HTML进行前端开发的网站网页中，漂亮的导航、整齐规范的文章标题列表和图片列表都是网页设计的重要内容。这些都是离不开HTML里一个重要的元素----列表，在HTML中有无序列表、有序列表和定义列表3种类型。其中，无序列表应用最为广泛，下面，我们就来一起认识一下这3种HTML列表。

列表在文档编辑中也是十分常见的，我们可以结合word里的列表来对比学习HTML的列表元素。在word中有符号列表、编号列表、多级列表。在HTML中也提供了三种类型的列表，分别是无序列表、有序列表和定义列表。无序列表没有先后顺序之分，类似word中的符号列表，有序列表用数字或字母作为顺序，类似word中的编号列表，注意：定义列表是不同于word中的多级列表。简单说来，定义列表项可分为上下两部分，上面列出一个项目，下面是该项目的详细内容。

1、有序列表

<!DOCTYPE html>

<html>

<head>

<meta charset='utf-8'>

<title>教程</title>

</head>

<body>

<ol type="A">

    <li>苹果</li>

    <li>香蕉</li>

    <li>雪梨</li>

    <li>西瓜</li>

    </ol>

    </body>

    </html>

有序列表-水果

2、无序列表

<!DOCTYPE html>

<html>

<head>

<meta charset='utf-8'>

<title>教程</title>

</head>

<body>

<ul type="A">

    <li>苹果</li>

    <li>香蕉</li>

    <li>雪梨</li>

    <li>西瓜</li>

</ul>

</body>

</html>

无序列表-水果

3、定义列表

定义列表以<dl>标签开始，</dl>标签结束，中间插入的每个列表项都分为两个部分，<dt> </dt>里面添加项目名称，<dd> </dd>里面添加项目内容或描述。定义列表语法格式如下：<dl>

……

</dl>

无序列表和有序列表的列表项前面都有标记，无序列表的项目前是符号（实心圆、空心圆或实心正方形），有序列表的项目前是编号（可以是数字、字母或罗马数字）。我们有两种方式来设置列表项前的符号类型，一种是直接在HTML的列表标签中设置type属性，另一种是用CSS的方式，设置CSS属性list-style-type。有了CSS，在HTML中设置type属性已经被抛弃了，推荐使用CSS属性list-style-type来设置列表项的标记类型。

示例如下：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <style type="text/css">

        p{

            font-family:微软雅黑;

            font-size:14pt;

            color:red;

            background-color:gray;

        }

        ol{ /*设置有序列表的编号为小写罗马数字*/

            list-style-type:lower-roman;

        }

    </style>

</head>

<body>

    <p>WEB开发教程（无序列表）</p>

    <!--利用type属性设置无序列表项目符号为实心正方形-->

    <ul type="square"><!--这种方式已抛弃，建议使用CSS属性list-style-type-->

        <li>HTML&CSS</li>

        <li>JavaScript</li>

        <li>ASP.NET</li>

    </ul>

    <p>B/S三层结构（有序列表）</p>

    <ol><!--已在CSS中用list-style-type属性设置列表项编号为小写罗马数字-->

        <li>界面展示层</li>

        <li>业务逻辑层</li>

        <li>数据操纵层</li>

    </ol>

    <p>B/S与C/S（定义列表）</p>

    <dl>

        <dt>B/S模式</dt>

        <dd>浏览器/服务器模式，只要安装一个浏览器。</dd>

        <dt>C/S模式</dt>

        <dd>客户端/服务器模式，需要安装客户端软件。</dd>

    </dl>

</body>

</html>

3种Html列表：有序列表，无序列表，定义列表。无序列表使用最为广泛，常用于导航、文章标题列表、图片列表等有规律列表类内容的排版布局。在CSS属性list-style-type中，还可以设置值为none，表示去除列表项前的符号。我们可以在本站的HTML教程中查询这些CSS属性的具体代码，帮助我们快速掌握HTML列表的使用技巧。

HTML教程

上一篇简述HTML常用标签下一篇详解HTML的整体结构

浅谈3种HTML列表

JVM

多线程下载器项目实战

Java日志框架全集（选学）

高并发解决方案（选学）

零基础能学Java吗？

零基础能学Java吗？

零基础能学Java吗？

关于极悦平台

极悦平台

在线课程

资料广场

全国免费电话