第2章 文字、图片和超链接

单击此处母版标题样式,单击此处编辑母版文本样式,第二级,第三级,#,第二章,文字、图片和超链接,课程回顾,上次课我们主要讲了：,HTML,的基本组成,HTML,的语法规范,HTML,的工作原理,2,本章节授课目标,掌握文字的排版技巧及常用标签的使用,掌握图片标签及图片在网页中的应用,Web,技术中的访问路径,掌握超链接的使用技巧,3,第,一,节,文字的排版技巧及常用标签的使用,常用的文字排版标签,上一章制作的网页，我们内容是写在,body,内的，实际上,body,本身就是一个标签，用于输出页面里面所有的内容,为了更好的对内容进行排版，使网站看起来更具逻辑性，我们要用到以下标签：,层标签：, div,标签是级别最高的标签，仅次于,body,主要用于对页面进行布局，较少的用于定义纯文字内容，除非该内容不必再用其他标签包裹,5,用,div,标签来布局页面,6,常用的文字排版标签,标题标签：,，不仅有字号大小和粗体的区分，还有级别划分，,h1,为最重要、,h2,为次重要，以此类推。,hn,系列标签级别仅次于,div,段落标签：,（块元素里面级别最小，里面不能放任何块元素）,区域标签：, span,标签是最常用的文字标签，通常文字的样式效果处理，都会附加在,span,标签的,style,属性里,列表标签,：用于定义文档中的列表（非数据列表），以单列形式呈现，可分为有序列表和无序列表。,有序列表：,无序列表：,无论是有序列表还是无序列表，都以,标签作为行显示,7,常用的文字排版标签,定义列表标签,：通常用于定义数据量较小的数据列表。（没有什么特别之处，但是电子商务发展了之后很多产品展示都用这个标签来写）,表体：,表项：,表内容：,文字格式化标签,：所谓文字格式化，即对文字的展示效果做一定的处理,下标：,上标：,重点描述：,输出斜体,加重语气：,输出粗体,(,语气相对于,em,有加重,),8,综合标签实例,综合标签实例代码,提示：,标签，超级链接 图片标签,不建议被使用的文字排版标签,由于有些文字样式是可以通过,CSS,样式来控制的，所以以下标签不建议被使用,换行标签：,换行标签的意义相当于在文件内部强制制造换行,粗体：,斜体：,下划线：下划线标签,已经被废除掉，通常用,css,来实现下划线效果,删除线：,大号字：,可用于文字间突然放大的部分，不必再为此处单写样式,小号字：,可用于文字间突然缩小的部分，意义同上,11,小结,有问题吗？,12,第二节,HTML,中的图片,图片的控制,图片标签：,图片元素属于自结束元素，因此不需要,来结束,图片标签与其他标签不同，它有两个必须添加的属性,src,和,alt,src,：图片的加载路径，可以是绝对路径，也可以是相对路径,alt,：图片的代替文本,可选属性：,width,、,height,、,usemap,usemap,将图像定义为客户端图像映射，,usemap,属性与,map,元素的,name,属性相关联，它建立了图像与映射之间的关系,14,图片的尺寸控制,宽度：,width,可填写像素值或百分比值,高度：,height,可填写像素值或百分比值,15,注,1,：在标签属性里定义图片尺寸时，如填像素值，只需填写数值，不必填写单位；如填写百分比值，需要带,%,注,2,：,width,和,height,可只填写其中之一，图片将以设定属性值按等比例缩放,图片映射,所谓图象映射是指一个图片上的不同位置被指定了不同的超级链接；点击图片的不同位置会打开不同的超级链接目标。这与将图片置入标签,内有本质的区别,图象映射由标签,定义,有一个基本属性是,name,。,Name,给图象映射命名，这个命名将会被,元素用,usemap,属性引用。所以，图象上的图象映射实际上是对,定义的映射的一个引用,在定义图象映射时，可以定义三种形状的映射：,circle(,圆形,),、,rect(,矩形,rectangle),、,poly(,多边形,),16,图片映射,代码：,代码中的,标签，定义映射中的区域，当我们的鼠标点击到映射时，可以看到这个形状的边缘,17,图片映射实例,在背景中使用图片,在网页中使用图片，除了可以使用标签,外，我们还可以通过为其他元素定义背景图的方式来使图片显示在网页中，并且在大多数时候，我们就是这么做的。,通过标签的,style,属性，我们可以通过,css,的方式为元素增加背景图,19,background:url(./images/bg.jpg),注意事项,图片的格式：在网页中，可以使用很多种图片格式，通常我们选择,GIF,，,JPG,，,PNG,这三种格式。,Gif:Gif,图片在网页中可以呈透明效果，即图片如果无背景，那么在页面中这张图的透明部分会成镂空效果显示,Jpg,：图片通常较大，如非图片效果要求较高，尽量不要使用,Png: Png,图片在网页中也可以以透明形式显示，除了,IE6,，在,IE6,下，,Png,图片的透明部分成蓝灰色背景,图片的对齐方式,图片在被载入的时候，会根据高度撑开它所在行的行高，这会造成一种现象，就是当文字与图片同时出现时，文字会与图片的底边对齐,20,小结,有问题吗？,21,第三节,Web,技术中的访问路径,Web,技术中的访问路径,路径分为绝对路径和相对路径,绝对路径, bujianduanicon.png,定位同一个网站（同一个域名）中的网页或资源很少用绝对路径，因为书写麻烦，重复部分太多，假如网站更换域名，那么路径上所有包含域名的地方都要替换,23,Web,技术中的访问路径,相对路径,（常用于定位同一网站、同一域名下的网页或资源）,参照物：相对网站根目录、相对文档,相对网站根目录路径写法：在被访问的网页或资源路径前加上“,/,”,表示网站根目录,相对文档路径，不同位置的网页访问同一网页或资源，其相对路径也不同。写法：“,./,”表示向上一级目录,24,/img/baidu_sylogo1.gif,Web,技术中的访问路径,相对文档路径,index2.html,中的路径：,index3.html,中的路径：,index4.html,中的路径：,index5.html,中的路径：,相对网站根目录的路径：,25,./test/index.html,test/index.html,index.html,./index.html,/,test/index.html,第四节,神奇的超链接,神奇的超链接,超链接标签：,标签通常会被用于超链接，如：,标签有两个常用属性,href,和,title,如果,href,属性留空，跳转会默认为站点根目录,如果不设定,href,属性，则,会被当做普通标签使用,如果想使用,标签，却又不希望它跳转，可在,href,属性中写,#,我们还可以使用,标签，通过锚点的方式跳转到当前页面的某一屏,27,我是一个超链接,锚点,锚点的目标，同样是一个,标签,的,id,或者,name,属性，是在连接中使用的“钩子”,锚点的特点：,1.,通常情况下，在跳转以后，锚点的位置会出现在屏幕的最上端,2.,如果锚点位置以下的空间不足一屏，则以屏幕下边缘为准,3.,通常我们希望浏览者打开页面时直接能看到我们希望他看到的内容，就可以使用锚点来实现，在跨页面的跳转中，同样可以使用锚点,28,超链接,锚点,29,A,B,C,D,E,F,G,A,A,内容,B,B,内容,C,C,内容,D,D,内容,E,E,内容,F,F,内容,G,G,内容,跳转方式,跳转方式：,最简单的解释就是说我们要连接到的地址，是通过什么方式打开的。,Target,：,跳转方式是通过,标签的,target,属性决定的，在这里，我们可以有,4,种选择,_self,：默认方式，直接在当前页面打开目标连接,_blank,：在新窗口中打开目标连接,_parent,：在父窗口中打开新连接,_top,：在顶层窗口打开新连接,30,访问状态,超链接作为一种可以提供交互功能的元素，它具有,4,种不同的状态：,普通状态,(link),页面第一次加载或者被重新加载时，我们所看到的超链接的状态,鼠标悬浮,(hover),当鼠标悬浮到超链接上的状态,访问中,(action),超链接被访问，鼠标被按下还未抬起时（焦点还未离开时）的状态,访问后,(visited),超链接被访问，鼠标抬起时（鼠标离开时（不支持）的状态,31,特别提示,任何,HTML,元素，除了“属性”之外，还会有一个“事件”特性,事件就是我们对元素所执行的操作，如：点击鼠标，按下键盘等。,在超链接执行跳转的时候，同时执行了以下几个事件：,1.,鼠标悬浮；,2.,获得焦点；,3.,鼠标点击；,(4.,失去焦点,),技巧,1,：我们可以通过鼠标点击事件来完成,标签的绝对不跳转。,技巧,2,：我们可以通过鼠标悬浮事件，来完成鼠标悬浮的图片切换,32,注：当我们将超链接的,href,属性设成,#,时，虽然页面没有跳转，但是当前页面却回到了屏幕最上端,注：超链接的,4,种状态，在,css,中可以为其分别设定不同的样式,小结,有问题吗？,33,总结,本章重点讲解了：,文字内容排版标签,网页中图片的应用,web,技术中的访问路径,超链接的使用技巧,34,课后作业,作业,利用,标签的四种状态完成鼠标悬浮图片切换效果,作业要求：所有代码必须符合,HTML,编码规范,35,课后预习,预习内容,表单控件的使用、数据表,table,的使用，框架,Frame,的使用,36,