首页 > 代码库 > HTML学习之有序列表、无序列表和自定义列表

HTML学习之有序列表、无序列表和自定义列表

2024-07-21 19:28:11   217人阅读

列表分成三种类型：有序列表、无序列表和自定义列表。
有序列表使用编号来记录项目的顺序
无序列表使用项目符号来记录无序的项目
自定义列表它由两个部分组成：定义条件和定义描述。

有序列表：
<OL  type="编号样式" start="编号起始值">

  <LI>项目一</LI>

  <LI>项目二</LI>

  ....

  </OL>

  type

  1 阿拉伯数字

  a英文小写

  A英文大写

  i罗马小写数字

  I罗马大写数字

  start编号样式的

起始数字，如：编号样式设为A，起始值设置为2，则列表的起始值为B

测试程序如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    </head>
    <body >
   <marquee direction="right" behavior="alternate" bgcolor="#3333FF">
   hello,great boy.......  
   </marquee>   
   <hr>
   
  <ol type="1" start="5">
       <li>时间</li>
       <li>金钱</li>
       <li>权利</li>
       <li>自由</li>
  </ol>
   
 
</html>

HTML无序列表：

§无序列表标记

<UL>

  <LI>项目一</LI>

  <LI>项目二</LI>

  ....

</UL>


type

  circle 空心圆

  disc圆点

  square正方形

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    </head>
    <body >
   <marquee direction="right" behavior="alternate" bgcolor="#3333FF">
   hello,great boy.......  
   </marquee>   
   <hr>
   
  <ul type="disc"  >
   <li>项目一</li>
   <li>项目二</li>
   <li>项目三</li>
  </ul>
   
 
</html>

自定义列表：

<html>
<head>
	<title>标题</title>
</head>

<body>
    <DL>
      <DT>☆<DD>无序列表</DD>
      <DT>☆<DD>有序列表</DD>
      <DT>☆<DD>定义列表</DD>
    </DL>
    <DL>
     	<DT>无序列表</DT><DD>不以数字为开始，而是使用一个符号作为分项标记的列表。</DD>
     	<DT>有序列表</DT><DD>使用数字编号，分项带有顺序性质的列表。</DD>
     	<DT>定义列表</DT><DD>用于解释名词的列表，包含了两种层次，一是名词，一是名词的解释。</DD>
    </DL>

             
 
</body>
</html>


HTML学习之有序列表、无序列表和自定义列表


联系
我们