html列表之有序列表、无序列表和自定义列表笔记

原创 PHP笔记  2017-03-17 17:46  阅读 1,641 views 次

html标签

  • <ol> :有序列表
  • <ul> :无序列表
  • <li> :列表项
  • <dl> :自定义列表
  • <dt> :自定义列表项目
  • <dd>:自定列表项的描述

1、html有序列表

有序列表是一列项目,默认此列表项目使用数字进行标记,有序列表 从<ol> 标签开始,每个列表项从<li>标签开始。

格式:

<ol><li>列表内容</li></ol>

实例:

......
<body>
<h3>有序列表演示</h3>
<ol>
<li>有序列表</li>
<li>无序列表</li>
<li>自定义列表</li>
</ol>
</body>
......

运行结果:

2、html无序列表

无序列表是一列项目,默认此列项目使用粗体圆点进行标记,无序列表 从<ul> 标签开始,每个列表项从<li>标签开始,有的最多,大多数网页都使用无序列表。

格式:

<ul><li>列表内容</li></ul>

实例:

......
<body>
<h3>无序列表演示</h3>
<ul>
<li>有序列表</li>
<li>无序列表</li>
<li>自定义列表</li>
</ul>
</body>
......

运行结果:

3、html自定义列表

自定义列表也是一列项目,而是还是项目和注释的组合。自定义列表从<dl>标签开始;每个自定义列表项从<dt>标签开始;每个自定义列表项的定义从<dd>标签开始。

格式:

<dl>
<dt>列表项名称</dt>
<dd>列表项的定义(解释)</dd>
</dl>

实例:

......
<body>
<h3>自定义列表演示</h3>
<dl>
<dt>有序列表</dt>
<dd>有顺序的列表</dd>
<dt>无序列表</dt>
<dd>没有顺序的列表</dd>
</dl>
</body>
......

运行结果:

本文地址:https://www.ggbiji.com/html-lists.html
版权声明:本文为 PHP笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情