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

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

有序列表:
<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>


  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值