HTML教程（7）- 列表

前言

上一篇中我们说了一下HTML中的表格是如何使用的可以用来进行布局虽然在进行学习跨行和跨列的时候可能会有些同学一时不太知道如何去使用但是不要因为这个而是自己灰心丧气这才是什么啊对吧记住一点就好了多练习比什么进步的都快好了废话不多说我们开始今天的课程今天主要说的是 HTML中的列表

下面进入正题

在HTML中无序列表通过UL来表示通过U了这个标签我们可以快速的编写一个列表出来列表大家应该都知道吧就是说一排排列号的内容就可以理解为一个列表那么我们先来看一下 HTML 中的列表如何去声明

代码

<ul>
 </ul>

这样就声明了一个无序列表就是没有序列号的没有顺序的序列号的列表但是仅仅这样怎么能构成一个合格的列表呢所以我们需要用到ul里面的一个子标签li来具体的定义列表项的内容是什么我们看如下代码

 <ul>
		   <li> 第一项 </li>
			<li>第二项</li>
	   </ul>

效果

在这里插入图片描述
这个时候可以发现已经有列表项并且也有内容了列表项是可以有任意个的看自己需求设计啦~ 那么现在列表项能出来了
那么如果我们想修改一下列表项的标志样式可以不可以呢？答案当然是肯定可以的我们看他的type属性

取值
circle 空心圆
disc 默认
square 实体方块

使用起来非常简单添加一下这个属性就可以了

看代码和效果
disc

	   <ul  type="disc">
		   <li> 第一项 </li>
			<li>第二项</li>
	   </ul>

在这里插入图片描述

circle

	   <ul  type="circle">
		   <li> 第一项 </li>
			<li>第二项</li>
	   </ul>

在这里插入图片描述
square

	   <ul  type="square">
		   <li> 第一项 </li>
			<li>第二项</li>
	   </ul>

在这里插入图片描述
这里是这三种的区别还是很简单的

这个应该已经见过了吧在LI上也是可以使用的

	   <ul  type="square" >
		    <li contenteditable="true"> 第一项 </li> 
			<li>第二项</li>
	   </ul>

在这里插入图片描述
这是效果

和无序列表类似只不过就是一个有顺序的列表罢了使用起来和无需列表一模一样除了标签稍微有些差异
看代码

   <ol  type="1" >
		    <li> 第一项 </li> 
			<li>第二项</li>
	   </ol>

在这里插入图片描述
默认情况下就是使用数字进行标识我们还可以规定其实的数字是哪一个数字可以通过start属性

代码

	   <ol  type="1" start="2">
		    <li> 第一项 </li> 
			<li>第二项</li>
	   </ol>

在这里插入图片描述
这样就实现了一个规定其实序列号的效果

同时有序列表的 type属性也可以选择很多选项
待选项
1
I
a
A
i
都i是可以的具体的效果在这里就不演示了你们可以自己写一下看看效果同实有序列表的li也是可以使用contenteditable的达到一个可以编辑的效果

这是另一种列表可以带有标题一般在在进行双栏布局的时候会用到例如我们电影网站有的电影列表类似那种左边图片右边介绍下面我们来看一下如何声明一个自定义列表

			<dl>
				<dt> 标题 </dt>
				<dl>内容</dl>
				<dl>内容</dl>
				<dl>内容</dl>
			</dl>

在这里插入图片描述

定义一个自定义列表是通过 dd 定义里面的 dt 就是标题而 dl 就是具体的列表项这就是自定义列表使用起来也非常的简单多加练习即可当然也可以使用contenteditable这个属性

在这里插入图片描述
动手完成这样的一个效果哦勤加练习

尽量自己写一下查看练习代码

那么今天就说到这里啦下篇再见~~~~