第5章【HTML5入门精通实战教程】HTML5图片和路径课件

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2016/7/4,#,HTML5,入门精通实战教程,讲师：金超服,第,5,章 图片和路径,HTML5 入门精通实战教程讲师：金超服第5章 图片和路径,1,5.1,图片概述,5.1.1,基本概念和图片格式,5.1.2,图片像素、分辨率、大小、尺寸,5.1.3,图片工具和图片压缩,5.2 ,标签及必要属性,5.3 ,标签及可选属性,5.4 HTML5,已废弃的图片属性,5.5 figure,和,figcaption,元素,5.6,绝对路径和相对路径,5.7,综合实例,第,5,章 图片和路径（大纲）,5.1 图片概述第5章 图片和路径（大纲）,2,图片是指由图形、图像构成的平面媒体。,总体上可以分为点阵图和矢量图两大类。,常见的颜色模式：,RGB,、,CMYK,、,LAB,。,网页上常用,JPEG,、,GIF,、,PNG,格式。,下面的表格对比常见格式,5.1,概念和格式,图片是指由图形、图像构成的平面媒体。5.1 概念和格式,3,格式,用法,颜色,透明,动画,JPEG,适用于照片，颜色较多且接受一些质量损失的图像。,1600,万以上,PNG-8,适用于标识、图案等颜色较少或连续颜色的图像。,256,PNG-24,与,PNG-8,相似，支持颜色更多。,1600,万以上,PNG-32,与,PNG-24,相似,1600,万以上,GIF,与,PNG-8,相似,256,webp,谷歌新格式，在颜色相同的情况下，文件大小远小于其他格式。多数浏览器不支持，,1600,万以上,5.1 .1,概念和格式,格式用法颜色透明动画JPEG 适用于照片，颜色,4,图片由无数个点组成。每个点就是一个像素， 每个像素里都由一个颜色表现。,图像分辨率是每英寸图像内有多少个像素点。,图片的大小由像素的多少决定，分辨率是单位密度，同量像素图片的分辨率越高，面积越小。,图片质量大小通常用字节、千字节、兆字节表示。,图片的尺寸大小通常用宽度和高度的像素表示。,5.1.2,像素、分辨率、大小、质量,图片由无数个点组成。每个点就是一个像素， 每个像素里都由一个,5,常用的工具,Adobe Photoshop,CorelDRAW,Fireworks,Adobe Illustrator, 工具,6,图像由,标签定义，,是单标签。,必要属性,语法：,注意：不同浏览器,alt,显示效果略有不同,5.2 ,标签及必要属性,属性,值,描述,src,url,规定显示图像的,URL,。,src,指,source,。,alt,text,规定图像的替代文本。,图像由 标签定义， 是单标签。5.2 ,7,5.2 ,标签及必要属性,代码：,插入一个本地图片,:,插入一个远程图片,:,浏览器显示效果：,5.2 标签及必要属性代码：浏览器显,8,5.3 ,标签及可选属性,属性,值,描述,width,pixels,设置图像的宽度。为图像指定,height,和,width,，就可以在页面加载时为图像预留空间。,height,pixels,定义图像的高度。请不要通过,height,和,width,属性来缩放图像。在,HTML5,中，高度值必须以像素为单位。,Ismap,ismap,将图像定义为服务器端图像映射。,图像映射指的是带有可点击区域的图像。当点击一个服务器端图像映射时，点击坐标会以,URL,查询字符串的形式发送到服务器。语法：,usemap,usemap,将图像定义为客户器端图像映射。,将一幅图像,映射为,N,个区域，当用户单击其中某一个区域时，将被链接到不同的文档中。语法：,通过特殊的,和,标签，,HTML,创作者可以提供一个描述,usemap,图像中超链接敏感区域坐标的映射，这个映射同时包含相应的超链接,URL,。,usemap,属性的值是一个,URL,，它指向特殊的,区域。用户计算机上的浏览器将把鼠标在图像上单击时的坐标转换成特定的行为，包括加载和显示另外一个文档。,5.3 标签及可选属性属性值描述widthpix,9,5.3,标签及可选属性,代码：,浏览器显示效果：,5.3 标签及可选属性代码：浏览器显,10,5.4 HTML5,已废弃的图片属性,属性,值,描述,align,topbottommiddleleftright,HTML5,不支持。,HTML 4.01,已废弃。 规定如何根据周围的文本来排列图像。,border,pixels,HTML5,不支持。,HTML 4.01,已废弃。 规定图像周围的边框。,hspace,pixels,HTML5,不支持。,HTML 4.01,已废弃。 规定图像左侧和右侧的空白。,longdesc,URL,HTML5,不支持。,HTML 4.01,已废弃。 指向包含长的图像描述文档的,URL,。,vspace,pixels,HTML5,不支持。,HTML 4.01,已废弃。 规定图像顶部和底部的空白。,5.4 HTML5已废弃的图片属性属性值描述alignto,11,5.5 figure,和,figcaption,元素,标签,描述,标签规定独立的流内容（图像、图表、照片、代码等等）。,figure,元素的内容应该与主内容相关,中可以放置一个或多个图像。,不一定包含在,article,，不过通常在,article,里。,Figure,会在浏览器会默认添加,40PX,宽的左右外边距。,引述文本添加署名通常用,figurefigcaption,和,blockquote,结合。,标签定义,figure,元素的标题,.,figcaption,元素应该被置于,figure,元素的第一个或最后一个子元素的位置。,在,中，,只能出现一次。,可以有也可以没有，必须与其他内容一起包含在,里。不能单独出现。,5.5 figure和figcaption元素标签描述f,12,5.5 figure,和,figcaption,元素,代码：,联想集团位于中国北京，主要生产笔记本、台式机等产品，销量连续,3,年夺冠，其服务及产品质量一流。,新款联系笔记本,浏览器显示效果：,5.5 figure和figcaption元素代码：bo,13,5.5 figure,和,figcaption,元素,代码：,its from,mayun and alibaba,Today is difficult,tomorrow is more difficult, but the day after tomorrow is beautiful, so we have to work very hard. in order to survive the long journey.,-by mayun,浏览器显示效果：,5.5 figure和figcaption元素代码：bo,14,5.6,绝对路径和相对路径,绝对路径,绝对,路径是文件在硬盘上的真正物理路径。,使用,或者,/,作为目录分隔符,相对路径,相对,路径是相对于当前文件的路径。,使用,/,作为目录分隔符,通常,网页中用相对路径，很少使用绝对路径。,基本概念,5.6 绝对路径和相对路径绝对路径绝对路径是文件在硬盘上,15,5.6,绝对路径和相对路径,二者比较,绝对路径,相对路径,绝对路径，指的是完整的路径。,相对路径，就是在同一个网站下，不同文件之间的的位置定位。,绝对路径别人不易采集和抄袭。,引用的文件是相对当前网页的位置而言的，根据这个相对位置得出相对路径。,使用绝对路径，当网站文件上传到,web,服务器上，会出现图片和链接打不开。,整个目录移动，网页之间的链接关系不受影响。但是个别页面换了位置，链接失效。,通常在不同网站插入图片用绝对路径。,容易被人大面积采集抄袭。,5.6 绝对路径和相对路径二者比较img src=“E:,16,5.6,绝对路径和相对路径,目录语法,“./”,代表当前目录,例如：,1,2,3,4,“,目录名,/,”,代表子目录,例如,：,“,目录名,/,目录名,”,代表孙子目录,例如,：,“/”,代表父目录,例如,：,当前目录,5,“/./”,代表爷爷目录,例如：,子目录,孙子,目录,父,目录,爷爷,目录,5.6 绝对路径和相对路径目录语法,17,5.7,综合实例,5.7 综合实例,18,5.7,综合实例,5.7 综合实例,19,5.7,综合实例,Chinese boy born with 31 fingers and toes; parents hope for surgery,By Jareen Imam and Vivian Kam, CNN,Updated 1430 GMT (2230 HKT) May 5, 2016,Hong Hongs mother shows her sons feet. The infant was born with 16 toes.,5.7 综合实例,20,5.7,综合实例,Story highlights,Infant has polydactylism, a condition in which people have extra fingers, toes,The boys parents are trying to raise enough money for a life-changing surgery,(CNN),Meet Hong Hong. Hes almost 4 months old, lives in China and has 31 fingers and toes.,Thats not a typo. The boy was born in January with 15 fingers and 16 toes in Pingjiang County in Hunan province. He also has two palms on each hand and no thumbs.,5.7 综合实例,21,5.7,综合实例,Right now Hong Hong is too young to undergo surgery, the infants father, Zou Chenglin, told CNN. In the meantime, his parents are seeking medical advice on how to treat their son.,The mother shows her sons hands. He has 15 fingers, two palms on each hand and no thumbs.,Doctors have given the family differing advice, with some saying the surgery is much more complicated than originally thought because Hong Hong requires not only the removal of his extra fingers and toes but also needs reconstructed thumbs.,5.7 综合实例Right now Hong Hon,22,5.7,综合实例,But theyve decided to halt the crowdfunding efforts because of the mixed comments theyve received about raising money online, the father said.,For now, the family plans to head back to the city of Shenzhen, where they live, so that the father can go back to work.,Follow Jareen,CNNs Zahra Ullah contributed to this report.,5.7 综合实例But theyve decide,23,33333,33333,3333333333,24,