个性化阅读
专注于IT技术分析

html列表:ul、ol和dl – HTML教程

上一章HTML教程请查看:html表格table

HTML为web开发者提供了三种指定信息列表的方法,所有列表必须包含一个或多个列表元素。列表可以包含-

  • <ul> -一个无序列表。这将使用普通项目符号列出项目。
  • <ol> -一个有序列表。这将使用不同的数字模式来列出你的项目。
  • <dl> – 定义列表。这将以与字典中相同的方式排列条目。

HTML无序列表

无序列表是没有特殊顺序或顺序的相关项的集合,此列表是使用HTML <ul>标记创建的,列表中的每一项都用项目符号标出。

例子

<!DOCTYPE html>
<html>

   <head>
      <title>HTML无序列表</title>
   </head>
    
   <body>
      <ul>
         <li>AAA</li>
         <li>BBB</li>
         <li>CCC</li>
         <li>DDD</li>
      </ul>
   </body>
   
</html>

type属性

你可以使用<ul>标记的type属性来指定项目符号的类型,默认情况下,它是disc,以下是可能的选项:

<ul type = "square">
<ul type = "disc">
<ul type = "circle">

例子

下面是我们使用<ul type = “square”>的示例

<!DOCTYPE html>
<html>

   <head>
      <title>HTML无序列表</title>
   </head>

   <body>
      <ul type = "square">
         <li>Spainish</li>
         <li>Italian</li>
         <li>Greece</li>
         <li>English</li>
      </ul>
   </body>

</html>

HTML有序列表

如果你需要把你的项目放在一个编号的列表,而不是项目符号,那么HTML有序列表将被使用,这个列表是使用<ol>标签创建的,编号从1开始,并对每个标记为<li>的连续有序列表元素递增1。

例子

<!DOCTYPE html>
<html>

   <head>
      <title>HTML有序列表</title>
   </head>

   <body>
      <ol>
         <li>Spainish</li>
         <li>Italian</li>
         <li>Greece</li>
         <li>English</li>
      </ol>
   </body>

</html>

type属性

你可以使用type属性来指定<ol>标记的编号类型,默认情况下,它是一个数字。以下是可能的选择:

<ol type ="1">-默认情况下的数字。
<ol type ="I">-大写数字。
<ol type ="i">-小写字母数字。
<ol type ="A">-大写字母。
<ol type ="a">-小写字母。

例子

下面是我们使用<ol type = “1”>的示例

<!DOCTYPE html>
<html>

   <head>
      <title>HTML有序列表</title>
   </head>

   <body>
      <ol type = "1">
         <li>Spainish</li>
         <li>Italian</li>
         <li>Greece</li>
         <li>English</li>
      </ol>
   </body>

</html>

其它值你可以执行测试。

start属性

可以使用<ol>标记的start属性指定所需的编号起点,以下是可能的选择:

<ol type ="1" start ="4">-数字以4开头。
<ol type ="I" start ="4">-数字以IV开头。
<ol type ="i" start ="4">-数字以iv开头。
<ol type ="a" start ="4">-字母以d开头。
<ol type ="A" start ="4">-字母以D开头。

例子

下面是我们使用<ol type = “i” start = “4” >的示例

<!DOCTYPE html>
<html>

   <head>
      <title>HTML有序列表</title>
   </head>
    
   <body>
      <ol type = "i" start = "4">
         <li>AAA</li>
         <li>BBB</li>
         <li>CCC</li>
         <li>DDD</li>
      </ol>
   </body>
    
</html>

HTML定义列表

HTML和XHTML支持一种称为定义列表的列表样式,其中的条目像字典或百科全书一样列出。定义列表是表示术语表、术语列表或其他名称/值列表的理想方式。

定义列表使用以下三个标记。

  • <dl>—定义列表的开始
  • <dt> – 一个项
  • <dd> – 项定义
  • </dl>—定义列表的结尾

例子

<!DOCTYPE html>
<html>

   <head>
      <title>HTML定义列表</title>
   </head>
    
   <body>
      <dl>
         <dt><b>HTML</b></dt>
         <dd>它代表超级文本标记语言</dd>
         <dt><b>HTTP</b></dt>
         <dd>这代表超文本传输协议</dd>
      </dl>
   </body>
    
</html>
赞(0)
未经允许不得转载:srcmini » html列表:ul、ol和dl – HTML教程

评论 抢沙发

评论前必须登录!