html5列表属性综合实例 请列举html5列表的种类

在本章节学习内容如下：

如何创建编号列表

如何创建项目列表

如何创建定义列表

1、列表是一种用于放置事务集合的通用容器，分为三种：有序列表、无序列表和定义列表。

    <ul.../>

    <ol.../> 

    <dl.../>

    每个列表项都有自己的标签：在词汇列表中为<dt>和<dd>；在其他列表中为<li>。

<!--无序列表演示代码-->
<p>This is a ul code</p>
<ul>
<li>Hello World</li>
<li>Good Morning</li>
<li>Good Night</li>
</ul>


<!--有序列表演示代码-->
<p>This is a ol code</p>
<ol>
<li>Hello World</li>
<li>Good Morning</li>
<li>Good Night</li>
</ol>

<!--结果如下-->

 

2、定制有序列表

    有序列表特有的定制有两种：1）使用CSS属性list-style-type

                                                   2）使用属性（attribute）type，但这种在HTML5中已摒弃。

   其默认值为decimal）

<ol style="list-style-type: lower-alpha;">

   start执行。

<!--定制有序列表演示代码-->
<p>This is a ol code</p>
<ol style="list-style-type:upper-alpha;" start="4">
<li>Hello World</li>
<li>Good Morning</li>
<li>Good Night</li>
</ol>

 

  也可修改任何列表项的编号，在标签<li>中使用属性value执行。

<!--定制有序列表演示代码-->
<p>This is a ol code</p>
<ol style="list-style-type;">
<li>Hello World</li>
<li value="10">Good Morning</li>
<li>Hello World</li>
<li value="20">Good Night</li>
<li>Hello World</li>
</ol>

3、定制无序列表

list-style-type进行定制。

<!--定制无序列表演示代码-->
<p>This is a ul code</p>
<ul style="list-style-type: disc">
<li>Hello World</li>
<li>Good Morning</li>
<li>Good Night</li>
</ul>
<ul style="list-style-type: square">
<li>Hello World</li>
<li>Good Morning</li>
<li>Good Night</li>
</ul>
<ul style="list-style-type: circle">
<li>Hello World</li>
<li>Good Morning</li>
<li>Good Night</li>
</ul>

  除了以上实心圆、正方形、空心圆以外，还可以使用一幅图来替换。通过list-style-image执行

<ul style="list-style-image: url（/a.gif）">
<li>Hello World</li>
</ul>

  列表项横跨多行时，默认是与第一行左对齐。但通过属性list-style-position可实现后续行与项目符号或列表符号对齐。（默认值为outside即与第一行左对齐，inside是与项目符号或列表符号对齐）

  如果要同时修改多个列表相关属性，可使用list-style指定三个值

<ul style="list-style: circle inside URL(/a.gif)">
<li>Hello World</li>
</ul>

4、定义列表

  定义列表与其他列表稍有不同，其中每个列表项都包含两部分：

  1）术语；

  2）术语的定义。

定义列表的每部分都有其各自的标签，术语标签为<dt>，定义标签为<dd>。

<!--定义列表演示代码-->
<dl>
<dt>Hello</dt>
<dd>an expression of greeting</dd>
<dt>World</dt>
	<dd>the earth, with all its countries,
	    peoples and natural features</dd>
	<dt>Good</dt>
	<dd>of high quality or an acceptable standard</dd>

 

  由此可知在浏览器显示时，术语和定义都是分开的并缩进定义。与代码换行等无关。

5、嵌套列表

<!--嵌套列表演示代码-->
<ul style="list-style-type: circle">
<li>Hello World</li>
<li>Good Morning</li>
<li>嵌套列表
	<ul>
	<li>Good Night</li>
	</ul>
</li>
</ul>

 

总结

可以通过练习巩固下自己学到的知识哦~