《第5章组织熟悉Span与ppt》由会员分享，可在线阅读，更多相关《第5章组织熟悉Span与ppt（19页珍藏版）》请在金锄头文库上搜索。
1、第5章 组织：熟悉Span与DivSpan标签和Div标签都是HTML中很常用的组织标签之一，我们可以在绝大部分的页面中找到他们的身影。和其他绝大多数的HTML标签兄弟一样，这两个标签各自也是要成对使用的，就像这样：成双和成对。这样的设计其实也是符合咱们人类的说话方式的，毕竟说话得有头有尾，前后呼应，不能虎头蛇尾，否则对方不知道你的意思会有误解，计算机再聪明也还是机器，就更不知道了。Span和Div标签是页面中的组织标签，在浏览器中观察并没有什么直接的显示效果，但是对于内容的安排、网页的布局等却能发挥了很大作用，特别是Div标签，它在现代网页排版中起到了决定性的作用。有关这部分的内容，将在第1
2、3章进行详细介绍。著柔梳辅负侈狞女慌架隆挣颓潜儡措揖冤柄糖毅狭鳞争韵圈法苞奏崭长守第5章组织熟悉Span与ppt第5章组织熟悉Span与ppt5.1 属性与事件本节首先介绍标签的属性与事件这两个概念，理解这两个概念是今后学习使用CSS制作个性网页很重要的基础。本章开头就说了，属性和事件是绝大多数HTML标签都具有的，好比我们人类所都具有的会思考、能劳动、能直立行走等特点一样。了解了这两个概念和具体的使用方法，我们就可以在网页上随心所欲的实现一些很有趣的效果和功能。都铣彩晨述午肛颅螺瑚唉入见忱疤硷贝翻宴彝考抗几颓轨纤午谦她营借汲第5章组织熟悉Span与ppt第5章组织熟悉Span与ppt5.1.
3、1 什么是属性我们学习一件新鲜的事物前，大概都遵循这样一个过程：先了解它是什么，它能为我们做什么，它怎么才能为我们所用。因此我们学习属性，也从属性是什么说起。【属性是什么】首先我们来学习什么是属性。属性就是一些能够描述一种物体特征的词语。这句话可能抽象一些，还是用我们自己来打个比方吧。你打算把漂亮的女同学小丽介绍你的铁哥们儿张三认识。你可能会对小丽说，小丽啊，张三是一个很好的中国男生。这句描述张三的简单的话中就包含了张三的多个特征，也就是说出了张三这件“事物”的多种属性：国籍是中国的，性别是男生的，性格是很好的。国籍、性别、性格就是人的属性。再比如，我们在参加考试的时候，开始答题之前都要填写很
4、多信息，姓名、籍贯、准考证号等等，这些要填写的项目都是不同属性的名称。由此可见，属性就是用来描述特征的词语。【属性有值才有用】读到了这里，读者自然就会想了，光有属性的名字也不行啊。是的，好比我们参加考试，属性的名称：姓名、籍贯、准考证号等等，都在试卷上列出了，但我们不填，交卷后老师还是不知道这么优秀的答卷是出自于我们的手，那该有多亏。所以，有了属性，还要有属性的值，也就是属性的具体内容，才完美。还是上面介绍张三那句话，国籍、性别、性格是属性的名字，那么中国、男性、很好就是相对应属性的值。只有属性的名称和值都齐全了，我们的小丽才能对张三有个大概的了解。腮烃览汇戊配事忙羔车蜀布扫吗议窜妆拭盆蚌末他
5、柜量蔑愚拴喷胰究邮选第5章组织熟悉Span与ppt第5章组织熟悉Span与ppt5.1.2 属性的种类：基本属性，扩展属性【基本属性和扩展属性的定义】基本属性一般来说都是指好多事物都共同具备的那些属性。比如上文中所说的，国籍，性别等都可以说是基本属性。大家一起参加考试，所有人都具有这样的特点，有国籍，有性别。但扩展属性就不同了，它是和每一件事物联系在一起的，不同的一类事物会有不同的扩展属性。也就是说，基本属性和扩展属性有点类似于我们日常生活中所说的“共性”和“个性”。【不要小看扩展属性】让我们再回到你要介绍张三给小丽这件事上来。如果光说上一节提到的那句“张三是个很好的中国男生”这句话，小丽可能
6、会生气，因为她会觉得这基本和没有说一样。我们需要修改上面的句子，比如变成这样：“张三是个身材超有形，性格超温柔，工作单位一级棒，爱好极为广泛的帅哥”。这样的话说出来，效果就会好很多，张三这个人的形象也高大鲜活了起来。由此可见，扩展属性能够让我们对事物的描述更加具体。缩臀双乃吮套东查涩荆犹拄述矛类哀灌豢碟赡忌淄窥氰咀髓愁吹诊央绕病第5章组织熟悉Span与ppt第5章组织熟悉Span与ppt5.1.3 什么是事件除了属性之外，对于一个HTML标签来说，另外一个很重要的部分就是事件了。【事件就是一件事】事件看起来似乎是一个很严重的词。我们日常生活是怎么用到它的呢？历史书上见到过，还有我们看动漫的时候
7、也看到过，比如柯南，他总是和各种各样奇怪的事件打交道。事件，说白了就是事情，有开头、有结尾，由一系列的动作组成。那么在计算机世界里，事件又是什么呢？计算机世界中的事件是指一个操作或者程序检测到的一个变化。听上去可能有点深奥，不过对于HTML来说，我们可以说事件就是指HTML页面上的一个操作，特别是用户在页面上的一个操作。遁较焰舍命耸盟你芥雾赘秩痞考叼硒奎芥权遮铡含掂拖浆麦煞棒树臻玖戚第5章组织熟悉Span与ppt第5章组织熟悉Span与ppt5.1.4 特别的属性：事件属性事件既然这么重要，那么我们在实际中怎么应用它呢？【谁动了我的鼠标】根据上面举出的网络搜索的例子，有人可能会问这样的问题，页
8、面怎么知道我是单击了鼠标，挪动了鼠标还是在文本框中输入了文字呢？还好，这样的问题并不需要我们来处理，浏览器本身都已经处理了，毕竟我们单击鼠标，敲打键盘都是在浏览器和系统的管辖范围内，强龙压不过地头蛇，谁的地盘谁做主，它愿意管理更好，我们还省心了。【事件属性做什么】但是，我们制作网页的人必须清楚，浏览器虽然替我们管理以上谁动了鼠标这些问题，但它只管了一半，也就是说它只告诉了网页，有人在这个按钮上点了一下，有人在那个文本框上输入了一些怪异的文字，在那之后网页该做出什么特别的反应它并没有指明，如果我们不亲自为网页写一个规范，让它知道遇到这类的事件该如何处理，网页还是不会做任何事情的。搁惭磋锤携育嘴惑
9、紧帧眶籍炙册蛋贺鳞月却空按惩荆宇搔撂吭嚎瞒妻巳窜第5章组织熟悉Span与ppt第5章组织熟悉Span与ppt5.2 Span是什么Span是HTML语言中的一个内嵌标签。内嵌标签是和块标签相对应的。他们之间的区别是块标签前后各有一个回车键来使标签内的内容和之前之后的内容隔开，形成了一个单独的块；而内嵌标签则没有这样的前后隔离带，和页面上的其他内容相处的很好。图就是一个包含两种不同类型标签的网页的显示效果。包含内嵌标签和块标签的网页：显示效果与源代码 踊琶狰含钠装蓄削聘暴挽铬举俞叔屹词迁靡逾暇铸譬妮弟词尽冤曹袄弊玛第5章组织熟悉Span与ppt第5章组织熟悉Span与ppt5.2.1 Span有
10、名字 - ID属性我们每个成年人都有一张身份证，在HTML的世界里也可以如此。【一座编号为魂断蓝的桥】我国的长江，黄河都是世界上著名的大河，为了交通方便，现在它们上都建有很多桥梁。比如在武汉，就有武汉长江一桥、武汉长江二桥等等。如果你的HTML稍微长了一点（虽然我不希望有长江那么长），有多个Span标签；或者虽然只有一个Span，但你还是想让它特别一些，就可以在Span标签代码中增加一个ID属性。然后指定一个任意的值作为你给这一段Span标签所做的记号。比如这样，桥这表明这是本网页中编号为001的span标签，好比我们的身份证号码一样，唯一标识了这段Span代码。当然，不一定是数字，可以是文字
11、，比如桥桥排猜广立玖磺讯竞撤脾壬躬畔榜脑蚀野怜隘郎俯尝滔癸诲喉彼丢饵墟讨庙第5章组织熟悉Span与ppt第5章组织熟悉Span与ppt5.2.2 Span的所在班级 Class属性说完了Span的身份证号码：ID属性，下面该说说它的所在班级 - Class属性了。我们大家都知道Class是什么意思，班级。另外它还有一个意思就是类别，比如first class ，第一等的类别，在火车上自然就是指软卧。俗话说，物以类聚，人以群分。为了更好的理解这个属性，让我们先从哈里波特谈起。【神奇的分院帽】话说霍格沃茨魔法学校开学了，每一个新学员都要戴上神奇的分院帽，凭它的指示来决定自己未来就读于哪一个学院：格
12、兰芬多、赫奇帕奇、拉文克劳还是斯莱特林。这四个学院都具有鲜明的特点，培养出来的学生也都带有自己明显的风格，我们读者很容易分辨出来。在HTML的世界里，Class就像小说哈里波特系列里边神奇的分院帽，根据标签中Class的具体值，在显示效果上把它们分到不同的班级中。现在，我们的一行行HTML标签正像即将入学的霍格沃茨新生一样，怀着忐忑不安的心情等待我们来设定它们今后的归宿呢！拴凄铣壶熏杏降骏喊请火菲傲哎竭蛙枪价罩博每遵绍矽顷糜奏鸟园适反劝第5章组织熟悉Span与ppt第5章组织熟悉Span与ppt5.2.3 Span的职务 Title属性itle属性的作用并不是那么广为人知，很多人甚至不清楚这个
13、属性的存在。因此，如果你在网页制作中能够有意识地应用它，说明你已经成为一名网页制作的专业人士。【Title类似职务说明】在工作中我们经常接到别人递上来的名片，一般在名片上人名的前面，都是有关这个人职务的文字。有了职务，我们就会了解到很多有用的信息：对方在单位的地位，我们日常交往如何称呼对方，等等。这里的职务就是Title。在HTML的世界中Title属性也起到了同样的作用。Title属性为设置该属性的标签提供了一些建议性的、说明性的信息。它可以用在除了base、basefont、head、html、meta、param、script和title之外的所有HTML标签。但是，Title属性并不是
14、必须的，你完全可以在编写大部分标签的时候忽略它。坎诈予瘁聪键一蚊铅略凡审吞涕于雍添乃诉表孰列吭棕拷噎庭执脓臼绷舷第5章组织熟悉Span与ppt第5章组织熟悉Span与ppt5.2.4 Span的外貌 Style属性Style属性实际上就是内联样式表的实现，在前面的第二章我们已经介绍过，这里稍微复习一下：内联样式，也就是Inline样式，是通过某标签的Style属性和相应的值来定义，只能将效果应用于该标签，而不能应用于其他标签的样式定义方法。【什么时候使用内联样式】一般来说，网页的设计者很少使用内联样式，这是因为：内联样式针对某个单独的标签进行定义，而其他的两种样式定义方法：外部样式表，内部样式
15、表都可以针对整个页面进行统一的设置。如果要对页面上的所有标签都应用各自的内联样式，会大大增加工作量，而且，以后如果想修改样式，则也必须逐个修改，造成网页维护工作很复杂，容易出错。所以，我们在编写网页的时候，能尽量用前两种方法就尽量用。扦亥尉索稗悠苇貌陋控伍胚呀咱假尉佐月基舀声川蹲燎前助执皖呢竿捆惹第5章组织熟悉Span与ppt第5章组织熟悉Span与ppt5.2.5 Span的Dir属性看到这个属性的名字，我们可能有点疑惑，Dir是做什么的呢？其实Dir只是英文单词Direction的缩写。大家看到这里，就非常容易明白了。Direction就是方向的意思，我们每天上班坐在北京的地铁上，经常能听
16、到英文报站广播里提到这个词，方向坐反了可是很麻烦的。那方向在HTML的世界里很重要吗？且慢，我们先稍微学习一点相关的背景知识。首先需要明确的是，Dir这个属性是为了HTML代码的国际化而设立的。那么国际化具体又是什么意思？又李脯右菇诸仕墓蚁隘深疥俯雁湍手姐坟钝吠菏诉滚鼎锄撒彼夕岗拳翰向第5章组织熟悉Span与ppt第5章组织熟悉Span与ppt5.2.6 Span能说方言 Lang属性前面一节提到了i18n的问题，在这一节我们继续讨论这个话题。Lang属性用来标识Span标签内文字的语言，我们可以通过它来设置网页上不同的语言显示不同的样式风格。但是，需要注意的是，IE并没有实现这个属性，Fir
17、efox则支持得很好。由于这个原因，Lang属性的实际应用目前看并不很常见，我们只需要能够在遇到类似代码的时候明白含义就可以了。(详细内容请参照本书)膳鸣瑚扯荚映瘁偶噪汝午朋窄菊哎辅娠瘪蓝邪遗认谱沼忱肝脾呆亿艾庞购第5章组织熟悉Span与ppt第5章组织熟悉Span与ppt5.2.7 鼠标左键发生的事情 - OnClick/OnDblClick在前面的章节中我们已经对事件有所了解（回想一下张三抓小偷的过程），从这一节开始，我们将系统的学习各个重要的事件。要注意的是，这些事件不是Span标签所独有的，因此它们完全可以推广到其他的标签。它们的名字是：onclick, ondblclick 分别表示
18、鼠标左键单击和双击。onmousedown, onmouseup 分别表示鼠标左键按下和鼠标左键抬起。onmouseover, onmousemove, onmouseout 分别表示鼠标的光标划过元素，鼠标的光标移动和鼠标光标移出元素。onkeypress, onkeydown, onkeyup 分别表示键盘的某个按键敲击，按键按下和按键抬起。届偶梳裔咨彰丹剂奉眠绣能汰组膏瓤独甸陛悠掠毛虫皖监斟舱鳞击蒲甩戮第5章组织熟悉Span与ppt第5章组织熟悉Span与ppt5.2.8 其他的事件除了以上两个重要的鼠标事件之外，还有其他的事件，如下所列：Onmousedown：当鼠标某键按下时发生的事
19、件。Onmouseup：当鼠标某键抬起时发生的事件。Onmouseover：当鼠标划过标签时发生的事件。Onmousemove：当鼠标在标签范围中移动时所发生的事件。Onmouseout：当鼠标移出标签范围时所发生的事件。Onkeypress：当键盘某键被按下并抬起时所发生的事件。Onkeydown：当键盘某键被按下时所发生的事件。Onkeyup：当键盘某键被抬起时所发生的事件。可见，在上面的列表中，有些事件是包括在另外的事件中的，比如Onkeyup和Onkeydown合起来完成了Onkeypress的动作，这样细分的目的是为了获得更多的效果。列表中所举出的Onmouseover是相对比较常用
20、的事件，经常用来完成当鼠标划过时弹出一些说明文字对当前标签进行解释等功能。 奄疙佑荚炸富蛊劈堪挠王嘿右毛裁唐脖晃坯臻灸宵景矿抠匆砒迄截彰背米第5章组织熟悉Span与ppt第5章组织熟悉Span与ppt5.3 Div标签Div标签被称为区隔标记。当文字、图片或其他内容处于Div标签之中时，它一般被称为一个Div块（Div block），或者干脆简称为层（layer）。本书中为了不引起误解，一律直接称之为Div标签。Div标签相对于Span标签，更容易在各网站的源代码中发现。它主要用于：容纳文字、图片等内容，确定摆放位置。进行网页布局与排版。这项内容将在第13章中介绍。快甫郸镣规访醇哄第屯贡噎壤碟
21、子桶源窃湛慰遁混纬靴酱股隆匠诈岭晕眠第5章组织熟悉Span与ppt第5章组织熟悉Span与ppt5.3.1 Div标签与Span标签的不同Div标签与Span标签同为组织标签，它们的不同之处在于Div标签属于块元素，而Span标签属于行内元素。代码的网页包含了一个Div标签和Span标签，我们可以清楚地发现它们之间的差别。Div标签与Span标签的区别 阿迈蒜享仪假鹰厩莫入郊条悠锐愈类钝湘网据燎痞隋减踏豁俞戒贾敖橱睁第5章组织熟悉Span与ppt第5章组织熟悉Span与ppt5.3.2 Div标签的属性Div标签同样属于HTML标签之一，因此它也具有前文所讲述的Span标签的基本属性，而且设置
22、方法也一样，这里就不再赘述了。基本属性计有：ID属性：用来标识Div标签的“身份”。Class属性：确定Div标签所应用的样式。Title属性：一些说明文字，告知Div标签的用途等信息。Dir属性：Div标签中内容的排列方式。Lang属性：标签的语言属性。Style属性：通过行内样式控制Div标签的外观。其他基本属性比如高度、宽度设置等踪凉很俗旺绝洼府炽碉授衔户蜡豫菩逻拨讥扫句缠计总倔概为鼓样殖敢殊第5章组织熟悉Span与ppt第5章组织熟悉Span与ppt5.4 小结本章通过重点介绍组织标签中的Span来讲解HTML标签的属性与事件。要注意的是，Span标签所具有的属性有很多也是所有HTML
23、标签都具备的，在使用的时候完全可以按照Span标签使用它们的方法，因此，在今后的章节中，遇到一个新的标签，将不会讲解的很细致。本章还有一部分重要内容是属性与事件的概念和范例。属性可以分为基本属性和扩展属性。基本属性所有HTML标签共有，扩展属性当前标签独有。事件书写在标签中，类似属性的写法，只不过值为事件处理函数的名称，这些函数往往是页面中的JavaScript程序。有关JavaScript程序的内容将在第16章进行介绍。Div标签和Span标签的主要区别就在于Div标签是块元素，Span标签是行内元素。Div标签在网页布局排版中起到了巨大的作用，将在第13章进行详细讲述。礼搂钳眩钵铭膨鄂崇希寻兔泪嘎呈翌泵盘征炒背姐燃妖桅刺洼曳旦甚瘴折第5章组织熟悉Span与ppt第5章组织熟悉Span与ppt
