HTML列表标签

最新推荐文章于 2022-11-07 08:00:00 发布

weixin_33692284

最新推荐文章于 2022-11-07 08:00:00 发布

阅读量69

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/sunqichen/p/10870154.html

本文详细介绍HTML中无序列表和有序列表的使用方法，包括如何创建嵌套列表，并通过实例展示了在网页设计中的具体应用，如网站建设流程的条理化展示。

1、无序列表

无序列表相当于word中的项目符号，无序列表的项目排列没有顺序，只以符号作为分项标志。无序列表的建立使用的是一对标签<ul></ul>，其中每一个列表的建立还要一对标签<li></li>。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <title>嵌套无序列表的使用</title>
 5 </head>
 6 <body>
 7 <h1>网站建设流程</h1>
 8 <ul>
 9     <li>项目需求</li>
10     <li>系统分析
11         <ul>
12             <li>网站的定位</li>
13             <li>内容收集</li>
14             <li>栏目规划</li>
15             <li>网站目录结构设计</li>
16             <li>网站标志设计</li>
17             <li>网站风格设计</li>
18             <li>网站导航系统设计</li>
19         </ul>
20     </li>
21     <li>伪网页草图
22         <ul>
23             <li>制作网页草图</li>
24             <li>将草图转换为网页</li>
25         </ul>
26     </li>
27     <li>站点建设</li>
28     <li>网页布局</li>
29     <li>网站测试</li>
30     <li>站点的发布与站点管理</li>
31 </ul>
32 </body>
33 </html>

View Code

2、有序列表

有序列表相当于word中的自动编号功能。有序列表的使用方法和无序基本相同。无序列表的建立使用的是一对标签<ol></ol>，其中每一个列表的建立还要一对标签<li></li>。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>嵌套无序列表的使用</title>
</head>
<body>
<h1>网站建设流程</h1>
<ol>
    <li>项目需求</li>
    <li>系统分析
        <ol>
            <li>网站的定位</li>
            <li>内容收集</li>
            <li>栏目规划</li>
            <li>网站目录结构设计</li>
            <li>网站标志设计</li>
            <li>网站风格设计</li>
            <li>网站导航系统设计</li>
        </ol>
    </li>
    <li>伪网页草图
        <ul>
            <li>制作网页草图</li>
            <li>将草图转换为网页</li>
        </ul>
    </li>
    <li>站点建设</li>
    <li>网页布局</li>
    <li>网站测试</li>
    <li>站点的发布与站点管理</li>
</ol>
</body>
</html>

转载于:https://www.cnblogs.com/sunqichen/p/10870154.html