第5章 组织：熟悉Span与.ppt

第5章组织 熟悉Span与Div Span标签和Div标签都是HTML中很常用的组织标签之一 我们可以在绝大部分的页面中找到他们的身影 和其他绝大多数的HTML标签兄弟一样 这两个标签各自也是要成对使用的 就像这样 成双和成对 这样的设计其实也是符合咱们人类的说话方式的 毕竟说话得有头有尾 前后呼应 不能虎头蛇尾 否则对方不知道你的意思会有误解 计算机再聪明也还是机器 就更不知道了 Span和Div标签是页面中的组织标签 在浏览器中观察并没有什么直接的显示效果 但是对于内容的安排 网页的布局等却能发挥了很大作用 特别是Div标签 它在现代网页排版中起到了决定性的作用 有关这部分的内容 将在第13章进行详细介绍 5 1属性与事件 本节首先介绍标签的属性与事件这两个概念 理解这两个概念是今后学习使用CSS制作个性网页很重要的基础 本章开头就说了 属性和事件是绝大多数HTML标签都具有的 好比我们人类所都具有的会思考 能劳动 能直立行走等特点一样 了解了这两个概念和具体的使用方法 我们就可以在网页上随心所欲的实现一些很有趣的效果和功能 5 1 1什么是属性 我们学习一件新鲜的事物前 大概都遵循这样一个过程 先了解它是什么 它能为我们做什么 它怎么才能为我们所用 因此我们学习属性 也从属性是什么说起 属性是什么 首先我们来学习什么是属性 属性就是一些能够描述一种物体特征的词语 这句话可能抽象一些 还是用我们自己来打个比方吧 你打算把漂亮的女同学小丽介绍你的铁哥们儿张三认识 你可能会对小丽说 小丽啊 张三是一个很好的中国男生 这句描述张三的简单的话中就包含了张三的多个特征 也就是说出了张三这件 事物 的多种属性 国籍是中国的 性别是男生的 性格是很好的 国籍 性别 性格就是人的属性 再比如 我们在参加考试的时候 开始答题之前都要填写很多信息 姓名 籍贯 准考证号等等 这些要填写的项目都是不同属性的名称 由此可见 属性就是用来描述特征的词语 属性有值才有用 读到了这里 读者自然就会想了 光有属性的名字也不行啊 是的 好比我们参加考试 属性的名称 姓名 籍贯 准考证号等等 都在试卷上列出了 但我们不填 交卷后老师还是不知道这么优秀的答卷是出自于我们的手 那该有多亏 所以 有了属性 还要有属性的值 也就是属性的具体内容 才完美 还是上面介绍张三那句话 国籍 性别 性格是属性的名字 那么中国 男性 很好就是相对应属性的值 只有属性的名称和值都齐全了 我们的小丽才能对张三有个大概的了解 5 1 2属性的种类 基本属性 扩展属性 基本属性和扩展属性的定义 基本属性一般来说都是指好多事物都共同具备的那些属性 比如上文中所说的 国籍 性别等都可以说是基本属性 大家一起参加考试 所有人都具有这样的特点 有国籍 有性别 但扩展属性就不同了 它是和每一件事物联系在一起的 不同的一类事物会有不同的扩展属性 也就是说 基本属性和扩展属性有点类似于我们日常生活中所说的 共性 和 个性 不要小看扩展属性 让我们再回到你要介绍张三给小丽这件事上来 如果光说上一节提到的那句 张三是个很好的中国男生 这句话 小丽可能会生气 因为她会觉得这基本和没有说一样 我们需要修改上面的句子 比如变成这样 张三是个身材超有形 性格超温柔 工作单位一级棒 爱好极为广泛的帅哥 这样的话说出来 效果就会好很多 张三这个人的形象也高大鲜活了起来 由此可见 扩展属性能够让我们对事物的描述更加具体 5 1 3什么是事件 除了属性之外 对于一个HTML标签来说 另外一个很重要的部分就是事件了 事件就是一件事 事件看起来似乎是一个很严重的词 我们日常生活是怎么用到它的呢 历史书上见到过 还有我们看动漫的时候也看到过 比如柯南 他总是和各种各样奇怪的事件打交道 事件 说白了就是事情 有开头 有结尾 由一系列的动作组成 那么在计算机世界里 事件又是什么呢 计算机世界中的事件是指一个操作或者程序检测到的一个变化 听上去可能有点深奥 不过对于HTML来说 我们可以说事件就是指HTML页面上的一个操作 特别是用户在页面上的一个操作 5 1 4特别的属性 事件属性 事件既然这么重要 那么我们在实际中怎么应用它呢 谁动了我的鼠标 根据上面举出的网络搜索的例子 有人可能会问这样的问题 页面怎么知道我是单击了鼠标 挪动了鼠标还是在文本框中输入了文字呢 还好 这样的问题并不需要我们来处理 浏览器本身都已经处理了 毕竟我们单击鼠标 敲打键盘都是在浏览器和系统的管辖范围内 强龙压不过地头蛇 谁的地盘谁做主 它愿意管理更好 我们还省心了 事件属性做什么 但是 我们制作网页的人必须清楚 浏览器虽然替我们管理以上谁动了鼠标这些问题 但它只管了一半 也就是说它只告诉了网页 有人在这个按钮上点了一下 有人在那个文本框上输入了一些怪异的文字 在那之后网页该做出什么特别的反应它并没有指明 如果我们不亲自为网页写一个规范 让它知道遇到这类的事件该如何处理 网页还是不会做任何事情的 5 2Span是什么 Span是HTML语言中的一个内嵌标签 内嵌标签是和块标签相对应的 他们之间的区别是块标签前后各有一个回车键来使标签内的内容和之前之后的内容隔开 形成了一个单独的块 而内嵌标签则没有这样的前后隔离带 和页面上的其他内容相处的很好 图就是一个包含两种不同类型标签的网页的显示效果 包含内嵌标签和块标签的网页 显示效果与源代码 5 2 1Span有名字 ID属性 我们每个成年人都有一张身份证 在HTML的世界里也可以如此 一座编号为魂断蓝的桥 我国的长江 黄河都是世界上著名的大河 为了交通方便 现在它们上都建有很多桥梁 比如在武汉 就有武汉长江一桥 武汉长江二桥等等 如果你的HTML稍微长了一点 虽然我不希望有长江那么长 有多个Span标签 或者虽然只有一个Span 但你还是想让它特别一些 就可以在Span标签代码中增加一个ID属性 然后指定一个任意的值作为你给这一段Span标签所做的记号 比如这样 桥这表明这是本网页中编号为001的span标签 好比我们的身份证号码一样 唯一标识了这段Span代码 当然 不一定是数字 可以是文字 比如桥桥 5 2 2Span的所在班级 Class属性 说完了Span的身份证号码 ID属性 下面该说说它的所在班级 Class属性了 我们大家都知道Class是什么意思 班级 另外它还有一个意思就是类别 比如firstclass 第一等的类别 在火车上自然就是指软卧 俗话说 物以类聚 人以群分 为了更好的理解这个属性 让我们先从 哈里 波特 谈起 神奇的分院帽 话说霍格沃茨魔法学校开学了 每一个新学员都要戴上神奇的分院帽 凭它的指示来决定自己未来就读于哪一个学院 格兰芬多 赫奇帕奇 拉文克劳还是斯莱特林 这四个学院都具有鲜明的特点 培养出来的学生也都带有自己明显的风格 我们读者很容易分辨出来 在HTML的世界里 Class就像小说 哈里 波特 系列里边神奇的分院帽 根据标签中Class的具体值 在显示效果上把它们分到不同的班级中 现在 我们的一行行HTML标签正像即将入学的霍格沃茨新生一样 怀着忐忑不安的心情等待我们来设定它们今后的归宿呢 5 2 3Span的职务 Title属性 itle属性的作用并不是那么广为人知 很多人甚至不清楚这个属性的存在 因此 如果你在网页制作中能够有意识地应用它 说明你已经成为一名网页制作的专业人士 Title类似职务说明 在工作中我们经常接到别人递上来的名片 一般在名片上人名的前面 都是有关这个人职务的文字 有了职务 我们就会了解到很多有用的信息 对方在单位的地位 我们日常交往如何称呼对方 等等 这里的职务就是Title 在HTML的世界中Title属性也起到了同样的作用 Title属性为设置该属性的标签提供了一些建议性的 说明性的信息 它可以用在除了base basefont head html meta param script和title之外的所有HTML标签 但是 Title属性并不是必须的 你完全可以在编写大部分标签的时候忽略它 5 2 4Span的外貌 Style属性 Style属性实际上就是内联样式表的实现 在前面的第二章我们已经介绍过 这里稍微复习一下 内联样式 也就是Inline样式 是通过某标签的Style属性和相应的值来定义 只能将效果应用于该标签 而不能应用于其他标签的样式定义方法 什么时候使用内联样式 一般来说 网页的设计者很少使用内联样式 这是因为 内联样式针对某个单独的标签进行定义 而其他的两种样式定义方法 外部样式表 内部样式表都可以针对整个页面进行统一的设置 如果要对页面上的所有标签都应用各自的内联样式 会大大增加工作量 而且 以后如果想修改样式 则也必须逐个修改 造成网页维护工作很复杂 容易出错 所以 我们在编写网页的时候 能尽量用前两种方法就尽量用 5 2 5Span的Dir属性 看到这个属性的名字 我们可能有点疑惑 Dir是做什么的呢 其实Dir只是英文单词Direction的缩写 大家看到这里 就非常容易明白了 Direction就是方向的意思 我们每天上班坐在北京的地铁上 经常能听到英文报站广播里提到这个词 方向坐反了可是很麻烦的 那方向在HTML的世界里很重要吗 且慢 我们先稍微学习一点相关的背景知识 首先需要明确的是 Dir这个属性是为了HTML代码的国际化而设立的 那么国际化具体又是什么意思 5 2 6Span能说方言 Lang属性 前面一节提到了i18n的问题 在这一节我们继续讨论这个话题 Lang属性用来标识Span标签内文字的语言 我们可以通过它来设置网页上不同的语言显示不同的样式风格 但是 需要注意的是 IE并没有实现这个属性 Firefox则支持得很好 由于这个原因 Lang属性的实际应用目前看并不很常见 我们只需要能够在遇到类似代码的时候明白含义就可以了 详细内容请参照本书 5 2 7鼠标左键发生的事情 OnClick OnDblClick 在前面的章节中我们已经对事件有所了解 回想一下张三抓小偷的过程 从这一节开始 我们将系统的学习各个重要的事件 要注意的是 这些事件不是Span标签所独有的 因此它们完全可以推广到其他的标签 它们的名字是 onclick ondblclick分别表示鼠标左键单击和双击 onmousedown onmouseup分别表示鼠标左键按下和鼠标左键抬起 onmouseover onmousemove onmouseout分别表示鼠标的光标划过元素 鼠标的光标移动和鼠标光标移出元素 onkeypress onkeydown onkeyup分别表示键盘的某个按键敲击 按键按下和按键抬起 5 2 8其他的事件 除了以上两个重要的鼠标事件之外 还有其他的事件 如下所列 Onmousedown 当鼠标某键按下时发生的事件 Onmouseup 当鼠标某键抬起时发生的事件 Onmouseover 当鼠标划过标签时发生的事件 Onmousemove 当鼠标在标签范围中移动时所发生的事件 Onmouseout 当鼠标移出标签范围时所发生的事件 Onkeypress 当键盘某键被按下并抬起时所发生的事件 Onkeydown 当键盘某键被按下时所发生的事件 Onkeyup 当键盘某键被抬起时所发生的事件 可见 在上面的列表中 有些事件是包括在另外的事件中的 比如Onkeyup和Onkeydown合起来完成了Onkeypress的动作 这样细分的目的是为了获得更多的效果 列表中所举出的Onmouseover是相对比较常用的事件 经常用来完成当鼠标划过时弹出一些说明文字对当前标签进行解释等功能 5 3Div标签 Div标签被称为区隔标记 当文字 图片或其他内容处于Div标签之中时 它一般被称为一个Div块 Divblock 或者干脆简称为层 layer 本书中为了不引起误解 一律直接称之为Div标签 Div标签相对于Span标签 更容易在各网站的源代码中发现 它主要用于 容纳文字 图片等内容 确定摆放位置 进行网页布局与排版 这项内容将在第13章中介绍 5 3 1Div标签与Span标签的不同 Div标签与Span标签同为组织标签 它们的不同之处在于Div标签属于块元素 而Span标签属于行内元素 代码的网页包含了一个Div标签和Span标签 我们可以清楚地发现它们之间的差别 Div标签与Span标签的区别 5 3 2Div标签的属性 Div标签同样属于HTML标签之一 因此它也具有前文所讲述的Span标签的基本属性 而且设置方法也一样 这里就不再赘述了 基本属性计有 ID属性 用来标识Div标签的 身份 Class属性 确定Div标签所应用的样式 Title属性 一些说明文字 告知Div标签的用途等信息 Dir属性 Div标签中内容的排列方式 Lang属性 标签的语言属性 Style属性 通过行内样式控制Div标签的外观 其他基本属性比如高度 宽度设置等 5 4小结 本章通过重点介绍组织标签中的Span来讲解HTML标签的属性与事件 要注意的是 Span标签所具有的属性有很多也是所有HTML标签