html 第3章 排列清单控制标记

[复制链接]
ARCHY明星会员实名认证 发表于 2012-7-15 10:35:04 [html] 显示全部楼层 |阅读模式 上一主题 下一主题

马上注册,一起探讨正确快速的建站方法

您需要 登录 才可以下载或查看,没有帐号?快速注册

x
排列清单控制标记可以创建一般的列表、编号列表或加着重号列表,以及定义列表。还可以在一种列表中嵌套另一种列表。对于概括因特网上的内容,列表是非常方便的。今天我们主要说说1、无序号条例式清单<ul>
;2、有序号条例式清单<ol>;3、无序列表和有序列表的结合应用;4、叙述式清单<dl>。

一、无序号条例式清单<ul>与<li>

格式:
  1. <ul>
  2. <li>…</li>
  3. <li>…</li>
  4. <li>…</li>
  5. <li>…</li>
  6. </ul>
复制代码
功能: <ul>无序条列清单的开始;
</ul>表示结束;
<li>…</li>表示一个项目。

<li>的属性

属性名称  属性值  说明
type    dise    实心圆(默认值)
      circle   空心圆
      square  实心方块

二、 有序号条例式清单<ol>与<li>

格式:
  1. <ol>
  2. <li>…</li>
  3. <li>…</li>
  4. <li>…</li>
  5. <li>…</li>
  6. </ol>
复制代码
功能: <ol>有序条列清单的开始;
</ol>表示结束;
<li>…</li>表示一个项目。

<ol>的属性

属性名称  属性值  说明
 type    1   表示以1,2,3,4 来表示
       a    表示以a,b,c,d 来表示
       A    表示以A,B,C,D 来表示
       i    表示以i,ii ,iii 来表示
       I    表示以I,II,III 来表示

三、无序列表和有序列表的结合应用

格式:
  1. <ul>
  2. <li>
  3. .....
  4. <ol>
  5. <li>…</li>
  6. <li>…</li>
  7. <li>…</li>
  8. </ol>
  9. </li>
  10. <li>
  11. .....
  12. <ol>
  13. <li>…</li>
  14. <li>…</li>
  15. <li>…</li>
  16. </ol>
  17. </li>
  18. </ul>
复制代码
四、叙述式清单(定义列表)

格式:
  1. <dl>
  2. <dt>…</dt>
  3. <dd>…</dd>
  4. <dd>…</dd>
  5. <dd>…</dd>
  6. <dt>…</dt>
  7. <dd>…</dd>
  8. <dd>…</dd>
  9. <dd>…</dd>
  10. </dl>
复制代码
功能:
<dl>叙述清单的开始;
<dt>表示一个项目;
<dd>表示一个项目下的更详细的内容。

推荐阅读:

第1章 XHTML 学前准备

第2章 HTML 基本结构

第4章 表格table基本格式和使用方法

第5章 图像 -- 背景图片 插入图片等

第6章 超链接 a标签的使用

第7章 表单from的功能结构

第8章 Flash MP3等多媒体的结构和使用

第9章 其他标记marquee、脚本和meta




上一篇:第2章 HTML 元素和基本结构
下一篇:第4章 表格table基本格式和使用方法

大神点评8

 发表于 2012-7-15 13:47:06
转播微博
sign404 发表于 2012-8-24 17:01:46 [html] 显示全部楼层
学习下,最近一直在看
rstar 发表于 2012-12-7 20:16:10 [html] 显示全部楼层
顶帖的哦。 。。
www.ycbbs.net  www.0359rencai.com www.0359fdc.com   www.yc115.com
anyta 发表于 2012-12-30 00:07:12 [html] 显示全部楼层
顶帖
weilide 发表于 2013-5-27 11:01:32 [html] 显示全部楼层
好贴,学习了
可乐鸡腿堡 发表于 2015-11-11 14:16:08 [html] 显示全部楼层
发现不错的
淘小淘 发表于 2019-5-7 10:31:33 [html] 显示全部楼层
很给力,希望分享更多给力的帖子啊。
您需要登录后才可以回帖 登录 | 快速注册

本版积分规则

快速回复 返回顶部 返回列表