HTML教程:无序列表

所属分类: 网页制作 / HTML/Xhtml 阅读数: 987
收藏 0 赞 0 分享

原文:http://andymao.com/andy/post/102.html
段落已经讲完了,那么一些基本的应用方式也讲了一些,那么是否已经应用了呢?当然应用可以更为丰富,那么这些就需要自己在实际工作中不断的摸索与思考,然后创新并总结得出新的应用形式。当然了段落不能当作万用膏药一样倒处使用,不过相信大家也都知道现在“DIV”这个标签的作用已经被扩大化了(POPO曾有一篇文章《<DIV>不是万能膏药》),更已经被一些人拿来与CSS一并说事。这里呢还是要重新强调一次:DIV只不过是HTML中的一个无语意标签,他可以用来布局或是作为无语意部分的处理,而CSS则是一种样式语言。名不正则言不顺,我这里不是古板,而是这种说法会让大家对于标准的理解会产生偏颇。基本的等级都弄不清楚,把标签功能无限放大,这些都不是一个正确的学习态度。我这里细细讲解各种标签以及用途其中一点也是希望大家正确理解WEB标准的意义。正确的说法应该是“xHTML CSS”或是“WEB标准”简称为“标准”也可以。今天不是为发牢骚的,还是讲今天的主题《无序列表》
列表,相信大家都已经用过了,Word里也有,很多文档编辑里也都有。而在HTML中的列表则有三种类型:无序列表、有序列表、定义列表。饭要一口口的吃,事要一件件的做,今天只讲无序列表,并且今天所讲的列表不会涉及到CSS的美化工作。说到这里大家应该也明白了,我的讲解都是分开来的,并不以样式美化为主,这也是要告诉大家标签代码非常重要。那么我们首先就要来理解列表。我们日常生活工作都是琐碎而没有条理的,而要想得到一个高效的友好的信息互通那么就要梳理信息,做好归类。这样才能有效传达信息。用列表把同类的内容进行简单的归纳,我认为这是列表的一个基本作用。常见的用途有:图书目录、饭店菜单、人员名单、待办事宜等等。而这些信息大多不是大篇的信息内容,而是简要的标题。当然列表的用途不是说只能是归纳标题信息,列表并没有去限制内容的多少。只是我们常用列表去归纳的多是些标题信息罢了。
那么我们又如何去理解无序列表呢?无序的对应就是有序,从字面上去理解就很容易,有序就是说他本身就标明了前后顺序的,这是严格的,并且这些信息本身就有着顺序特性。比如我们写操作步骤那就就需要明确第一步第二步,这样的信息必然是有序的,而无序呢?也就是说其本身就是无序的没有任何顺序可言。这里要举个实例让大家思考一下:政府部门的领导名单前后顺序是他们最头疼的事,虽然他们有时会写着排名不分先后,但是实际上依然是有排名的,那么这里我想提出问题:这样的名单应用有序列表还是用无序列表呢?当然这个没有标准答案,各人都有各人的思考方式,那么你是怎么想的?不妨在评论上留下你的想法。这里我就不说我是怎么想的,希望大家能多动动脑筋,多思考。
列表的标签形式是:
<ul>
<li>这就是列表的内容了</li>
<li>这就是列表的内容了</li>
<li>这就是列表的内容了</li>
<li>这就是列表的内容了</li>
</ul>

这里我们要注意到,列表有两个部分,一个是最外面的一个标签<ul></ul>,一个是里面的内容<li></li>。我们可以这样去理解,<li></li>是一个个标准化的小盒子,他们主要存放着列表信息,而<ul></ul>则是个大箱子,他的作用就是存放小盒子。这些一个个的小盒子只有放在大箱子里他们才不会弄丢了。整齐而有利于运输(移植)、存放(定位)。那么列表与段落一样可以有很多属性在其中,比如,我们可以为<ul></ul>设置一个id或是class或是title等属性,其特点功用与段落中的一样。而<li></li>也可以有这些属性,但是一般情况下来说列表即然是同类的一般也不作特殊化处理。
那么无序列表基本上也就算是讲完了,其实这篇最重要的内空就是什么样的信息应该用无序列表,而这些则需要在实际应用的时候多分析多思考。那么对于还没使用列表标签的朋友,开始使用列表标签,放弃用DIV代替列表标签的做法。或是用表格来表现列表的朋友也可以试着改变一下。从现在开始使用无序列表标签。当然如果你已经用了发现这样还不能满足你,那就等后面讲解如何用样式去开发出列表的潜力吧。今天讲的内容虽然比较简单,但是还是希望来读本篇文章的朋友可以思考一下上面我提出的问题。
更多精彩内容其他人还在看

Table相关整理及Javascript操作table,tr,td

很多人都有这种经历:当某个td中没有内容或者没有可见元素时,td的border也会消失。本文将给出解决方案,感兴趣的朋友可以了解下,或许本文对你有所帮助
收藏 0 赞 0 分享

td 内容自动换行 table表格td设置宽度后文字太多自动换行

table表格td设置宽度后文字太多导致自动换行,这是一个很常见的问题,或许很多的网友已经有了好的解决方法,如果依然有童鞋们不会的,可以参考下本文,可能会有意外的收获
收藏 0 赞 0 分享

html4和html5区别之如何在一个input上添加焦点实现代码

如何在一个input上添加焦点,有很多的实现方法,本文分别用html4和html5做了下演示,感兴趣的朋友可以参考下,或许本文对你有所帮助
收藏 0 赞 0 分享

纯css为select添加样式(无脚本)实现

改变select默认的样式,一般情路情况下通过ul,li来模拟来实现;Jquery插件也是这样,接下来介绍一种不写脚本,只用单纯的css来实现。在IE系列下,选中某个选项的时候会有背景色块,IE7-IE10都有此bug,感兴趣的朋友可以参考下啊
收藏 0 赞 0 分享

iframe的src赋值问题(服务器端)

frame的src赋值的问题,本文将进行详细探讨:服务器端的iframe重新src重新赋值,给iframe加一个ID,再加上runat=server,感兴趣的你可不要错过了哈
收藏 0 赞 0 分享

iframe的src设置为about:blank之后细节探讨

不设置为about:blank,内存不会释放掉。还必须用 iframe.document.write(''); 这样才能将内容清空,本文将详细探讨一下iframe的src设置为about:blank之后细节,感兴趣的你可不要错过了哈
收藏 0 赞 0 分享

无法定义IE6字体:13px大小无效,IE6自动显示更大的字体的解决方法

前些天调整网页一个模块的时候将页面字体的大小设置为13px大小了,由于当时用的是Chrome浏览器以及IE8,并没有发现原来font-size:13px在IE6下居然不听使唤总是自动显示为一个更大的大小,变现上又及其难看
收藏 0 赞 0 分享

为何html中嵌入mp4格式视频播放不了

只是在页面中加载了一个播放器的样子,各个按钮都不管用,不知道是哪个地方出了问题,很是郁闷,于是搜集整理下,拿出来和大家分享,希望可以帮助你们
收藏 0 赞 0 分享

如何把select下拉框的值传到id中实现代码

把select下拉框的值传到id中,是网友们比较在意的问题,本人搜索整理下,晒出来和大家分享
收藏 0 赞 0 分享

怎么把select下拉菜单里的文字设置成左右滚动效果

希望用marquee标签来设置字体滚动,代码是下面这样写的,但是没有效果,字体还是不会滚动,应该怎么来写,才会实现这个效果呢
收藏 0 赞 0 分享
查看更多