初识HTML，HTML基本列表

时间 2019-11-11

标签 html 基本列表栏目 HTML 繁體版

原文原文链接

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

有序列表
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：规定起始号为多少。
值：任意可表明编号的类型，如：html
```
<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 说明spa

代码中咱们没有写实心圆点，显示时有。可根据属性值来改变
使用时同有序列表同样，须要将内容放入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取消了前面的圆点即：code

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

显示效果为
htm

不少时候还会利用到其余方式，共同实现导航栏的编写。blog

1. HTML---初识HTML
2. 【HTML】初识HTML
3. html初识form表单
4. html基本知识
5. HTML基本知识
6. 初识HTML、HTML标签
7. HTML第一讲初识HTML
8. html初识（一）
9. HTML初识
10. 1、html初识
更多相关文章...
• ASP.NET Web Pages - HTML 表单 - ASP.NET 教程
• ASP.NET Web Forms - HTML 表单 - ASP.NET 教程
• Kotlin学习（二）基本类型
• Kotlin学习（一）基本语法