码迷,mamicode.com
首页 > Web开发 > 详细

html的有序列表和无序列表简单介绍

时间:2015-07-20 15:46:47      阅读:109      评论:0      收藏:0      [点我收藏+]

标签:

html的有序列表和无序列表简单介绍:

本章节将会简单一下有序列表和无序列表的一些简单用法,希望能够给需要的朋友带来一定的帮助。

一.有序列表:

使用<ol>标签就可以定义一个有序列表,之所以称其为有序列表,就是因为可以使列表具有排序功能。

利用<ol>的type属性就可以实现有序排序功能。

type属性值:

1表示以 1,2,3,4 来表示。

a 表示以 a,b,c,d 来表示。

A 表示以 A,B,C,D 来表示。

i 表示以 i,ii ,iii 来表示。

I 表示以 I,II,III来表示。

代码实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>蚂蚁部落</title>  
</head> 
<body> 
<ol type="1" start="5">
  <li>蚂蚁部落一</li>
  <li>蚂蚁部落二</li>
  <li>蚂蚁部落三</li>
</ol>
<ol type="a">
  <li>蚂蚁部落一</li>
  <li>蚂蚁部落二</li>
  <li>蚂蚁部落三</li>
</ol>
<ol type="A">
  <li>蚂蚁部落一</li>
  <li>蚂蚁部落二</li>
  <li>蚂蚁部落三</li>
</ol>
<ol type="i">
  <li>蚂蚁部落一</li>
  <li>蚂蚁部落二</li>
  <li>蚂蚁部落三</li>
</ol>
<ol type="I">
  <li>蚂蚁部落一</li>
  <li>蚂蚁部落二</li>
  <li>蚂蚁部落三</li>
</ol>
</body> 
</html>

二.无序列表:

无序列表恰好和有序列表相对应,在列表的前面没有表示顺序的序号。

使用<ul> 标签既可以定义一个无序列表。

使用type属性可以定义列表前面的符号,属性值如下:

dise:实心圆(默认值)。

circle:空心圆。

square:实心方块。

代码实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>蚂蚁部落</title>
</head> 
<body> 
<ul type="dise">
  <li>蚂蚁部落一</li>
  <li>蚂蚁部落二</li>
  <li>蚂蚁部落三</li>
</ul>
<ul type="circle">
  <li>蚂蚁部落一</li>
  <li>蚂蚁部落二</li>
  <li>蚂蚁部落三</li>
</ul>
<ul type="square">
  <li>蚂蚁部落一</li>
  <li>蚂蚁部落二</li>
  <li>蚂蚁部落三</li>
</ul>
</body> 
</html>

原文地址是:http://www.51texiao.cn/HTML5jiaocheng/2015/0613/4143.html

最原始地址是:http://www.softwhy.com/

html的有序列表和无序列表简单介绍

标签:

原文地址:http://www.cnblogs.com/come-on/p/4661349.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!