HTML实现有序排列和无序排列

一、HTML实现有序排列

有序序列标签都是成组出现的

<ol>
    <li>这是一号</li>
    <li>这是2号</li>
    <li>可以有很多li标签</li>
</ol>

在<ol>标签中，可以定义有序序列的样式。有序序列默认排列方式是数字序列，顺序排列。如下图所示：

如果想要修改这个有序序列的排序方式，可以直接在HTML中修改ol标签的样式。

在ol标签的头标签里，可以通过一下几个属性来更改样式：

1、type属性：

ol的属性type有五中值可以选择，默认为数字1(按数字排)，还可以是a（按小写字母排），A（按大写字母排）,i(大写I)表示罗马数字排

<ol type="a">
    <li>这是一号</li>
    <li>这是2号</li>
    <li>可以有很多li标签</li>
</ol>

<ol type="A">
    <li>这是一号</li>
    <li>这是2号</li>
    <li>可以有很多li标签</li>
</ol>

<ol type="i">
    <li>这是一号</li>
    <li>这是2号</li>
    <li>可以有很多li标签</li>
</ol>

<ol type="I">
    <li>这是一号</li>
    <li>这是2号</li>
    <li>可以有很多li标签</li>
</ol>

修改之后的样式变为：

以用字母排序为例，当<li>标签很多，超过26个时，他的排序序号会变成一下这样：

这样就可以无限的排下去了。

2、reversed属性

<ol>的默认排序是顺序排序，如果有特殊需求的话，可以将reversed属性的值改成：reversed，这个值表示倒序排序。

3、start属性

start属性表示排序序号从第几个开始，无论选用的是数字、字母还是罗马数字排序，想要从第几个开始排，就使用start属性，将其值设为你想要的的元素的位置即可。

例如想要从C开始排序，C在字母中排第三个，那么就设置start="3"

<ol type="a" reversed="reversed" start="7">
			<li>
				有序列表，li标签里面的东西有序展示
			</li>
			<li>
				一号，自动出现序号
			</li>
			<li>
				二号
			</li>
		</ol>

其他更多的样式，参考HTML手册，就不在这里说了。对于这些改变也可以用CSS来实现.

二、HTML的无序排列

无序排列也是通过一组标签来实现的

<ul>
	<li>苹果</li>
	<li>橘子</li>
	<li>香蕉</li>
</ul>

与有序排序的区别就在于，无序排序前面没有排序序号，采用了小圆点或者其他图形来代替，如图所示：

而无序排列的可以更改的属性，主要就是type，用来更改前面的图标样式

type属性可以选用的值：disc表示实心圆（默认），square表示方块，circle表示圆圈，更多的值请参考HTML手册

一般而言，无序排序标签组相较于有序排序标签组使用的更多一些，并且通常的用处都是用来实现导航栏。通过在CSS中对其进行进一步修饰加工，就能变成我们日常在网页中看见的导航栏了。

无序排序实现导航栏

以实现淘宝的导航栏为例：

<!-- 淘宝的导航栏 -->
<div>
	<ul class="nav">
		<li class="content1">
			<a href="https://www.tmall.com?spm=a21bo.2017.201859.1.5af911d9HiTKpW" target="_blank" >天猫</a>
		
		</li>
		<li class="content1">
			<a href="https://ju.taobao.com/" target="_blank">聚划算</a>
		
		</li>
		<li class="content1">
			<a href="https://chaoshi.tmall.com" target="_blank">天猫超市</a>
		
		</li>
	</ul>
</div>

CSS代码如下：

.nav{
	list-style: none;
}

.content1{
	height: 30px;
	float: left;
	margin:0 10px;
	line-height: 30px;
}

通过在<ul>中设置list-style:none,将排序前面的图标去掉，在<li>中，设置浮动元素float：left，使所有的<li>标签都到同一行靠左排序。效果如图