HTML教程:无序列表

所属分类: 网页制作 / HTML/Xhtml 阅读数: 944
收藏 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代替列表标签的做法。或是用表格来表现列表的朋友也可以试着改变一下。从现在开始使用无序列表标签。当然如果你已经用了发现这样还不能满足你,那就等后面讲解如何用样式去开发出列表的潜力吧。今天讲的内容虽然比较简单,但是还是希望来读本篇文章的朋友可以思考一下上面我提出的问题。
更多精彩内容其他人还在看

网页注释在IE中产生文字溢出

实验代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transiti
收藏 0 赞 0 分享

HTML教程:定义列表

原文:http://andymao.com/andy/post/104.html 上一节:有序列表 写完“无序列表”和“有序列表”之后已经有人和我说这两篇看得没什么意思。这两篇文章如果只以单向读取的形式阅读那么的确是没什
收藏 0 赞 0 分享

HTML教程:有序列表

原文:http://andymao.com/andy/post/103.html 上一节:无序列表 信息有时候是无序归纳的,有的却有着明确的顺序,在上一篇也提到了。那么简单的来想一下身边有哪些事物是有先后顺序的:操作步骤、排行榜、书目录……
收藏 0 赞 0 分享

HTML教程:无序列表

原文:http://andymao.com/andy/post/102.html 段落已经讲完了,那么一些基本的应用方式也讲了一些,那么是否已经应用了呢?当然应用可以更为丰富,那么这些就需要自己在实际工作中不断的摸索与思考,然后创新并总结得出新的应用形式。当然了段落不能当作
收藏 0 赞 0 分享

HTML网页制作的强大8条技巧

  虽然现在有许多网页制作工具能让您轻松地完成工作,但如果使用HTML则可以得到更大控制权,下面介绍几个小技巧。   1。使用<tt>,<i>,<br>语句来控制文字排版比用<pre>好得多。 如: <tt>实用
收藏 0 赞 0 分享

网页表格分割线去除方法

网页表格分割线去除方法。 其实上面的三个表格都有三行三列,隐藏分隔线的诀窍在于rules,察看这三个表格的源代码,我们可以看到<TABLE>标签中都有rules。它有三个参数(cols,rows,none),当rules=cols时,表格会隐藏纵向的分隔线,这
收藏 0 赞 0 分享

blockquote标记应用注意

关于语义化,不是一句两句就能说明白的,而且现在也没有一个官方的很严格的定义。关于<blockquote>没有争议的是: 1.引用一段较长的文字 2.可以使用cite标签或者属性 问题是<blockquote>引用的文字必须使用块级元素将他
收藏 0 赞 0 分享

网页表格表框制作技巧

网页表格表框制作技巧。 -------------------------------------------------------------------------------- 表格边框的显示与隐藏,是可以用frame参数来控制的。请注意它只控制表格的边框图,而不
收藏 0 赞 0 分享

HTML其实就是学习几个重要标记的应用

《这将是一场革命》一文出来以后。得到业界大伙的认同,当然与此同时也得到部分来自内部与外部的挑衅,不过的更加多的是更多人来寻问每一个点的细节。今晚回家很早就睡了,半夜在一个梦中醒来,梦里正在和小学的同学玩一个游戏——“The Next&rdquo
收藏 0 赞 0 分享

移动端专用的meta标签设置大全

不知道有没有人觉得,html的meta标签描述的头部信息特别多,下面这篇文章主要给大家分享介绍了关于移动端专用的meta设置的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面随着小编来一起学习学习吧
收藏 0 赞 0 分享
查看更多