1、HTML5 入门精通实战教程讲师：金超服第5章 图片和路径 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章 图片和路径（大纲） 图片是指由图形、图像构成的平面媒体。 总体上可以分为点阵图和矢量图两大类。 常见的颜色模式：RGB、CMYK、LAB。 网页上常用JPEG、GIF、PNG格式。 下面的表格对比常见格式5.1 概念和格式格式格式用法
2、用法颜色颜色透明透明动画动画JPEG 适用于照片，颜色较多且接受一些质量损失的图像。1600万以上PNG-8 适用于标识、图案等颜色较少或连续颜色的图像。256PNG-24 与PNG-8相似，支持颜色更多。 1600万以上PNG-32 与PNG-24相似1600万以上GIF与PNG-8相似256webp 谷歌新格式，在颜色相同的情况下，文件大小远小于其他格式。多数浏览器不支持，1600万以上5.1 .1概念和格式 图片由无数个点组成。每个点就是一个像素， 每个像素里都由一个颜色表现。 图像分辨率是每英寸图像内有多少个像素点。 图片的大小由像素的多少决定，分辨率是单位密度，同量像素图片的分辨率越
3、高，面积越小。 图片质量大小通常用字节、千字节、兆字节表示。 图片的尺寸大小通常用宽度和高度的像素表示。5.1.2 像素、分辨率、大小、质量 常用的工具 Adobe Photoshop CorelDRAW Fireworks Adobe Illustrator http:/ http:/ Riot5.1.3 工具 图像由 标签定义， 是单标签。 必要属性 语法： 注意：不同浏览器alt显示效果略有不同5.2 标签及必要属性属性属性值值描述描述srcurl规定显示图像的 URL。src 指 source。alttext规定图像的替代文本。 5.2 标签及必要属性代码：插入一个本地图片:插入一个远
4、程图片: 浏览器显示效果： 5.3 标签及可选属性属性属性值值描述描述widthpixels设置图像的宽度。为图像指定 height 和 width ，就可以在页面加载时为图像预留空间。heightpixels定义图像的高度。请不要通过 height 和 width 属性来缩放图像。在 HTML5 中，高度值必须以像素为单位。Ismapismap将图像定义为服务器端图像映射。图像映射指的是带有可点击区域的图像。当点击一个服务器端图像映射时，点击坐标会以 URL 查询字符串的形式发送到服务器。语法：usemapusemap将图像定义为客户器端图像映射。将一幅图像 映射为 N 个区域，当用户单击其
5、中某一个区域时，将被链接到不同的文档中。语法：通过特殊的 和 标签，HTML 创作者可以提供一个描述 usemap 图像中超链接敏感区域坐标的映射，这个映射同时包含相应的超链接 URL。usemap 属性的值是一个 URL，它指向特殊的 区域。用户计算机上的浏览器将把鼠标在图像上单击时的坐标转换成特定的行为，包括加载和显示另外一个文档。 5.3 标签及可选属性代码： 浏览器显示效果： 5.4 HTML5已废弃的图片属性属性属性值值描述描述aligntopbottommiddleleftrightHTML5 不支持。HTML 4.01 已废弃。 规定如何根据周围的文本来排列图像。borderpi
6、xelsHTML5 不支持。HTML 4.01 已废弃。 规定图像周围的边框。hspacepixelsHTML5 不支持。HTML 4.01 已废弃。 规定图像左侧和右侧的空白。longdescURLHTML5 不支持。HTML 4.01 已废弃。 指向包含长的图像描述文档的 URL。vspacepixelsHTML5 不支持。HTML 4.01 已废弃。 规定图像顶部和底部的空白。 5.5 figure和figcaption元素标签标签描述描述 标签规定独立的流内容（图像、图表、照片、代码等等）。figure 元素的内容应该与主内容相关 中可以放置一个或多个图像。 不一定包含在article
7、，不过通常在article里。Figure会在浏览器会默认添加40PX宽的左右外边距。引述文本添加署名通常用figurefigcaption和blockquote结合。 标签定义 figure 元素的标题.figcaption 元素应该被置于 figure 元素的第一个或最后一个子元素的位置。在中，只能出现一次。可以有也可以没有，必须与其他内容一起包含在里。不能单独出现。 5.5 figure和figcaption元素代码： 联想集团位于中国北京，主要生产笔记本、台式机等产品，销量连续3年夺冠，其服务及产品质量一流。 新款联系笔记本 浏览器显示效果： 5.5 figure和figcaption
8、元素代码： 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.6 绝对路径和相对路径绝对路径绝对路径是文件在硬盘上的真正物理路径。使用或者/作为目录分隔符相对路径相对路径是相对于当前文件的路径。使用/作为目录分隔符通常网页中用相对路径，很少使
9、用绝对路径。基本概念 5.6 绝对路径和相对路径二者比较绝对路径相对路径绝对路径，指的是完整的路径。相对路径，就是在同一个网站下，不同文件之间的的位置定位。绝对路径别人不易采集和抄袭。引用的文件是相对当前网页的位置而言的，根据这个相对位置得出相对路径。使用绝对路径，当网站文件上传到web服务器上，会出现图片和链接打不开。整个目录移动，网页之间的链接关系不受影响。但是个别页面换了位置，链接失效。通常在不同网站插入图片用绝对路径。容易被人大面积采集抄袭。 5.6 绝对路径和相对路径目录语法 “./”代表当前目录 例如：1234 “目录名/”代表子目录 例如： “目录名/目录名”代表孙子目录 例如：
10、 “/”代表父目录 例如：当前目录当前目录5 “/./”代表爷爷目录 例如：子目录子目录孙子孙子目录目录父父目录目录爷爷爷爷目录目录5.7 综合实例5.7 综合实例 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 1
11、6 toes. 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. T
12、he 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 综合实例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 ad
13、vice 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 h
14、is extra fingers and toes but also needs reconstructed thumbs. 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. 3333333333
