HTML列表知识有序列表无序列表定义列表

列表在HTML中是一个常用的操作,几乎很多网页都出现了列表来显示数据。今天我就在这里来分享下有序列表、无序列表和定义列表的相关知识。从定义到实例的一个总结和概况。

有序列表

  • 01

    有序列表是ol标签和li标签的组合表示,<ol>表示有序列表的开始,</ol>表示有序列表的结束。这里为了说明有序列表的用法,将张三,王四,李五,马六用有序列表来表示出来。 <html> <head><title>列表控制</title></head> <body> <ol> <li>张三</li> <li>王四</li> <li>李五</li> <li>马六</li> </ol> </body> </html> 如下图可以看到执行的结果,前面自动天机了1234作为序号。

  • 02

    很多时候我们想在HTML中使用ABCD或者其他的需要来作为有序列表的序号该怎么做呢? 在HTML中提供了小写字母a来用小写字母表示列表的序号,大写字母A用大写字母来表示列表的序号,i小写罗马数字来表示序号和I这个大写的罗马数字来表示序号。可以看如下实例。 可以看到如下图的代码和例子,用大写字母作为这个有序列表的序号,写法是type="A",执行结果是A、B、C、D的序号。

  • 03

    对于有序列表来说,我们可能遇到一种情况是第二页接着第一页继续书写的,第二页的序号不从一开始的。对于这个情况我们该怎么设计呢? 序号不从一开始的,HTML给ul提供了一个属性,他就是start属性,具体用法如下实例:(这个有序列表从10开始) <html> <head><title>列表控制</title></head> <body> <ol type="1" start="10"> <li>张三</li> <li>王四</li> <li>李五</li> <li>马六</li> </ol> </body> </html> 可以看到这个有序列表是从10开始的,往下继续的一个序列号。

无序列表

  • 01

    HTML中无序列表是用<ul>和<li>的组合控制标签,<ul></ul>控制了无序列表的开始和结束,<li>/li>控制了列表中的项。具体实例如下: <html> <head><title>列表控制</title></head> <body> <ul> <li>张三</li> <li>王四</li> <li>李五</li> <li>马六</li> </ul> </body> </html> 从下图执行结果可以看出,无序列表默认的是圆心实点作为无序列表的标识。

  • 02

    如果我么不想无序列表前面的标识是圆心的实点该怎么办呢? 这里提供了disc 实心圆,circle空心圆,square实心方块这几种项目符号方便大家使用。具体实例如下: <html> <head><title>列表控制</title></head> <body> <ul type="square"> <li>张三</li> <li>王四</li> <li>李五</li> <li>马六</li> </ul> </body> </html> 可以看到项目符号变成了实心的方块了。其实还有自定义的项目符文,这个我放在单独的一个经验中了。

    定义序列

    • 01

      定义列表是通过<dl><dt><dd>这三个组合标签来实现的,<dl></dl>表示定义序列的开始和结束,<dt></dt>表示这被解释的内容<dd></dd>对被解释内容的一个解释。 <html> <head><title>列表控制</title></head> <body> <dl> <dt>考试科目</dt></dt> <dd>语文</dd> <dd>数学</dd> <dd>英语</dd> </dl> </body> </html> 可以看到,被解释的是考试科目,解释内容为下面这三个科目。这其中用到了缩进来表示的。

    (0)

    相关推荐

    • CSS列表实例:在无序列表中不同类型的列表标记

      CSS 代码均位于 HTML 的 head 部分,这样做的目的是为了利于演示例子本身.在实际的开发中,使用 CSS 最好的方式是引用外部样式表. 这里介绍CSS列表实例:在无序列表中不同类型的列表标记 ...

    • 电脑程序缓存列表怎么清除/清除文档缓存列表

      在电脑使用过程中,我们使用过的程序和文件列表会保留一份在缓存文件中,当点击开始菜单后,会看到最近使用过的程序列表和[我最近的文档]列表,虽然给我们带来了一定的方便性,但同时也泄露了自己的隐私,下面就介 ...

    • 使用无序列表该注意的7个陷阱

      小编:信息罗列如何明确展示?常用的是有序列表和无序列表,那何时使用?使用时该注意什么?这篇文章让你避开7个陷阱,更完美的使用无序列表功能来展示信息. 摘要: 小圆点有助于分割大段文字,使得复杂的文章和 ...

    • Word2007文档定义新的列表中的文本缩进量调节,为什么不起作用了?

      Word2007文档定义新的列表中的文本缩进量调节,为什么不起作用了?小编整理了一下的两个原因以及其解决方法,希望可以帮助到你. 原因一: 是因为你点右键的地方可能不误,Word2007对列表调整经常 ...

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

      HTML 列表中的dl,dt,dd,ul,li,ol区别及应用 操作方法 01 无序列表 无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记. 无序列表始于 <ul> ...

    • Python list列表怎样排序

      Python list列表也是Python编程语言中的比较重点的知识.今天小编我就教教大家关于Python list列表的排序方法,主要是sort和reverse. 操作方法 01 如图所示,这是小编 ...

    • 【DW教程】如何利用CSS样式设置列表文字

      我现在详细教你如何利用CSS样式设置列表文字,为的是让你很快真正理解CSS样式. 操作方法 01 打开Adobe Dreamweaver CC 2015. 02 执行菜单栏中的"文件> ...

    • 如何在HTML中制作列表标记,以及实现列表嵌套

      列表标记,既HTML语言中有序列表和无序列表.在HTML中,运用好有序列表和无序列表可以使网页排版更加整齐有序,尤其是制作目录时必须掌握的技能. 操作方法 01 无序列表 无序列表中每一个表项的前面是 ...

    • python怎么删除列表中的某个元素

      列表元素能增加就可以删除,前面我们介绍几种增加元素的方法,虽然都是增加但是也有所不同,这里介绍的删除列表元素的方法也是一样,下面就来演示一下.一.del删除列表del 不是方法,是 Python 中的 ...