`

HTML ol,ul,li,dl,dt,dd标签

阅读更多
ul: unordered list (无序列表)
ol: ordered list (有序列表)

li: list item (列表项)

这里的有序并不表示列表项会按字母或数字排序,而仅仅是加上1,2,3,…序号。可以用CSS来改变默认的显示样式。

无序和有序列表的列表项都是用<li>标签。

1. ol和ul标签的区别:

value="[number]" 只适用于<ol>标签,标明当前列表项的序号
type="disc|circle|square" 只适用于<ul>标签,指定显示效果

<ol>
	<li>flaw</li>
	<li value="4">diomatic</li>
	<li>declarative</li>
	<li>transformation</li>
	<li value="9">realistic</li> <!-- Set the sequence number of this item, the following would be incremented automatically based on the value; the previous ones would not be affected -->
</ol>

<ul>
	<li type="circle">legacy</li>
	<li type="square">paradigm</li>
	<li type="disc">prescriptive</li> <!-- "disc" is the default value -->
	<li>decouple</li>
</ul>


显示效果:


2. dl,dt,dd自定义列表

dl: 内容块
dt: 内容块的标题
dd: 内容


<dl>
	<dt>Description</dt>
	<dd>Institute</dd>
	<dd>Initiative</dd>
	<dd>Square</dd>
	<dd>Manufacture</dd>
</dl>
  • 大小: 13.9 KB
分享到:
评论

相关推荐

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

    总结来说,HTML列表通过`&lt;ul&gt;`, `&lt;li&gt;`, `&lt;ol&gt;`, `&lt;dl&gt;`, `&lt;dt&gt;`, 和 `&lt;dd&gt;`等标签,提供了多种方式来组织和呈现信息。根据内容的性质和展示需求,选择合适的列表类型,可以有效地提高网页的可读性和用户体验。记住...

    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;用来创建...

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

    列表元素ul、ol、li、dl、dt和dd是构建内容列表、导航链接和其他有序或无序信息的基石。了解并正确使用这些元素对于创建清晰、可访问且搜索引擎优化友好的网站至关重要。 首先,ul(无序列表)和ol(有序列表)是...

    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,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实现)

    通过分析`DL-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基本标签属性总结

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

    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;`...

    前端与移动开发之列表

    注意:ol标签里面只能有li li相当于一个容器 可以容纳所有元素 默认阿拉伯数字1234 3.自定义列表(重要) &lt;dl&gt; &lt;dt&gt;名词或项目名&lt;/dt&gt; &lt;dd&gt;解释一&lt;/dd&gt; &lt;dd&gt;解释二&lt;/dd&gt; &lt;dd&gt;解释三&lt;/dd&gt; &lt;/...

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

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

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

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

    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列表标签

    有序列表用ol标签,可以指定type属性来确定序号的样式,无序列表用ul标签。无论是有序还是无序列表,所有项目的封装都使用li标签,并且它们都有缩进效果。 滚动条 滚动条是通过div标签实现的,需要添加style属性...

    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静态页面的标签

    5. 描述标签:&lt;dl&gt;、&lt;dt&gt;、&lt;dd&gt;,用于定义描述列表,dt 标签定义标题,dd 标签定义描述内容。 6. 表格标签:、、,用于定义表格,表格的数据存储在单元格里面。 7. 表单标签:、、、,用于定义表单,实现动态交互...

Global site tag (gtag.js) - Google Analytics