第3章图像、路径及超链接 本章学习目标 了解网页中常用图像格式的特性。 掌握图像的标记和属性，能够熟练使用属性美化图像。 理解绝对路径和相对路径的概念，能够正确书写路径。 掌握超链接的标记和常用属性，能够正确链接互联网的各种文件。 掌握创建锚链接和电子邮件链接的方法。 3.1网页中常用的图像格式及特性 图像在视觉传达上比文字更直观、生动，同时，在网页中插入图像能够使网页更加美观。在制作网页的过程中，常用的图像格式有JPG、GIF和PNG，下面介绍这些图像格式各自的优缺点。 1. JPG JPG图像格式由Joint Photographic Experts Group提出并命名，支持24位颜色或真彩色。 由于人眼不能看出存储图片的全部信息，因此可以去除图像的某些细节，并对图片进行压缩，JPG是一种以损失质量为代价的压缩方式，压缩比越高，图像质量损失越大，适用于存储色彩比较丰富、色调连续的图像。 在网页中，广告(banner)、商品照片、色彩丰富的插图都可以采用JPG格式。 2. GIF GIF（graphics interchange format）的最大特点是支持动画。它采用无损压缩方式，图片质量基本没有损失。GIF图像最多可以显示256种颜色，支持透明(全透明、全不透明)。 GIF常用于制作全透明区域图像(如Logo)、动画图片等。 3. PNG PNG（portable network group）包括PNG8和真色彩PNG(PNG24和PNG32)。PNG的特点是支持alpha透明(全透明、半透明、全不透明)，PNG不支持动画。通常PNG8在同质量下比GIF占用更小的体积，需要半透明效果只能使用PNG24。 PNG格式在网页制作时常用来做小图标、按钮、背景图像等。 3.2图像标记 3.1节介绍了网页中常用的图像格式，那么如何将这些图片插入网页中美化网页呢？ 3.2.1图像标记的用法 在网页中，显示图像需要使用图像标记<img/>。图像标记的基本语法格式如下： <img src="图像路径URL"/> src属性是图像路径URL，用于指定图像文件的存储路径和文件夹，它是<img/>标记的必须属性。 在例3.1中，第8行代码使用<img/>标记显示图像，添加必备属性src以指定显示图像的路径，如图3.1所示。 例3.1 1<!DOCTYPE html> 2<html lang="en"> 3<head> 4<meta charset="UTF-8"> 5<title>图像标记的基本格式</title> 6</head> 7<body> 8<img src="images/peggy.png"> 9</body> 10</html> 图3.1图像标记使用效果 注意： 如果需要让两个图像紧密挨在一起，必须使两个图像标记靠在一起，中间不能有空格和换行。 3.2.2图像标记的属性 如果想在网页里灵活地对图像进行排版，需要掌握图像标记的属性。图像标记的常用属性如表3.1所示。 表3.1图像标记的常用属性 属性属性值描述 srcURL图像的路径 alt文本图像不能显示时的替换文本 title文本鼠标指针悬停时显示的内容 width像素图像的宽度 height像素图像的高度 border数字图像边框的宽度 vspace像素图像顶部和底部的空白(垂直边距) hspace像素图像左侧和右侧的空白(水平边距) align left将图像对齐到左边 right将图像对齐到右边 top将图像顶端和文本的第一行文字对齐，其他文字居于图像下方 middle将图像的水平线和文本的第一行文字对齐，其他文字居于图像下方 bottom将图像的底部和文本的第一行文字对齐，其他文字居于图像下方 1. alt属性 alt属性规定图像的替代显示文本，如果浏览器无法显示图像，就显示替换文本。如例3.1中将图像标记代码改为： <img src="peggy.png" alt="小猪佩奇"> 在谷歌浏览器中，由于图像路径书写错误导致图像无法显示，效果如图3.2所示。 2. title属性 title属性规定关于元素的额外信息，这些信息在鼠标指针移到元素上时会显示一段提示文字。不必所有的<img>标记都添加此属性，例如，像Logo这样比较重要的图像建议添加此属性。 在例3.1中将图像标记代码改为如下所示，当鼠标指针移动到图像上时，显示title属性定义的提示文本，如图3.3所示。 <img src="peggy.png" title="小猪佩奇"> 注意： title属性除了应用于<img/>标记外，经常用于表单元素和超链接标记<a>，定义输入格式和链接目标的信息。 图3.2alt属性使用效果 图3.3title属性使用效果 3. 图像的宽高属性 如果不设置<img/>标记的宽、高属性，图片会按照它的原始尺寸显示。可以通过设置width和height属性为图像手动更改宽度和高度。 在使用width和height属性时，通常的做法是只设置一个属性，这样可以与原图成比例显示。 4. 图像的边框属性 图像在浏览器渲染时默认是没有边框的，border属性可以定义图像周围边框的宽度。 了解了以上几个属性后，可使用它们对图像进行修饰，如例3.2所示。 例3.2 1<!DOCTYPE html> 2<html lang="en"> 3<head> 4<meta charset="UTF-8"> 5<title>img标记的属性</title> 6</head> 7<body> 8<img src="images/logo.png" alt="蜗牛学院" border="5px"> 9<hr> 10<img src="images/logo.png" alt="蜗牛学院" height="25px"> 11<hr> 12<img src="images/logo.png" alt="蜗牛学院" height="25px" width="80px"> 13</body> 14</html> 在例3.2中，第8行代码使用border属性为图像添加了边框，默认边框颜色为黑色，如果需要修改边框颜色，使用标记属性是无法做到的； 第10行代码仅使用height属性限定了图像的高度，图像宽度按比例缩放显示； 第12行代码既设置了图像的高度又设置了宽度，图像按照属性定义的显示，但是发生变形，如图3.4所示。 图3.4定义width和height属性效果 5. 图像的边距属性 通常图形浏览器不会在图像和其周围之间留出很多空间。从排版需要考虑，可以用vspace和hspace分别调整图像的垂直边距和水平边距。 6. 图像的对齐属性 align属性规定图像相对于周围元素的对齐方式，属性的取值如表3.2所示。 表3.2align属性取值 值属性值属性 left将图像对齐到左边top将图像与顶部对齐 right将图像对齐到右边bottom将图像与底部对齐 middle将图像与中央对齐 使用图像对齐属性实现图文混排效果，如例3.3所示。 例3.3 1<!DOCTYPE html> 2<html lang="en"> 3<head> 4<meta charset="UTF-8"> 5<title>图像的对齐属性</title> 6</head> 7<body> 8<p><img src="images/smilesmall.png">默认文本对齐方式。</p> 9<hr> 10<p><img src="images/smilesmall.png" align="left">图像对齐到左边。</p> 11<hr> 12<p><img src="images/smilesmall.png" align="right">图像对齐到右边。</p> 13<hr> 14<p><img src="images/smilesmall.png" align="middle">图像与文本居中。</p> 15<hr> 16<p><img src="images/smilesmall.png" align="top">图像与文本顶部对齐。</p> 17<hr> 18</body> 19</html> 默认图片与文字底部对齐(align="bottom")，如图3.5所示。在网页中实现图文混排，图像和文字的环绕效果，图像居左、居右等需要使用图像的对齐属性align。 图3.5图像应用对齐属性效果 使用hspace和vspace为图像设置水平边距和垂直边距，如例3.4所示。 例3.4 1<!DOCTYPE html> 2<html lang="en"> 3<head> 4<meta charset="UTF-8"> 5<title>图像排版</title> 6</head> 7<body> 8<img src="images/html.jpg" alt="HTML与CSS" align="left" hspace="10px" vspace="20px"> 9<h3>HTML与CSS</h3> 10<p>HTML(hypertext markup language)是文本标记语言，是用于描述网页文档的一种标记语言。</p> 11<p>CSS(cascading style sheet)可译为"层叠样式表"或"级联样式表"，它定义如何显示 HTML 元素，用于控制Web页面的外观。通过使用CSS实现页面的内容与表现形式分离，极大提高了工作效率 。样式存储在样式表中，通常放在head部分或存储在外部CSS文件中。作为网页标准化设计的趋势，CSS取得了浏览器厂商的广泛支持，正越来越多地被应用到网页设计中去。</p> 12</body> 13</html> 例3.4中，第8行代码使用align属性使图像居左，实现文本环绕效果，并使用hspace和vspace属性在图像四周留白，页面效果如图3.6所示。 图3.6图文混排页面效果 3.3路径 在<img/>标记中使用src属性设置图像的存储地址，如果src属性值书写错误，那么图像将不能显示。 通常在制作网页时，一个页面会用到很多的素材图像，将所有的素材图像都和网页堆积在一个文件夹中，会特别乱。实际项目中，通常将所用的素材图像放在一个专门用于放图像的文件夹(一般命名为images或imgs)中，再将图像的路径赋值给src属性。 3.3.1相对路径 相对路径是以引用文件的网页所在位置为参考基础，建立的目录路径。 图3.7同级目录 1. 同级目录 如果源文件和引用文件在同一个文件夹中，路径直接写文件名即可。 如图3.7所示，在E盘下存在mypage文件夹，mypage文件夹内有page1.html和smile.png两个文件，page1.html和smile.png属于同级目录。在page1.html中引用同级目录smile.png，代码如下： <img src="smile.png"/> 2. 下级目录 如果引用的图像文件位于网页文件的下级目录，直接写下级目录文件的路径即可。 如图3.8所示，在E盘存在mypage文件夹，mypage文件夹下有page1.html文件和images文件夹，在images文件夹内有smile.png图像。在page1.html中插入smile.png图像，代码如下： <img src="images/smile.png"/> 3. 上级目录 ../表示源文件所在目录的上一级目录，../../表示源文件所在目录的上上级目录，以此类推。 如图3.9所示，在E盘下存在mypage文件夹，mypage文件夹内有两个文件夹html和images，page1.html位于html文件夹内，smile.png位于images文件夹内。在page1.html中插入smile.png图像，代码如下： <img src=" ../images/smile.png" /> 图3.8下级目录 图3.9文件目录结构 综上所述，相对路径的写法有以下3种。 （1） 同级目录，写引入的文件名称即可。 （2） 下级目录，写引入文件所在的文件夹名和文件名，之间使用“/”隔开。 （3） 上级目录，写引入文件所在的文件夹名和文件名，且在文件夹名称之前加“../”。如果从网页文件向上返一级能够找到包含引入文件的文件夹，则需要写一个“../”； 如果需要向上返两级能够找到包含引用文件的文件夹，则需要写两个“../../”； 以此类推。 3.3.2绝对路径 具体完整的路径，一般带有盘符或完整的网络地址，能精确找到需要文件的位置。 在图3.7所示的路径关系中，想要在page1.html中引用smile.png作为图像素材，使用绝对路径代码如下： <img src="E:＼mypage＼smile.png"/> 注意： 制作网页时，不推荐使用绝对路径，因为网页制作完之后需要将所有相关的文件上传至服务器空间，这时的空间有可能是在C盘，也有可能是D盘、E盘等其他磁盘，也有可能在别的文件夹下，从而导致路径错误，出现找不到文件或图像无法正常显示等现象。 3.4应用案例 图3.10为需要实现的图文混排的效果。其中，主图像居左，文本居右，且两者之间有一定的距离。居右的文本部分有一些小的图标可以借助图像标记实现，还有标题、段落，且字号和颜色也不相同。 图3.10图文混排效果 3.4.1效果图分析 通过分析图3.10，能够联想到需要使用的主要标记有<img/>、标题标记、段落标记，文本和小的装饰图像之间的空白可以借助 实现。 在书写完成标记之后，页面的结构基本上搭建完成，需要借助标记的属性进行页面美化。 （1） 实现主图和文本左右分布，利用<img/>的align属性赋值left实现。 （2） 在主图和右半部分文本之间的留白，设置<img/>的hspace实现。 （3） 实现文本颜色和字号的控制，不仅需要借助<font>标记，还需要利用其color和size属性实现。 3.4.2页面结构 通过完成页面的HTML标记，可以完成页面结构的搭建，如例3.5所示，效果如图3.11所示。 例3.5 1<!DOCTYPE html> 2<html lang="en"> 3<head> 4<meta charset="UTF-8"> 5<title>Sublime Text 3的Less2Css插件介绍与安装</title> 6</head> 7<body> 8<img src="imgs/sublime.jpg" alt="sublimelogo" > 9<h2> 10<img src="imgs/title.png" alt="前端开发"> 11Sublime Text 3的Less2Css插件介绍与安装 12</h2> 13<p> 14<img src="imgs/time.jpg" alt=""> 2015-08-20 15 16<img src="imgs/person.jpg" alt=""> 大内高手 17 18<img src="imgs/reads.jpg" alt=""> 阅读(47361) 19</p> 20<p> 21在介绍Less2Css之前我们先安装一个less的语法高亮，用过less的读者都知道，sublime没有支持less的语法高亮，所以这个插件可以帮上我们，可以直接安装Ctrl+Shift+P>install Package搜索less按... 22</p> 23</body> 24</html> 图3.11搭建结构效果图 3.4.3美化 为标记添加属性，可以控制图文混排的效果。为了控制文本的字号和颜色，目前必须借助<font>标记及其属性size、color实现。添加完属性和标记后能够实现图3.10所示的页面效果。代码如例3.6所示。 例3.6 1<!DOCTYPE html> 2<html lang="en"> 3<head> 4<meta charset="UTF-8"> 5<title>Sublime Text 3的Less2Css插件介绍与安装</title> 6</head> 7<body> 8<img src="imgs/sublime.jpg" alt="sublimelogo" width="220px" height="150px" align="left" hspace="16px"> 9<h2> 10<img src="imgs/title.png" alt="前端开发"> 11<font color="#555">Sublime Text 3的Less2Css插件介绍与安装</font> 12</h2> 13<p> 14<font size="1" color="#999"><img src="imgs/time.jpg" alt=""> 2015-08-20</font> 15<font size="1" color="#999"><img src="imgs/person.jpg" alt=""> 大内高手</font> 16<font size="1" color="#999"><img src="imgs/reads.jpg" alt=""> 阅读(47361)</font> 17</p> 18<p> 19<fontsize="2" color="#999">在介绍Less2Css之前我们先安装一个less的语法高亮，用过less的读者都知道，sublime没有支持less的语法高亮，所以这个插件可以帮上我们，可以直接安装Ctrl+Shift+P>install Package搜索less按...</font> 20</p> 21</body> 22</html> 3.5超链接标记 超链接是网页页面重要的组成元素，一个网站是由多个页面使用超链接将各个网页互链起来的。在网页中，一个字、一个词、一段话、一张图像等都可以添加超链接，用户单击添加超链接的内容可以跳转到新的文档或当前文档中的某个部分。 HTML使用标记<a>设置超文本链接，超链接标记的语法格式如下： <a href="url">链接文字</a> 超链接标记有如下两个常用属性。 （1） href： 用于指定链接目标的路径或URL地址，给超链接标记<a>指定了href属性，它就具备了超链接的功能。 （2） target： 用于指定打开链接目标的方式。常用的值有_self和_blank两种，_self指在原窗口打开链接目标(默认值)，_blank指在新窗口打开链接目标。 URL(统一资源定位符)是对互联网上得到资源的位置和访问方法的一种简洁表示，是互联网上标准的资源地址，互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的具体位置以及浏览器如何处理它。 在例3.7中，给百度、搜狐、新浪3个词组添加了超链接分别链接到百度首页、搜狐首页、新浪首页。其中,百度超链接没有使用target属性指定超链接的打开方式，单击“百度”在当前窗口跳转到百度首页； 单击“搜狐”，使用target属性指定链接目标的打开方式为"_self"在当前窗口打开搜狐首页，可见，target="_self"是默认值； “新浪”使用target="_blank"单击文字后会在新窗口打开href属性指定的链接地址。效果如图3.12所示，添加了超链接的文本浏览器默认情况下为蓝色且带有下画线效果。当鼠标指针移动到超链接文本上时，光标会变为手形，同时在浏览器的左下角会显示链接地址。 例3.7 1<!DOCTYPE html> 2<html lang="en"> 3<head> 4<meta charset="UTF-8"> 5<title>超链接</title> 6</head> 7<body> 8<a href="http://www.baidu.com">百度</a> 9<a href="http://www.sohu.com" target="_self">搜狐</a> 10<a href="http://www.sina.com.cn" target="_blank">新浪</a> 11</body> 12</html> 图3.12超链接标记效果 也可以为插入网页中的图像添加超链接，如例3.8所示，添加了超链接的图片和普通图片没有差异，效果如图3.13所示。当单击图片时，将跳转到链接指定的地址。 例3.8 1<!DOCTYPE html> 2<html lang="en"> 3<head> 4<meta charset="UTF-8"> 5<title>图像超链接</title> 6</head> 7<body> 8<a href="http://snailuni.edu.cn"><img src="images/logo.png" alt="蜗牛学院"></a> 9</body> 10</html> 图3.13图像超链接效果 超链接还有如下一个属性。 title： 指向链接的提示信息，就是当鼠标指针移动到添加了超链接的文字或图片时，会出现文字提示。 为百度文字添加了超链接且使用了title属性就为超链接添加了提示文字“百度”，如例3.9所示。当鼠标指针移动到超链接文字上时，鼠标指针旁边会显示提示文字，效果如图3.14所示。 例3.9 1<!DOCTYPE html> 2<html lang="en"> 3<head> 4<meta charset="UTF-8"> 5<title>超链接的title属性</title> 6</head> 7<body> 8<a href="http://www.baidu.com" title="百度">百度</a> 9</body> 10</html> 图3.14为超链接添加title属性效果 3.6应用案例 制作如图3.15所示仿百度搜索结果效果页面，代码如例3.10所示。 图3.15仿百度搜索结果页 本条搜索结果整体分为上下两个部分，使用两对<p>标记。上边软件标题有的文本样式特殊，需要使用<font>标记及其属性实现。下半部分为软件图标及介绍，图标居右使用<img>的align="left"水平左对齐实现，软件介绍为红色文本，需要使用<font>标记及其color文本颜色属性设置实现。 例3.10 1<!DOCTYPE html> 2<html lang="en"> 3<head> 4<meta charset="UTF-8"> 5<title>软件下载_小度知道</title> 6</head> 7<body> 8<p> 9<a href="http://www.seas.com.cn">SEAS<font color="red">下载</font>-免费<font color="red">软件</font>,绿色软件_SEAS<font color="red">软件下载</font></a> 10</p> 11<p> 12<img src="logo.jpg" alt="" align="left"> 13<font color="#333" size="2"><font color="red">软件下载</font>频道(消费类软件门户媒体)提供网络软件、杀毒软件、聊天工具、系统工具、媒体播放、输入法、QQ工具、手机主题和驱动等丰富的绿色<font color="red">软件下载</font>,互联网软件资源共享互联网软件资源共享互联网软件资源共享互联网软件资源共享互联网软件资源共享互联网软件资…… 14<br/> 15http://seas.com.cn-小度快照-234条评价 16</font> 17</p> 18</body> 19</html> 3.7其他形式的链接 3.7.1锚链接 当某个网页的内容太长，用户需要不断地拖动滚动条才能找到需要的内容，想要快速跳转到某个网页的具体位置时，就需要在页面中定义锚点，创建锚链接。 锚链接的作用在于实现单个页面内不同位置的跳转，有些地方也叫作书签。 定义锚点需要使用超链接标记<a>的name属性，语法格式如下： <a name="label">锚点</a> 其中，name的属性值是自定义锚点的名称。一个页面可以定义多个锚，定义的锚点不会附加任何显示样式。 注意： 定义锚点<a name=""></a>之间不一定需要具体的内容，只是做一个定位。 定义了锚点之后，就可以在文档中使用href属性创建指向该锚点的链接，语法格式如下： <a href="#label">链接到label锚点</a> 当需要链接到某个已命名的锚点时，将href的属性值书写为“#锚点名称”，单击超链接就可以快速跳转到锚点定义的位置，如例3.11所示，效果如图3.16所示。 例3.11 1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<title>锚链接</title> 6</head> 7<body> 8<h4><a href="#C6">查看第六节</a></h4> 9<h2>第一节</h2> 10<p>第一节的内容，啦啦啦啦~~~</p> 11<h2>第二节</h2> 12<p>第二节的内容，啦啦啦啦~~~</p> 13<h2>第三节</h2> 14<p>第三节的内容，啦啦啦啦~~~</p> 15<h2>第四节</h2> 16<p>第四节的内容，啦啦啦啦~~~</p> 17<h2>第五节</h2> 18<p>第五节的内容，啦啦啦啦~~~</p> 19<h2><a name="C6">第六节</a></h2> 20<p>第六节的内容，啦啦啦啦~~~</p> 21<h2>第七节</h2> 22<p>第七节的内容，啦啦啦啦~~~</p> 23<h2>第八节</h2> 24<p>第八节的内容，啦啦啦啦~~~</p> 25<h2>第九节</h2> 26<p>第九节的内容，啦啦啦啦~~~</p> 27<h2>第十节</h2> 28<p>第十节的内容，啦啦啦啦~~~</p> 29</body> 30</html> 单击图3.16中“查看第六节”超链接文本，页面快速跳转到定义锚点的地方，如图3.17所示。 图3.16锚链接页面效果 图3.17单击锚链接跳转后效果 注意： 制作网页时，有些链接地址还不确定，可以先写成空链接(#)的形式。例如，<a href="#">链接文字</a>。 创建锚链接时，还可以链接到别的页面。例如，在index.html中存在锚点名称为A的锚点，想在其他页面里面链接到index.html页面中的A锚点，可以写成： <a href="index.html#A">链接文字</a>。 3.7.2电子邮件链接 指定href属性为mailto:Email地址，可以给某个电子邮箱发送电子邮件，语法格式如下： <a href="mailto:ilovehtml@163.com">发邮件</a> 或者： <a href="mailto:ilovehtml@163.com?subject=这是邮件的主题&body=这是邮件的内容" >发送邮件</a> 单击电子邮件链接后，会运行系统默认邮件程序给ilovehtml@163.com发送邮件，并且收件人位置已经填上了收件人的地址。 注意： 电子邮件链接的邮件地址必须完整。 3.7.3文件下载 通过指定超链接标记的href属性为文件的路径，可以实现下载文件的功能，实现效果如图3.18所示。 图3.18文件下载页面 例3.12的第33行代码，通过为图片添加超链接，将下载文件的路径赋值给href属性。在浏览器查看网页时，通过单击蓝色按钮就能够实现文件下载功能，如例3.12所示。 例3.12 1<!DOCTYPE html> 2<html lang="en"> 3<head> 4<meta charset="UTF-8"> 5<title>QQ下载_腾讯QQ下载2020电脑版_SEAS软件下载</title> 6</head> 7<body> 8<h1> 9<img src="QQicon.jpg" align="left" alt=""> 10<font color="#333">QQ2019 9.2.3.26683</font> 11<img src="safe.jpg" alt="" > 12</h1><br> 13<hr color="#e5e5e5" size="3px"> 14<p> 15<font color="#999"> 16软件大小： <font color="#333">80.47MB</font> 17 18软件厂商： <font color="#333">腾讯</font> 19</font> 20</p> 21<p> 22<font color="#999"> 23软件语言： <font color="#333">简体中文</font> 24 25软件授权： <font color="#333">免费</font> 26</font> 27</p> 28<p> 29<font color="#999"> 30更新时间： <font color="#333">2020-3-15</font> 31</font> 32</p> 33<p><a href="#"><img src="btndownload.jpg" alt=""></a></p> 34</body> 35</html> 3.7.4FTP服务器链接 浏览网页采用的是HTTP，而FTP服务器采用的是FTP，语法格式如下： <a href="ftp://服务器IP地址或域名">链接的文字</a> FTP不同于网页链接HTTP，FTP需要从服务器管理员处获得登录的权限。也有一些FTP服务器可以匿名访问，以获得一些公开的文件。