首页 > 代码库 > 初识HTML，HTML基本列表

初识HTML，HTML基本列表

2024-11-04 19:56:02   204人阅读

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

  1. 有序列表
    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. 无序列表
    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. 自定义列表
    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>

    显示效果为
    技术分享

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

初识HTML，HTML基本列表


联系
我们