Blogger Information
Blog 29
fans 0
comment 0
visits 19656
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
HTML列表的基本使用-2019年7月2日
blog
Original
508 people have browsed it

在HTML文档中有序列表/无序列表/定义列表是其中重要的一项内容

下面这段代码分别使用无序列表以及无序列表的多级嵌套,有序列表,定义列表进行了演示

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--无序列表-->
<h3>我是无序列表</h3>
<ul>
    <li><a href="#">首页</a>
        <ul>
            <li><a href="#">首页1</a></li>
            <li><a href="#">首页2</a>
                <ul>
                    <li><a href="#">首页2-1</a></li>
                    <li><a href="#">首页2-2</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#">公司新闻</a></li>
    <li><a href="#">公司产品</a></li>
    <li><a href="#">公司产品</a></li>
    <li><a href="#">关于我们</a></li>
</ul>
<!--有序列表-->
<h3>我是有序列表</h3>
<h3>语言</h3>
<ol>
    <li>python</li>
    <li>php</li>
    <li>ruby</li>
</ol>
<!--定义列表-->
<h3>我是定义列表</h3>
<dl>
    <dt>php</dt>
    <dd>全球最流行的通用的服务器端编程脚本语言</dd>
    <dt>mysql</dt>
    <dd>使用最广泛的免费开源的关系型数据库管理系统</dd>
    <dt>ThinkPHP</dt>
    <dd>国内使用最广泛的轻量级免费开源的PHP开发框架<dd>
</dl>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

结果预览

1.png

上述代码中涉及知识点注释总结:

  1. 列表可以多个嵌套

  2. 与其他类型列表相比无序列表的使用更为广泛,比如制作导航栏等等

  3. 定义列表,更类似于名词解释的格式

Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post