WEB前端开发人员交流社区

搜索
查看: 1045|回复: 0

[基础知识] 无序列表和有序列表《七》

[复制链接]

94

主题

150

帖子

148

积分

管理员

会在前端的道路上一直走下去!

Rank: 15Rank: 15Rank: 15Rank: 15Rank: 15

积分
148

社区QQ达人

发表于 2016-3-25 16:29:41 | 显示全部楼层 |阅读模式
列表分为两类:无序列表和有序列表。

无序列表没有顺序的列表项目,在各条列前面使用●□◇◆等符号以示区隔。而有序条列就是指各条列之间是有顺序的,比如从1、2、3…。    无序列表使用的一对标签是<ul></ul>,无序列表指没有进行编号的列表,  每一个列表项前使用对标签<LI>和</LI>  无序列表的type属性有三个数值可选,这三个选项分别为:disc实心园、circle空心园、square小方块。  默认属性是disc实心园。
基本语法:
<ul>
    <li> 项目1</li>
    <li> 项目2</li>
    <li> 项目3</li>
</ul>
无序列表的type类型:   

示例:
[HTML] 纯文本查看 复制代码
<html>
<head>
    <title>HTML无序列表演示</title>
</head>
<body>
<ul>
  <li>默认的无序列表</li>
  <li>默认的无序列表</li>
  <li>默认的无序列表</li>
</ul>
<ul>
    <li type=circle>添加circle属性</li>
  <li type=circle>添加circle属性</li>
  <li type=circle>添加circle属性</li>
</ul>
<ul>
    <li type=square>添加square属性</li>
  <li type=square>添加square属性</li>
  <li type=square>添加square属性</li>
</ul>
</body>
</html>

运行结果:


有序列表
有序列表: 按照字母或数字等顺序排列的列表项目. 注意有序列表的结果是带有前后顺序之分的编号,如果插入和删除一个列表项,编号会自动调整。
基本语法:      
<ol>
    <li>项目1</li>
    <li>项目2</li>
    <li>项目3</li>
</ol>

有序列表的属性标记:<type >、<start>
基本语法:     
<ol type=value1 start=value2>
    <li>项目1</li>
    <li>项目2</li>
    <li>项目3</li>
</ol>
value1表示有序列表项目符号的类型, value2表示项目开始的数值. start是编号开始的数字,如start=2则编号从2开始,如果从1开始可以省略,或是在<li>标签中设定value="n"改变列表行项目的特定编号,例如<li value="7">。type=用于编号的数字,字母等的类型,如type=a,则编号用英文字母。使用这些属性,把它们放在<ol>或<li>的的初始标签中。
有序列表type的属性包括(下图):

有序列表示例
[HTML] 纯文本查看 复制代码
<html>
<head>
<title>有序列表示例</title>
</head>
<body>
    <ol>
        <li>默认的有序列表</li>
        <li>默认的有序列表</li>
        <li>默认的有序列表</li>
    </ol>
    <ol  type=a start=2>
        <li>第1项</li>
        <li>第2项</li>
        <li>第3项</li>
        <li value= 20>第4项</li>
    </ol>
    <ol  type= I start=2>
        <li>第1项</li>
        <li>第2项</li>
        <li>第3项</li>
    </ol>
</body>
</html>

运行结果:



本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
WEB前端开发人员共同的技术交流平台,提倡开源、安全、自由、共享的网络精神! —— —— www.fedte.cn
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



Archiver|手机版|小黑屋|前端开发技术交流

Copyright © 2009-2015 前端开发技术交流 http://www.fedte.cn 版权所有 All Rights Reserved.

免责声明: 本社区不承担任何由社区会员所提供的信息和工具所引起的争议和法律责任。

GMT+8, 2020-10-27 12:05

快速回复 返回顶部 返回列表