昨天写的那篇文章《我教女朋友学编程Html系列(6)—Html常用表单控件》，基本上有1000人左右看了，那边文章是我站在前人的肩膀上修改来的，添加了截图和说明，合并了例子，使之更容易被初学者接受。
今天我要讲html的有序列表和无序列表及常用例子，网上搜索了一番，没有发现太好的文章，决定自己动手，丰衣足食。
在我搜文章或知识点的时候，有一点启发，总是想先看效果图，看看效果是什么样子，然后在决定是否要继续看下去，就像去相亲，先看看双方是否对上眼了，先有外貌的吸引，才有继续交往下去的必要，当然，如果你遇到了一个女神，然后对她穷追猛打，只要方式得当，追到手的希望还是蛮大的。
大家的时间都是宝贵的，因此，我决定，先展示效果图，然后再讲知识点，有兴趣的看看，没兴趣的闪过。
本来，我以为无序列表用的最多，有序列表次之，自定义列表很少用。搜了几个网站发现，有序列表也很少用。先看截图吧。
无序列表用的最多，下图是淘宝导航栏的截图，用的就是无序列表，后面我会把这个当做例子讲解。
下图是自定义列表，也是淘宝的，不是我给淘宝做广告，而是淘宝太有名了，我拿来给大家研究一下。
吃水不忘挖井人，w3school.com.cn给我们初学者提供了太多的免费资料，在此，免费为她宣传一下，下面这个有序列表的截图正式从该网站例子中得来，本文章的例子也将采用该网站的例子。
一、下面开讲，从无序列表开始。
无序列表的英文全称叫unorder list，不能粗浅的理解为没有顺序的列表，它其实还是有顺序的，把哪个选项写在前面，它就会在前面显示。
这里的“无序”指的是没用数字或字母等来标记，不是像1,2,3或a,b,c这样的显示，而是前面增加一个圆点来表示。
不过，大家一般也讨厌这些圆点，加上这些圆点会很丑，因此，大家会通过设置样式把它去掉。
下面先看一个简单的例子：
先看图
代码如下：
<html> <body> <h4>程序员喜欢的习惯：</h4> <ul > <li>讲代码</li> <li>写博客</li> <li>看女神</li> <li>嗑瓜子</li> </ul> </body> </html>
知识讲解：
1，
无序列表使用一对闭合的标签表示，<ul></ul>。内部的一项使用 <li>内容</li>来表示。
2，
可以看到各项之前加了一个圆点，可以通过ul标签的type属性来修改这个修饰符。
(1) <ul type="disc"> 显示为一个圆点，是默认值。
(2) <ul type="circle">显示为一个空心圆圈。如图：
(3) <ul type="square">显示为一个实体正方形。如图：
3，
最常见的就是使用样式直接把修饰符干掉。修改方式如下：
<ul style="list-style-type:none;" >
效果图如下：
上面的例子，把无序列表的基本知识点讲完了。下面看淘宝导航栏的例子。
效果图如下：
源代码如下：
<html> <head> <style type="text/css"> .nav{ height:34px; border-bottom:2px solid #f40; overflow:hidden; *zoom:1 } .nav li{ display:inline; float:left; font-weight:700 } .nav .nav-bd,.nav .nav-hd{ margin-top:4px; height:33px } .nav .nav-bd li,.nav .nav-hd li{ position:relative } .nav .nav-bd a,.nav .nav-hd a{ height:28px; line-height:28px; overflow:hidden; *zoom:1; display:inline; float:left } .nav .nav-bd a:hover,.nav .nav-hd a:hover{ background:#f4f4f4 } .nav .nav-bd .nav-ad,.nav .nav-hd .nav-ad{ position:absolute; top:0; left:0; padding:0; height:33px } .nav .nav-bd .nav-ad:hover,.nav .nav-hd .nav-ad:hover{ background:0 0 } .nav .nav-bd .nav-ad img,.nav .nav-hd .nav-ad img{ height:33px } .nav .nav-hd{ display:inline; float:left } .nav .nav-hd li{ margin:0 10px; text-align:center; font-size:16px } .nav .nav-hd li a{ padding:0 3px; 52px; color:#f40 } </style> </head> <body> <div class="nav"> <ul class="nav-hd"> <li> <a href="http://www.tmall.com/?spm=1.7281509.a214dau.1">天猫</a> </li> <li> <a href="http://ju.taobao.com/?spm=1.7281509.a214dau.2">聚划算</a> </li> <li> <a href="http://chaoshi.tmall.com/?spm=1.7281509.a214dau.3">超市</a> </li> </ul> </div> </body> </html>
说明：
1，
淘宝的导航栏是由多个无序列表ul组成，这里摘出来第一个无序列表来分析。
2，
在标签<style type="text/css"></style>内部的代码都是我从淘宝“偷”出来的样式源代码，这个等以后给你讲css的时候再说，不用看这部分代码，它的作用就是给无序列表整整容。
3，
可以看到标签<div class="nav">，div标签通常用来布局，增加一个class(类名称)也是方便使用样式来修饰。
4，
无序列表<ul class="nav-hd">，同样增加了class，就是方便使用样式，不用管，等讲样式的时候在说。
5，
这个无序列表<li>内部是超链接标签a，实际上，很多菜单栏都是通过这种方式来做的，二级菜单还会嵌套一个ul无序标签，li的内部放一个a标签，当用户单击某个选项，就可以进入href指定的网页，这就实现了菜单的功能。
二、自定义列表
先看例子效果图：
源代码如下：
<html>
<body>
<h2>一个定义列表：</h2>
<dl>
<dt>计算机</dt>
<dd>用来计算的仪器 ... ...</dd>
<dt>显示器</dt>
<dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>
</body>
</html>
知识讲解：
1，
<dl> 标签全称是definition list，代表“自定义列表”。
2，
<dt> 标签全称是definition term，代表 “自定义项”。一个自定义列表dl内部可以包括多个自定义项dt。
3，
<dd> 标签的全称是definition description，代表“自定义描述”。一个自定义项dt后面跟一个自定义描述dd。
4，
自定义列表，只需要记住3个标签就Ok了，都是d开头，definition就是自定义的意思。
<dl>后面的l代表list，列表的意思。
<dt>后面的t代表term，“项目”的意思。
<dd>后面的d代表description，“描述”的意思。
下面来看淘宝自定义列表的例子。
效果图如下：
源代码如下：
<html> <head> <style type="text/css"> .side .discover{ padding:20px 14px; border:1px solid #e8e8e8 } .side .discover dt{ margin-bottom:10px } .side .discover dt s{ text-indent:-3000px; 120px; height:18px; *display:block } .side .content-wrapper{ height:1068px; background-color:#fff } .side .change-wrapper{ padding:8px 0; background-color:#fff; cursor:pointer; color:#737373; border:1px solid #e8e8e8; border-top:0 } .side .change-wrapper:hover{ color:#f40 } .side .change-wrapper .s-change-gray{ margin-left:86px; 15px; height:17px; margin-right:7px } .service-side{ 190px } .tb-service{ 190px; box-shadow:2px 2px 0 #eeeef0; background-color:#fff; position:relative } .tb-service h2{ background:#f40; height:35px } .tb-service h2 s{ margin:10px 14px; height:16px; 100px; text-indent:-2000px; *display:block; *overflow:hidden } .tb-service .service-bd{ height:454px; overflow-y:hidden; border:1px solid #ff4401; border-top:0; padding:0 9px } .tb-service .service-bd dt{ padding-top:10px; font-size:14px; font-weight:700; line-height:19px; padding-bottom:1px } .tb-service .service-bd dt s{ 25px; height:21px; margin-right:7px; margin-top:-3px; *text-indent:0 } .tb-service .service-bd dd{ border-bottom:1px solid #e6e7eb; padding-bottom:10px; padding-left:5px; line-height:22px; *padding-top:8px } .tb-service .service-bd dd a{ 64px; display:-moz-inline-stack; display:inline-block; vertical-align:middle; *vertical-align:auto; zoom:1; *display:inline; position:relative } .tb-service .service-bd dd .c-2{ 54px } .tb-service .service-bd dd .c-3{ 38px } .tb-service .service-bd dd .c-4{ 29px } .tb-service .service-bd .last-dd{ border:0; margin-top:10px 9 } .tb-service .more{ position:relative; position:absolute; top:45px; right:9px; margin-right:0; padding:0 10px 0 5px; border:1px solid #e8e8e8; background:#fff; margin-top:-3px 9; padding-top:3px 9 } .tb-service .more em,.tb-service .more span{ position:absolute; top:0; left:0; 0; height:0; border-color:rgba(255,255,255,0); border-color:transparent0; *border-color:transparent; _border-color:tomato; _filter:chroma(color=tomato); border-style:solid; overflow:hidden; *zoom:1; border-3px 0 3px 3px } .tb-service .more em{ left:2px; border-left-color:#dadada } .tb-service .more span{ border-left-color:#fff } .tb-service .more i{ position:absolute; top:6px; left:30px } .tb-service .more i em,.tb-service .more i span{ overflow:visible } .tb-service .more:hover{ color:#fff; border-color:#f40; background:#f40 } .tb-service .more:hover em{ border-left-color:#fff } .tb-service .more:hover span{ border-left-color:#f40 } </style> </head> <body> <div class="side service-side"> <div class="tb-service"> <dl class="service-bd"> <dt> <s class="fpicon s-service-theme"></s>主题市场 </dt> <dd data-spm="1997517385"> <a href="http://nvren.taobao.com/?spm=1.7275165.a214d7z.1" data-spm="d2" class="">淘宝女人 </a> <a href="http://www.taobao.com/market/sport/citiao/yundongpai.php?spm=1.7275165.a214d7z.2" data-spm="d12" class=" c-2 ">运动派 </a> <a href="http://qinglv.taobao.com/?spm=1.7275165.a214d7z.3" data-spm="d3" class=" c-3 ">情侣 </a> <a href="http://nanren.taobao.com/?spm=1.7275165.a214d7z.4" data-spm="d1" class="">淘宝男人 </a> <a href="http://www.taobao.com/market/baobao/2014/index.php?spm=1.7275165.a214d7z.5" data-spm="d5" class=" c-2 ">孕婴童 </a> <a href="http://www.taobao.com/market/home/2014/index.php?spm=1.7275165.a214d7z.6" data-spm="d18" class=" c-3 ">家居 </a> <a href="http://www.taobao.com/market/mei/index.php?spm=1.7275165.a214d7z.7" data-spm="d10" class="">美容护肤 </a> <a href="http://zln.taobao.com/?spm=1.7275165.a214d7z.8" data-spm="d6" class=" c-2 ">中老年 </a> <a href="http://www.taobao.com/market/foodindex.php?spm=1.7275165.a214d7z.9" data-spm="d14" class=" c-3 ">美食 </a> <a href="http://jiehun.taobao.com/?spm=1.7275165.a214d7z.10" data-spm="d4" class="">美嫁新娘 </a> <a href="http://www.taobao.com/market/car/index.php?spm=1.7275165.a214d7z.11" data-spm="d17" class=" c-2 ">有车族 </a> <a href="http://www.taobao.com/market/jia/2014index.php?spm=1.7275165.a214d7z.12" data-spm="d19" class=" c-3 ">装修 </a> <a href="http://www.taobao.com/market/3c/home.php?spm=1.7275165.a214d7z.13" data-spm="d8" class="">手机数码 </a> <a href="http://shenghuo.taobao.com/?spm=1.7275165.a214d7z.14" data-spm="d20" class=" c-2 ">生活家 </a> <a href="http://game.taobao.com/?spm=1.7275165.a214d7z.15" data-spm="d13" class=" c-3 ">游戏 </a> </dd> </dl> </div> </div> </body> </html>
说明：
1，
样式没有“偷”完整，正常的应该是3个a标签为一行的。感兴趣的童鞋，可以自己偷偷看。
2，
这里的<dt>内部先是一个删除线标签<s>(就是在文字中间加一条线)，后面是文字“主题市场”。
3，
< dd>标签内部就是一些超链接标签a组成。
三、有序列表
例子效果图如下：
源代码如下：
<!DOCTYPE html> <html> <body> <ol> <li>咖啡</li> <li>牛奶</li> <li>茶</li> </ol> <ol start="50"> <li>咖啡</li> <li>牛奶</li> <li>茶</li> </ol> </body> </html>
知识讲解：
1，
<ol>的英文为order list，意思是“有序列表”，默认在每项前面显示1,2,3…
<ol type="A">：在每项前面显示A，B，C…
<ol type="a">：在每项前面显示a，b，c…
<ol type="I">：在每项前面显示I，II，III…
不过这些都不多用。
2，
第二个有序列表ol增加了一个属性，<ol start="50">，这样就指定了起始值从50开始。
3，
每项使用<li></li>标签来表示。内部是显示内容。
写到这里，文章终于写完了，总共用了4个多小时，现在是凌晨1点40。本来今天是很累的，因为昨晚一夜没怎么睡着，不过这并不影响我的工作，上班的时间依旧精神抖擞，而且代码质量也比往常高一些，主要就是心态变化了吧。
明明知道，熬夜等于慢性自杀，但是，我们仍然在熬夜，送给所有奋斗中的程序员，注意早点休息。