当前位置:Gxlcms > html代码 > html无序列表标签和有序列表标签使用实例详解

html无序列表标签和有序列表标签使用实例详解

时间:2021-07-01 10:21:17 帮助过:132人阅读

这篇文章主要介绍了html无序列表标签和有序列表标签使用示例,需要的朋友可以参考下

一、上下层列表标签:<dl>..</dl>:

上层dt
下层dd:封装的内容会被自动缩进的效果

代码如下:

  1. <dl>
  2. <dt>运动户外</dt>
  3. <dd>板鞋</dd>
  4. <dd>篮球鞋</dd>
  5. <dd>足球鞋</dd>
  6. <dd>跑步鞋</dd>
  7. </dl>

二、定义有序列表: <ol>

属性:
type: 可以设置排序的样式 (也可以给li单独加这个属性)
1表示以 1,2,3,4 来表示
a 表示以 a,b,c,d 来表示
A 表示以 A,B,C,D 来表示
i 表示以 i,ii ,iii 来表示
I 表示以 I,II,III来表示
start:列表起点
 <li>:列表内容

代码如下:

  1. <ol type="a" start="55">
  2. <li>板鞋</li>
  3. <li>篮球鞋</li>
  4. <li>跑步鞋</li>
  5. <li>足球鞋</li>
  6. </ol>

三、定义无序列表:<ul>

属性:type:可以设置排序的样式 也可以给li单独加这个属性
dise 实心圆(默认值)
circle 空心圆
square 实心方块
<li>:列表内容


代码如下:

  1. <ul type="square">
  2. <li type="disc">板鞋</li>
  3. <li>篮球鞋</li>
  4. <li>跑步鞋</li>
  5. <li>足球鞋</li>
  6. </ul>

更多html无序列表标签和有序列表标签使用实例详解相关文章请关注PHP中文网!

人气教程排行