启野的博客

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

日志

关于我

启野

B型天秤座

文章分类

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>

图像设计软件

Photoshop
Illustrator
Freehand
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>

图像设计软件

Photoshop
Illustrator
Freehand
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>

图像设计软件

Photoshop
Illustrator
Freehand
CorelDraw

图像设计软件

Photoshop
Illustrator
Freehand
CorelDraw

4、无序列表标记<UL>：

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

通过<ul>和<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
4. Golive
网页动画软件
1. Flash
2. LiveMotion

欢迎光临启野博客！

评论这张

转发至微博

阅读(4755)| 评论(0)

历史上的今天

this.p={  m:2,
              b:2,
              loftPermalink:'',
              id:'fks_080067084086088075086087084095083084084067083083082065',
              blogTitle:'HTML网页列表标记:ul、ol、dir、dl、menu、dt、dd、li',
              blogAbstract:'   <TABLE border=\"1\" cellSpacing=\"2\" borderColor=\"#003333\" cellPadding=\"0\" width=\"720\" align=\"center\" height=\"211\" \>  <TBODY\>  <TR\>  <TD style=\"FILTER: Blur(Add=true, Direction=180, Strength=20);\"  bgColor=\"#003333\" height=\"27\" \>  <P align=\"center\" \> </P\>  <CENTER\> </CENTER\>  <CENTER\><FONT color=\"#ffff00\" size=\"2\" \> </FONT\></CENTER\>  <CENTER\>  <TABLE border=\"0\" width=\"223\" \>  <TBODY\>  <TR\>  <TD height=\"138\" background=\"http://img18.bimg.126.net/photo/_vyledpXiu6kPFV5EF8BLQ==/5141984874550810335.jpg\" \>  <P\><FONT size=\"2\" \></FONT\><FONT color=\"#ffff00\" \></FONT\> </P\>  <P\><FONT color=\"#ffff00\" \></FONT\> </P\>  <P\><FONT color=\"#ffff00\" \>             html</FONT\><FONT color=\"#ffff00\" size=\"2\" \>网页列表标记</FONT\></P\></TD\></TR\></TABLE\></CENTER\></TD\></TR\></TABLE\>',
              blogTag:'html',
              blogUrl:'blog/static/7250754220101190911916',
              isPublished:1,
              istop:false,
              type:2,
              modifyTime:1322143810946,
              publishTime:1266702170117,
              permalink:'blog/static/7250754220101190911916',
              commentCount:0,
              mainCommentCount:0,
              recommendCount:0,
              bsrk:-100,
              publisherId:0,
              recomBlogHome:false,
              currentRecomBlog:false,
              attachmentsFileIds:[],
              vote:{},
              groupInfo:{},
              friendstatus:'none',
              followstatus:'unFollow',
              pubSucc:'',
              visitorProvince:'',
              visitorCity:'',
              visitorNewUser:false,
              postAddInfo:{},
              mset:'000',
              mcon:'',
              srk:-100,
              remindgoodnightblog:false,
              isBlackVisitor:false,
              isShowYodaoAd:false,
              hostIntro:'B型天秤座',
              hmcon:'1',
              selfRecomBlogCount:'0',
              lofter_single:'<iframe width="140" height="560" style="overflow:hidden;" src="http://www.lofter.com/mailEntry.do?blogad=1&blog" frameBorder="0"></iframe>'
            }

{list a as x}
    {if !!x}
    <div class="iblock nbw-fce nbw-f40">
      <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.visitorName}/">
      {if x.visitorName==visitor.userName}
      <img alt="${x.visitorNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.visitorName)}&r=${visitor.imageUpdateTime}"/>
      {else}
      <img alt="${x.visitorNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.visitorName)}"/>
      {/if}
      </a>
      <div class="cwd vname thide">
        {if x.moveFrom=='wap'}
          <a class="noul pnt" target="_blank" href="http://blog.163.com/services/wapblog.html?frompersonalbloghome"><span title="来自网易手机博客" class="iblock wapIcon"> </span></a>
        {elseif x.moveFrom=='iphone'}
          <a class="noul pnt" target="_blank"><span title="来自iPhone客户端" class="iblock iphoneIcon"> </span></a>
        {elseif x.moveFrom=='android'}
          <a class="noul pnt" target="_blank"><span title="来自Android客户端" class="iblock androidIcon"> </span></a>
        {elseif x.moveFrom=='mobile'}
          <a class="noul pnt" target="_blank" href="http://blog.163.com/services/emsblog.html?frompersonalbloghome"><span title="来自网易短信写博" class="iblock wapIcon"> </span></a>
        {/if}
        <a class="fc03 m2a"  target="_blank" hidefocus="true" href="http://blog.163.com/${x.visitorName}/">
          ${fn(x.visitorNickname,8)|escape}
        </a>
      </div>
    </div>
    {/if}
    {/list}

<#--最新日志，群博日志--> <#--推荐日志-->

<p class="fc06">推荐过这篇日志的人：</p>
    <div>
      {list a as x}
      {if !!x}
      <div class="iblock nbw-fce nbw-f40">
        <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.recommenderName}/">
        <img alt="${x.recommenderNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.recommenderName)}"/>
        </a>
        <div class="cwd thide">
          <a class="fc03 m2a" target="_blank" hidefocus="true" href="http://blog.163.com/${x.recommenderName}/">
            ${fn(x.recommenderNickname,6)|escape}
          </a>
        </div>
      </div>
      {/if}
      {/list}
    </div>
    {if !!b&&b.length>0}
    <p  class="fc06">他们还推荐了：</p>
    <ul>
    {list b as y}
      {if !!y}
        <li class="rrb"><span class="iblock">·</span><a class="fc03 m2a" target="_blank" href="http://blog.163.com/${y.recommendBlogPermalink}/?from=blog/static/7250754220101190911916">${y.recommendBlogTitle|escape}</a></li>
      {/if}
    {/list}
    </ul>
    {/if}

<#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇，下一篇--> <#-- 热度 -->

{list a as x}
    {if !!x}
    <div class="hotItem iblock nbw-fce nbw-f40">
      <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/">
      {if x.publisherUsername==visitor.userName}
      <img alt="${x.publisherNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.publisherUsername)}&r=${visitor.imageUpdateTime}"/>
      {else}
      <img alt="${x.publisherNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.publisherUsername)}"/>
      {/if}
      </a>
      <div class="cwd vname thide">
        <a class="fc03 m2a"  target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/">
          ${fn(x.publisherNickname,8)|escape}
        </a>
      </div>
      <a class="f-myLikeIcons hottype {if x.type==1} js-liketype{elseif x.type==2} js-reblogtype{elseif x.type==3} js-sharetype{else}{/if}" target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/"> </a>
    </div>
    {/if}
    {/list}

<#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->

页脚

我的照片书 - 手机博客 - 下载LOFTER APP - 订阅此博客

启野的博客

导航

日志

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

图像设计软件

图像设计软件

图像设计软件

图像设计软件

图像设计软件

图像设计软件

图像设计软件

图像设计软件

图像设计软件

图像设计软件

图像设计软件

历史上的今天

最近读者

热度

评论

页脚