HTML 列表
时间:2019-06-08 23:19:23 来源:igfitidea点击:
HTML为web作者提供了三种指定信息列表的方法。所有列表必须包含一个或多个列表元素。
<ul>
–无序列表。使用普通项目符号列出项目。<ol>
-有序列表。使用不同的数字方案来列出项目。<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支持一种称为定义列表的列表样式,其中条目像在字典或百科全书中那样列出。
定义列表是表示术语表、术语列表或其他名称/值列表的理想方式。
定义列表使用以下三个标记。
<dl>
定义列表的开始<dt>
术语<dd>
术语定义</dl>
定义列表的结尾
<dl> <dt><b>HTML</b></dt> <dd>表示超文本标记语言</dd> <dt><b>PHP</b></dt> <dd>表示超文本预处理器</dd> </dl>