当前位置: 首页 > 图文教程 > 网页制作 > HTML/XHTML教程 > HTML语言剖析(六)清单标记

HTML/XHTML教程
一些不太常用的XHTML标签用法以及实例
网页中图片的设置涉及的三个问题
商业HTML邮件的制作建议
HTML Marquee 字符片段滚动
DOCTYPE 文档类型声明(网页爱好者必看)
纯HTML标签你熟悉多少?
HTML元素的ID和Name属性的区别
HTML meta的大作用
HTML标签tbody的用法与说明
HTML 特殊字符转换表
HTML基础 HTML的组成结构
HTML基础之HTML内容细则
Shtml 精简教程
浅谈html table 标签
html Frame、Iframe、Frameset 的区别
HTML 网页页面切换的各种变换效果
HTML的10个表格相关标记
让IE8启动IE7兼容模式的代码
HTML 结构化实现方法
xhtml的块级标记小结

HTML/XHTML教程 中的 HTML语言剖析(六)清单标记


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-08-10   浏览: 75 ::
收藏到网摘: n/a

<OL> <LI>
<UL>
<MENU> <DIR>
<DL> <DT> <DD>
■ <OL> <LI> :
▲Top
<OL>称为顺序清单标记。<LI>则用以标示清单项目。
所谓顺序清单就是在每一项前面加上 1,2,3... 等数目,又称编号清单。

<OL> 的参数设定(常用):
例如: <ol type="i" start="4"></ol>

  • type="i"
    设定数目款式,其值有五种,请参考 右表,内定为 type="1"。
  • start="4"
    设定开始数目,不论设定了哪一数 目款式,其值只能是 1,2,3.. 等整 数,内定为 start="1"。
TypeNumbering style
1 arabic numbers 1, 2, 3, ...
a lower alpha a, b, c, ...
A upper alpha A, B, C, ...
i lower roman i, ii, iii, ...
I upper roman I, II, III, ...

<LI> 的参数设定(常用):
例如: <li type="square" value="4">

  • type="square"
    只适用于非顺序清单,设定符号款式,其值有三种,如下,内定为 type="disc":
    符号 是当 type="disc" 时的列项符号。
    符号 if" width=10 height=10 border=0> 是当 type="circle" 时的列项符号。
    符号 是当 type="square" 时的列项符号。
  • value="4"
    只适用于顺序清单,设定该一项的数目,其後各项将以此作为起始数目而递增, 但前面各项则不受影响,其值只能是 1,2,3.. 等整数,没有内定值。

例子:

HTML Source Code (原始码) 浏览器显示结果
My best friends:
<ol>
<li>Michelle Wei
<li>Michael Wan
<li>Gloria Lam
</ol>
My best friends:
  1. Michelle Wei
  2. Michael Wan
  3. Gloria Lam

■ <UL> :
▲Top
<UL>称为无序清单标记。
所谓无序清单就是在每一项前面加上 等符号,故又称符号清单。

<UL> 的参数设定(常用):
例如: <UL type="square">

  • type="square"
    设定符号款式,其值有三种,如下,内定为 type="disc":
    符号 是当 type="disc" 时的列项符号。
    符号 是当 type="circle" 时的列项符号。
    符号 是当 type="square" 时的列项符号。

注意:由于 <UL> 及 <LI> 都有 type 这个参数,两者尽可能选用其一。

例子:

HTML Source Code (原始码) 浏览器显示结果
My Homepages:
<ul>
<li>Penpals Garden
<li>ICQ Garden
<li>Software City
<li>Creation of Webpage
</ul>
My Homepages:
  • Penpals Garden
  • ICQ Garden
  • Software City
  • Creation of Webpage

■ <MENU> <DIR> :
▲Top
这两个标记都不为 W3C 所赞同,希望用者能以 <ul> 及 <ol> 代之。
<MENU> 及 <DIR>,基本上它和 <ul> 是一样的,在一些特别的浏览器可能表现出 <ol> 的 效果,于旧版的 IE 或 NC 标记 <DIR> 不显示符号或数目。两标记的用法与 <ul> 完全一 样。

例子:

HTML Source Code (原始码) 浏览器显示结果
My Homepages:
<dir>
<li>Penpals Garden
<li>ICQ Garden
<li>Software City
<li>Creation of Webpage
</dir>
My Homepages:
  • Penpals Garden
  • ICQ Garden
  • Software City
  • Creation of Webpage
  • ■ <DL> <DT> <DD> :
    ▲Top
    <DL>称为定义清单标记。 <DT> 用以标示定义条目,<DD> 则用以标示定义内容。
    所谓定义清单就是一种分二层的项目清单,其不故符号及数目。

    三个标记都没有常用的参数。而 <DT> <DD> 可以独立使用,只是一些旧的浏览器并不支 援,如 IE 3.0。常用的如 <DD> 标记可用以制造段落第一个字前面的空白。

    例子:

    原始码 <dl>
    <dt>How to use Definition List
    <dd>First, you should not place paragraph tag right after or before a list structure or between the items of a list. In cerntain contexts, use of extra paragraph tags should always be avoided, when you realize this concept, it is quit easy to write a HTML.
    <dt>Other things to know
    <dd>We usually put only ONE Definition tag following the Definition Term tag, more than one DD tag is not recommanded. Besides, unlike Definition List is a nonempty tag, both Definition Term and Definition Description are empty tags.
    </dl>
    显示结果
    How to use Definition List
    First, you should not place paragraph tag right after or before a list structure or between the items of a list. In cerntain contexts, use of extra paragraph tags should always be avoided, when you realize this concept, it is quit easy to write a HTML.
    Other things to know
    We usually put only ONE Definition tag following the Definition Term tag, more than one DD tag is not recommanded. Besides, unlike Definition List is a nonempty tag, both Definition Term and Definition Description are empty tags.