版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
HTML5入门精通实战教程讲师：金超服第5章图片和路径HTML5入门精通实战教程讲师：金超服第5章图片和路径15.1图片概述5.1.1基本概念和图片格式5.1.2图片像素、分辨率、大小、尺寸5.1.3图片工具和图片压缩5.2<img>标签及必要属性5.3<img>标签及可选属性5.4HTML5已废弃的图片属性5.5figure和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常用的工具AdobePhotoshopCorelDRAWFireworksAdobeIllustrator/ysmush.it/Riot5.1.3工具常用的工具5.1.3工具6图像由<img>标签定义，<img>是单标签。必要属性语法：<imgsrc="url"alt="text">注意：不同浏览器alt显示效果略有不同5.2<img>标签及必要属性属性值描述srcurl规定显示图像的URL。src指"source"。alttext规定图像的替代文本。图像由<img>标签定义，<img>是单标签。5.2<7
5.2<img>标签及必要属性代码：<body><p>插入一个本地图片:</p><imgsrc="test1.jpg"alt="这是一张本地图片"><p>插入一个远程图片:</p><imgsrc="http://www.w3cschool.cc/images/w3cschool.png"alt="W3C的logo"></body>浏览器显示效果：5.2<img>标签及必要属性代码：<body>浏览器显8
5.3<img>标签及可选属性属性值描述widthpixels设置图像的宽度。为图像指定height和width，就可以在页面加载时为图像预留空间。heightpixels定义图像的高度。请不要通过height和width属性来缩放图像。在HTML5中，高度值必须以像素为单位。Ismapismap将图像定义为服务器端图像映射。图像映射指的是带有可点击区域的图像。当点击一个服务器端图像映射时，点击坐标会以URL查询字符串的形式发送到服务器。语法：<imgismap>usemapusemap将图像定义为客户器端图像映射。将一幅图像
映射为N个区域，当用户单击其中某一个区域时，将被链接到不同的文档中。语法：<imgusemap="value">通过特殊的<map>和<area>标签，HTML创作者可以提供一个描述usemap图像中超链接敏感区域坐标的映射，这个映射同时包含相应的超链接URL。usemap属性的值是一个URL，它指向特殊的<map>区域。用户计算机上的浏览器将把鼠标在图像上单击时的坐标转换成特定的行为，包括加载和显示另外一个文档。5.3<img>标签及可选属性属性值描述widthpix9
5.3<img>标签及可选属性代码：<body>
<imgsrc=“sohulogo.png”alt=“原始大小130*70，这里不指定"><br><imgsrc="sohulogo.png"alt="宽度和高度用指定的像素"
width="100px"height="100px"><br><imgsrc="sohulogo.png"alt="宽度用百分比，高度不指定"
width="50%"><br><imgsrc="sohulogo.png"alt="宽度用百分比，高度用原始高度"
width="50%"height="70px"></body>浏览器显示效果：5.3<img>标签及可选属性代码：<body>浏览器显10
5.4HTML5已废弃的图片属性属性值描述aligntop
bottom
middle
left
rightHTML5不支持。HTML4.01已废弃。规定如何根据周围的文本来排列图像。borderpixelsHTML5不支持。HTML4.01已废弃。规定图像周围的边框。hspacepixelsHTML5不支持。HTML4.01已废弃。规定图像左侧和右侧的空白。longdescURLHTML5不支持。HTML4.01已废弃。指向包含长的图像描述文档的URL。vspacepixelsHTML5不支持。HTML4.01已废弃。规定图像顶部和底部的空白。5.4HTML5已废弃的图片属性属性值描述alignto11
5.5figure和figcaption元素标签描述<figure><figure>标签规定独立的流内容（图像、图表、照片、代码等等）。figure元素的内容应该与主内容相关<figure>中可以放置一个或多个图像。<figure>不一定包含在article，不过通常在article里。Figure会在浏览器会默认添加40PX宽的左右外边距。引述文本添加署名通常用figure\figcaption和blockquote结合。<figcaption><figcaption>标签定义figure元素的标题.figcaption"元素应该被置于"figure"元素的第一个或最后一个子元素的位置。在<figure>中，<figcaption>只能出现一次。<figcaption>可以有也可以没有，必须与其他内容一起包含在<figure>里。不能单独出现。5.5figure和figcaption元素标签描述<f12
5.5figure和figcaption元素代码：<body><p>联想集团位于中国北京，主要生产笔记本、台式机等产品，销量连续3年夺冠，其服务及产品质量一流。</p><figure><imgsrc="bijiben.jpg"alt="联想笔记"
width="300px"height="200px"><figcaption>新款联系笔记本</figcaption></figure></body>浏览器显示效果：5.5figure和figcaption元素代码：<bo13
5.5figure和figcaption元素代码：<body><p>it'sfrom<cite>mayunandalibaba</cite></p><figure><blockquotecite=“”>Todayisdifficult,tomorrowismoredifficult,butthedayaftertomorrowisbeautiful,sowehavetoworkveryhard.inordertosurvivethelongjourney.</blockquote><figcaption>--bymayun</figcaption></figure></body>浏览器显示效果：5.5figure和figcaption元素代码：<bo14
5.6绝对路径和相对路径绝对路径◆绝对路径是文件在硬盘上的真正物理路径。◆使用\或者/作为目录分隔符相对路径◆相对路径是相对于当前文件的路径。◆使用/作为目录分隔符◆通常网页中用相对路径，很少使用绝对路径。基本概念5.6绝对路径和相对路径绝对路径◆绝对路径是文件在硬盘上15
5.6绝对路径和相对路径二者比较<imgsrc=“E:/web/images/pic.jpg”alt=“图片"><imgsrc=“../images/pic.jpg”alt=“图片">绝对路径相对路径绝对路径，指的是完整的路径。相对路径，就是在同一个网站下，不同文件之间的的位置定位。绝对路径别人不易采集和抄袭。引用的文件是相对当前网页的位置而言的，根据这个相对位置得出相对路径。使用绝对路径，当网站文件上传到web服务器上，会出现图片和链接打不开。整个目录移动，网页之间的链接关系不受影响。但是个别页面换了位置，链接失效。通常在不同网站插入图片用绝对路径。容易被人大面积采集抄袭。5.6绝对路径和相对路径二者比较<imgsrc=“E:16
5.6绝对路径和相对路径目录语法
“./”代表当前目录例如：<imgsrc=“./pic.jpg”>1234
“目录名/”代表子目录例如：<imgsrc=“images/pic.jpg”>
“目录名/目录名”代表孙子目录例如：<imgsrc=“images/img/pic.jpg>
“…/”代表父目录例如：<imgsrc=“../pic.jpg>当前目录5
“…/../”代表爷爷目录例如：<imgsrc=“../../pic.jpg>子目录孙子目录父目录爷爷目录5.6绝对路径和相对路径目录语法175.7综合实例5.7综合实例185.7综合实例5.7综合实例19
5.7综合实例<body><article><section><h1>Chineseboybornwith31fingersandtoes;parentshopeforsurgery</h1><p>ByJareenImamandVivianKam,CNN</p><p>Updated1430GMT(2230HKT)May5,2016</p><div><figure><imgsrc="toes.jpg"
alt="16toes"><figcaption>HongHong'smothershowsherson'sfeet.Theinfantwasbornwith16toes.</figcaption></figure></div></section>5.7综合实例<body>20
5.7综合实例<section><h2>Storyhighlights</h2><p>Infanthaspolydactylism,aconditioninwhichpeoplehaveextrafingers,toes</p><p>Theboy'sparentsaretryingtoraiseenoughmoneyforalife-changingsurgery</p></section><section><h3><cite>(CNN)</cite>MeetHongHong.He'salmost4monthsold,livesinChinaandhas31fingersandtoes.</h3><p>That'snotatypo.TheboywasborninJanuarywith15fingersand16toesinPingjiangCountyinHunanprovince.Healsohastwopalmsoneachhandandnothumbs.</p>5.7综合实例<section>21
5.7综合实例<p>RightnowHongHongistooyoungtoundergosurgery,theinfant'sfather,ZouChenglin,toldCNN.Inthemeantime,hisparentsareseekingmedicaladviceonhowtotreattheirson.</p><div><figure><imgsrc="fingers.jpg"alt="15fingers"><figcaption>Themothershowsherson'shands.Hehas15fingers,twopalmsoneachhandandnothumbs.</figcaption></figure></div><p>Doctorshavegiventhefamilydifferingadvice,withsomesayingthesurgeryismuchmorecomplicatedthanoriginallythoughtbecauseHongHongrequiresnotonlytheremovalofhisextrafingersandtoesbutalsoneedsreconstructedthumbs.</p>5.7综合实例<p>RightnowHongHon22
5.7综合实例<p>Butthey'vedecidedtohaltthecrowdfundingeffortsbecauseofthemixedcommentsthey'vereceivedaboutraisingmoneyonline,thefathersaid.</p><p>Fornow,thefamilyplanstoheadbacktothecityofShenzhen,wheretheylive,sothatthefathercangobacktowork.</p></section><footer><p>Follow@Jareen</p><p>CNN'sZahraUllahcontributedtothisreport.</p></footer></article></body>5.7综合实例<p>Butthey'vedecide233333333333333333333324HTML5入门精通实战教程讲师：金超服第5章图片和路径HTML5入门精通实战教程讲师：金超服第5章图片和路径255.1图片概述5.1.1基本概念和图片格式5.1.2图片像素、分辨率、大小、尺寸5.1.3图片工具和图片压缩5.2<img>标签及必要属性5.3<img>标签及可选属性5.4HTML5已废弃的图片属性5.5figure和figcaption元素5.6绝对路径和相对路径5.7综合实例第5章图片和路径（大纲）5.1图片概述第5章图片和路径（大纲）26图片是指由图形、图像构成的平面媒体。总体上可以分为点阵图和矢量图两大类。常见的颜色模式：RGB、CMYK、LAB。网页上常用JPEG、GIF、PNG格式。下面的表格对比常见格式5.1概念和格式图片是指由图形、图像构成的平面媒体。5.1概念和格式27格式用法颜色透明动画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适用于照片，颜色28图片由无数个点组成。每个点就是一个像素，每个像素里都由一个颜色表现。图像分辨率是每英寸图像内有多少个像素点。图片的大小由像素的多少决定，分辨率是单位密度，同量像素图片的分辨率越高，面积越小。图片质量大小通常用字节、千字节、兆字节表示。图片的尺寸大小通常用宽度和高度的像素表示。5.1.2像素、分辨率、大小、质量图片由无数个点组成。每个点就是一个像素，每个像素里都由一个29常用的工具AdobePhotoshopCorelDRAWFireworksAdobeIllustrator/ysmush.it/Riot5.1.3工具常用的工具5.1.3工具30图像由<img>标签定义，<img>是单标签。必要属性语法：<imgsrc="url"alt="text">注意：不同浏览器alt显示效果略有不同5.2<img>标签及必要属性属性值描述srcurl规定显示图像的URL。src指"source"。alttext规定图像的替代文本。图像由<img>标签定义，<img>是单标签。5.2<31
5.2<img>标签及必要属性代码：<body><p>插入一个本地图片:</p><imgsrc="test1.jpg"alt="这是一张本地图片"><p>插入一个远程图片:</p><imgsrc="http://www.w3cschool.cc/images/w3cschool.png"alt="W3C的logo"></body>浏览器显示效果：5.2<img>标签及必要属性代码：<body>浏览器显32
5.3<img>标签及可选属性属性值描述widthpixels设置图像的宽度。为图像指定height和width，就可以在页面加载时为图像预留空间。heightpixels定义图像的高度。请不要通过height和width属性来缩放图像。在HTML5中，高度值必须以像素为单位。Ismapismap将图像定义为服务器端图像映射。图像映射指的是带有可点击区域的图像。当点击一个服务器端图像映射时，点击坐标会以URL查询字符串的形式发送到服务器。语法：<imgismap>usemapusemap将图像定义为客户器端图像映射。将一幅图像
映射为N个区域，当用户单击其中某一个区域时，将被链接到不同的文档中。语法：<imgusemap="value">通过特殊的<map>和<area>标签，HTML创作者可以提供一个描述usemap图像中超链接敏感区域坐标的映射，这个映射同时包含相应的超链接URL。usemap属性的值是一个URL，它指向特殊的<map>区域。用户计算机上的浏览器将把鼠标在图像上单击时的坐标转换成特定的行为，包括加载和显示另外一个文档。5.3<img>标签及可选属性属性值描述widthpix33
5.3<img>标签及可选属性代码：<body>
<imgsrc=“sohulogo.png”alt=“原始大小130*70，这里不指定"><br><imgsrc="sohulogo.png"alt="宽度和高度用指定的像素"
width="100px"height="100px"><br><imgsrc="sohulogo.png"alt="宽度用百分比，高度不指定"
width="50%"><br><imgsrc="sohulogo.png"alt="宽度用百分比，高度用原始高度"
width="50%"height="70px"></body>浏览器显示效果：5.3<img>标签及可选属性代码：<body>浏览器显34
5.4HTML5已废弃的图片属性属性值描述aligntop
bottom
middle
left
rightHTML5不支持。HTML4.01已废弃。规定如何根据周围的文本来排列图像。borderpixelsHTML5不支持。HTML4.01已废弃。规定图像周围的边框。hspacepixelsHTML5不支持。HTML4.01已废弃。规定图像左侧和右侧的空白。longdescURLHTML5不支持。HTML4.01已废弃。指向包含长的图像描述文档的URL。vspacepixelsHTML5不支持。HTML4.01已废弃。规定图像顶部和底部的空白。5.4HTML5已废弃的图片属性属性值描述alignto35
5.5figure和figcaption元素标签描述<figure><figure>标签规定独立的流内容（图像、图表、照片、代码等等）。figure元素的内容应该与主内容相关<figure>中可以放置一个或多个图像。<figure>不一定包含在article，不过通常在article里。Figure会在浏览器会默认添加40PX宽的左右外边距。引述文本添加署名通常用figure\figcaption和blockquote结合。<figcaption><figcaption>标签定义figure元素的标题.figcaption"元素应该被置于"figure"元素的第一个或最后一个子元素的位置。在<figure>中，<figcaption>只能出现一次。<figcaption>可以有也可以没有，必须与其他内容一起包含在<figure>里。不能单独出现。5.5figure和figcaption元素标签描述<f36
5.5figure和figcaption元素代码：<body><p>联想集团位于中国北京，主要生产笔记本、台式机等产品，销量连续3年夺冠，其服务及产品质量一流。</p><figure><imgsrc="bijiben.jpg"alt="联想笔记"
width="300px"height="200px"><figcaption>新款联系笔记本</figcaption></figure></body>浏览器显示效果：5.5figure和figcaption元素代码：<bo37
5.5figure和figcaption元素代码：<body><p>it'sfrom<cite>mayunandalibaba</cite></p><figure><blockquotecite=“”>Todayisdifficult,tomorrowismoredifficult,butthedayaftertomorrowisbeautiful,sowehavetoworkveryhard.inordertosurvivethelongjourney.</blockquote><figcaption>--bymayun</figcaption></figure></body>浏览器显示效果：5.5figure和figcaption元素代码：<bo38
5.6绝对路径和相对路径绝对路径◆绝对路径是文件在硬盘上的真正物理路径。◆使用\或者/作为目录分隔符相对路径◆相对路径是相对于当前文件的路径。◆使用/作为目录分隔符◆通常网页中用相对路径，很少使用绝对路径。基本概念5.6绝对路径和相对路径绝对路径◆绝对路径是文件在硬盘上39
5.6绝对路径和相对路径二者比较<imgsrc=“E:/web/images/pic.jpg”alt=“图片"><imgsrc=“../images/pic.jpg”alt=“图片">绝对路径相对路径绝对路径，指的是完整的路径。相对路径，就是在同一个网站下，不同文件之间的的位置定位。绝对路径别人不易采集和抄袭。引用的文件是相对当前网页的位置而言的，根据这个相对位置得出相对路径。使用绝对路径，当网站文件上传到web服务器上，会出现图片和链接打不开。整个目录移动，网页之间的链接关系不受影响。但是个别页面换了位置，链接失效。通常在不同网站插入图片用绝对路径。容易被人大面积采集抄袭。5.6绝对路径和相对路径二者比较<imgsrc=“E:40
5.6绝对路径和相对路径目录语法
“./”代表当前目录例如：<imgsrc=“./pic.jpg”>1234
“目录名/”代表子目录例如：<imgsrc=“images/pic.jpg”>
“目录名/目录名”代表孙子目录例如：<imgsrc=“images/img/pic.jpg>
“…/”代表父目录例如：<imgsrc=“../pic.jpg>当前目录5
“…/../”代表爷爷目录例如：<imgsrc=“../../pic.jpg>子目录孙子目录父目录爷爷目录5.6绝对路径和相对路径目录语法415.7综合实例5.7综合实例425.7综合实例5.7综合实例43
5.7综合实例<body><article><section><h1>Chineseboybornwith31fingersandtoes;parentshopeforsurgery</h1><p>ByJareenImamandVivianKam,CNN</p><p>Updated1430GMT(2230HKT)May5,2016</p><div><figure><imgsrc="toes.jpg"
alt="16toes"><figcaption>HongHong'smothershowsherson'sfeet.Theinfantwasbornwith16toes.</figcaption></figure></div></section>5.7综合实例<body>44
5.7综合实例<section><h2>Storyhighlights</h2><p>Infanthaspolydactylism,aconditioninwhichpeoplehaveextrafingers,toes</p><p>Theboy'sparentsaretryingtoraiseenoughmoneyforalife-changingsurgery</p></section><section><h3><cite>(CNN)</cite>MeetHongHong.He'salmost4monthsold,livesinChinaandhas31fingersandtoes.</
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 盐酸丁丙诺啡行业市场现状供需分析及市场深度研究发展前景及规划可行性分析研究报告(2024-2030)
- 电子材料市场发展分析及行业投资战略研究报告(2024-2030)
- 2024-2029年高铁零部件市场发展分析及行业投资战略研究报告
- 2024-2029年移动终端设备行业发展分析及投资价值研究咨询报告
- 2024-2029年男科医院行业市场深度分析及发展策略研究报告
- 2024-2029年电气控制屏市场发展现状调查及供需格局分析预测报告
- 2024-2034年中国保水剂市场运行态势及投资战略咨询研究报告
- 2024-2034年中国PC-Based运动控制器市场前景预测及未来发展趋势报告
- 2024-2034年中国AES树脂行业投资研究分析及发展前景预测报告
- 2024-2030年中国风电叶片智能设备行业市场发展规模及市场前景趋势报告
- 科室会演讲技巧-上传
- 银行特殊债务处理方案范本
- 信息技术 七年级下册 科学版 玩转家庭照片 单元作业设计
- 影视后期制作行业人才需求调研报告
- 小学道德与法治-生活离不开他们教学设计学情分析教材分析课后反思
- 顶管施工安全管理
- 智慧医院弱电系统深化设计投标文件
- 海口市各镇(街)管辖范围
- 电子白板教学环境下的黑板板书
- 京沪高速铁路沉降监测数据处理与分析的中期报告
- 绿化养护报价表
评论
0/150
提交评论