HTML 列表

时间:2019-06-08 23:19:23  来源:igfitidea点击:

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

  1. <ul>–无序列表。使用普通项目符号列出项目。

  2. <ol>-有序列表。使用不同的数字方案来列出项目。

  3. <dl>-定义列表。按照字典中的相同方式排列条目。

HTML无序列表

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

<ul>
   <li>Java</li>
   <li>JavaScript</li>
   <li>PHP</li>
   <li>HTML</li>
</ul>

type类型属性

我们可以使用<ul>标记的type属性来指定我们喜欢的项目符号类型。

默认情况下,是圆点。

<ul type = "square"> 正方形
<ul type = "disc"> 圆点
<ul type = "circle"> 圆圈

HTML有序列表

如果你需要把你的项目放在一个编号的列表中,而不是项目符号,那么开源使用HTML有序列表。

这个列表是通过使用<ol>标记创建的。编号从1开始,并为每个连续的带有<li>标记的有序列表元素递增1.

<ol>
   <li>Java</li>
   <li>JavaScript</li>
   <li>PHP</li>
   <li>HTML</li>
</ol>

有序列表的类型属性

我们可以使用<ol>标记的type属性来指定所需的编号类型。

默认情况下,它是一个数字。

<ol type = "1"> - 默认是数字
<ol type = "I"> - 大写罗马数字
<ol type = "i"> - 小写罗马数字
<ol type = "A"> - 大写字母
<ol type = "a"> - 小写字母

使用<ol type="1">

<ol type = "1">
   <li>Java</li>
   <li>JavaScript</li>
   <li>PHP</li>
   <li>HTML</li>
</ol>

使用<ol type="I">

<ol type = "I">
   <li>Java</li>
   <li>JavaScript</li>
   <li>PHP</li>
   <li>HTML</li>
</ol>

使用<ol type="i">

<ol type = "i">
   <li>Java</li>
   <li>JavaScript</li>
   <li>PHP</li>
   <li>HTML</li>
</ol>

使用<ol type="A">

<ol type = "A">
   <li>Java</li>
   <li>JavaScript</li>
   <li>PHP</li>
   <li>HTML</li>
</ol>

使用<ol type="a">

<ol type = "a">
   <li>Java</li>
   <li>JavaScript</li>
   <li>PHP</li>
   <li>HTML</li>
</ol>

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 = "A" start = "4">
   <li>Java</li>
   <li>JavaScript</li>
   <li>PHP</li>
   <li>HTML</li>
</ol>

HTML定义列表

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

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

  1. <dl>定义列表的开始

  2. <dt>术语

  3. <dd>术语定义

  4. </dl>定义列表的结尾

<dl>
   <dt><b>HTML</b></dt>
   <dd>表示超文本标记语言</dd>
   <dt><b>PHP</b></dt>
   <dd>表示超文本预处理器</dd>
</dl>