论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > HTML教程
Tag:初学,入门,文字,链接,table,表单,框加,多媒体,标签,视频教程

第五章 建立列表

文章类别:HTML | 发表日期:2008-8-7 11:15:34

 在html页面中,合理的使用列表标签可以起到提纲和格式排序文件的作用。

   列表分为两类,一是无序列表,一是有序列表,无序列表就是项目各条列间并无顺序关系,纯粹只是利用条列来呈现资料而已,此种无序标签,在各条列前面均有一符号以示区隔。而有序条列就是指各条列之间是有顺序的,比如从1、2、3…一直延伸下去。

列表的主要标签

标 签

描 述

<UL> 无序列表
<OL> 有序列表

<DIR>

目录列表
<DL> 定义列表
<MENU> 菜单列表
<DL>/<DT>/<DD> 定义列表的标记
<LI> 列表项目的标记

   5-1 无序列表<UL>

    无序列表使用的一对标签是<ul></ul>,无序列表指没有进行编号的列表,  每一个列表项前使用<LI>。<LI>的属性type有三个选项,这三个选项都必须小写:
        
        disc实心园
        circle空心园
        square小方块
    
<ul>如果不使用其项目<li>的属性值,即默认情况下的<ul>会加"实心园"。

    格式1:

         <UL>
       <LI>第一项
       <LI>第二项
       <LI>第三项
      </UL>

    格式2

        <ul>
          <li type=disc>第一项
          <li type=circle>第二项
          <li type=square>第三项
        </ul>

示例 5-1.html

<html>
<head>
<title>无序列表</title>
</head>
<body>
<ul>
  <li>默认的无序列表加"实心园"
  <li>默认的无序列表"实心园"
  <li>默认的无序列表"实心园"
</ul>
<ul>
    <li type=square>无序列表square加方块
  <li type=square>无序列表square加方块
  <li type=square>无序列表square加方块
</ul>
<ul>
    <li type=circle>无序列表circle加空心园
  <li type=circle>无序列表circle加空心园
  <li type=circle>无序列表circle加空心园
</ul>
</body>
</html>

 5-2 有序列表<OL>

    有序列表和无序列表的使用格式基本相同,它使用标签<ol></ol>,每一个列表项前使用<li>。<ol>列表的结果是带有前后顺序之分的编号。如果插入和删除一个列表项,编号会自动调整。

   顺序编号的设置是由<ol>的两个属性type和start来完成的。start=编号开始的数字,如start=2则编号从2开始,如果从1开始可以省略,或是在<li>标签中设定value="n"改变列表行项目的特定编号,例如<li value="7">。type=用于编号的数字,字母等的类型,如type=a,则编号用英文字母。为了使用这些属性,把它们放在<ol>或<li>的的初始标签中。

有序列表type的属性

type 类 型 描 述
type=1 表示列表项目用数字标号(1,2,3...)
type=A 表示列表项目用大写字母标号(A,B,C...)
type=a 表示列表项目用小写字母标号(a,b,c...)
type=I 表示列表项目用大写罗马数字标号(Ⅰ,Ⅱ,Ⅲ...)
type=i 表示列表项目用小写罗马数字标号(i,ii,iii...)

格式1
    <ol type=编号类型 start=value>
        <li>第1项
        <li>第2项
        <li>第3项
    </ol>

格式2
    <ol>
        <li>第1项
        <li>第2项
        <li>第3项
    </ol>

实例:5-2.html

<html>
<head>
<title>有序列表</title>
</head>
<body>
    <ol>
        <li>默认的有序列表
        <li>默认的有序列表
        <li>默认的有序列表
    </ol>
    <ol  type=a start=5>
        <li>第1项
        <li>第2项
        <li>第3项
        <li value= 20>第4项
    </ol>
    <ol  type= I start=2>
        <li>第1项
        <li>第2项
        <li>第3项
    </ol>
</body>
</html>

5-3 嵌套列表

    将一个列表嵌入到另一个列表中,作为另一个列表的一部分,叫嵌套列表。无论是有序列表和无序列表的嵌套,浏览器都可以自动地分成排列。

实列:5-3.html

<HTML>
<HEAD>
<TITLE>嵌套列表</TITLE>
</HEAD>
<BODY>
<h3>目录</h3>
 <ol type=a>
     <li>这是以序号类型a开头第一行内容</li>
     <li>这是以序号类型a开头第二行内容</li>
         <ol type=A start=3>
         <li>这是以序号A类型C开头第一行内容</li>
         <li>这是以序号A类型C开头第二行内容</li>
             <ol type=1 start=51>
             <li>这是以序号数字51开头第一行内容</li>
             <li>这是以序号数字51开头第二行内容</li>
             <li>这是以序号数字51开头第三行内容</li>
             </ol>
         <li>这是以序号A类型C开头第三行内容</li>
         </ol>
       <li>这是以序号类型a开头第三行内容</li>
 </ol>
<HR>
</BODY>
</HTML>

5-4 定义列表的标记<DL>/<DT>/<DD>

    定义列表的标记也叫描述性列表,定义列表默认为两个层次,第一层为列表项标签<DT>,第二层为注释项标签<DD>。<DT>和<DD>标签通常是成对使用的。也可以一个列表项对应于几个解释项,这种方式很少用。<DD>默认的注释是显示在另一行中,当使用<dl compact="compact">后,注释项和列表项将显示在同一行。其格式为:

    <dl>
        <dt>第1项 <dd>注释1
        <dt>第2项 <dd>注释2
        <dt>第3项 <dd>注释3
    </dl>

实例:5-4.html
<html>
<head>
<title>定义性列表</title>
</head>
<body>
定义性列表<P>
<dl>
 <dt>  WWW:<dd> WWW是(World wide web)的缩写,也可简写web;
  <dt> WWW:<dd> WWW又叫万维网;
  <dt> WWW:<dd> internet提供的最常用的服务是WWW;
</dl>
</body>
</html>

5-5 目录列表<DIR>和菜单列表<MENU>

<dir>为目录列表标签,<menu>为菜单列表标签,它们的格式和无序列表<ul>是一样的,例如:
格式1:
<dir>
  <li>第一项
  <li>第二项
  <li>第三项
</dir>

格式2
<menu>
  <li type=disc>第一项
  <li type=circle>第二项
  <li type=square>第三项
</menu>

实例:5-5.HTML

<html>
<head>
<title>无序列表</title>
</head>
<body>
<ul>
  <li>默认的无序列表加"实心园"
  <li>默认的无序列表"实心园"
  <li>默认的无序列表"实心园"
</ul>
<dir>
  <li>默认的目录列表加"实心园"
  <li>默认的目录列表"实心园"
  <li>默认的目录列表"实心园"
</dir>
<menu>
  <li>默认的菜单列表加"实心园"
  <li>默认的菜单列表"实心园"
  <li>默认的菜单列表"实心园"
</menu>

<dir>
    <li type=square>目录列表square加方块
  <li type=square>目录列表square加方块
  <li type=square>目录列表square加方块
</dir>
<menu>
    <li type=circle>菜单列表circle加空心园
  <li type=circle>菜单列表circle加空心园
  <li type=circle>菜单列表circle加空心园
</menu>
</body>
</html>

上一篇:第六章 图像的处理 人气:1949
下一篇:第四章 建立超链接 人气:3409
视频教程列表
文章教程搜索
 
HTML推荐教程
HTML热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058