HTML基础——列表标签

一、列表标签是什么

what？

列表标签的作用：给一堆数据添加列表语义，也就是告诉搜索引擎/浏览器这一堆数据是一个整体。

二、列表标签分类

1.无序列表（最多）（unordered list）

（1）什么是无序列表？

无序列表：给一堆数据添加列表语义，并且一堆数据中所有的数据都无先后顺序：如：中国的城市有哪些？

（2）格式：

<ul>

    <li>需要显示的条目内容</li>

</ul>

li：list litm的缩写：条目列表。list：列表；item:条目

（3）无序列表的应用：

• 新闻列表
• 商品列表
• 导航条

（4）注意点：

• 标签可以改变样式，但是不建议，改变样式一般是通过css。         
• <ul>标签中最好只放<li>标签，但是在<li>标签中还可以继续放其他的标签。

 

2.有序列表（最少）（ordered list）

（1）什么是有序列表？

有序列表的作用：给一堆数据添加列表语义，并且这一堆数据中国所有的数据都有先后之分。

（2）格式：

<ol>

     <li>   </li>

</ol>

（3）注意点：

注意：也可以通过有序列表的 属性来改变有序序列表的格式，如： <ol type="i">表明，序号是 i 和 ii 这种表示。但是一般没有人这么用，要想改变格式，通过css。

3.定义列表（其次）（definition list ）

(1)定义列表的作用：

（1）给一堆数据添加列表语义

（2）先通过dt标签定义列表中的所有标题，然后再通过dd标签给每个标题添加描述信息。

（2）格式：

   <dl>

         <dt> </dt>

         <dd> </dd>

    </dl>

<!--其实dt和dd都是英文的缩写，dt是英文defintion title的缩写，所以dt的含义就是用来定义列表中的标题。dd是defintion description的缩写，所以dd的含义就是用来定义标题对应的描述的。-->

（3）定义列表的应用场景

• 做网站尾部的相关信息
• 做图文混排

 （4）注意点：

• （1）和ul、ol一样，dl和dt/dd是一个整体，所以他们一般情况下不会单独出现，一般都是一起出现。
• （2）和ul、ol一样，由于dl和dt/dd是一个组合标签，所以dl中建议只放dt和dd标签
• （3）一个dt可以没有对应的dd，也可以有多个对应的dd，但是无论有或者没有dd都不推荐使用。推荐使用一个dt对应一个dd。
• （4）和li标签一样，当需要丰富界面时，我们可以在dt和dd标签中继续添加其他标签。但是不要直接在dl标签中添加其他的标签。

三、列表标签分类详细介绍及示例

1.无序列表

1.1无序列表-建立带有项目符号的列表

   1.建立带有项目符号的列表：

• 标签：使用<ul>和<li>标签
• 方法：<ul>和<li>标签的type属性指定符号的样式，取值如下：

属性值	样式
disc	实心的圆圈
square	实心的方块
circle	空心的圆圈

 2.代码示例：

	<ul type="disc">
	    <li>《java》    
	    <li>《vb实例教程》  
	    <li>《c++系统编程》 
	    <li>《jsp快速编程》 
	 
	</ul>
	 
	<ul type="square">
	    <li>《java》    
	    <li>《vb实例教程》  
	    <li>《c++系统编程》 
	    <li>《jsp快速编程》 
	 
	</ul>
	 
	<ul type="circle">
	    <li>《java》    
	    <li>《vb实例教程》  
	    <li>《c++系统编程》 
	    <li>《jsp快速编程》 
	 
	</ul>

3.效果：

2. 有序列表

2.1 有序列表-建立数字编号的列表

1.建立数字编号有序列表：

• 使用<ol>和<li>标签创建带数字编号的列表。
• 在<ol>标签中使用start属性，设置起始的序号。
• 在<li>标签中使用value属性，改变列表内的编号顺序。

2.代码示例：

<ol>  
     <li>《java》      
	 <li>《vb实例教程》    
	 <li>《c++系统编程》   
	 <li>《jsp快速编程》   
	 
</ol> 

效果：

3.start属性：

start属性，设置起始的序号。value属性，改变列表内的编号顺序。

 代码示例：

	<ol start="10">
	    <li>《java》    
	    <li>《vb实例教程》  
	    <li value=30>《c++系统编程》   
	    <li>《jsp快速编程》 
	</ol>

效果：

2.2 有序列表-指定编号的格式和顺序

1.有序列表——创建指定编号的格式和顺序：如使用abcd的顺序等

• 在<ol>和<li>标签中，使用type属性指定编号系统的类型。type属性的取值如下表所示：

属性值	数字风格
A	使用大写字母（A、B 、C等）
a	使用小写字母（a、b、c等）
I	使用大写罗马数字（I、II、III等）
i	使用小写罗马数字（i、ii、iii等）
1	使用阿拉伯数字（1、2、3等），这是缺省值

2.代码示例：

	<ol start="10">
	    <li>《java》    
	    <li>《vb实例教程》  
	    <li value=30>《c++系统编程》   
	    <li>《jsp快速编程》 
	  
	</ol>
	  
	<ol type="a">
	    <li>《java》    
	    <li>《vb实例教程》  
	    <li>《c++系统编程》 
	    <li>《jsp快速编程》 
	  
	</ol>
	  
	<ol type="I">
	    <li>《java》    
	    <li>《vb实例教程》  
	    <li>《c++系统编程》 
	    <li>《jsp快速编程》 
	  
	</ol>
	  
	<ol type="i">
	    <li>《java》    
	    <li>《vb实例教程》  
	    <li>《c++系统编程》 
	    <li>《jsp快速编程》 
	  
	</ol>

3. 效果：

3. 定义列表

3.1 定义列表-建立无符号的列表

1.建立无符号的列表

• 标签：<dl>和<dt>创建无符号的列表。
• 缩进列表：使用<dd>标签替换<dt>，创建缩进的列表。

2.代码示例：

	<dl>
	    <dt>《java》    
	    <dt>《vb实例教程》  
	    <dt>《c++系统编程》 
	    <dt>《jsp快速编程》 
	 
	</dl>
	 
	 
	<dl>
	    <dd>《java》    
	    <dd>《vb实例教程》  
	    <dd>《c++系统编程》 
	    <dd>《jsp快速编程》 
	 
	</dl>

3.效果：

 

3.2 定义列表-建立术语列表

1.建立术语列表

• 方法：在<dl>元素中同时使用<dt>和<dd>标签，建立术语列表。
• 术语列表中的列表项由两部分组成：

1. 术语：由<dt>标签指定
2. 术语的说明：由<dd>标签指定

2. 代码示例：

	<dl>
	    <dt>HTML  
	    <dd>超文本标记语言   
	    <dt>HTML
	    <dd>超文本标记语言   
	</dl>
	

3.效果：

 

本篇博客小编主要总结和分享有关列表标签的内容，分为三类五种形式，详细的用法在后续的项目实践中会慢慢分享~~~