注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

启野的博客

淡淡的雾,淡淡的雨,淡淡的云彩悠悠的游。

 
 
 

日志

 
 

HTML网页列表标记:ul、ol、dir、dl、menu、dt、dd、li  

2010-02-21 05:42:50|  分类: HTML专区 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

 

 
 

 

 

             html网页列表标记

 
关于列表的主要标记:

        在html页面中,列表可以起到提纲写领的作用。列表分为两种类型,一是有序列表,一是无序列表。前者用项目符号来标记无序的项目,而后者则使用编号来记录项目的顺序。

所谓有序,指的是按照数字或字母等顺序排列列表项目。
所谓无序,是指以●、○、□等开头的,没有顺序的列表项目。
关于列表的主要标记,如下表所示:

标记 描述
<ul> 无序列表
<ol> 有序列表
<dir> 目录列表
<dl> 定义列表
<menu> 菜单列表
<dt>、<dd> 定义列表的标记
<li> 列表项目的标记
1、有序列表标记<OL>:

 

        有序列表使用编号,而不是项目符号来编排项目。列表中的项目采用数字或英文字母开头,通常各项目间有先后的顺序性。在有序列表中,主要使用<ol>和<li>两个标记以及type和两个start属性。

        通过<ol>和<li>标记建立有序列表。

基本语法:
<ol>
   <li>项目一
   <li>项目二
   <li>项目三
      ……
</ol>

语法解释:
       在有序列表中,使用<ol>作为有序的声明,使用<li>作为每一个项目的起始。 

 

 

<H2>图像设计软件</H2>
<OL>
<LI>Photoshop
<LI>Illustrator
<LI>Freehand
<LI>CorelDraw </LI></OL>

 

图像设计软件

  1. Photoshop
  2. Illustrator
  3. Freehand
  4. CorelDraw
2、有序列表的类型属性TYPE:

 

       在有序列表的默认情况下,使用数字序号作为列表的开始,我们可以通过type属性将有序列表的类型设置为英文或罗马字母。

        通过type属性设定有序列表编号的类型。

基本语法:
<ol type=value>
</ol>

语法解释:
其中value的值如下表所示

描述
1 数字1,2,3……
a 小写字母a,b,c
A 大写字母A,B,C
i 小写罗马数字i,ii,iii……
大写罗马数字Ⅰ,Ⅲ,Ⅲ……

 

 

 

<H2>图像设计软件</H2>
<OL type=A>
<LI>Photoshop
<LI>Illustrator
<LI>Freehand
<LI>CorelDraw </LI></OL>

 

图像设计软件

  1. Photoshop
  2. Illustrator
  3. Freehand
  4. CorelDraw
3、有序列表的起始属性START:

       

        在默认的情况下,有序列表从数字1开始记数,这个起始值通过start属性可以调整,并且英文字母和罗马字母的起始值也可以调整。

        通过start属性设定有序列表的起始编号。

基本语法:
<ol start=value>
</ol>

语法解释:
        其中不论列表编号的类型是数字、英文字母还是罗马字母,value的值都是其始的数字。 

 

<H2>图像设计软件</H2>
<OL start=5>
<LI>Photoshop
<LI>Illustrator
<LI>Freehand
<LI>CorelDraw </LI></OL>

<H2>图像设计软件</H2>
<OL type=a start=3>
<LI>Photoshop
<LI>Illustrator
<LI>Freehand
<LI>CorelDraw </LI></OL>

 

图像设计软件

  1. Photoshop
  2. Illustrator
  3. Freehand
  4. CorelDraw

图像设计软件

  1. Photoshop
  2. Illustrator
  3. Freehand
  4. CorelDraw
4、无序列表标记<UL>:

 

        在无序列表中,各个列表项之间没有顺序级别之分,它通常使用一个项目符号作为每个列表项的前缀。无序列表主要使用<ul>、<dir>、<dl>、<menu>、<li>几个标记和type属性。

        通过<ul>和<li>标记建立无序列表。

基本语法:
<ul>

   <li>项目一
   <li>项目二
   <li>项目三
      ……
</ul>

语法解释:
        在无序列表中,使用<ul>作为无序的声明,使用<li>作为每一个项目的起始。

 

<H2>图像设计软件</H2>
<UL>
<LI>Photoshop
<LI>Illustrator
<LI>Freehand
<LI>CorelDraw </LI></UL>

 

图像设计软件

  • Photoshop
  • Illustrator
  • Freehand
  • CorelDraw
5、目录列表标记<DIR>:

 

        目录列表用于显示文件内容的目录大纲,通常用于设计一个压缩窄列的列表,用于显示一系列的列表内容,例如字典中的索引或单词表中的单词等。列表中每项至多只能有20个字符。

        通过<dir>和<li>标记建立目录列表。

基本语法:
<dir>
    <li>项目一
    <li>项目二
    <li>项目三
       ……
</dir>
语法解释:
        在目录列表中,使用<dir>作为目录列表的声明,使用<li>作为每一个项目的起始。

 

 

<H2>图像设计软件</H2>
<dir>
<LI>Photoshop
<LI>Illustrator
<LI>Freehand
<LI>CorelDraw </LI></dir>

 

图像设计软件

  • Photoshop
  • Illustrator
  • Freehand
  • CorelDraw
  • 6、定义列表标记<DL>:

     

            定义列表是一种两个层次的列表,用于解释名词的定义,名词为第一层次,解释为第二层次,并且不包含项目符号。定义列表也称为字典列表,因为它与字典具有相同的格式。在定义列表中,每个列表项带有一个缩进的定义字段,就好象字典对文字进行解释一样。

            通过<dl>、<dt>、<dd>标记建立定义列表。

    基本语法:
    <dl>
       <dt>名词一<dd>解释一
       <dt>名词二<dd>解释二
       <dt>名词三<dd>解释三
              ……
    </dl>

    语法解释:
            在定义列表中,使用<dl>作为定义列表的声明,使用<dt>作为名词的标题,<dd>用来解释名词。 

     

    <H2>图像设计软件</H2>
    <DL>
    <DT>Photoshop
    <DD>Adobe公司的图像处理软件
    <DT>Illustrator
    <DD>Adobe公司的矢量绘图软件
    <DT>Freehand
    <DD>Macromedia公司的矢量绘图软件
    <DT>CorelDraw
    <DD>Corel公司的图形图像软件 </DD></DL>

     

    图像设计软件

    Photoshop
    Adobe公司的图像处理软件
    Illustrator
    Adobe公司的矢量绘图软件
    Freehand
    Macromedia公司的矢量绘图软件
    CorelDraw
    Corel公司的图形图像软件
    7、菜单列表标记<MENU>:

          

            菜单列表用于显示菜单内容,设计单列的菜单。在Internet Explorer浏览器中的显示和无序列表是相同的。

            通过<menu>和<li>标记建立目录列表。

    基本语法:
    <menu>
        <li>项目一
        <li>项目二
        <li>项目三
           ……
    </menu>

    语法解释:
            在菜单列表中,使用<menu>作为菜单列表的声明,使用<li>作为每一个项目的起始。
     

     

    <H2>图像设计软件</H2>
    <MENU>
    <LI>Photoshop
    <LI>Illustrator
    <LI>Freehand
    <LI>CorelDraw </LI></MENU>

     

    图像设计软件

  • Photoshop
  • Illustrator
  • Freehand
  • CorelDraw
  • 8、无序列表的类型属性TYPE:

     

            在无序列表的默认情况下,使用●作为列表的开始,我们可以通过TYPE属性将无序列表的类型设置为○或□。

            通过type属性设定无序列表编号的类型。

    基本语法:
    <ul type=value>
    </ul>

    语法解释:
           其中value的值如下表所示

    描述
    disc
    circle
    square

     

    <H2>图像设计软件</H2>
    <ul type=circle>
    <LI>Photoshop
    <LI>Illustrator
    <LI>Freehand
    <LI>CorelDraw </LI></ul>
    <H2>图像设计软件</H2>
    <ul type=square>
    <LI>Photoshop
    <LI>Illustrator
    <LI>Freehand
    <LI>CorelDraw </LI></ul> 

     

    图像设计软件

    • Photoshop
    • Illustrator
    • Freehand
    • CorelDraw

    图像设计软件

    • Photoshop
    • Illustrator
    • Freehand
    • CorelDraw
    9、定义列表的嵌套:

     

            嵌套列表指的是多于一级层次的列表,一级项目下面可以存在二级项目、三级项目等。项目列表可以进行嵌套,以实现多级项目列表的形式。定义列表是一种两个层次的列表,用于解释名词的定义,名词为第一层次,解释为第二层次,并且不包含项目符号。

    通过<dl>、<dt>、<dd>标记建立定义列表的嵌套。

    基本语法:
    <dl>
        <dt>名词一
    <dd>解释一
    <dd>解释二
    <dd>解释三
        <dt>名词二
    <dd>解释一
    <dd>解释二
    <dd>解释三
         ……
    </dl>

    语法解释:
            在定义列表中,一个<dt>标记下可以有多个<dd>标记作为名词的解释和说明,以实现定义列表的嵌套。

     

    <H2>图像设计软件</H2>
    <DL>
    <DT><U>Photoshop</U>
    <DD>Adobe公司出品
    <DD>图像处理软件
    <DT><U>Illustrator</U>
    <DD>Adobe公司出品
    <DD>矢量绘图软件
    <DT><U>Freehand</U>
    <DD>Macromedia公司出品
    <DD>矢量绘图软件
    <DT><U>CorelDraw</U>
    <DD>Corel公司出品
    <DD>图形图像软件 </DD></DL>

    图像设计软件

    Photoshop
    Adobe公司出品
    图像处理软件
    Illustrator
    Adobe公司出品
    矢量绘图软件
    Freehand
    Macromedia公司出品
    矢量绘图软件
    CorelDraw
    Corel公司出品
    图形图像软件
    10、无序列表和有序列表的嵌套:

        

            这种嵌套类型是最常见的列表嵌套,重复地使用<ol>和<ul标记可以组合出嵌套列表。

            通过<ol>和<ul>标记建立列表的嵌套。

     

    <UL type=square>
    <LI><U>图像设计软件</U>
    <OL type=I>
    <LI>Photoshop
    <LI>Illustrator
    <LI>Freehand
    <LI>CorelDraw </LI></OL>
    <LI><U>网页制作软件</U>
    <OL type=I>
    <LI>Dreamweaver
    <LI>Frontpage
    <LI>Golive </LI></OL>
    <LI><U>网页动画软件</U>
    <OL type=I>
    <LI>Flash
    <LI>LiveMotion </LI></OL></LI></UL>

     

    • 图像设计软件
      1. Photoshop
      2. Illustrator
      3. Freehand
      4. CorelDraw
    • 网页制作软件
      1. Dreamweaver
      2. Frontpage
      3. Golive
    • 网页动画软件
      1. Flash
      2. LiveMotion
    欢迎光临启野博客!
      评论这张
     
    阅读(1907)| 评论(0)
    推荐 转载

    历史上的今天

    评论

    <#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
     
     
     
     
     
     
     
     
     
     
     
     
     
     

    页脚

    网易公司版权所有 ©1997-2017