`

HTML中ul,ol,li,dl,dt,dd标签用法

 
阅读更多

ul: unordered lists
ol: ordered lists
li: Lists

ol有序列表。

<ol>
<li>……</li>
<li>……</li>
<li>……</li>
</ol>
  表现为:

1……
2……
3……
  ul无序列表,表现为li前面是大圆点而不是123

<ul>
<li>……</li>
<li>……</li>
</ul>
  很多人容易忽略dldtdd的用法

  

dl内容块
  dt内容块的标题
  dd内容
  可以这么写:

<dl>
<dt>标题</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>
  dt和dd中可以再加入olulli和p
  理解这些以后,在使用div布局的时候,会方便很多,w3c提供了很多元素辅助布局。

LI代码的格式化:

A).运用CSS格式化列表符:

以下是引用片段:
ul li{
list-style-type:none;
}

B).如果你想将列表符换成图像,则:

以下是引用片段:
ul li{
list-style-type:none;
list-style-image: url(/blog/images/icon.gif);
}

C).为了左对齐,可以用如下代码:

以下是引用片段:
ul{
list-style-type:none;
margin:0px;
}

D).如果想给列表加背景色,可以用如下代码:

以下是引用片段:
ul{
list-style-type: none;
margin:0px;
}
ul li{
background:#CCC;
}


E).如果想给列表加MOUSEOVER背景变色效果,可以用如下代码:

以下是引用片段:
ul{ list-style-type: none; margin:0px; }
ul li a{ display:block; width: 100%; background:#ccc; }
ul li a:hover{ background:#999; }说明:display:block;这一行必须要加的,这样才能块状显示!


F).LI中的元素水平排列,关键FLOAT:LEFT:

以下是引用片段:
ul{
list-style-type:none;
width:100%;
}
ul li{
width:80px;
float:left;
}

<ul><li>的区别

<LI> 的参数设定(常用):

例如: <li type="square" value="4">

type="square"

只适用于非顺序清单,设定符号款式,其值有三种,如下,内定为 type="disc":

以下是引用片段:
符号 是当 type="disc" 时的列项符号。
符号 if" width=10 height=10 border=0> 是当 type="circle" 时的列项符号。
符号 是当 type="square" 时的列项符号。
value="4"

只适用于顺序清单,设定该一项的数目,其後各项将以此作为起始数目而递增,但前面各项则不受影响,其值只能是 1,2,3.. 等整数,没有内定值。

<UL>称为无序清单标记。

所谓无序清单就是在每一项前面加上 、、等符号,故又称符号清单。

<UL> 的参数设定(常用):

例如: <UL type="square">

type="square"

设定符号款式,其值有三种,如下,内定为 type="disc":

以下是引用片段:
符号 是当 type="disc" 时的列项符号。
符号 是当 type="circle" 时的列项符号。
符号 是当 type="square" 时的列项符号。


<ul>是项目列表,<li>是列表项,项目列表就是用符号来列的,所以你列出来默认的就是黑点,还有一个是<ol>这个是编号列表,用数字来列的,也是用<li>做列表项

<li>是 list item 即列表项,但列表有很两种,所以外面得有 <ul> 或者 <ol> 用来区别无序列表(小点点)和有序列表(1,2,3...)。

分享到:
评论

相关推荐

    HTML 列表中的dl,dt,dd,ul,li,ol区别及应用.doc

    以下将详细介绍HTML列表中的一些主要元素:`&lt;dl&gt;`, `&lt;dt&gt;`, `&lt;dd&gt;`, `&lt;ul&gt;`, `&lt;li&gt;`, 和 `&lt;ol&gt;` 的区别及应用。 1. **无序列表(Unordered List)** 无序列表通常用于显示不需按特定顺序排列的项目。它使用`&lt;ul&gt;`...

    div+css布局必了解的列表元素ul ol li dl dt dd详解

    值得注意的是,在dl中不仅可以包含dt和dd,还可以嵌套其他列表元素如ol、ul、li,甚至是段落p,从而实现复杂的嵌套列表结构。 在使用div布局时,我们应尽量减少块级元素div的使用,因为它们与table一样,过多的嵌套...

    HTML 中的 dl(dt,dd)、ul(li)、ol(li) 使用方法

    &lt;dl&gt; 标签用于结合 &lt;dt&gt; (定义列表中的项目)和 &lt;dd&gt; (描述列表中的项目)。 #实例 复制代码代码如下:&lt;dl&gt; &lt;dt&gt;计算机&lt;/dt&gt; &lt;dd&gt;用来计算的仪器 … …&lt;/dd&gt; &lt;dt&gt;显示器&lt;/dt&gt; &lt;dd&gt;以视觉方式显示信息的装置 … …&lt;/...

    dl、dt、dd列表标签实例

    我们平时常用的是&lt;ul&gt;&lt; li&gt;标签,不过dd、dt标签也蛮不错,特别是发布程序的时候功能模块列表什么的可以使用它来排版。&lt;dl&gt;&lt;/dl&gt;&lt;dt&gt;&lt; /dt&gt;&lt;dd&gt;&lt; /dd&gt; &lt;dl&gt;&lt;/dl&gt;用来创建一个普通的列表,&lt;dt&gt;&lt; /dt&gt;用来创建...

    dl,dt,dd,ul,li,ol区别及应用

    ol有序列表:&lt;ol&gt;&lt;li&gt;……&lt;/li&gt;&lt;li&gt;……&lt;/li&gt;&lt;li&gt;……&lt;/li&gt;&lt;/ol&gt;表现为:1……2……3……ul无序列表,表现为li前面是大圆点而不是123:&lt;ul&gt;&lt;li&gt;……&lt;/li&gt;&lt;li&gt;……&lt;/li&gt;&lt;/ul&gt;很多人容易忽略dldtdd的用法:dl内容块dt内容...

    DL-Dt-DD(做表格Css实现)

    Dt-DD(做表格Css实现).html`、`DL-Dt-Dd(替代 UL OL 方法).html`和`简单示例.html`这些文件,我们可以看到如何实际操作这些概念,观察不同的实现方法和样式调整,以了解如何在实际项目中应用DL-DT-DD实现表格。...

    CSS的ul和li实现横向排列和去掉li的点

    使用`&lt;dl&gt;`、`&lt;dt&gt;`和`&lt;dd&gt;`标签可以使内容的逻辑更加清晰,尤其是在语义化标签大行其道的当下,这样的结构化列表更符合Web标准的发展方向。 通过这些知识的探讨,我们应该能够更好地理解和掌握列表样式的控制方法...

    HTML列表标签dl、ul、ol 的使用示例

    本篇将深入解析HTML的三种主要列表标签:`&lt;dl&gt;`、`&lt;ul&gt;`和`&lt;ol&gt;`,以及它们的子标签,帮助初学者理解如何有效地使用这些标签来构建结构化的列表。 1. **定义列表(Definition List):&lt;dl&gt;, &lt;dt&gt;, 和&lt;dd&gt;** `&lt;dl&gt;`...

    HTML基本标签属性总结

    4种块结构:div-ul(ol)-li 导航菜单 div-dl-dt-dd 图文混编 table-tr-td 规整数据 form-table-tr-td 表单布局 块标签:基本块级标签 标题:h1-h6 段落:p 水平线:hr 常用布局标签 有序:ol-li ...

    前端与移动开发之列表

    ①dl是外面大框框 dt名字 dd里面小项目 dt和dd并列 ②dl里面只能包含dt和dd ③dt一般写术语或名词 ④dd一般是对dt中内容的解释说明 ⑤dd和dt是兄弟关系 使用场景:对术语或名词的解释说明

    html标签大全标签用法详解

    列表:`&lt;ul&gt;`和`&lt;ol&gt;`分别用于无序和有序列表,`&lt;li&gt;`定义列表项。`&lt;dl&gt;`, `&lt;dt&gt;`, `&lt;dd&gt;`用于定义术语和描述列表。 表格布局与响应式设计:虽然传统上HTML使用表格进行布局,但现代Web开发更倾向于使用CSS。然而,...

    HTML标签(下)(表格+列表+表单)

    有序列表使用&lt;ol&gt;标签定义,无序列表使用&lt;ul&gt;标签定义,定义列表使用&lt;dl&gt;标签定义。 有序列表 有序列表使用&lt;ol&gt;标签定义,列表项使用&lt;li&gt;标签定义。例如: ``` &lt;ol&gt; &lt;li&gt;列表项1&lt;/li&gt; &lt;li&gt;列表项2&lt;/li&gt; &lt;li&gt;...

    html列表标签

    定义列表用dl标签,dt标签定义上层项目,dd标签定义下层项目。有序列表用ol标签,可以指定type属性来确定序号的样式,无序列表用ul标签。无论是有序还是无序列表,所有项目的封装都使用li标签,并且它们都有缩进效果...

    dl,dt,dd制作的CSS垂直菜单

    在Web开发中,菜单是非常常见的交互元素,通常我们使用ul和li标签来创建水平或垂直菜单。但是,今天我们要讨论的是使用dl,dt,dd标签来创建CSS垂直菜单的方法。 dl,dt,dd标签的作用: * dl标签定义了一个定义列表,...

    HTML5&CSS3网页制作:列表元素.pptx

    定义列表使用`&lt;dl&gt;`标签开始,`&lt;dt&gt;`标签定义术语,而`&lt;dd&gt;`标签提供对术语的解释。例如: ```html &lt;dl&gt; &lt;dt&gt;HTML&lt;/dt&gt; &lt;dd&gt;超文本标记语言&lt;/dd&gt; &lt;dt&gt;CSS&lt;/dt&gt; &lt;dd&gt;层叠样式表&lt;/dd&gt; &lt;/dl&gt; ``` 这将创建一个定义...

    HTML知识点,标签作用以及介绍

    简单标签、图片标签img、音频/视频标签vedio/audio、链接标签a、列表标签ul&gt;li ol&gt;li dl&gt;dt/dd 、表格标签table、 表单标签form等。适合前端新手

    HTML从入门到精通 第4章 列表

    ### HTML从入门到精通 第4章 列表 在HTML中,列表是非常重要的元素之一,它们可以帮助用户更清晰地组织和展示信息。本章节将详细介绍HTML中的三...掌握这些列表的使用方法对于创建结构良好且易于理解的网页至关重要。

Global site tag (gtag.js) - Google Analytics