初识HTML，HTML基本列表

最新推荐文章于 2025-05-28 13:58:30 发布

weixin_30508309

最新推荐文章于 2025-05-28 13:58:30 发布

阅读量68

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/cdu-wx/p/7226764.html

本文详细介绍了HTML中的三种基本列表类型：有序列表、无序列表和自定义列表，并提供了每种列表的基本代码示例及使用技巧。

HTML基本列表有三类，有序列表，无序列表和自定义列表。下面作简单介绍：

有序列表
1.1 基本效果：

1.2 代码：
```
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>有序列表</title>
    </head>
    <body>
        <ol>
            <li>有序列表</li>
            <li>有序列表</li>
            <li>有序列表</li>
        </ol>
    </body>
</html>
```
1.3 说明
在代码中我们写的列表中没有前面的编号，而显示时有编号。这就是有序列表。
使用时，ol标签为双标签，标签中的所有内容写在li标签中，不能写在外面。（当然了，也可以写在外面，高版本浏览器可以揣测你的代码意思），其中的内容可以是其他的部分，比如a、img等等标签。
1.4 属性
start：规定起始号为多少。
值：任意可代表编号的类型，如：
```
<ol start="5">
```
type：改变编号的类型、
值：1；A；a；I；i；等，如：
```
<ol type="a">
```

无序列表
2.1 基本效果

2.2 代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>无序列表</title>
    </head>
    <body>
        <ul>
            <li>无序列表</li>
            <li>无序列表</li>
            <li>无序列表</li>
        </ul>
    </body>
</html>

2.3 说明

代码中我们没有写实心圆点，显示时有。可根据属性值来改变
使用时同有序列表一样，需要将内容放入ul标签中的li标签里。
2.4 属性
type：改变列表前面的显示样式。
值：disc，默认样式，实心圆点显示；
square，实心正方形；
circle，空心圆点。

自定义列表
3.1 基本样式

3.2 代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>自定义列表</title>
    </head>
    <body>
        <dl>
            <dt>定义自定义标签</dt>
            <dd>描述自定义标签</dd>
            <dt>定义自定义标签</dt>
            <dd>描述自定义标签</dd>
        </dl>
    </body>
</html>

使用技巧，有序列表可以用来实现某些排行榜的排名，无需我们手动添加编号实现，同时也会利于后期维护。无序列表很多时候是用css取消了前面的圆点即：

<ul style="list-style: none;">
    <li>无序列表</li>
    <li>无序列表</li>
    <li>无序列表</li>
</ul>

显示效果为

很多时候还会利用到其他方式，共同实现导航栏的编写。

转载于:https://www.cnblogs.com/cdu-wx/p/7226764.html